html5新增标签

一、HTML5新增标签

HTML5新增了很多新的标签：

• <header>用在页面的头部或者板块的头部</header>

• <footer>用在页面的头底部或者板块的底部</footer>

• <nav>
  　　<p><a href="">导航</a></p>
  　　<p><a href="">导航</a></p>
  </nav>

• <hgroup>组合
  　　<h1>妙味课堂（标题）</h1>
  　　<h2>妙味课堂解释（解释标题）</h2>
  </hgroup>

• <section>用来划分区域</section>

• <article>表示结构完整且独立的内容部分（主体）</article>

• <aside>和主体相关的附属信息</aside>

• <figure>        用于对元素进行组合，一般用于图片或者视频
  　　<img src="" /> <!--注意没有alt-->
  　　<figcaption>figure的子元素，用于对figure内容进行说明</figcaption>
  </figure>

• <time datetime="02-14">情人节</time>
• datalist标签，鼠标点击text框时，起到提示性作用，利用input中的list属性相关联　　

　　　　<input type="text" list="valList" />
　　　　<datalist id="valList">
　　　　　　<option value="javascript">javascript</option>
　　　　　　<option value="html">html</option>
　　　　　　<option value="css">css</option>
　　　　</datalist>

• <details>
  　　<summary>简要信息</summary>
  　　<p>详细信息</p>
  </details>

• dialog标签，对话框形式

　　　　<dialog open>
　　　　　　<dt>老师</dt>
　　　　　　<dd>2+2=?</dd>
　　　　　　<dt>学生</dt>
　　　　　　<dd>4</dd>
　　　　　　<dt>老师</dt>
　　　　　　<dd>对了</dd>
　　　　</dialog>

• <address>作者信息</address>
• <mark>标记</mark>
• keygen标签，一般用于公钥，后端人员用的较多

　　　　<form action="" method="get">
　　　　　　用户：<input type="text" name="username" />
　　　　　　公钥：<keygen name="security" />
　　　　　　　　　<input type="submit" />
　　　　</form>

• progress标签，进度条

　　　　<progress max="200" value="90">
　　　　　　<span>90</span>%
　　　　</progress>