(参照http://www.w3school.com.cn)
一 、HTML5 新增标签
1、<article>标签
<article> <h1>Internet Explorer 9</h1> <p>Windows Internet Explorer 9(简称 IE9)于 2011 年 3 月 14 日发布.....</p> </article>
<article>标签规定独立的自包含内容, 一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。
2.<aside>标签
<p>Me and my family visited The Epcot center this summer.</p><aside>
<h4>Epcot Center</h4> The Epcot Center is a theme park in Disney World, Florida.</aside>
<aside>标签定义所处内容之外的内容,<aside>内容可以作为文章的侧栏。
3.<audio>标签
<audio> 标签定义声音,比如音乐或其他音频流。
标签属性:
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
muted | muted | 规定视频输出应该被静音。 |
preload | preload | 如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src | url | 要播放的音频的 URL。 |
4.<bdi>标签
<ul> <li>Username <bdi>Bill</bdi>:80 points</li> <li>Username <bdi>Steve</bdi>: 78 points</li> </ul>
bdi 指的是 bidi 隔离。
<bdi> 标签允许设置一段文本,使其脱离其父元素的文本方向设置。在发布用户评论或其他您无法完全控制的内容时,该标签很有用。
5.<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>
<canvas> 画布,大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上,而是定义在通过画布的 getContext()获得的一个“绘图环境”对象上。
6.datalist标签
<input id="myCar" list="cars" /><datalist id="cars">
<option value="BMW"> <option value="Ford"> <option value="Volvo"></datalist>
<datalist> 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。使用 input 元素的 list 属性来绑定 datalist。
7.details 标签
<details>
<summary>Copyright 2011.</summary> <p>All pages and graphics on this web site are the property of W3School.</p></details>
<details> 标签用于描述文档或文档某个部分的细节。与 <summary> 配合使用可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。
8. embed 标签
<embed src="helloworld.swf" />
<embed> 标签定义嵌入的内容,比如插件。
9.figure,figcaption
<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
<figure> 标签规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
<figcaption> 标签定义figure元素的标题(caption)。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置
10.footer 标签
<footer> <p>Posted by: W3School</p> <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p> </footer>
<footer> 标签定义文档或节的页脚。<footer> 元素应当含有其包含元素的信息。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。可以在一个文档中使用多个 <footer> 元素。
11.header标签
<header>
<h1>Welcome to my homepage</h1> <p>My name is Donald Duck</p></header>
<p>The rest of my home page...</p>
<header> 标签定义文档的页眉(介绍信息)。
12.keygen 标签
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
<keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时,私钥存储在本地,公钥发送到服务器。
13.mark标签
<p>Do not forget to buy <mark>milk</mark>
today.</p>
<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签。
14.meter 标签
<meter value="3" min="0" max="10">十分之三</meter> <meter value="0.6">60%</meter>
<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge(尺度)。例子:磁盘用量、查询结果的相关性,等等。
注释:<meter> 标签不应用于指示进度(在进度条中)。如果标记进度条,请使用 <progress> 标签。
15.nav 标签
<nav>
<a href="index.asp">Home</a> <a href="html5_meter.asp">Previous</a> <a href="html5_noscript.asp">Next</a></nav>
<nav> 标签定义导航链接的部分。如果文档中有“前后”按钮,则应该把它放到 <nav> 元素中。
16.output元素
<form οninput="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>
<output> 标签定义不同类型的输出,比如脚本的输出。
17.progress
<progress value="22" max="100"></progress>
请结合 <progress> 标签与 JavaScript 一同使用,来显示任务的进度。
注释:<progress> 标签不适合用来表示度量衡(例如,磁盘空间使用情况或查询结果)。如需表示度量衡,请使用 <meter> 标签代替。
18.ruby ,rp ,rt
<ruby> 漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt> </ruby>
<ruby> 标签定义 ruby 注释(中文注音或字符)。在东亚使用,显示的是东亚字符的发音。与 <ruby> 以及 <rt> 标签一同使用:ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。
19.section
<section>
<h1>PRC</h1> <p>The People's Republic of China was born in 1949...</p></section>
<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
20. source
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
<source> 标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择
21.summary
<details>
<summary>HTML 5</summary>
This document teaches you everything you have to learn about HTML 5.
</details>
<summary> 标签包含 details 元素的标题,"details" 元素用于描述有关文档或文档片段的详细信息。请与<details>一起使用。标题是可见的,当用户点击标题时会显示出详细信息。
21.time
<p>我们在每天早上<time>9:00</time>
开始营业。</p> <p>我在<time datetime="2008-02-14">情人节</time>
有个约会。</p>
<time> 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码,这样,举例说,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。
22.track
<video width="320" height="240" controls="controls"> <source src="forrest_gump.mp4" type="video/mp4" /> <source src="forrest_gump.ogg" type="video/ogg" /> <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese"> <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English"> </video>
<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件,当媒介播放时,这些文件是可见的。
23.video
<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。</video>
<video> 标签定义视频,比如电影片段或其他视频流。
24 .wbr
<p>
如果想学习 AJAX,那么您必须熟悉 XML<wbr>
Http<wbr>Request 对象。
</p>
Word Break Opportunity (<wbr>) 规定在文本中的何处适合添加换行符。如果单词太长,或者担心浏览器会在错误的位置换行,那么可以使用 <wbr> 元素来添加 Word Break Opportunity(单词换行时机).
二、HTML5 不再使用标签
1.<acronym>
HTML5 中不支持 <acronym> 标签。请使用<abbr>标签代替。<acronym> 标签定义首字母缩写。缩写能够作为单词来朗读,例如 NATO, NASA, ASAP, GUI。
通过对缩写进行标记,您能够为浏览器、拼写检查和搜索引擎提供有用的信息
2.applet
HTML5 中不支持 <applet> 标签。请使用object标签代替。HTML 4.01 中不赞成使用 <applet> 元素。<applet> 标签定义嵌入的 applet。
3.basefont
只有 Internet Explorer 支持 <basefont> 标签。应该避免使用该标签。<basefont> 标签定义基准字体。该标签可以为文档中的所有文本定义默认字体颜色、字体大小和字体系列。
4.big
<big> 标签呈现大号字体效果。使用 <big> 标签可以很容易地放大字体。这简直不能再简单了:浏览器显示包含在 <big> 标签和其相应的 </big> 标签之间的文字时,其字体比周围的文字要大一号。但是,如果文字已经是最大号字体,这个 <big> 标签将不起任何作用。
5.center
对其所包括的文本进行水平居中。
提示:请使用 CSS 样式来居中文本!
6.dir
<dir> 标签定义目录列表。
请使用 CSS 来为列表添加样式!
7.font
规定文本字体、大小和颜色.请使用样式代替 <font>。
8.frame,frameset
<frame> 标签定义 frameset 中的一个特定的窗口(框架).
9.noframes
noframes 元素可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。
10.strike
<strike> 标签可定义加删除线文本定义。
11.tt
<tt> 标签呈现类似打字机或者等宽的文本效果。
12.u
<u> 标签可定义下划线文本。