新标签主要分成三个部分：语义化标签、功能性标签及新的输入控件类型
语义化标签
<article>、<aside>、<figcaption>、<figure>、<footer>、<header>、<hgroup>、<nav>、<section>、<details>、<summary>
这些新的语义化标签目前得到了大部分主流浏览器的支持，建议直接使用；如果是在IE 8及以下版本，无法识别这些标签，可通过一些技术手段和第三方js库支持。
功能性标签
<svg>、<canvas>、<audio>、<video> 等
这些标签的使用代替了原来需要使用第三方插件才能实现的效果，目前，这些功能性标签或多或少存在一些浏览器兼容问题或是性能问题，在使用过程中需要谨慎，尽量在多个浏览器中多做功能和性能测试。
表单输入类型
tel、search、url、date、email、number、range、color 等
在不支持的浏览器中，这些新表单输入控件会平稳降级为普通的ext类型输入控件。推荐在项目中直接使用这些新的输入控件类型。
新标签解释
<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<section>
<h1>水果</h1>
<article>
<h2>苹果</h2>
<div>苹果是撒？</div>
</article>
<article>
<h2>桔子</h2>
<div>桔子是撒？</div>
</article>
</section>
<!-- article可以看成是一种特殊种类的section元素，它比section更强调独立性 -->
<article>
<h1>中国人物</h1>
<p>三国、两晋、南北朝</p>
<section>
<h2>三国</h2>
<p>猛将猛将猛将猛将</p>
</section>
<section>
<h2>两晋</h2>
<p>猛将猛将猛将猛将</p>
</section>
</article>
- 用于页面内容的独立分块，往往是文章的一段
- 通常由内容和标题组成，没有标题的内容不推荐使用 section
- 一个容器需要被定义样式或者脚本定义行为时，推荐用div而非section，不要将section用作设置样式的容器
<article> 标签标记定义一篇文章 （article可以看成是一种特殊种类的section元素，它比section更强调独立性）从语义化上看为文档、页面
<article>
<header>
<h1>是我标签</h1>
</header>
<p>我是段落</p>
<article>
<div>我的内容</div>
</article>
</article>
- 通常是一篇文章、一个页面、一个独立完整的内容模块
- 一般会带个标题，并放在 header 标签中
- article 元素可以互相嵌套
<header> 标签定义 section 或 document 的页眉
<header>
<hgroup>
<h1>网站标题</h1>
<h2>网站副标题</h2>
</hgroup>
</header>
- 通常包含 h1-h6 元素 或 hgroup
- 作为整个页面或者一个内容块的标题；也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo
- 整个页面没有限制，header元素的个数，可以拥有多个，可以为每个内容块增加一个header元素
- 如果 hgroup 或 h1-h6 自己就能工作的很好，那就不要用header
<hgroup> 标签用于对网页或区段（section）的标题进行组合，当元素有多个层级时，该元素可以将h1-h6元素放在其内，譬如文章的主标题和副标题的组合
- 这个标签在最新的 HTML5.1 版中被废除？
<hgroup>
<h1>主标题</h1>
<h2>副标题</h2>
</hgroup>
- 如果只需要一个h1-h6标签就不用hgroup
- 如果有连续多个h1-h6标签就用hgroup
- 如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签
<figure> 标签用于对元素进行组合。使用 <figcaption> 元素为元素组添加标题，标签规定独立的流内容（图像、图表、照片、代码等等）
<figure>
<figcaption>PRC</figcaption>
<p>The People's Republic of China was born in 1949...</p>
[站外图片上传中……(1)]
</figure>
- figure元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响
- figure用来代替原来li标签，figcaption用来替代p标签
<figcaption> 标签定义 figure 元素的标题
<figure>
<figcaption>PRC</figcaption>
</figure>
- figcaption 元素应该被置于 figure 元素的第一个或最后一个子元素的位置
<nav> 标签代表页面的导航链接区域，用于定义页面的主要导航部分
<nav>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</nav>
- 应用位置譬如：侧边栏上目录，面包屑导航，搜索样式，或者下一篇上一篇文章，但是事实上规范上nav只能用在页面主要导航部分上
- 页脚区域中的链接列表，虽然指向不同网站的不同区域，譬如服务条款，版权页等，这些footer元素就能够用了
<aside> 标签被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有 关的相关资料、标签、名词解释等
<article>
<p>内容</p>
<aside>
- 在article元素之外使用作为页面或站点全局的附属信息部分
- 最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面
<footer> 标签定义 section 或 document 的页脚
<footer>
© 2016
</footer>
- 通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料
- 如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息
- 可以是 "网页" 或任意 "section" 的底部部分
- 没有个数限制，除了包裹的内容不一样，其他跟header类似
语义化结构
以前的div写法
<body>
<div id="header"></div>
<div id="navigation"></div>
<div id="main"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</body>
html5 推荐写法
<body>
<header id="header"></header>
<nav id="navigation"></nav>
<section id="main"></section>
<aside id="sidebar"></aside>
<footer id="footer"></footer>
</body>
HTML5中新增的标签属性
<script> 标签中的 async 属性
<!-- HTML 4.01 规范中定义了 defer 属性 -->
<script src="file.js" defer="defer"></script>
<!-- HTML5 规范中定义了 async 属性 -->
<script src="file.js" defer="async"></script>
<base> 标签中的 target 属性
<head>
<!-- 属性 target 设置为 _blank，默认所有超链接新窗口打开 -->
<base target="_blank">
</head>
<input> 和 <textarea> 中的 placeholder、required 及 autofocus 属性
输入控件上的这几个属性是非常有用的，增强了用户体验
标签上的自定义属性 data-*
<div id="data" data-msg="hello..."></div>
# 对应的读取和设置数据的方式如下：
var data = document.getElementById('data');
//获取数据
data.dataset['msg'];
//设置数据
data.dataset['msg'] = 'World';
# 另外一种情况
<div id="data" data-last-value="56"></div>
//这类读写属性方式采用 Pascal写法：首字母小写，以-后的大写开头
data.dataset['lastValue'] = '88';
# 此API已经得到了大部分主流浏览器的支持，但 IE7 及以下浏览器并不支持，可使用jquery的data('value')
网友评论