H5新特性之语义化标签

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

Header：

   不用多说，就是定义头部，可以多个。
复制代码

Footer：

   底部，不一定是文档最底部，可以多个。
复制代码

Nav：

   导航栏标签，定义导航栏。
复制代码

Article：

   独立内容区域，与session类似，用于文章等。
复制代码

Aside：

   页面侧边栏所使用。
复制代码

Time:

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

Ruby：

   注释标签，跟rt和rp一起使用，可以看一下效果
复制代码

张 Zhang不显示

Details：

   点击展开详情，可以试一下，可能在很多场景下可以使用
复制代码

更多

详细内容

Mark:

   会给这个字段添加一个背景色，那个颜色还改不了。
复制代码

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个人笔记 公众号

转载于:https://juejin.im/post/5c540f65e51d457f39410b38