HTML5 新增标签

在之前的 HTML 页面中，大家基本上都是用了 Div+CSS 的布局方式。而搜索引擎去抓取页面的内容的时候，它只能猜测你的某个 Div 内的内容是文章内容容器，或者是导航模块的容器，或者是作者介绍的容器等等。也就是说整个 HTML 文档结构定义不清晰，HTML5 中为了解决这个问题，专门添加了：页眉、页脚、导航、文章内容等跟结构相关的结构元素标签。

在讲这些新标签之前，我们先看一个普通的页面的布局方式：

html

<div id='header'>
    <div id='nav'>
    </div>
</div>
<div id='content'>
    <div class='article'>
        <div class='section'></div>
    </div>
</div>
<div class='footer'></div>

1
2
3
4
5
6
7
8
9
10

上图中我们非常清晰的看到了，一个普通的页面，会有头部，导航，文章内容，还有附着的右边栏，还有底部等模块，而我们是通过 class 进行区分，并通过不同的 css 样式来处理的。但相对来说 class 不是通用的标准的规范，搜索引擎只能去猜测某部分的功能，另外就是此页面程序交给视力障碍人士来阅读的话，文档结构和内容也不会很清晰。而 HTML5 新标签带来的新的布局则是下面这种情况：

html

<header>
    <nav></nav>
</header>
<div id='content'>
    <article>
        <section></section>
    </article>
</div>
<footer></footer>

1
2
3
4
5
6
7
8
9

那么这样更加有利于浏览器的解析，每一个标签的意义更加的鲜活。那么下面我们就详细的说说 html5 新增的标签都各自有什么意义：

header 标签定义文档的页眉，通常是一些引导和导航信息。它不局限于写在网页头部，也可以写在网页内容里面。通常 header 标签至少包含（但不局限于）一个标题标记（h1-h6），还可以包括 hgroup 标签，还可以包括表格内容、标识、搜索表单、nav 导航等。

html

<header>
 <hgroup>
  <h1>网站名称</h1>
  <h2>辅助信息</h2>
 </hgroup>
</header>

1
2
3
4
5
6

nav

nav 标签代表页面的一个部分，是一个可以作为页面导航的链接组，其中的导航元素链接到其它页面或者当前页面的其它部分，使 html 代码在语义化方面更加精确，同时对于屏幕阅读器等设备的支持也更好。

html

<nav>
    <a href='/home'>泥瓦匠首页</a>
    <a href='/html'>html</a>
    <a href='/node'>node</a>
</nav>

1
2
3
4
5

section

section 标签，定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。一般用于成节的内容，会在文档流中开始一个新的节。它用来表现普通的文档内容或应用区块，通常由内容及其标题组成。但 section 元素标签并非一个普通的容器元素，它表示一段专题性的内容，一般会带有标题。

当我们描述一件具体的事物的时候，通常鼓励使用 article 来代替 section；当我们使用 section 时，仍然可以使用 h1 来作为标题，而不用担心它所处的位置，以及其它地方是否用到；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用 div 元素而非 section。

html

<section>
    <h1>section是什么？</h1>
    <p>是一个独立的章节</p>
    <article>
       <h2>关于section</h1>
        <p>section的介绍</p>
    </article>
 </section>

1
2
3
4
5
6
7
8

article

article 是一个特殊的 section 标签，它比 section 具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。一般来说，article 会有标题部分（通常包含在 header 内），有时也会包含 footer。article 可以嵌套，内层的 article 对外层的 article 标签有隶属关系。例如，一篇博客的文章，可以用 article 显示，然后一些评论可以以 article 的形式嵌入其中。

html

<article>
    <header>
        <hgroup>
            <h1>这是一篇介绍HTML 5结构标签的文章</h1>
            <h2>HTML 5的革新</h2>
       </hgroup>
       <time datetime="2016-11-18">2016.11.18</time>
  </header>
  <p>文章内容详情</p>
 </article>

1
2
3
4
5
6
7
8
9
10

hgroup

hgroup 标签是对网页或区段 section 的标题元素（h1-h6）进行组合。例如，在一区段中你有连续的 h 系列的标签元素，则可以用 hgroup 将他们括起来。

html

