一、新增語(yǔ)義化標(biāo)簽

header頁(yè)面頭部? main頁(yè)面主要內(nèi)容? footer頁(yè)面底部? nav導(dǎo)航欄? ?aside側(cè)邊欄 article加載頁(yè)面一塊獨(dú)立內(nèi)容? section相當(dāng)于 div? figure加載獨(dú)立內(nèi)容(上圖下字)? figcaption figure的標(biāo)題? hgroup標(biāo)題組合標(biāo)簽 mark高亮顯示? ?dialog加載對(duì)話(huà)框標(biāo)簽（必須配合 open 屬性） embed加載插件的標(biāo)簽 video加載視頻 audio加載音頻(支持格式ogg当悔，mp3槽片，wav)

語(yǔ)義化標(biāo)簽優(yōu)點(diǎn)：1笨枯、提升可訪(fǎng)問(wèn)性 2娇澎、seo 3、結(jié)構(gòu)清晰吕喘，利于維護(hù)

二远荠、表單元素矮固、屬性、事件

(一)新增input(type)類(lèi)型

1譬淳、type="email"

作用：email類(lèi)型用于包含email地址的輸入档址。

特性：提供了默認(rèn)電子郵箱的完整驗(yàn)證：要求必須包含@符號(hào)，同時(shí)必須包含服務(wù)器名稱(chēng)邻梆，如果不能滿(mǎn)足驗(yàn)證守伸，則會(huì)阻止當(dāng)前的表單提交。

2浦妄、type="number"

作用：number類(lèi)型用于包含數(shù)值的輸入尼摹。

特性：只能輸入數(shù)字(包含小數(shù)點(diǎn))，不能輸入其他的字符校辩。

屬性：max 限制輸入框的最大值窘问，min 限制輸入框的最小值辆童，value 輸入框的默認(rèn)值宜咒，step 規(guī)定數(shù)字增長(zhǎng)間隔。

3把鉴、type="color"

作用：輸入類(lèi)型用于規(guī)定顏色故黑。

特性：該類(lèi)型允許你從拾色器中選取顏色。

4庭砍、type="url"

作用：url類(lèi)型用于包含網(wǎng)址的輸入场晶。

特性：提供了網(wǎng)址完整驗(yàn)證，只能輸入合法的網(wǎng)址：必須包含http://怠缸。

5诗轻、type="image"

作用：image輸入類(lèi)型將圖像定義為提交按鈕。

6揭北、type="tel"

作用：tel類(lèi)型用于包含號(hào)碼的輸入扳炬。

特性：tel它并不是來(lái)實(shí)現(xiàn)驗(yàn)證吏颖。它的本質(zhì)是為了能夠在移動(dòng)端打來(lái)數(shù)字鍵盤(pán)，意味著數(shù)字鍵盤(pán)限制了用戶(hù)只能輸入數(shù)字恨樟。

7半醉、type="search"

作用：search類(lèi)型用于搜索域，比如Google搜索劝术。

特性：輸入值后缩多，輸入框帶有關(guān)閉按鈕可以清楚輸入框內(nèi)容。

8养晋、type="range"

作用：range類(lèi)型用于包含一定范圍內(nèi)數(shù)字值得輸入域（可以用作音量鍵）衬吆。

特性：顯示為滑動(dòng)條。

屬性：max 允許的最大值绳泉，min 允許的最小值咆槽，value 規(guī)定的默認(rèn)值，step 規(guī)定數(shù)字增長(zhǎng)間隔圈纺。

9秦忿、type為日期相關(guān)類(lèi)型

date? ? 選擇年、月蛾娶、日

month 選擇年灯谣、月

week? ?選擇年、周

time? ? 選擇時(shí)間（時(shí)蛔琅、分）

datetime? ?選擇年胎许、月、日罗售、時(shí)（UTC時(shí)間）

datetime-local? 選擇年辜窑、月、日寨躁、時(shí)（本地時(shí)間）

(二)新增form屬性

1穆碎、novalidate屬性

作用：novalidate屬性規(guī)定當(dāng)提交表單時(shí)不對(duì)其進(jìn)行驗(yàn)證。

2职恳、autocomplete屬性

作用：autocomplete屬性規(guī)定是否開(kāi)啟表單內(nèi)容的自動(dòng)補(bǔ)全功能所禀。

注意：

a、表單元素的內(nèi)容必須提交過(guò)放钦。

b色徘、需要自動(dòng)補(bǔ)全的表單元素需要設(shè)置name屬性。

(三)新增input屬性

