html5语义化标签

语义化标签：语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用；好处：最主要的就是对搜索引擎友好，有了良好的结构和语义使得网页内容自然容易被搜索引擎抓取，便于网站的推广。

- <header>页眉：主要用于页面头部的信息介绍，也可以用于板块头部。
- <hgroup>标题组合：标题和子标题或者是标语的组合。
- ```
1 <hgroup>
2     <h1>这是大标题</h1>
3     <h2>这是子标题</h2>
4 </hgroup>
```
- <nav>导航：包含一个链接的列表。
- <footer>页脚：页面的底部或者是版面的底部。
- <section>板块：页面上的板块用于划分页面上的不同区域，或者是划分文章里的不同章节。
- <article>用来在页面中表示一套结构完整且独立的部分内容。
- <aside>元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组、以及其他类似的有别与主要内容的部分。
- <figure>用于对元素的组合。一般用于图片或视频。
- ```
1 <figure>
2     <img src="img/111.png" />
3     <figcaption>这是说明文字</figcaption>
4 </figure>
```
- <datalist>选项列表：与input配合使用，来定义input可能的值。
- ```
1 <input type="text" list="valList" />
2 <datalist id="valList">
3     <option value="javascript">javascript</option>
4    <option value="html">html</option>
5   <option value="css">css</option>
6 </datalist> 
```
- <details>用于描述文档或文档某个部分的细节，该元素用于摘录引用等应该与页面的主要内容区分开的其他内容。<summary>details元素的标题。
- ```
1 <details open="open">
2     <summary>百度</summary>
3     <p>百度一下，你就知道</p>
4 </details>
```
- <dialog></dialog>定义一段对话。经测试，在chrome上不能识别。
- ```
<dialog>
  <dt>老师</dt>
  <dd>2+2 等于？</dd>
  <dt>学生</dt>
  <dd>4</dd>
  <dt>老师</dt>
  <dd>答对了！</dd>
</dialog> 
```
- <address></address> 定义文章或页面作者的详细联系信息。
- <mark></mark> 需要标记的词或句子。标签内的内容被设置为黄色背景。
- <keygen>标签规定用于表单的密钥对生成器字段。
- <progress>定义进度条。
- ```
1 <progress max="100" value="76">
2     <span>76</span>%
3  </progress> 
```
- <time></time>用来表现时间或日期。