<hgroup>
    <h1>主标题</h1>
    <h2>副标题</h2>
</hgroup>

1
2
3
4

aside

aside 标签用来装载非正文的内容，被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的，可以被删除，而不会影响到网页的内容、章节或是页面所要传达的信息。例如广告，成组的链接，侧边栏等等。

html

 <aside>
     <h1>简介</h1>
     <p>我是简介内容，嘿嘿</p>
 </aside>

1
2
3
4

figure

用作文档中插图的图像，带有一个标题。

html

 <figure>
      <figcaption>标题</figcaption>
      <img src="img.jpg" alt="figure标签" title="figure标签" />
 </figure>

1
2
3
4

figcaption

标签定义 figure 元素的标题（caption）。 “figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

html

 <figure>
      <img src="img.jpg" alt="figure标签" title="figure标签" />
      <figcaption>标题</figcaption>
 </figure>

1
2
3
4

audio

定义声音，比如音乐或其他音频流。一下是这个标签的相关属性： autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。 controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。 loop loop 如果出现该属性，则每当音频结束时重新开始播放。 muted muted 规定视频输出应该被静音。 preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。 src url 要播放的音频的 URL。

html

<audio src="someaudio.wav">
    您的浏览器不支持 audio 标签。
</audio>

1
2
3

bdi

bdi 指的是 bidi 隔离。 bdi 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。在发布用户评论或其他您无法完全控制的内容时，该标签很有用。目前只有 Firefox 和 Chrome 支持 bdi>标签。 dir 是这个标签的属性，有三个值可选：ltr 、rtl 、auto 。这些值规定 bdi 元素内的文本的文本方向。默认值：auto。

<ul>
    <li>Username <bdi>Bill</bdi>:80 points</li>
    <li>Username <bdi>Steve</bdi>: 78 points</li>
</ul>

1
2
3
4

canvas

canvas 标签定义图形，比如图表和其他图像。 canvas 标签只是图形容器，您必须使用脚本来绘制图形。

html

<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

1
2
3
4
5
6
7

datalist

datalist 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。请使用 input 元素的 list 属性来绑定 datalist。所有主流浏览器都支持标签，除了 Internet Explorer 和 Safari。

html

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

1
2
3
4
5
6

meter

meter 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。例子：进度条可以使用。可以通过属性来进行定义： form form_id 规定 meter 元素所属的一个或多个表单。 high number 规定被视作高的值的范围。 low number 规定被视作低的值的范围。 max number 规定范围的最大值。 min number 规定范围的最小值。 optimum number 规定度量的优化值。 value number 必需。规定度量的当前值。

html

<meter value="3" min="0" max="10">十分之三</meter>
<meter value="0.6">60%</meter>

1
2

output

output 标签定义不同类型的输出，比如脚本的输出。可以通过属性来进行定义： for element_id 定义输出域相关的一个或多个元素。 form form_id 定义输入字段所属的一个或多个表单。 name name 定义对象的唯一名称。（表单提交时使用）

html

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
    <input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b"></output>
</form>

1
2
3
4
5

footer 标签定义 section 或 document 的页脚，包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或者日期。作为页面的页脚时，一般包含了版权、相关文件和链接。它和 header 标签使用基本一样，可以在一个页面中多次使用，如果在一个区段的后面加入 footer，那么它就相当于该区段的页脚了。

html

<footer>
    <span>copyRight@泥瓦匠</span>
</footer>

1
2
3

新增标签的兼容问题

html5 语义化标签在 ie6-8 下，对于不支持的标签不会有任何的样式，也默认的当成行内元素，所以在样式表里要对这些标签定义一下他默认的 display
通过引入如下 js 来解决 ie9 以下新增标签的兼容问题

html

<!--[if It IE 9]>
    <script src="html5.min.js"></script>
<![endif]-->

1
2
3

HTML5 新增标签 #

header #

nav #

section #

article #

hgroup #

aside #

figure #

figcaption #

audio #

bdi #

canvas #

datalist #

meter #

output #

footer #

新增标签的兼容问题 #

HTML5 新增标签

header

nav

section

article

hgroup

aside

figure

figcaption

audio

bdi

canvas

datalist

meter

output

footer

新增标签的兼容问题