首頁技術(shù)文章正文

HTML5新增的語義化、多媒體和input 類型

更新時(shí)間:2021-11-19 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

HTML5 的新增特性主要是針對于以前的不足,增加了一些新的標(biāo)簽、新的表單和新的表單屬性等。 這些新特性都有兼容性問題,基本是 IE9+ 以上版本的瀏覽器才支持,如果不考慮兼容性問題,可以大量使用這些新特性。

HTML5 新增的語義化標(biāo)簽

以前布局,我們基本用 div 來做。div 對于搜索引擎來說,是沒有語義的。

<div class=“header”> </div><
div class=“nav”> </div>
<div class="“content”>" <div>
<div class="“footer”>" <div>
在HTML5中布局方式有了新的變化,HTML5中增加了新的結(jié)構(gòu)標(biāo)簽,如header標(biāo)簽、nav標(biāo)簽、article標(biāo)簽等。
<header>:頭部標(biāo)簽
<nav>:導(dǎo)航標(biāo)簽
<article>:內(nèi)容標(biāo)簽
<section>:定義文檔某個區(qū)域
<aside>:側(cè)邊欄標(biāo)簽
<footer>:尾部標(biāo)簽

1637544767724_圖片1.png


注意:這種語義化標(biāo)準(zhǔn)主要是針對搜索引擎的 這些新標(biāo)簽頁面中可以使用多次 在IE9 中,需要把這些元素轉(zhuǎn)換為塊級元素,其實(shí),我們移動端更喜歡使用這些標(biāo)簽。

多媒體標(biāo)簽
新增的多媒體標(biāo)簽主要包含兩個:

①音頻:<AUDIO> <>
②視頻:<VIDEO><>

使用它們可以很方便的在頁面中嵌入音頻和視頻,而不再去使用flash和其他瀏覽器插件。

HTML5在不使用插件的情況下,也可以原生的支持視頻格式文件的播放,當(dāng)然,支持的格式是有限的。

1視頻<video>
當(dāng)前<video>
元素支持三種視頻格式:盡量使用mp4格式。

1637544779100_圖片2.png

HTML5在不使用插件的情況下,也可以原生的支持音頻格式文件的播放,當(dāng)然,支持的格式是有限的。
語法格式如下:

<video src="文件地址" controls="controls"></video>
<video  controls="controls"  width="300">
<source src="move.ogg"  type="video/ogg" >
<source src="move.mp4"  type="video/mp4" >
您的瀏覽器暫不支持<video> <="" font="">標(biāo)簽播放視頻
HTML5在不使用插件的情況下,也可以原生的支持音頻格式文件的播放,當(dāng)然,支持的格式是有限的。

視頻<video>——常見屬性
1637544786217_圖片3.png
音頻
<audio>

當(dāng)前<audio>元素支持三種音頻格式,但并不能對所有的瀏覽器兼容,各種瀏覽器適配的音頻格式如下:
1637544807158_圖片4.png
HTML5在不使用插件的情況下,也可以原生的支持音頻格式文件的播放,語法格式如下:

<audio src="文件地址" controls="controls"></audio>
< audio controls="controls"  >
<source src="happy.mp3" type="audio/mpeg" >
<source src="happy.ogg" type="audio/ogg" >
您的瀏覽器暫不支持<audio> <="" font="">標(biāo)簽。
</ audio>

1637544835539_圖片5.png
總結(jié):音頻標(biāo)簽和視頻標(biāo)簽使用方式基本一致,但瀏覽器支持情況不同。谷歌瀏覽器禁止了音頻和視頻自動播放。在操作的時(shí)候我們可以給視頻標(biāo)簽添加muted 屬性來靜音播放視頻,音頻不可以(可以通過JavaScript解決)視頻標(biāo)簽是重點(diǎn),我們經(jīng)常設(shè)置自動播放,不使用controls 控件,循環(huán)和設(shè)置大小屬性。

HTML5 新增的input 類型,重點(diǎn)記住number、tel、search 這三個,是比較常用的input 類型。1637544841478_圖片6.png
HTML5 新增的表單屬性和屬性說明如下表:
1637544851240_圖片7.png





猜你喜歡:

html和html5的區(qū)別是什么?2分鐘搞懂!

HTML5新增form屬性有哪些功能?具體應(yīng)該怎樣操作?

HTML5中怎樣嵌入視頻和音頻?

HTTP請求格式:請求行、請求頭詳細(xì)介紹

黑馬程序員前端與移動開發(fā)開發(fā)培訓(xùn)

分享到:
在線咨詢 我要報(bào)名
和我們在線交談!