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>
複製代碼