十二、HTML5新增标签特性详解（audio、video、input）
生活随笔
收集整理的這篇文章主要介紹了
十二、HTML5新增标签特性详解（audio、video、input）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML5 第一天
一、什么是 HTML5
- 定義：HTML5 定義了 HTML 標準的最新版本，是對 HTML 的第五次重大修改，號稱下一代的 HTML
- 兩個概念：
- 是一個新版本的 HTML 語言，定義了新的標簽、特性和屬性
- 擁有一個強大的技術集，這些技術集是指： HTML5 、CSS3 、javascript, 這也是廣義上的 HTML5
- 語義化標簽
- 本地存儲
- 兼容特性
- 2D、3D
- 動畫、過渡
- CSS3 特性
- 性能與集成
HTML5 的現狀
絕對多數新的屬性，都已經被瀏覽器所支持，最新版本的瀏覽器已經開始陸續支持最新的特性，
總的來說：HTML5 已經是大勢所趨
二、HTML5 新增標簽
什么是語義化
新增了那些語義化標簽
- header — 頭部標簽
- nav — 導航標簽
- article — 內容標簽
- section — 塊級標簽
- aside — 側邊欄標簽
- footer — 尾部標簽
?
使用語義化標簽的注意
三、多媒體音頻標簽
- 音頻 – audio
- 視頻 – video
- 可以在不使用標簽的情況下，也能夠原生的支持音頻格式文件的播放，
- 但是：播放格式是有限的
audio 支持的音頻格式
-
audio 目前支持三種格式
?
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>四、多媒體視頻標簽
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 標簽可以自己播放
- 注意：重點記住使用方法以及自動播放即可，其他屬性可以在使用時查找對應的手冊
五、新增 input 標簽
六、新增表單屬性
總結
以上是生活随笔為你收集整理的十二、HTML5新增标签特性详解（audio、video、input）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 64位处理器_电脑操作系统的32位和64
- 下一篇： 搞懂HMM