html5-语义化标签

<header></header> 页眉

  主要用于页面的头部的信息介绍，也可用于板块头部

<nav></nav> 导航

  一般用于网页的导航栏

<hgroup> 页面标题和标语的组合

  <h1>妙味</h1>

  <h2>我是dada</h2>

</hgroup>

  一个标题和一个子标题，或者标语的组合

<footer></footer> 页脚

  页面的底部 或者 版块底部

<section></section> 页面上的版块

  用于划分页面上的不同区域，或者划分文章里不同的节

<article></article> 用来在页面中表示一套结构完整且独立的内容部分

  可以用来呈现论坛的一个帖子,杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂进等。

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

  可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分; 需要注意的地方是 1. aside的内容应该与article的内容相关。 2. 被包含在<article></article>中作为主要内容的附属信息部分，其中的内容 以是与当前文章有关的引用、词汇列表等 3. 在<article></article>之外使用，作为页面或站点全局的附属信息部分;最典型的形式是侧边栏(sidebar),其中的内容可以是友情链接、附属导航或广告单元等。

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

<figcaption></figcaption> figrue的子元素 用于对figure的内容 进行说明

  <figure>

    <img src="miaov.png"/>(注意没有alt)

    <figcaption>dadada</figcaption>

  </figure>

<time></time>用来表现时间或日期

  <p>我们在每天早上<time>9:00</time>开始营业</p>

  <p>我在<time datatime="2008-02-15">情人节</time>有个约会</p>

  datatime属性不会影响代码,其作用只是为了参照!!!

<address></address>定义文章 或页面作者的详细联系信息

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

-------------具有功能的语义化标签----------------

<datalist></datalist> 选项列表。 与input元素配合使用，来定义input可能的值。

  <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></details>用于描述文档或文档某个部分的细节(点击显示下拉信息)

  该元素用于摘录引用等 应该与页面的主要内容 区分开的 其他内容

  Open属性默认展开

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

  <details>

    <summary>妙味课堂</summary>

    <p>国内将知名的IT培训机构</p>

  </details>

<dialog></dialog> 定义一段对话

  <dialog open>

    <dt>学生A</dt>

    <dt>2+2等于？</dt>

　　<dt>学生B</dt>

    <dt>4</dt>

  </dialog>

  类似于dl和dt的关系 老版火狐默认是不显示dt内容的 需要open属性，和给distails语义标签加open效果类似。

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

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

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

    公钥：<keygen name="security" />

    <input type="submit" />

  </form>

  相对于前段有些鸡肋，会在页面上显示一个input输入框 输入内容被form表单提交时会被加密显示。

<progress></progress> 定义进度条

   <progress max="100" value="76">

     <span>76</span>%

   </progress>

   会在页面显示一个进度条 max表示到最后的数值,value表示已达到的数字,会以百分比的形式显示进度条的颜色改变; span是为了向下兼容,有的浏览器不显示进度条就会出现"76%"

原文：https://www.cnblogs.com/wssjzw/p/9270814.html