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

时间:2023-01-30 13:54:23

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