HTML5新增标签

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

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

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

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

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

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

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

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

nav

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

<nav>
    <a href='http://www.zhufengpeixun.cn/'>珠峰培训首页</a>
    <a href='http://www.zhufengpeixun.cn/customize/node/index.html'>node培训课程</a>
    <a href='http://www.zhufengpeixun.cn/customize/js/index.html'>html5培训课程</a>
    <a href='http://www.zhufengpeixun.com/bbs2014/forum.php'>珠峰论坛</a>
</nav>

section

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

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

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

article

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

<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>

hgroup

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

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

aside

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

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

figure

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

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

figcaption

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

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

audio

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

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

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>

canvas

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

<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>

datalist

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

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

meter

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

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

output

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

<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>

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

<footer>
    <span>copyRight@珠峰培训</span>
</footer>

HTML5新增标签

作者:日期:2016-11-20 21:21:56 点击:2118

header

nav