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。