• Html标签的语义化


    为了使我们的网站更好的被搜索引擎抓取收录,更自然的获得更高的流量,网站标签的语义化就显得尤为重要。所谓标签语义化,就是指标签的含义。
    为了更好的理解标签的语义化,先看下面这个例子:

    <table>
         <tr>
            <td>娱乐项目</td>
            <td>项目支出</td>
        </tr>
        <tr>
            <td>聚餐</td>
            <td>200元</td>
        </tr>
    </table>

    上面这一段代码就是明显的没有使用语义化标签的例子,为了让它的结构更加清晰,正确的做法如下:

    <table>
        <caption>支出统计</caption>
        <thead>
            <tr>
                <th>娱乐项目</th>
                <th>项目支出</th>
            </tr>
        </thead>
        <tbody>
            <td>聚餐</td>
            <td>200元</td>
        </tbody>
    </table>

    其中:

    <caption>:表格的标题;
    <thead>:一表格的表头;
    <th>:表的某一列的列头。

    是的,标签语义化的目的就是对搜索引擎友好,有了良好的结构和语义我们的网页内容便自然容易被搜索引擎抓取,这种符合搜索引擎收索规则的做法,网站的推广便可以省下不少的功夫,而且可维护性更高,因为结构清晰,十分易于阅读。这也是搜索引擎优化SEO(search engine optimization)重要的一步,当然关于SEO远远不止如此,要了解更多有关SEO的内容知识,可移步:

    http://baike.baidu.com/link?url=f_v0cbvzTIxhwKNaJtdd-qGjGMefJww4ko9pJaZj4rJArylR_dpUZsobKKLlMKBi

    http://www.seoxuetang.com/

    言归正传,所以我们要做的,就是语义化我们的HTML标签和属性,如:

    div 语义:Division(分隔)
    span 语义:Span(范围)
    ol 语义:Ordered List(排序列表)
    ul 语义:Unordered List(不排序列表)
    li 语义:List Item(列表项目)

    1.<Hx>

    <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题使用,并且依据重要性递减。<h1>是最高的等级。

    2.<p>

    段落标记,知道了<p>作为段落,你就不会再使用<br/>来换行了,而且不需要<br/><br/>来区分段落与段落。<p></p>中的文字会自动换行,而且换行的效果优于<br>。

    3.<b>、<em>和<strong>

    <b>标签语义为“加粗”

    <em>标签语义为“强调”

    <strong>标签语义为“更强烈的强调” 而且em 默认用斜体表示,strong 用粗体表示。

    当我们知道了这三个标签的语义时,做SEO时就好决定用哪个来强调重要的关键字了,强调用<em>和<strong>,纯粹加粗用<b>。

    4.<ul>标签、<ol>标签、<li>标签

    <ul>标签语义为定义无序列表

    <ol>标签语义为定义有序列表

    <li>标签语义为定义列表项目

    因此当涉及到列表的项目,应该用<ul><li>或<ol><li>(或者是<dl><dt><dd>来布局),而不是用<table>或<p>甚至<span>。

    5.<dl>标签、<dt>标签、<dd>标签

    <dl>标签语义为定义了定义列表

    <dt>标签语义为定义了定义列表中的项目(即术语部分)

    <dd>标签语义为定义列表中定义条目的定义部分

    所以,当我们用带标题的列表时,即可采用<dl><dt><dd>自定义列表实现

    6.<span>标签

    <span>标签的语义为被用来组合文档中的行内元素

    (另外应当区分<span>和<div>的区别,<div>是块级元素(block level),而<span>是行内元素,前者的内容会自动换行,而后者前后不会自动换行

    http://www.cnblogs.com/coco1s/p/3578947.html)

    7.<q>、 <blockquote>、<cite>

    <q>标签的语义为用来标记简短的单行引用,Web浏览器会自动识别在<q>之间的内容

    <blockquote>标签的语义为用来标记那些一段或者好几段的长篇引用

    <cite>标签既可以与<q> 一起用,也可以与<blockquote>一起用,用来提供引用内容的来源地址。

    看一个例子:

    <p> <cite>孔子</cite>曰:<q>有朋自远方来,不亦乐乎</q>.
    </p>
    <blockquote cite="http://www.w3cn.org/">
     <p>&#8220;我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战",为了兼容 Netscape 和 IE,网站不得不为这两种浏览器写不同的代码。同样的,每当新的网络技术和交互设备的出现,我们也需要制作一个新版本来支持这种新技术或新设备,例如支持手机上网的 WAP 技术。类似的问题举不胜举:网站代码臃肿、繁杂浪费了我们大量的带宽;针对某种浏览器的 DHTML 特效,屏蔽了部分潜在的客户;不易用的代码,残障人士无法浏览网站等等。这是一种恶性循环,是一种巨大的浪费。&#8221;
    </p>
    </blockquote>

    8.<table>、<th>、<td>、<caption>

    <table>标签的语义的为定义 HTML 表格

    <th>标签的语义为定义表格内的表头单元格

    <caption>标签的语义为定义表格标题

    9.<button>标签、<input>标签、<textarea>标签

    <button>标签的语义为定义一个按钮

    <input> 标签的语义为用于搜集用户信息,根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

    <textarea>标签的语义为定义多行的文本输入控件

    button控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。

    10.<label> 标签

    <label>标签的语义为为input元素定义标注(标记)

    11.<ins>, <del>

    <ins>标签的语义为定义已经被插入文档中的文本。

    <del>标签的语义为定义文档中已被删除的文本。

    <ins>与 <del> 一同使用,来描述文档中的更新和修正。知道del,就不要再用<s>做删除线了,用del显然更具有语义化。而且del还带有cite和datetime来表明删除的原因以及删除的时间。ins是表示插入,也有这样的属性。

    关于这两个标签的用法,可以参看:

    http://www.w3school.com.cn/tags/tag_ins.asp

    http://www.w3school.com.cn/tags/tag_del.asp

    出处:http://www.cnblogs.com/coco1s/p/3583082.html

  • 相关阅读:
    TCP 基础知识
    Spring Boot 实战 —— 日志框架 Log4j2 SLF4J 的学习
    MySQL 实战笔记
    Java 基础
    RPM 包的构建
    RPM 包的构建
    9. 桶排序
    8. 基数排序
    7. 计数排序
    6. 快速排序
  • 原文地址:https://www.cnblogs.com/mq0036/p/3954172.html
Copyright © 2020-2023  润新知