1操禀、form屬性

作用：HTML4中表單內(nèi)的從屬元素必須書(shū)寫(xiě)在表單內(nèi)部褂策，而HTML5中，表單元素可以寫(xiě)在任何地方，然后給元素指定一個(gè)form屬性斤寂，屬性值為該表單的id蔑水，這樣就可以聲明元素從屬于指定表單。

2扬蕊、formaction屬性

作用：HTML4中表單內(nèi)的所有元素只能通過(guò)表單的action屬性被統(tǒng)一提交到另一個(gè)頁(yè)面搀别，而HTML5中，可以為所有的提交按鈕增加不同的的formaction屬性尾抑，使單擊不同的提交按鈕將表單提交到不同的頁(yè)面歇父。

3、formmethod屬性

作用：HTML4中一個(gè)表單只能由一個(gè)method屬性來(lái)統(tǒng)一指定提交方法再愈。HTML5中榜苫，可以使用formmethod屬性來(lái)對(duì)每一個(gè)表單元素分別指定不同的提交方法。

取值：常用提交方式get翎冲、post垂睬，當(dāng)然也有其他的提交方式。

4抗悍、formenctype屬性

作用：HTML4中表單具有enctype屬性驹饺，用于指定如何對(duì)表單內(nèi)的數(shù)據(jù)編碼。HTML5中缴渊，可以使用formenctype屬性對(duì)表單元素分別指定不同的編碼方式赏壹。

5、formtarget屬性

作用：HTML4中表單具有target屬性衔沼，用于指定在何處打來(lái)表單提交后所需要加載的頁(yè)面蝌借。HTML5中，可以對(duì)多個(gè)提交按鈕分別使用formtarget屬性來(lái)指定提交后在何處打開(kāi)頁(yè)面指蚁。

取值：_blank, _self, _parent, _top, _framename(指定name的框架)

6菩佑、autofocus屬性

作用：為文本框、選擇框或按鈕控件加上autofocus屬性凝化，當(dāng)畫(huà)面打開(kāi)時(shí)稍坯，該控件自動(dòng)獲得光標(biāo)焦點(diǎn)。

7缘圈、required屬性

作用：HTML5新增的required屬性可以應(yīng)用在大多數(shù)輸入元素上劣光，提交時(shí)如果內(nèi)容為空，不允許提交并有提示信息顯示糟把。

8、labels屬性

作用：HTML5中為所有可使用標(biāo)簽的表單元素牲剃、button遣疯、select元素等，定義了一個(gè)labels屬性凿傅，屬性值為NodeList對(duì)象缠犀，代表該元素所綁定的標(biāo)簽元素所構(gòu)成的集合数苫。

9、標(biāo)簽的control屬性

作用：HTML5中辨液，可以在標(biāo)簽內(nèi)部放置一個(gè)表單元素虐急，通過(guò)該標(biāo)簽的control屬性來(lái)訪(fǎng)問(wèn)該表單元素。

10滔迈、文本框的placeholder屬性

作用：文本框的placeholder當(dāng)文本框處于未輸入狀態(tài)時(shí)顯示的提示信息止吁。當(dāng)文本框處于未輸入狀態(tài)且未獲取光標(biāo)焦點(diǎn)時(shí)，模糊顯示輸入提示文字燎悍。

11敬惦、復(fù)選框的indeterminate屬性

作?：HTML4中復(fù)選框只是選取與?選取兩種狀態(tài)。HTML5中谈山，可以在JavaScript腳本代碼中對(duì)該元素使?indeterminate屬性俄删，以說(shuō)明復(fù)選框處于"尚未明確是否選取"狀態(tài)。

狀態(tài)：復(fù)選框選中奏路、未選中畴椰、不明狀態(tài)。

12鸽粉、image提交按鈕(height/width屬性)

作?：為圖像設(shè)置寬迅矛、?。

13潜叛、?本框list屬性

作?：HTML5中為單??本框增加了?個(gè)list屬性秽褒，該屬性的值為某個(gè)datalist元素的id。datalist元素也是HTML5新增元素威兜，該元素類(lèi)似選擇框销斟，也允許??輸?。

14椒舵、?本框autocomplete屬性

作?：幫助輸?框內(nèi)容的?動(dòng)補(bǔ)全蚂踊。

注意：1.表單元素的內(nèi)容必須提交過(guò)。2.需要?動(dòng)補(bǔ)全的表單元素需要設(shè)置name屬性笔宿。

取值：on犁钟， off，空字符串泼橘。

