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

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ū)域

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

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

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

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

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

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>——常見屬性

音頻<audio>
當(dāng)前<audio>元素支持三種音頻格式,但并不能對所有的瀏覽器兼容，各種瀏覽器適配的音頻格式如下：

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>

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

HTML5 新增的input 類型，重點記住number、tel、search 這三個，是比較常用的input 類型。
HTML5 新增的表單屬性和屬性說明如下表：

猜你喜歡：

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

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

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

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

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