HTML5 新增標籤

zhengTornado發表於2021-01-01
HTML

1. H5 新增了語義化標籤

  • header — 頭部標籤
  • nav — 導航標籤
  • article — 內容標籤
  • section — 塊級標籤
  • aside — 側邊欄標籤
  • footer — 尾部標籤

在這裡插入圖片描述
3. 使用語義化標籤的注意

- 語義化標籤主要針對搜尋引擎
- 新標籤可以使用一次或者多次
- 在 `IE9` 瀏覽器中，需要把語義化標籤都轉換為塊級元素
- 語義化標籤，在移動端支援比較友好

2.多媒體音訊標籤

  1. 多媒體標籤有兩個，分別是
  • 音訊 – audio
  • 視訊 – video
  1. audio 標籤說明
  • 可以在不使用標籤的情況下，也能夠原生的支援音訊格式檔案的播放，
  • 但是：播放格式是有限的
  1. audio 支援的音訊格式
    • audio 目前支援三種格式
      在這裡插入圖片描述

4 audio 的引數
在這裡插入圖片描述

5、audio 程式碼演示

<body>
  <!-- 注意：在 chrome 瀏覽器中已經禁用了 autoplay 屬性 -->
  <!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->

  <!-- 
    因為不同瀏覽器支援不同的格式，所以我們採取的方案是這個音訊準備多個檔案
   -->
  <audio controls>
    <source src="./media/snow.mp3" type="audio/mpeg" />
  </audio>
</body>
四、多媒體視訊標籤
  1. video 視訊標籤
    • 目前支援三種格式
      在這裡插入圖片描述
      語法格式
<video src="./media/video.mp4" controls="controls"></video>

video 引數
在這裡插入圖片描述
video 程式碼演示

<body>
  <!-- <video src="./media/video.mp4" controls="controls"></video> -->

  <!-- 谷歌瀏覽器禁用了自動播放功能，如果想自動播放，需要新增 muted 屬性 -->
  <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
    <source src="./media/video.mp4" type="video/mp4">
    <source src="./media/video.ogg" type="video/ogg">
  </video>
</body>
  1. 多媒體標籤總結
  • 音訊標籤與視訊標籤使用基本一致
  • 多媒體標籤在不同瀏覽器下情況不同，存在相容性問題
  • 谷歌瀏覽器把音訊和視訊標籤的自動播放都禁止了
  • 谷歌瀏覽器中視訊新增 muted 標籤可以自己播放
  • 注意：重點記住使用方法以及自動播放即可，其他屬性可以在使用時查詢對應的手冊
    五、新增 input 標籤
    在這裡插入圖片描述
    六、新增表單屬性
    在這裡插入圖片描述

相關文章