柚子快報激活碼778899分享：前端 HTML5新增

http://yzkb.51969.com/

1.文檔類型設定

（1）HTML

（2）XHTML

（3）HTML5

2.字符設定

: HTML與XHTML中建議寫法

： HTMl5中建議寫法

3.常用新標簽

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

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

（2）nav：定義導航鏈接的部分

（3）footer：定義section或document的頁腳

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

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

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

（7）datalist：定義選項列表，與input結合使用

12

13

14

15

16

17

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

（9）mark：用于定義帶有記號的文本。在需要突出顯示文本時可使用 標簽。

這是一個段落，中間的文本需要標記

? ? ? ? ?注意：IE 8及之前的版本不支持mark標簽

（10）meter：定義度量衡，僅用于已知最大和最小值的度量。比如：磁盤使用情況，查詢結果的相關性等。不能當做進度條使用。

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

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

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

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

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

? ? ? ? ? ?注意：IE瀏覽器不支持meter標簽。

（10） progress：定義運行中的任務進度，通常與JavaScript結合使用來顯示當前的任務進度。不能作為度量值使用

4.新增的input type屬性值

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

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

隱藏

5.常用新屬性

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

用戶名：

上傳頭像：

自動記錄完成

6.多媒體標簽

1.多媒體embed

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

2.多媒體audio

? ?

瀏覽器MP3WavOggIEyesnonoChromeyesyesyesFirefoxyesyesyesSafariyesyesyesOperayesyesyes

? ? ?HTML5通過

? ? 常見屬性：

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

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

? ? ?

您的瀏覽器不支持 HTML5 audio 標簽。

3.多媒體video

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

瀏覽器MP4WebMOggIEyesnonoChromeyesyesyesFirefoxyesyesyesSafariyesnonoOperayesyesyes

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

? ? HTML5 規(guī)定了一種通過 video 元素來包含視頻的標準方法。

? ?

? ?

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

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

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

您的瀏覽器不支持 HTML5 video 標簽。

? ? ? video常見屬性

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

7.解決Chrome瀏覽器無法自動播放音頻視頻的問題

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

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

（2）使用iframe來觸發(fā)權限

? ? 當你頁面加載完成后，將原先video的src地址賦值給iframe ，就可以通過iframe來播放音頻文件了

柚子快報激活碼778899分享：前端 HTML5新增

http://yzkb.51969.com/

文章鏈接