15涝动、?本框pattern屬性

作?：HTML5中，對(duì)input元素使?pattern屬性炬灭，屬性值為某個(gè)格式的正則表達(dá)式醋粟，提交時(shí)內(nèi)容會(huì)進(jìn)?正則表達(dá)式的驗(yàn)證。

16、?本框selectionDirection屬性

作?：HTML5中對(duì)input和textarea元素增加了SelectionDirection屬性米愿。屬性表?選取內(nèi)容?向厦凤。

應(yīng)?場(chǎng)景：獲取?戶(hù)的操作(從左往右選?字或從右往左選?字)，根據(jù)?戶(hù)操作執(zhí)?相應(yīng)的程序

取值：默認(rèn)為forward

forward -- 表??戶(hù)正向選取?字內(nèi)容育苟。

backward -- 表??戶(hù)反向選取?字內(nèi)容较鼓。

17、mutiple屬性

作?：multiple 屬性規(guī)定輸?域中可選擇多個(gè)值违柏。

應(yīng)?場(chǎng)景：

1.當(dāng)上傳多個(gè)?件時(shí)博烂，可以使?此屬性。

2.在email中勇垛，允許輸?多個(gè)郵箱地址(?如抄送多?)脖母，?逗號(hào)隔開(kāi)。

(四)新增表單元素

1闲孤、datalist元素

作?：datalist 元素規(guī)定輸?域的選項(xiàng)列表谆级。

注意：如果type類(lèi)型是'url'類(lèi)型，那么value值必須以'http://'開(kāi)頭讼积，因?yàn)檫@才是合法的url值肥照。

2、keygen元素

作?：keygen 元素是密鑰對(duì)?成器（key-pair generator）勤众。當(dāng)提交表單時(shí)舆绎，會(huì)?成兩個(gè)鍵，?個(gè)是私鑰们颜，?個(gè)公鑰吕朵。私鑰（private key）存儲(chǔ)于客戶(hù)端，公鑰（public key）則被發(fā)送到服務(wù)器窥突。公鑰可?于之后驗(yàn)證?戶(hù)的客戶(hù)端證書(shū)（client certificate）努溃。

3、output元素

作?：output 元素?于不同類(lèi)型的輸出阻问。

(五)新增表單事件

1梧税、oninput事件

作?：監(jiān)聽(tīng)當(dāng)前指定元素內(nèi)容的改變，只要內(nèi)容改變(添加內(nèi)容称近，刪除內(nèi)容)事件就會(huì)觸發(fā)第队。

2、oninvalid事件

作?：當(dāng)表單提交驗(yàn)證不通過(guò)時(shí)會(huì)觸發(fā)該事件刨秆。

三凳谦、多媒體標(biāo)簽

html5在不使用插件的情況下，也可以原生的支持音頻格式文件的播放：

1坛善、video標(biāo)簽

作用：播放視頻

video標(biāo)簽屬性：

autoplay：視頻就緒是否自動(dòng)播放

controls：是否需要顯示控制條

width ：設(shè)置播放器寬度

height：設(shè)置播放器高度晾蜘，高度或?qū)挾戎煌扑]其中一種邻眷，否則容易變形

loop：播放完是否繼續(xù)播放該視頻眠屎，循環(huán)播放剔交，一般用于廣告

preload：規(guī)定是否預(yù)加載視頻，但需要注意preload和autoplay屬性相互排斥改衩，不可以同時(shí)設(shè)置

src：視頻播放地址

poster：是否加載等待的畫(huà)面圖片

muted：是否靜音播放

注意：自上而下執(zhí)行

當(dāng)瀏覽器存在兼容性問(wèn)題時(shí)岖常，需要采取這種方式

2、audio音頻標(biāo)簽

作用：播放音頻

當(dāng)瀏覽器存在兼容性問(wèn)題時(shí)葫督，需要采取這種方式

3竭鞍、marquee標(biāo)簽

作用：marquee標(biāo)簽主要是產(chǎn)生了一種跑馬燈的效果，類(lèi)似于滾動(dòng)橄镜，不僅可以讓文字實(shí)現(xiàn)滾動(dòng)偎快，同時(shí)也可以讓圖片滾動(dòng)。

屬性說(shuō)明：

direction：設(shè)置滾動(dòng)的方向

scrollamount:設(shè)置內(nèi)容的滾動(dòng)速度

loop:設(shè)置滾動(dòng)次數(shù)

behavior：設(shè)置滾動(dòng)類(lèi)型洽胶，如屬性值：slide,alternate等晒夹。