H5新特性之语义化标签

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的优化，还有利于维护性，对于一些机器的解析也有很大优点。

欢迎关注Coding个人笔记 公众号