H5的语义化标签

H5的语义化标签：

1.<header></header>：主要用于页面的头部的信息介绍，也可用于板块头部

2.<section></section>:页面上的版块用于划分页面上的不同区域,或者划分文章里不同的节

3.<footer></footer>:页脚，页面的底部或板块的底部

4.<hgroup></hgroup>页面上一个标题的组合（一个标题或一个子标题的组合，或者标语的组合）

列如：<hgroup>

        <h1>标题1</h1>

        <h2>标题2</h2>

</hgroup>

5.<nav></nav>：导航（包含链接的一个列表）、

列如：<nav>

        <p><a href="javascript:void(0)">列表1</a></p>

        <p><a href="javascript:void(0)">列表2</a></p>

</nav>

6.<article></article>：用来在页面中表示一套结构完整且独立的内容部分（一篇文章，博客等等）

7.<aside></aside>:元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分

8.<address></address>:定义文章，作者的详细的联系信息

9.<mark></mark>：需要标记的词或句子

10.<time></time>：用来表示时间或日期

列如：<time>9:16</time>

<time datetime="2018-2-14">情人节</time>

11.<figure></figure>：用于对元素进行组合，一般用于图片或视频

<figcaption></figcaption> :figure的子元素，用于对figure进行说明

列如：<figure>

        <img src="">

        <figcaption></figcaption>

     </figure>

12.<datalist></datalist>：选项列表。一般与input配合使用，用来定义input的可能值

列如：<input type="text" name="" list="valList">

    <datalist id="valList">

        <option value="javascript">javascript</option>

        <option value="html">html</option>

        <option value="h5">h5</option>

</datalist>

13.<details></details>：用来描述某个文档或某个文档的细节。

<summary></summary>：details元素的标题

Open:是默认打开

<details open="">

        <summary>美国</summary>

        <p>美国是一个高度发达的资本主义国家，其政治、经济、军事、文化、创新等实力领衔全球。</p>

</details>

14. <dialog></dialog>：定义一段对话

列如：

<dialog open="">

        <dt>你喜欢美国吗？</dt>

        <dd>喜欢</dd>

        <dt>你喜欢美国饮食吗？</dt>

        <dd>喜欢</dd>

</dialog>

15.<progress max="120" value="50" >：用来定义进度条

16.<keygen>给表单添加一个公钥

列如：

<form action="http://www.baidu.com" method="get">

        用户: <input type="text" name="usr_name" />

        公钥: <keygen name="security" autofocus="" />

        <input type="submit" />  

   </form>