柚子快報(bào)激活碼778899分享：前端 HTML5新增

http://yzkb.51969.com/

1.文檔類型設(shè)定

（1）HTML

（2）XHTML

（3）HTML5

2.字符設(shè)定

: HTML與XHTML中建議寫(xiě)法

： HTMl5中建議寫(xiě)法

3.常用新標(biāo)簽

? ? ?w3c手冊(cè)中文官網(wǎng)： w3school 在線教程

（1）header：定義文檔的頭部區(qū)域

（2）nav：定義導(dǎo)航鏈接的部分

（3）footer：定義section或document的頁(yè)腳

（4）article：定義頁(yè)面獨(dú)立的內(nèi)容區(qū)域

（5）section：定義文檔的節(jié)（section、區(qū)段）

（6）aside：定義頁(yè)面的側(cè)邊欄內(nèi)容

（7）datalist：定義選項(xiàng)列表，與input結(jié)合使用

12

13

14

15

16

17

（8）fieldset：可將表單內(nèi)的相關(guān)元素分組打包，與legend搭配使用

（9）mark：用于定義帶有記號(hào)的文本。在需要突出顯示文本時(shí)可使用 標(biāo)簽。

這是一個(gè)段落，中間的文本需要標(biāo)記

? ? ? ? ?注意：IE 8及之前的版本不支持mark標(biāo)簽

（10）meter：定義度量衡，僅用于已知最大和最小值的度量。比如：磁盤(pán)使用情況，查詢結(jié)果的相關(guān)性等。不能當(dāng)做進(jìn)度條使用。

? ? ? ? ? ?min：規(guī)定范圍最小值

? ? ? ? ? ?max：規(guī)定范圍最大值

? ? ? ? ? ?value：規(guī)定度量的當(dāng)前值，是必須的屬性?？梢杂脭?shù)值表示

? ? ? ? ? ?low：范圍界定的最低值

? ? ? ? ? ?high：范圍界定的最大值

? ? ? ? ? ?注意：IE瀏覽器不支持meter標(biāo)簽。

（10） progress：定義運(yùn)行中的任務(wù)進(jìn)度，通常與JavaScript結(jié)合使用來(lái)顯示當(dāng)前的任務(wù)進(jìn)度。不能作為度量值使用

4.新增的input type屬性值

類型使用示例含義email輸入郵箱格式，如：xx@163.comurl輸入url格式，如：http://www.baidu.comnumber輸入數(shù)字格式，只能是數(shù)字search搜索框range自由拖動(dòng)滑塊time小時(shí)分鐘date年月日datetime時(shí)間month年月week星期color顏色hidden/show定義表單隱藏/顯示

（1）hidden/show屬性的使用：

隱藏

5.常用新屬性

屬性用法含義placeholder占位符 用于提示用戶輸入，當(dāng)用戶輸入數(shù)據(jù)時(shí)，提示信息會(huì)自動(dòng)消失autofocus規(guī)定當(dāng)頁(yè)面加載時(shí)input元素應(yīng)該自動(dòng)獲得焦點(diǎn)multiple多文件上傳autocomplete規(guī)定表單是否應(yīng)該啟用自動(dòng)完成功能，有兩個(gè)值分別是on和off，on表示記錄已經(jīng)輸入的值 。條件是：1.autocomplete首先需要提交按鈕 2.這個(gè)表單必須給name值required必填項(xiàng)，內(nèi)容不能為空accesskey規(guī)定激活（使元素獲得焦點(diǎn)）元素的快捷鍵，采用alt+字母的形式

用戶名：

上傳頭像：

自動(dòng)記錄完成

6.多媒體標(biāo)簽

1.多媒體embed

? ? embed可以用來(lái)插入各種多媒體，格式可以是Midi、Wav、AIFF、AU、MP3等，src為音頻或視頻文件的路徑，可以是相對(duì)路徑或絕對(duì)路徑。

2.多媒體audio

? ?

瀏覽器MP3WavOggIEyesnonoChromeyesyesyesFirefoxyesyesyesSafariyesyesyesOperayesyesyes

? ? ?HTML5通過(guò)

? ? 常見(jiàn)屬性：

屬性值描述autoplayautoplay如果出現(xiàn)該屬性，則音頻在就緒后馬上播放controlscontrols如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕looploop如果出現(xiàn)該屬性，則每當(dāng)音頻結(jié)束時(shí)重新開(kāi)始播放srcurl要播放的音頻的url

? ? ?在 之間你需要插入瀏覽器不支持的

? ? ?

您的瀏覽器不支持 HTML5 audio 標(biāo)簽。

3.多媒體video

? ? 當(dāng)前video元素支持的三種格式，也可以原生的支持視頻格式的文件的播放，當(dāng)然，支持的格式是有限的

瀏覽器MP4WebMOggIEyesnonoChromeyesyesyesFirefoxyesyesyesSafariyesnonoOperayesyesyes

? ? 現(xiàn)在大多數(shù)視頻是通過(guò)插件（比如 Flash）來(lái)顯示的。然而，并非所有瀏覽器都擁有同樣的插件。

? ? HTML5 規(guī)定了一種通過(guò) video 元素來(lái)包含視頻的標(biāo)準(zhǔn)方法。

? ?

? ?

? ? ? ? MP4：帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件

? ? ? ? WebM： 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件

? ? ? ? Ogg：帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件

您的瀏覽器不支持 HTML5 video 標(biāo)簽。

? ? ? video常見(jiàn)屬性

屬性值描述autoplayautoplay視頻就緒自動(dòng)播放(谷歌瀏覽器需要添加muted來(lái)解決自動(dòng)播放的問(wèn)題)controlscontrols向用戶顯示播放控件widthpx設(shè)置播放器的寬度heightpx設(shè)置播放器的高度looploop播放完是否繼續(xù)播放該視頻，循環(huán)播放preloadauto(預(yù)先加載視頻) none（不應(yīng)加載視頻）規(guī)定是否預(yù)加載視頻，如果有了autoplay，就忽略該屬性srcurl視頻url地址poterimgurl加載等待的畫(huà)面圖片mutedmuted靜音播放

7.解決Chrome瀏覽器無(wú)法自動(dòng)播放音頻視頻的問(wèn)題

? ? 谷歌瀏覽器做了改革，不再允許自動(dòng)播放音頻和視頻。Chrome只允許用戶對(duì)網(wǎng)頁(yè)進(jìn)行主動(dòng)觸發(fā)后才可自動(dòng)播放音頻和視頻

（1）比較常規(guī)的做法是，為video標(biāo)簽設(shè)置muted屬性，使它靜音，這樣視頻就能自動(dòng)播放了，但是沒(méi)有聲音。然后待用戶在網(wǎng)頁(yè)上有了任意觸發(fā)后，再將muted去掉?；蛘咦層脩羰謩?dòng)去打開(kāi)音頻（騰訊視頻就是這樣做的）。

（2）使用iframe來(lái)觸發(fā)權(quán)限

? ? 當(dāng)你頁(yè)面加載完成后，將原先video的src地址賦值給iframe ，就可以通過(guò)iframe來(lái)播放音頻文件了

柚子快報(bào)激活碼778899分享：前端 HTML5新增

http://yzkb.51969.com/

文章鏈接