# 语义化标签

# 语义化标签

良好的语义化代码可以直接从代码上就能看出来那一块到底是要表达什么内容

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

DIV + CSS 也能做出来一样的效果,确实单纯看效果两者并没有什么区别,但是页面不止是给人看的,机器也要看爬虫也要看,网页结构更清晰方便开发维护
在网络或其他原因页面样式文件丢失的时候,良好语义结构组成的页面相比满是 div 组成的页面对用户更加友好

# 优点

  1. 标签语义化有助于构建良好的 HTML 结构,有利于搜索引擎的建立索引、抓取。简单来说,在 H1 标签中匹配到的关键词和在 div 中匹配到的关键词搜索引擎会把 H1 中的结果放在前面
  2. 有利于不同设备的解析(屏幕阅读器,盲人阅读器等),如果满是 div 的页面这些设备无法区分哪些是主要内容优先阅读
  3. 有利于构建清晰的机构,有利于团队的开发、维护

# 使用语义化标签的注意事项

  1. 尽可能少的使用无语义的标签 div 和 span;在语义不明显时,既可以使用 div 或者 p 时,尽量用 p, 因为 p 在默认情况下有上下间距,对兼容特殊终端有利
  2. 不要使用纯样式标签,如:b、font、u 等,改用 css 设置。需要强调的文本,可以包含在 strong 或者 em 标签中(浏览器预设样式,能用 CSS 指定就不用他们),strong 默认样式是加粗(不要用 b),em 是斜体(不用i)
  3. 使用表格时,标题要用 caption,表头用 thead,主体部分用 tbody 包围,尾部用 tfoot 包围。表头和一般单元格要区分开,表头用 th,单元格用td
  4. 表单域要用 fieldset 标签包起来,并用 legend 标签说明表单的用途;每个 input 标签对应的说明文本都需要使用 label 标签,并且通过为 input 设置id属性,在 lable 标签中设置 for = someld 来让说明文本和相对应的 input 关联起来

# 常用的语义化标签

  1. <h1>~<h6> ,作为标题使用,并且依据重要性递减,<h1> 是最高的等级
  2. <p>段落标记,知道了 <p> 作为段落,你就不会再使用 <br /> 来换行了,而且不需要 <br />来区分段落与段落。<p> 中的文字会自动换行,而且换行的效果优于 <br />。段落与段落之间的空隙也可以利用 CSS 来控制,很容易而且清晰的区分出段落与段落
  3. <ul>、<ol>、<li>,<ul> 无序列表,这个被大家广泛的使用,<ol> 有序列表不常用。在 Web 标准化过程中,<ul> 还被更多的用于导航条,本来导航条就是个列表,这样做是完全正确的,而且当你的浏览器不支持 CSS 的时候,导航链接仍然很好使,只是美观方面差了一点而已
  4. <dl>、<dt>、<dd>,<dl> 就是“定义列表”
  5. <em>、<strong>,<em> 是用作强调,<strong> 是用作重点强调
  6. <table>、<thead>、<tbody>、<td>、<th>、<caption>, 就是用来做表格不要用来布局

# HTML5 新增语义化标签

  1. <header>
  2. <footer>
  3. <nav>
  4. <aside>
  5. <section>
  6. <article>
Last Updated: 5/6/2020, 11:48:16 AM