H5新增標籤元素

班主任發表於2019-11-06
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>
複製程式碼

相關文章