柚子快報(bào)邀請(qǐng)碼778899分享：前端 HTML5有哪些更新

http://yzkb.51969.com/

1. 語(yǔ)義化標(biāo)簽

header：定義文檔的頁(yè)眉（頭部）nav：定義導(dǎo)航鏈接的部分footer：定義文檔或節(jié)的頁(yè)腳（底部）article：定義文章內(nèi)容section：定義文檔中的節(jié)（section、區(qū)段）aside：定義其所處內(nèi)容之外的內(nèi)容（側(cè)邊）

2. 媒體標(biāo)簽

（1） audio：音頻

屬性：

controls 控制面板autoplay 自動(dòng)播放loop=‘true’ 循環(huán)播放

（2）video視頻

屬性：

poster：指定視頻還沒(méi)有完全下載完畢，或者用戶還沒(méi)有點(diǎn)擊播放前顯示的封面。默認(rèn)顯示當(dāng)前視頻文件的第一針畫(huà)面，當(dāng)然通過(guò)poster也可以自己指定。controls 控制面板widthheight

（3）source標(biāo)簽

因?yàn)闉g覽器對(duì)視頻格式支持程度不一樣，為了能夠兼容不同的瀏覽器，可以通過(guò)source來(lái)指定視頻源。

3. 表單

表單類型：

email ：能夠驗(yàn)證當(dāng)前輸入的郵箱地址是否合法url ： 驗(yàn)證URLnumber ： 只能輸入數(shù)字，其他輸入不了，而且自帶上下增大減小箭頭，max屬性可以設(shè)置為最大值，min可以設(shè)置為最小值，value為默認(rèn)值。search ： 輸入框后面會(huì)給提供一個(gè)小叉，可以刪除輸入的內(nèi)容，更加人性化。range ： 可以提供給一個(gè)范圍，其中可以設(shè)置max和min以及value，其中value屬性可以設(shè)置為默認(rèn)值color ： 提供了一個(gè)顏色拾取器time ： 時(shí)分秒date ： 日期選擇年月日datatime ： 時(shí)間和日期(目前只有Safari支持)datatime-local ：日期時(shí)間控件week ：周控件month：月控件

表單屬性：

placeholder ：提示信息autofocus ：自動(dòng)獲取焦點(diǎn)autocomplete=“on” 或者 autocomplete=“off” 使用這個(gè)屬性需要有兩個(gè)前提：

表單必須提交過(guò)

必須有name屬性。

required：要求輸入框不能為空，必須有值才能夠提交。pattern=" " 里面寫(xiě)入想要的正則模式，例如手機(jī)號(hào)patte="^(+86)?\d{10}$"multiple：可以選擇多個(gè)文件或者多個(gè)郵箱form=" form表單的ID"

表單事件：

oninput 每當(dāng)input里的輸入框內(nèi)容發(fā)生變化都會(huì)觸發(fā)此事件。oninvalid 當(dāng)驗(yàn)證不通過(guò)時(shí)觸發(fā)此事件。

4. 進(jìn)度條、度量器

progress標(biāo)簽：用來(lái)表示任務(wù)的進(jìn)度（IE、Safari不支持），max用來(lái)表示任務(wù)的進(jìn)度，value表示已完成多少meter屬性：用來(lái)顯示剩余容量或剩余庫(kù)存（IE、Safari不支持）

high/low：規(guī)定被視作高/低的范圍max/min：規(guī)定最大/小值value：規(guī)定當(dāng)前度量值

設(shè)置規(guī)則：min < low < high < max

5.DOM查詢操作

document.querySelector()document.querySelectorAll()

它們選擇的對(duì)象可以是標(biāo)簽，可以是類(需要加點(diǎn))，可以是ID(需要加#)

6. Web存儲(chǔ)

HTML5 提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法：

localStorage - 沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ)sessionStorage - 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ)

7. 其他

拖放：拖放是一種常見(jiàn)的特性，即抓取對(duì)象以后拖到另一個(gè)位置。設(shè)置元素可拖放：

畫(huà)布（canvas ）： canvas 元素使用 JavaScript 在網(wǎng)頁(yè)上繪制圖像。畫(huà)布是一個(gè)矩形區(qū)域，可以控制其每一像素。canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

SVG：SVG 指可伸縮矢量圖形，用于定義用于網(wǎng)絡(luò)的基于矢量的圖形，使用 XML 格式定義圖形，圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有損失，它是萬(wàn)維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)地理定位：Geolocation（地理定位）用于定位用戶的位置?！?/p>

總結(jié)：

（1）新增語(yǔ)義化標(biāo)簽：nav、header、footer、aside、section、article

（2）音頻、視頻標(biāo)簽：audio、video

（3）數(shù)據(jù)存儲(chǔ)：localStorage、sessionStorage

（4）canvas（畫(huà)布）、Geolocation（地理定位）、websocket（通信協(xié)議）

（5）input標(biāo)簽新增屬性：placeholder、autocomplete、autofocus、required

（6）history API：go、forward、back、pushstate

移除的元素有：

純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u;對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；

柚子快報(bào)邀請(qǐng)碼778899分享：前端 HTML5有哪些更新

http://yzkb.51969.com/

精彩內(nèi)容