一、HTML5 發(fā)展史
為了支持新的 Web 應(yīng)用，同時(shí)克服現(xiàn)有缺點(diǎn)，HTML 迫切需要添加新功能，制定新規(guī)范。2008 年，發(fā)布 HTML5 工作草案。
有兩個(gè)常用網(wǎng)站，可以檢查瀏覽器對(duì) HTML5 規(guī)范的支持情況。
1、http://caniuse.com/
2、http://html5test.com/ （顯示用戶(hù)瀏覽器對(duì) HTML5 規(guī)范的支持情況）
二、HTML5 新功能
1、新的 DOCTYPE 和字符集
<!DOCTYPE html>
字符集聲明：<meta charset=“utf-8">
使用 HTML5 的 DOCTYPE 會(huì)觸發(fā)瀏覽器以標(biāo)準(zhǔn)兼容模式顯示頁(yè)面。
2、HTML5 新元素
三、HTML5 的內(nèi)容類(lèi)型
1、內(nèi)嵌
向文檔中添加其他類(lèi)型的內(nèi)容，如 audio,video,canvas 和 iframe 等。
2、流
在文檔和應(yīng)用的 body 中使用的元素，如 form,h1,small 等。
3、標(biāo)題
段落標(biāo)題，如 h1,h2,hgroup 等
4、交互
與用戶(hù)交互的內(nèi)容，如音頻和視頻控件、 button 和 textarea 等。
5、元數(shù)據(jù)
通常出現(xiàn)在頁(yè)面的 head 中，設(shè)置頁(yè)面其他部分的表現(xiàn)和行為，如 script, style, title 等。
6、短語(yǔ)
文本和文本標(biāo)記元素，如 mark, kdb, sub, sup 等。
7、片段
用于定義文檔中片段的元素，如 article, aside 和 title 等。
四、HTML5 中新的片段類(lèi)元素
1、header
標(biāo)記頭部區(qū)域的內(nèi)容（用于整個(gè)頁(yè)面或頁(yè)面中的一塊區(qū)域）。
2、footer
標(biāo)記腳部區(qū)域的內(nèi)容（用于整個(gè)頁(yè)面或頁(yè)面中的一塊區(qū)域）。
3、section
Web 頁(yè)面中的一塊區(qū)域。
4、article
獨(dú)立的文章內(nèi)容。
5、aside
相關(guān)內(nèi)容或者引文。
6、nav
導(dǎo)航類(lèi)輔助內(nèi)容。
補(bǔ)充知識(shí)點(diǎn)：CSS3
CSS3 的規(guī)范很可能還會(huì)變動(dòng)，CSS3 中的功能也處于試驗(yàn)期，因此為了避免命名沖突，這些功能都會(huì)加上瀏覽器廠商的前綴。
| -moz- | Mozilla 瀏覽器 |
|---|---|
| o- | Opera 瀏覽器 |
| -webkit | Safari 和 Chrome 等基于 webkit 核心的瀏覽器 |
五、新的 Selectors API
以前的有 getElementById() ,getElementsByName() 和 getElementsByTagName()，它們都是用標(biāo)準(zhǔn) DOM 的方式遍歷的。
新的有 ：
| API | 描述 | 舉例 |
|---|---|---|
| querySelector() | 根據(jù)指定的選擇規(guī)則返回在頁(yè)面上找到的第一個(gè)匹配元素。 | 例如：querySelector(“input.error”); 返回第一個(gè) CSS 類(lèi)名為 “error” 的文本輸入框。 |
| querySelectorAll() | 根據(jù)指定規(guī)則返回頁(yè)面中所有相匹配的元素。 | 例如：querySelectorAll(“#results td”); 返回 id 為 results 的元素下所有的單元格。 |
新的 API 遍歷 DOM 時(shí)搜索更快。（為了實(shí)現(xiàn)快速樣式表，瀏覽器對(duì)選擇器匹配進(jìn)行了高度優(yōu)化，即優(yōu)化了 DOM 的操作方式）。
補(bǔ)充知識(shí)點(diǎn)： JSON 是 HTML5 應(yīng)用內(nèi)部數(shù)據(jù)交換的事實(shí)標(biāo)準(zhǔn)。
web 瀏覽器的 JavaScript 引擎：
| 瀏覽器引擎 | 引擎名稱(chēng) |
|---|---|
| Apple Safari | Nibro（也被稱(chēng)作 Squirrel Fish Extreme） |
| Google Chrome | v8 |
| Microsoft Internet Explorer | chakra |
| Mozilla Firefox | JagerMonkey |
| Opera | Carakan |
