h5新增語義化標籤
阿新 • • 發佈：2020-08-10
新增語義化標籤
header--- 頭部標籤nav--- 導航標籤article--- 內容標籤section--- 塊級標籤aside--- 側邊欄標籤footer--- 尾部標籤
使用語義化標籤的注意
- 語義化標籤主要針對搜尋引擎
- 新標籤可以使用一次或者多次
- 在
IE9瀏覽器中，需要把語義化標籤都轉換為塊級元素，在IE8及以下不支援 - 語義化標籤，在移動端支援比較友好，
- 還有許多，學完再補充
新增多媒體音訊標籤
多媒體標籤有兩個，分別是：
- 音訊 -- `audio`
- 視訊 -- `video`
audio
audio 支援的音訊格式
- audio 目前支援三種格式，因為不同瀏覽器支援的音訊格式不一致，至少放ogg和mp3兩種格式，這能能保證大部分瀏覽器都支援。
audio 的引數
- 注意：
* 不同瀏覽器預設的controls控制元件不一樣，但是可以通過js自己寫控制元件
* 谷歌瀏覽器把autoplay屬性禁用了
* 因為不同瀏覽器支援的音訊格式不一致，所以我們準備ogg和MP3兩種格式的音訊，通過audio裡面巢狀source標籤，設定type = “audio/mpeg” || type = “audio/ogg”
video
-
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> -
多媒體標籤總結
- 音訊標籤與視訊標籤使用基本一致
- 多媒體標籤在不同瀏覽器下情況不同，存在相容性問題
- 谷歌瀏覽器把音訊和視訊標籤的自動播放都禁止了
- 谷歌瀏覽器中視訊新增 muted 標籤可以自己播放
- 注意：重點記住使用方法以及自動播放即可，其他屬性可以在使用時查詢對應的手冊