H5新增标签元素

结构标签

• article：用于定义一篇文章
• header：用于定义页面的头部
• footer：用于定义页面的底部
• nav：导航条连接
• section：定义一个区域

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
复制代码

• hgroup：定义文件中一个区块的相关信息

<hgroup>
    <h1>标题一</h1>
</hgroup>
复制代码

• figure：定义一组内容及它们的标题（能够用于包裹canvas,video等多媒体标签）
• figcaption：用于figure标签订义媒体的标题
• dialog：定义一个对话框
• header，section，footer,aside,article这几个标签最好不要嵌在标签内部使用，应该放在最外面
• 使用层级（header=section=footer）> (aside,article,figure,hgroup,nav)

多媒体标签

• video：定义一个视频

  • autoplay：是否自动播放
  • controls：是否展现控制器
  • 能够用css控制视频框的宽度和高度
  • 能够包裹source标签

• audio：定义一个音频

  • autoplay：是否自动播放（autoplay="autoplay"表示自动播放，默认不播放）
  • loop：重复播放次数（loop='-1'表示无限播放，等于其余数字时表示播放的次数）
  • controls：是否显示控制器(controls="controls"时显示，默认不显示)
  • 能够包裹source标签

• source：定义媒体资源

  • 能够用于auto和video标签内部，并能够添加不一样格式的媒体文件，type属性用于转码格式

  <audio>
      <source src="音频资源" type="audio/转码格式">
  </audio>
  复制代码

• canvas：定义图片，可在内部绘图

• embed：定义外部可交互内容和插件，例如flash,使用方法和video和audio相似，能够用css控制资源显示的大小

  • embed能够用来插入各类多媒体，格式能够是 Midi、Wav、AIFF、AU、MP3等等， Netscape及新版的IE 都支持

<embed src="资源路径" type="">
复制代码

Web标签

• meter实时状态显示：气压，气温（目前只支持Chrome和Opera）
  • value：定义目前所处的状态(数值)
  • min：最低数值
  • max：最高数值
  • low：最低显示（低于该值为黄色）
  • high：最高显示（高于该值为黄色）
  • optimum：最优值

<meter value="29" min="20" max="290" low="50" high="200" optimum="220"></meter>
复制代码

• progress：显示任务过程，安装，加载（只支持Chrome,Opera,Firefox）
  • value：当前状态值
  • max：最大状态值

<progress max="100"></progress>
复制代码

• datalist：为input定义一个下拉列表，配合option，input标签中的list属性的值和datalist标签中的id必须相同，才能进行下拉展现

<input type="text" placeholder="测试datalist" list="my-list">
<datalist id="my-list">
    <option value="test1"></option>
    <option value="test2"></option>
</datalist>
复制代码

• ruby & rt：用ruby将字括起来，而后rt标签填写注释信息（注释文字偏小）

<p>
    <ruby>ZS<rt>试试是什么高端的标签</rt></ruby>
    测试注释
</p>
复制代码

• mark：用于标黄（全部浏览器都支持）

<p>
    <mark>我会显示为黄色</mark>我显示为黑色
</p>
复制代码