首页 > 代码库 > 自学HTML5第二节(标签篇---新增标签详解)

自学HTML5第二节(标签篇---新增标签详解)

HTML5新增标签:

<article> 标签

规定独立的自包含内容。一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。

<article> 元素的潜在来源:

  • 论坛帖子
  • 报纸文章
  • 博客条目
  • 用户评论

实例:

<article>  <h1>Internet Explorer 9</h1>  <p>Windows Internet Explorer 9(简称 IE9)于 2011 年 3 月 14 日发布.....</p></article>

<aside> 标签

定义其所处内容之外的内容。aside 的内容应该与附近的内容相关。

提示:<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>

<audio> 标签

定义声音,比如音乐或其他音频流。

提示:可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。

属性描述
autoplayautoplay如果出现该属性,则音频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
loop

loop

如果出现该属性,则每当音频结束时重新开始播放。
mutedmuted规定视频输出应该被静音。
preloadpreload

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

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

srcurl要播放的音频的 URL。

  <audio src="http://www.mamicode.com/someaudio.wav"> 您的浏览器不支持 audio 标签。 </audio>

<bdi> 标签

指的是 bidi 隔离。允许您设置一段文本,使其脱离其父元素的文本方向设置。在发布用户评论或其他您无法完全控制的内容时,该标签很有用。

属性值描述

  • ltr
  • rtl
  • auto

规定 <bdi> 元素内的文本的文本方向。默认值:auto。

<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);//x轴 Y轴 宽 高</script>

<command> 标签

表示用户能够调用的命令。可以定义命令按钮,比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时,该元素才是可见的。否则不会显示这个元素,但是可以用它规定键盘快捷键。

属性描述
checkedchecked定义是否被选中。仅用于 radio 或 checkbox 类型。
disableddisabled定义 command 是否可用。
iconurl定义作为 command 来显示的图像的 url。
labeltext为 command 定义可见的 label。
radiogroupgroupname定义 command 所属的组名。仅在类型为 radio 时使用。
type
  • checkbox
  • command
  • radio
定义该 command 的类型。默认是 "command"。

 

<menu><command onclick="alert(‘Hello World‘)">Click Me!</command></menu>

<datalist> 标签

定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。请使用 input 元素的 list 属性来绑定 datalist。

<input id="myCar" list="cars" /><datalist id="cars">  <option value="http://www.mamicode.com/BMW">  <option value="http://www.mamicode.com/Ford">  <option value="http://www.mamicode.com/Volvo"></datalist>

<details> 标签

用于描述文档或文档某个部分的细节。提示:与 <summary> 标签 配合使用可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。

<details><summary>Copyright 2011.</summary><p>All pages and graphics on this web site are the property of W3School.</p></details>

<dialog> 标签

定义对话框或窗口

table border="1"><tr>  <th>一月 <dialog open>这是打开的对话窗口</dialog></th>  <th>二月</th>  <th>三月</th></tr><tr>  <td>31</td>  <td>28</td>  <td>31</td></tr></table>

<embed> 标签

定义嵌入的内容,比如插件。

<embed src="http://www.mamicode.com/helloworld.swf" />
属性描述
heightpixels设置嵌入内容的高度。
srcurl嵌入内容的 URL。
typetype定义嵌入内容的类型。
widthpixels设置嵌入内容的宽度。

<figcaption> 标签

定义 figure 元素的标题(caption)。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。用作文档中插图的图像,带有一个标题:

<figure>
  <figcaption>黄浦江上的的卢浦大桥</figcaption>
  <img src="http://www.mamicode.com/i/shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

<figure> 标签

规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

提示:请使用 <figcaption> 元素为 figure 添加标题(caption)。

<footer> 标签

文档中的页脚部分

页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

您可以在一个文档中使用多个 <footer> 元素。

提示:<footer> 元素内的联系信息应该位于 <address> 标签中。

<footer>  <p>Posted by: W3School</p>  <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p></footer>

<header> 标签

定义文档的页眉(介绍信息)。

<header><h1>Welcome to my homepage</h1><p>My name is Donald Duck</p></header>

<keygen> 标签

带有 keygen 字段的表单.

规定用于表单的密钥对生成器字段。

当提交表单时,私钥存储在本地,公钥发送到服务器。

属性描述
autofocusautofocus使 keygen 字段在页面加载时获得焦点。
challengechallenge如果使用,则将 keygen 的值设置为在提交时询问。
disableddisabled禁用 keytag 字段。
formformname定义该 keygen 字段所属的一个或多个表单。
keytypersa定义 keytype。rsa 生成 RSA 密钥。
namefieldname

定义 keygen 元素的唯一名称。

name 属性用于在提交表单时搜集字段的值。

<form action="demo_keygen.asp" method="get">Username: <input type="text" name="usr_name" />Encryption: <keygen name="security" /><input type="submit" /></form>

<mark> 标签

定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。

<p>Do not forget to buy <mark>milk</mark> today.</p>

<meter> 标签

使用 meter 元素来度量给定范围(gauge)内的数据.

定义已知范围或分数值内的标量测量。也被称为 gauge(尺度)。

