HTML5 新增标签 及 不再使用标签

来源:互联网 发布:黑魂3人物捏脸数据 编辑:程序博客网 时间:2024/05/18 00:19

(参照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> 标签定义声音,比如音乐或其他音频流。

标签属性:

属性值描述autoplayautoplay如果出现该属性,则音频在就绪后马上播放。controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。looploop如果出现该属性,则每当音频结束时重新开始播放。mutedmuted规定视频输出应该被静音。preloadpreload

如果出现该属性,则音频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

srcurl要播放的音频的 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 oninput="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> 标签可定义下划线文本。




0 0