HTML5新标签含义，用法及其与HTML4的区别

标签：

1.<article>：

定义独立的内容，如论坛帖子，博客条目，用户评论等内容。

HTML5:<article></article>
HTML4:<div></div>

浏览器支持：

IE9+，Firefox，Chorme，Safari，Opera。

2.<aside>：

定义两栏或多栏的侧边栏内容，如联系我们，客服，网站公告，广告等内容。

HTML5:<aside>Aside 的内容是独立的内容，但应与文档内容相关。</aside>
HTML4:<div>Aside 的内容是独立的内容，但应与文档内容相关。</div>

浏览器支持：

IE9+，Firefox，Chorme，Safari，Opera。

3.<audio>：

定义音频内容，如音乐或其他音频流。

HTML5：

<audio src=”audio.wav”>

您的浏览器不支持 audio 标签。（注：可以在开始标签和结束标签之间加上此文本内容，这样若浏览器不支持此元素，就可以显示出这个信息。）

</audio>

HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>

浏览器支持：

IE9+，Firefox，Chorme，Safari，Opera。

4.<canvas>：

定义图形，如图表或其他图像。（canvas只是图形容器，我们必须使用脚本（JavaScript）来绘制图形）

HTML5：

<canvas id=”myCanvas”></canvas>

<script type=”text/javascript”>

var canvas=document.getElementById(‘myCanvas’);

var ctx=canvas.getContext(‘2d’);

ctx.fillStyle=’#FFFF00′;

ctx.fillRect(0,0,20,30);

</script>

HTML4:<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>

浏览器支持：

IE9+，Firefox，Chorme，Safari，Opera。

5.<datalist>：

定义选项列表，需要与input元素配合使用，通过input元素的list属性来绑定，用来定义input的可选值。（datalist及其选项不会被显示出来，他仅仅是合法的输入列表）

HTML5：

<input id=”fruits” list=”fruits” />

<datalist id=”fruits”>

<option value=”Apple”>

<option value=”Banana”>

</datalist>
HTML4: see combobox.

6.<details>：

用于描述文档或文档某个局部细节。

HTML5：

<details>

<summary>Some title.</summary>

<p>Some details about the title.</p>

</details>
HTML4: <dl style="display:hidden"></dl>

浏览器支持：

Chorme，Safari。

7.<embed>：

定义外部的可交互的内容或插件。

HTML5：

<embed src=”someone.swf” />

HTML4: <object data="flash.swf" type="application/x-shockwave-flash"></object>

8.<figure>：

定义一组媒体内容（图像，图表，照片，代码等）以及他们的标题。（如果被删除，则不应对文档留产生影响）

HTML5：

<figure>

<p>The title of the image.</p>

<img src=”someimage.jpg” width=”100″ height=”50″ />

</figure>

HTML4: <dl><h1>PRC</h1><p>The People‘s Republic of China was born in 1949...</p></dl>

浏览器支持：

IE9+，Firefox，Chorme，Safari，Opera。

9.<footer>：

定义一个页面或一个区域的脚本。可包含文档的作者姓名，创作日期或者联系信息。

HTML5: <footer></footer>
HTML4: <div></div>

浏览器支持：

IE9+，Firefox，Chorme，Safari，Opera。

10.<header>：

定义一个页面或一个区域的头部。

HTML5: <header></header>
HTML4: <div></div>

浏览器支持：

IE9+，Firefox，Chorme，Safari，Opera。

11.<hgroup>：

定义文档中一个区块的相关信息，使用<hgroup>标签对网页或区段（section）的标题进行组合。

HTML5：

<hgroup>

<h1>Welcome my world!</h1>

<h2>This is a title.</h2>

</hgroup>
HTML4: <div></div>

12.<keygen>：

定义一个表单内生成的键值。规定用于表单的密钥对生成器字段，当提交表单时，私钥存储在本地，公钥发送到服务器。

HTML5：

<form action=”demo_keygen.asp” method=”get”>

Username: <input type=”text” name=”usr_name” />

Encryption: <keygen name=”security” />

<input type=”submit” />

</form>
HTML4: none

浏览器支持：

Firefox，Chorme，Safari，Opera。

13.<mark>：

定义有标记的文本，突出您要显示的文本。

HTML5：

<p>I like <mark>apple</mark> most.</p>

HTML4: <span></span>

浏览器支持：

IE9+，Firefox，Chorme，Safari，Opera。

14.<meter>：

定义度量衡。仅用于已知最大和最小值的度量。（必须定义度量的范围，既可以在元素的文本中，也可以在min/max属性中定义）

HTML5：

<meter min=”0″ max=”10″>2</meter>

<meter>2 out of 5</meter>

<meter>10%</meter>

HTML4: none

浏览器支持：

Firefox，Chorme，Safari，Opera。

15.<nav>：

定义导航链接。（如果文档中有“前后”按钮，应把他放到<nav>元素中）

HTML5：

<nav>

<a href=”index.asp”>Home</a>

<a href=”Previous.asp”>Previous</a>

<a href=”Next.asp”>Next</a>

</nav>

HTML4:<ul></ul>

浏览器支持：

IE9+，Firefox，Chorme，Safari，Opera。

16.<output>：

定义不同类型的输出，比如脚本的输出。

HTML5: <output></output>
HTML4: <span></span>

浏览器支持：

IE9+，Firefox，Chorme，Safari，Opera。

17.<progress>：

定义任务（如下载）的过程，可以用来显示JavaScript中耗费时间的函数的进度。

HTML5：

<progress>

<span id=”progress”>15</span>%

</progress>
HTML4: none

浏览器支持：

IE9+，Firefox，Chorme，Safari，Opera。

18.<section>：

定义文档中的节（section、区段）。比如章节，页眉，页脚或文档中的其他部分。

HTML5: <section></section>
HTML4: <div></div>

19.<source>：

为媒介元素（比如<vodeo>和<audio>）定义媒介资源。

HTML5: <source>
HTML4: <param>

浏览器支持：

IE9+，Firefox，Chorme，Safari，Opera。

20.<time>：

定义一个日期/时间，该元素能够以机器可读的方式对日期或时间进行编码，例如，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

HTML5：

<p>大家都是早上 <time>9:00</time> 上班。</p>

<p><time datetime=”2012-01-01″>元旦</time>晚会。</p>

HTML4: <span></span>

浏览器支持：

IE9+，Firefox，Chorme，Safari，Opera。

21.<video>：

定义视频，比如电影片段或其他视频流。

HTML5：

<video src=”movie.ogg” controls=”controls”>

您的浏览器不支持 video 标签。（注：可以在开始标签和结束标签之间加上此文本内容，这样若浏览器不支持此元素，就可以显示出这个信息。）

</video>

HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>

浏览器支持：

IE9+，Firefox，Chorme，Safari，Opera。

HTML5新标签含义，用法及其与HTML4的区别

标签：

原文地址：http://www.cnblogs.com/lykblog/p/4639546.html