HTML5

1 html5新增語(yǔ)義化標(biāo)簽

1. 1 新增頁(yè)面結(jié)構(gòu)標(biāo)簽

標(biāo)簽名語(yǔ)義和功能屬性單標(biāo)簽還是雙標(biāo)簽

header	頁(yè)面頭部		雙標(biāo)簽
footer	頁(yè)面腳部		雙標(biāo)簽
nav	導(dǎo)航條		雙標(biāo)簽
section	頁(yè)面或文章中的一節(jié)		雙標(biāo)簽
aside	側(cè)邊欄		雙標(biāo)簽
article	文章，博客，帖子，新聞		雙標(biāo)簽
main	頁(yè)面主要內(nèi)容		雙標(biāo)簽

總結(jié)：

1.section無(wú)法代替div，article和aside被認(rèn)為是具體的section 2.main標(biāo)簽whatwg標(biāo)準(zhǔn)中沒(méi)有定義，ie瀏覽器不支持 3.以上標(biāo)簽本質(zhì)上就是帶有語(yǔ)義的div

1.2 新增狀態(tài)標(biāo)簽

標(biāo)簽名語(yǔ)義和功能屬性單標(biāo)簽還是雙標(biāo)簽

meter	表示靜態(tài)的度量	max,min,value,high,low,optim	雙標(biāo)簽
progress	表示動(dòng)態(tài)的進(jìn)度	max,value	雙標(biāo)簽

meter和progress的區(qū)別

1.meter表示靜態(tài)的度量，如溫度，磁盤容量，電池容量 2.progress表示動(dòng)態(tài)的進(jìn)度，如進(jìn)度條

1.3 新增列表標(biāo)簽

標(biāo)簽名語(yǔ)義和功能屬性單標(biāo)簽還是雙標(biāo)簽

datalist	實(shí)現(xiàn)搜索框下拉提示		雙標(biāo)簽
details	關(guān)鍵字和對(duì)關(guān)鍵字的展開(kāi)解釋	open：無(wú)需給值	雙標(biāo)簽
summary	定義關(guān)鍵字或文字		雙標(biāo)簽

<input type="text" list="searchList"> <datalist id="searchList"><option value="abb"></option><option value="aaa"></option><option value="aac"></option><option value="abhelo"></option><option value="hellodd"></option><option value="a10"></option> </datalist> <details><summary>如何一夜暴富？</summary><p>疇而極受的領(lǐng)鼓孔就后的希服陳洪幫謀我到，方這是氣有人情回問(wèn)，死看下五乏整普聯(lián)和收的量我事嬋是年而安，降人嚴(yán)人死徒的責(zé)為夠予訂在不他著不，人從惱久使楊輕了膽丐稟爻感召預(yù)國(guó)是一艷，亓措有非準(zhǔn)詞的后賜是一同尹學(xué)，云一別也老航都少二韋楊嘆，始?xì)w云王賢只落當(dāng)了覺(jué)后。</p> </details>

1.4 新增注釋標(biāo)簽（注音標(biāo)簽）

標(biāo)簽名語(yǔ)義和功能屬性單標(biāo)簽還是雙標(biāo)簽

ruby	添加注音		雙標(biāo)簽
rt	包裹在ruby的里面，選中注釋的內(nèi)容		雙標(biāo)簽

歡迎來(lái)享受這場(chǎng)<ruby>饕餮<rt>taotie</rt></ruby>盛宴！

1.5 新增文本標(biāo)簽

標(biāo)簽名語(yǔ)義和功能屬性單標(biāo)簽還是雙標(biāo)簽

mark	標(biāo)記標(biāo)簽	標(biāo)記搜索結(jié)果	雙標(biāo)簽

2 html5 表單新增功能

2.1 表單控件新增屬性

placeholder 用于可輸入的表單控件，設(shè)置輸入前的文字提示 required 用于所有類型表單控件，設(shè)置該表單控件必填或必選 autofocus 用于所有類型表單控件，設(shè)置自動(dòng)獲取焦點(diǎn) autocomplete 用于可輸入的表單控件，設(shè)置瀏覽器是否顯示輸入值記錄 pattern 用于可輸入的表單控件（textarea不可以），設(shè)置正則檢測(cè)輸入內(nèi)容是否滿足格式

2.2 input標(biāo)簽type屬性新增的值

1 文本輸入框類

email, number(有效屬性max，min，step) url tel search

2 范圍選擇框

range(max min step)

3 顏色選擇框

color

4 時(shí)間日期選擇框

date,month,week,time

2.3 form標(biāo)簽新增屬性

novalidate 設(shè)置該屬性，表單不驗(yàn)證

3 HTML5音視頻

3.1 音視頻標(biāo)簽

標(biāo)簽功能和語(yǔ)義屬性單標(biāo)簽還是雙標(biāo)簽

video	視頻	src：設(shè)置視頻文件地址 width：設(shè)置視頻高度 height：設(shè)置視頻高度 controls：顯示控制條 muted：設(shè)置默認(rèn)靜音 autoplay：自動(dòng)播放，無(wú)需設(shè)置值 loop：循環(huán)播放，無(wú)需設(shè)置值 preload：預(yù)先加載，無(wú)需加載 poster：設(shè)置視頻封面	雙標(biāo)簽
audio	音頻	src：設(shè)置視頻文件地址 width：設(shè)置視頻高度 height：設(shè)置視頻高度 controls：顯示控制條 muted：設(shè)置默認(rèn)靜音 autoplay：自動(dòng)播放，無(wú)需設(shè)置值 loop：循環(huán)播放，無(wú)需設(shè)置值 preload：預(yù)先加載，無(wú)需加載	雙標(biāo)簽
source	引入資源（音頻或視頻）	src：設(shè)置音頻或視頻地址 type：設(shè)置音頻或視頻的類型	雙標(biāo)簽

總結(jié)：

1.chrome 規(guī)定，音頻，視頻只有在靜音前提下，才能實(shí)現(xiàn)自動(dòng)播放。 2.視頻只設(shè)置寬或高，另一個(gè)自動(dòng)計(jì)算

兼容方案：

<video controls><source src="../sources/video/movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'><source src="../sources/video/movie.ogg" type='video/ogg; codecs="theora, vorbis"'><source src="../sources/video/movie.webm" type='video/webm; codecs="vp8, vorbis"'>您的破瀏覽器不支持視頻播放，請(qǐng)下載最新版的 Chrome </video>

3.2 瀏覽器支持的音視頻格式

1 視頻格式

MP4，webm，ogg

2 音頻格式

mp3,wav,ogg

4 HTML5 新增全局屬性

hidden 設(shè)置該屬性元素隱藏，無(wú)需設(shè)置值

5 HTML5兼容方案

5.1 設(shè)置元信息

<!--設(shè)置IE總是使用最新的文檔模式進(jìn)行渲染--> <meta http-equiv="X-UA-Compatible" content="IE=Edge"><!--優(yōu)先使用 webkit ( Chromium ) 內(nèi)核進(jìn)行渲染, 針對(duì)360等殼瀏覽器--> <meta name="renderer" content="webkit">

5.2 html5shiv.js讓IE8以及以下的瀏覽器支持H5新標(biāo)簽

<!--[if lt ie 9]><script src="../js/html5shiv.js"></script> <![endif]-->

總結(jié)

以上是生活随笔為你收集整理的html5~的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。