html5新增标签

1article定义独立的内容,可以试论坛帖子、博客条目、报纸文章和用户评论

  <article>after the announcement of thenew iPhone 4 at </article>

2aside定义其所处内容之外的内容

  <aside>after the announcement of thenew iPhone 4 at </aside>

3audio定义音频

  <audio src=”fla.wav”></audio>

  audio属性:

  autoplay:autoplay   音频在就绪后马上播放

  proload:proload    音频在页面加载时进行加载,并预备播放

  controls:controls   向用户显示控件,比如播放按钮

  loop:loop   每当音频结束时,重新开始播放

4vedio定义视频

  vedio属性:

  autoplay:autoplay   视频在就绪后马上播放

  proload:proload    视频在页面加载时进行加载,并预备播放

  controls:controls   向用户显示控件,比如播放按钮

  loop:loop   每当视频结束时,重新开始播放

  track 标签为video 元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件,当媒介播放时,这些文件是可见的

  default:规定该轨道是默认的,假如没有选择任何轨道。

  kind:captions、chapters、descriptions、metadata、subtitles。表示轨道属于什么文本类型。

  label:轨道的标签或标题。

  src:轨道的URL。

  srclang:轨道的语言,若kind 属性值是 “subtitles”,则该属性必需的。

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

  media:定义媒介资源的类型,供浏览器决定是否下载。

  src:媒介的URL。

  type:定义播放器在音频流中的什么位置开始播放。默认,音频从开头播放。

例如:

<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>

5bdi将内容跟其他隔离  

  内容<bdi>隔离</bdi>内容

6canvas定义图形,只能通过脚本绘制图形   

  <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>

7command定义命令按钮比如单选按钮、复选框或按钮,只有位于menu标签内才可用

  <menu>

    <command onclick=”alert(‘Hello World’)”>Click Me!</command>

  </menu>

  目前只有ie9支持command

8datalist定义input可能的值

  <input id=”myCar” list=”cars” />

    <datalist id=”cars”>  

      <option value=”BMW”>  

      <option value=”Ford”>  

    </datalist>

  </input>

9details标签用于描述文档或文档某个部分的细节summary定义details的标题

  <details>

    <summary>HTML 5</summary>

    <p>All pages and graphics on this website are the property of W3School.</p>

  </details>

10figure标签规定独立的流内容(图像、图表、照片、代码等等)

  figcaption 标签定义 figure元素的标题

  <figure>  

    <figcaption>黄浦江上的的卢浦大桥</figcaption>  

    <img src=”shanghai_lupu_bridge.jpg” width=”350″ height=”234″ />

  </figure>

11header标签定义页眉;footer标签定义页脚;nav定义导航;time定义日期时

12hgroup标签用于对网页或区段(section)的标题进行组合

13keygen标签规定用于表单的密钥对生成器字段。当提交表单时,私钥存储在本地,公钥发送到服务器。

  <form action=”demo_keygen.asp” method=”get”>

    Username: <input type=”text” name=”usr_name” />

    Encryption: <keygen name=”security” />

    <input type=”submit” />

  </form>

keygen属性:

autofocus:使keygen 字段在页面加载时获得焦点。

challenge:如果使用,则将keygen 的值设置为在提交时询问。

disabled:禁用keytag 字段。

form:定义该keygen 字段所属的一个或多个表单。

keytype:定义keytype。rsa 生成 RSA 密钥。

name:定义keygen元素唯一名称。

14meter标签定义度量衡。仅用于已知最大和最小值的度量

  <meter min=”0″max=”20″>5</meter>

  <meter>2out of 10</meter>

  <meter>30%</meter>

meter属性:

high:定义度量的值位于哪个点,被界定为高的值。

low:定义度量的值位于哪个点,被界定为低的值。

max:定义最大值。默认值是1。

min:定义最小值。默认值是0。

optimum:定义什么样的度量值是最佳的值。如果该值高于high属性,则意味着越高越好;如果该值低于low属性的值,则意味着越低越好。

value:定义度量的值。

15mark标签定义带有记号的文本,可以突出显示文本。

16output标签定义不同类型的输出,比如脚本的输出

  <script type=”text/javascript”>

    function write_sum(){

      x=5;

      y=3;

      document.forms["sumform"]["sum"].value=x+y;

    }

  </script>

  <body onload=”write_sum()”>

    <form action=”form_action.asp” method=”get” name=”sumform”>

      <output name=”sum”></output>

    </form>

  </body>

output属性:

for:定义输出域相关的一个或多个元素。

form:定义输入字段所属的一个或多个表单。

name:定义对象的唯一名称。(表单提交时使用)

17progress标签定义运行中的进度(进程)

  <progress>

    <span id=”objprogress”>90</span>%

  </progress>

progress属性:

max:定义完成的值。

Value:定义进程的当前值。

18section标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分

  <section>  

    <h1>PRC</h1>

    <p>The People’s Republic of China was born in 1949…</p>

  </section>

section属性:

cite:section的 URL,例如section 摘自 web 的话

19ruby标签定义 ruby 注释(中文注音或字符)rt 标签定义字符(中文注音或字符)的解释或发音rp定义不支持ruby 元素的浏览器所显示的内容

  <ruby>

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

  </ruby>

posted @ 2015-08-29 17:18  shirliey  阅读(...)  评论(... 编辑 收藏