Web前端编写高质量代码-高质量的HTML

Web前端

标签的语义：

标签语义对照表

    标签名         英文全拼                  中文翻译
    div           division                  分隔
    span          span                      范围
    ol            ordered list              排序列表
    ul            unordcred list            不捧序列表
    li            list item                 列表项目
    dl            definition list           定义列表
    dt            definition term           定义术语
    dd            definition description    定义描述
    del           deleted                   删除
    ins           inserted                  插入
    hl~.h6        header 1 to header 6      标题1到标题6
    P             paragraph                 段落
    hr            horizontal rule           水平尺
    a             anchor                    锚
    abbr          abbreviation              缩写词
    acronym       acronym                   取首字母的缩与词
    address       address                   地址
    var           variable                  变量
    pre           prefdrmatted              预定义格式（原样输出）
    blockquote    block quotation           区块引用语
    strong        strong                    加重
    em            emphasized                加垂
    b             bold                      粗体
    i             italic                    斜体
    big           big                       变大
    small         small                     变小
    sup           superscripted             上标
    sub           subscripted               下标
    br            break                     换行
    center        center                    居中
    font          font                      字体
    u             underlined                下划线
    s             Strikethrough             別除线

不要使用纯样式标签，例如b、font和u等，改用CSS设置。语义上需要强调的文本可以包在strong或em标签里，strong和em有“强调”的语意，其中strong的默认样式是加粗，而em的默认样式是斜体。

div、span

1、div和span其实是没有语义的，它们只是分别用作块级元素和行内元素的区域分隔符。

2、尽可能少地使用无语义标签div和span；当页面内标签无法满足涉及需要时，才会适当添加div和span等无语义标签来辅助实现

3、在语义不明显，既可以用p也可以用div的地方，尽量用p，因为p默认情况下有上下间距，去样式后的可读性更好，对兼容特殊终端有利；

h1-h6：

h标签的含义是“标题”，搜索引擎对这个标签比较敏感，尤其是hl和h2。一个语义良好的页面，h标签应该是完整有序没有断层的。也就是说，要按照hl、h2、h3、h4这样依次排列下来，不要出现类似hl、h3、h4，漏掉h2的情况。

表单：

标签语义对照表

form          表单
fieldset      域集
legend        域集名(说明表单用途)
label         表单项

例子：

<form action="" method="">
  <fieldset>
    <legend>登录</legend>
    <p>
      <label for="name">账号</label>
      <input id="name" type="text" />
    </p>
  </fieldset>
</form>
<style>
  fieldset { border: none; }  /* 去除默认边框 */
  legend { display: none; }   /* legend说明表单用途，一般样式不需要，满足设计需求，将其隐藏 */
</style>

表格：

标签语义对照表

table      表格
caption    表格标题
thead      表格头部
tbody      表格主体
tfoot      表格尾部
tr         单元行
th         表头用th
td         一般单元格

例子：

<table border="1">
  <caption>几种页面实现的比较</caption>
  <thead>
    <tr>
      <th>实现方式</th>
      <th>代码量</th>
      <th>搜索引擎友好</th>
      <th>特殊终端兼容</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>table 布局 </th>
      <td> 多 </td>
      <td> 差 </td>
      <td> 一 般 </td>
    </tr>
    <tr>
      <th>乱用标签的 CSS 布局</th>
      <td>少</td>
      <td>一般</td>
      <td>差 </td>
    </tr>
    <tr>
      <th>标签语义良好的CSS布局</th>
      <td>少</td>
      <td>好</td>
      <td>好</td>
    </tr>
  </tbody>
</table>

为什么要使用语义化标签？

代码量少，浏览器端的下载时间就会更短，语义清晰就会对搜索引擎更友好。

如何确定你的标签是否语义良好？

判断网页标签语义是否良好的一个简单方法就是：去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。语义良好的网页去掉样式后结构依然很清晰。

工具：Web Developer是Firefox上的一款网页调试插件。它提供了丰富的调试功能，其中有一项是禁用网页中的CSS，快捷键是Ctrl + Shift + S。有了这个功能，我们可以轻松而快速地査看网页去样式后的表现。