HTML5的语义标签

H5新增了很多标签，也更加语义化了，但是除了header、footer、nav等，其他的还真的没有去了解过，今天整理一下H5新增的语义化标签。

Header： 不用多说，就是定义头部，可以多个。

Footer：底部，不一定是文档最底部，可以多个。

Nav：导航栏标签，定义导航栏。

Article： 独立内容区域，与session类似，用于文章等。

Aside： 页面侧边栏所使用。

Time: 时间标签，主要用于搜索引擎和其它一些内容引擎特殊的解析和展示。

Ruby： 注释标签，跟rt和rp一起使用，可以看一下效果

<ruby>

张 <rt>Zhang</rt><rp>不显示</rp>

</ruby>

Details： 点击展开详情，可以试一下，可能在很多场景下可以使用

<details>

<summary>更多</summary>

<p>详细内容</p>

</details>

Mark: 会给这个字段添加一个背景色，那个颜色还改不了。

Progress： 进度条，当做简易进度条使用，不够美观。

<progress value="50" max="100"></progress>

Section： 节的意思，主要是区分开内容，文档中的节或者是文章的节。

Video： 视频，现在大部分不支持自动播放了，微信能处理，其他还没见过能自动播放。

Audio： 音频，也就是音乐，也不支持自动播放。

Datalist: 强烈推荐，在我看来就是模糊查询，除了样式之外，非常好用。

<input type="text" list="carsd">
<datalist id="carsd">
  <option value="wf"></option>
  <option value="wg"></option>
  <option value="dre"></option>
  <option value="sdhjfgh"></option>
  <option value="dfgsdw"></option>
  <option value="fdgwfdg"></option>
  <option value="dfgtyr"></option>
  <option value="dfgwdfg"></option>
</datalist>
Embed：插入多媒体内容，小小试了试，可以播放视频，但是那些属性都不生效。待研究。

Canvas： 画布，很强大很强大，值得研究。
Main： 主要内容。

H5还有另外一些标签，比如bdi、command、figcaption等等，可以在http://www.w3school.com.cn/html5/html5_reference.asp这个地址查看新增的标签。

其实这些语义化标签有些在使用上可能没什么特别，但是这些标签提升了可访问性和SEO的优化，还有利于维护性，对于一些机器的解析也有很大优点。

本文转载于：
作者：wade3po
链接：https://www.jianshu.com/p/0abb613306c1