例子:磁盘用量、查询结果的相关性,等等。

注释:<meter> 标签不应用于指示进度(在进度条中)。如果标记进度条,请使用 <progress> 标签。

属性描述
formform_id规定 <meter> 元素所属的一个或多个表单。
highnumber规定被视作高的值的范围。超出范围的会有黄色显示
lownumber规定被视作低的值的范围。低于最低范围的会有黄色显示
maxnumber规定范围的最大值。
minnumber规定范围的最小值。
optimumnumber规定度量的优化值。
valuenumber必需。规定度量的当前值。

 

<meter value="http://www.mamicode.com/3" min="0" max="10">十分之三</meter><meter value="http://www.mamicode.com/0.6">60%</meter> 

<nav> 标签

定义导航链接的部分。提示:如果文档中有“前后”按钮,则应该把它放到 <nav> 元素中。

<nav><a href="http://www.mamicode.com/index.asp">Home</a><a href="http://www.mamicode.com/html5_meter.asp">Previous</a><a href="http://www.mamicode.com/html5_noscript.asp">Next</a></nav>

<output> 标签

定义不同类型的输出,比如脚本的输出。

属性描述
forelement_id定义输出域相关的一个或多个元素。
formform_id定义输入字段所属的一个或多个表单。
namename定义对象的唯一名称。(表单提交时使用)
<form oninput="x.value=http://www.mamicode.com/parseInt(a.value)+parseInt(b.value)">0   <input type="range" id="a" value="http://www.mamicode.com/50">100   +<input type="number" id="b" value="http://www.mamicode.com/50">   =<output name="x" for="a b"></output></form> 

<progress> 标签

正在进行的下载:提示:请结合 <progress> 标签与 JavaScript 一同使用,来显示任务的进度。注释:<progress> 标签不适合用来表示度量衡(例如,磁盘空间使用情况或查询结果)。如需表示度量衡,请使用 <meter> 标签代替

属性描述
maxnumber规定任务一共需要多少工作。
valuenumber规定已经完成多少任务。

 

<progress value="http://www.mamicode.com/22" max="100"></progress> 

<ruby> 标签

定义 ruby 注释(中文注音或字符)。

<ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>

<rp> 标签

在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。

ruby 注释是中文注音或字符。

在东亚使用,显示的是东亚字符的发音。

与 <ruby> 以及 <rt> 标签一同使用:

ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。

提示:支持 "ruby" 元素的浏览器不会显示 "rp" 元素的内容。

<ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>

<rt> 标签

定义字符(中文注音或字符)的解释或发音。

ruby 注释是中文注音或字符。

ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。

提示:支持 "ruby" 元素的浏览器不会显示 "rp" 元素的内容。

<section> 标签

citeURLsection 的 URL,假如 section 摘自 web 的话。

 

<section>  <h1>PRC</h1>  <p>The People‘s Republic of China was born in 1949...</p></section>

<source> 标签

拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件(如果有的话)

<source> 标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。

<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

属性描述
mediamedia query规定媒体资源的类型。
srcurl规定媒体文件的 URL。
typenumeric value规定媒体资源的 MIME 类型。

 

<audio controls>   <source src="http://www.mamicode.com/horse.ogg" type="audio/ogg">   <source src="http://www.mamicode.com/horse.mp3" type="audio/mpeg"> Your browser does not support the audio element.</audio> 

<summary> 标签

 标签包含 details 元素的标题,"details" 元素用于描述有关文档或文档片段的详细信息。提示:请与 <details> 标签一起使用。标题是可见的,当用户点击标题时会显示出详细信息。

details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>

<time> 标签

定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。

该元素能够以机器可读的方式对日期和时间进行编码,这样,举例说,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。

属性描述
datetimedatetime规定日期 / 时间。否则,由元素的内容给定日期 / 时间。
pubdatepubdate指示 <time> 元素中的日期 / 时间是文档(或 <article> 元素)的发布日期。

 

<p>我们在每天早上 <time>9:00</time> 开始营业。</p><p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>

<video> 标签

定义视频,比如电影片段或其他视频流。提示:可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。

<video src="http://www.mamicode.com/movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>

<wbr> 标签

规定在文本中的何处适合添加换行符。

提示:如果单词太长,或者您担心浏览器会在错误的位置换行,那么您可以使用 <wbr> 元素来添加 Word Break Opportunity(单词换行时机)。

<p>如果想学习 AJAX,那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。</p>

<track> 标签

为诸如 video 元素之类的媒介规定外部文本轨道。

用于规定字幕文件或其他包含文本的文件,当媒介播放时,这些文件是可见的。

播放带有字幕的视频:

<video width="320" height="240" controls="controls">  <source src="http://www.mamicode.com/forrest_gump.mp4" type="video/mp4" />  <source src="http://www.mamicode.com/forrest_gump.ogg" type="video/ogg" />  <track kind="subtitles" src="http://www.mamicode.com/subs_chi.srt" srclang="zh" label="Chinese">  <track kind="subtitles" src="http://www.mamicode.com/subs_eng.srt" srclang="en" label="English"></video>

自学HTML5第二节(标签篇---新增标签详解)