HTML5新增标签

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

在之前的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标签代表页面的一个部分,是一个可以作为页面导航的链接组,其中的导航元素链接到其它页面或者当前页面的其它部分,使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培训-head头标签详解

下一篇: HTML5获取地理位置信息