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。

时间: 2024-10-06 14:27:01

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

HTML5新标签解释及其使用场景

我们来看一下HTML 5提供的一些新的标签用法和HTML 4的区别 <article> 标签定义外部的内容.比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本,亦或是来自其他外部源内容.HTML5:<article></article>HTML4:<div></div> <aside> 标签定义 article 以外的内容:aside 的内容应该与 article 的内容相关.HTML5:&l

html5 --新标签

html5新标签 一.<article> 标签:标签规定独立的自包含内容, 一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发. <article> 元素的潜在来源: 论坛帖子 报纸文章 博客条目 用户评论 <article> <h1>Internet Explorer 9</h1> <p>Windows Internet Explorer 9(简称 IE9)于 2011 年 3 月 14 日发布.....</

HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理。

一.前言 本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.time.mark.section.header.footer.hgroup.progress.figure.figcaption.nav.meter.output.details.summary.ruby和main   三.让IE5.5~9支持HTML5新标签 1. IE5.5~8下对于不支持的标签

如何处理HTML5新标签的兼容性问题

支持HTML5新标签: * IE8/IE7/IE6支持通过document.createElement方法产生的标签, 可以利用这一特性让这些浏览器支持HTML5新标签, 浏览器支持新标签后,还需要添加标签默认的样式: * 当然最好的方式是直接使用成熟的框架.使用最多的是html5shim框架 <!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"&l

让ie浏览器支持html5新标签的解决方法(使用html5shiv)

没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览器识别标签,需要新增标签,具体解决办法是: IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,代码如下: document.createElement('新标签'); / /新增创建新标签   方式一:Codi

html5新标签及废弃元素

html5新标签 <canvas> 新元素 标签 描述 <canvas> 标签定义图形,比如图表和其他图像.该标签基于 JavaScript 的绘图 API 新多媒体元素 标签 描述 <audio> 定义音频内容 <video> 定义视频(video 或者 movie) <source> 定义多媒体资源 <video> 和 <audio> <embed> 定义嵌入的内容,比如插件. <track>

【HTML5】如何处理HTML5新标签的浏览器兼容版问题

HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器.以下介绍一些在页面中使用HTML5新标签的实践方法,目的是让HTML5中的新标签在低级浏览器中也得到有限的支持,不至于影响整个的页面功能. 让浏览器识别HTML5规范中的新标签 IE8浏览器中还没有添加对HTML5新标签的支持,所以在IE8中无法直接展现HTML5新标签中的内容.庆幸的是IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以

html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

新特性: 1. 拖拽释放(Drag and drop) API 2. 语义化更好的内容标签(header,nav,footer,aside,article,section) 3. 音频.视频API(audio,video) 4. 画布(Canvas) API 5. 地理(Geolocation) API 6. 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失: 7. sessionStorage 的数据在浏览器关闭后自动删除 8. 表单控件,calendar.date

HTML5新标签-Video

HTML5的video新标签使用起来非常简单,功能也着实强大,简单的几行代码就可以实现视频播放功能.尤其在苹果公司拒绝在IOS设备上支持Flash的时候,HTML5的公开支持度得到了极大的提升 <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title>HTML5新标签-Video</title> &