Web前端開(kāi)發(fā)第3章：初識(shí)HTML51本章主要內(nèi)容HTML概述HTML5的優(yōu)勢(shì)HTML5的新特征HTML5的文檔結(jié)構(gòu)21.HTML概述1982年，英國(guó)人蒂姆·伯納斯·李為了方便世界各地的物理學(xué)家能夠進(jìn)行合作研究以及信息共享，創(chuàng)造了HTML語(yǔ)言，之后HTML發(fā)展成了互聯(lián)網(wǎng)上應(yīng)用最為廣泛的標(biāo)記語(yǔ)言。HTML是HyperTextMarkupLanguage（超文本標(biāo)記語(yǔ)言）的縮寫(xiě)。使用HTML元素編寫(xiě)的文檔稱(chēng)為HTML文檔，目前最新版本是HTML5.0。HTML是目前在網(wǎng)絡(luò)上應(yīng)用最為廣泛的語(yǔ)言，也是構(gòu)成網(wǎng)頁(yè)文檔的主要語(yǔ)言。HTML文檔是由HTML元素組成的描述性文本，HTML標(biāo)簽可以識(shí)別文字、圖形、動(dòng)畫(huà)、聲音、表格和鏈接等網(wǎng)頁(yè)中常用的組成部分。31.1什么是HTML1.HTML概述從1993年互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布，到1999年W3C發(fā)布HTML4.01標(biāo)準(zhǔn)，HTML共經(jīng)歷過(guò)5個(gè)版本。HTML不僅成為Web上最主要的文檔格式，而且在個(gè)人及商業(yè)應(yīng)用中都發(fā)揮著重要作用。41.2HTML的發(fā)展歷程1.HTML概述在HTML語(yǔ)言的發(fā)展歷史中，大致經(jīng)歷了如下發(fā)展歷史。HTML：1993年6月由互聯(lián)網(wǎng)工程小組發(fā)布的HTML工作草案。HTML2.0：1995年11月作為RFC1866發(fā)布。HTML3.2：1996年1月14日由W3C組織發(fā)布，是HTML文檔第一個(gè)被廣泛使用的標(biāo)準(zhǔn)。HTML4.0：1997年12月18日由W3C組織發(fā)布，也是W3C推薦標(biāo)準(zhǔn)。51.2HTML的發(fā)展歷程1.HTML概述在HTML語(yǔ)言的發(fā)展歷史中，大致經(jīng)歷了如下發(fā)展歷史。HTML4.01：1999年12月24日由W3C組織發(fā)布，是HTML文檔另一個(gè)重要的、廣泛使用的標(biāo)準(zhǔn)。XHTML1.0：發(fā)布于2000年1月26日，是W3C組織推薦標(biāo)準(zhǔn)，后來(lái)經(jīng)過(guò)修訂于2002年8月1重新發(fā)布。HTML5：2014年10月29日，W3C的HTML工作組正式發(fā)布了HTML5的正式推薦標(biāo)準(zhǔn)（W3CRecommendation）。61.2HTML的發(fā)展歷程1.HTML概述為了推動(dòng)Web標(biāo)準(zhǔn)化，一些公司聯(lián)合起來(lái)，成立了WebHypertextApplicationTechnologyWorkingGroup（WHATWG，Web超文本應(yīng)用技術(shù)工作組）組織。WHATWG致力于Web表單和應(yīng)用程序，而W3C（WorldWideWebConsortium，萬(wàn)維網(wǎng)聯(lián)盟）專(zhuān)注于XHTML2.0。在2006年，雙方?jīng)Q定進(jìn)行合作，來(lái)創(chuàng)建一個(gè)新版本的HTML，即HTML5。71.3HTML5的發(fā)展史1.HTML概述HTML5的第一份正式草案已于2008年1月22日公布。目前，HTML5仍處于不斷的完善之中。大部分瀏覽器已經(jīng)具備HTML5的支持。目前各種主流瀏覽器（如InternetExplorer、Chrome、Firefox、Opera、Safari等）都對(duì)HTML5有著良好的兼容性。2012年12月17日，萬(wàn)維網(wǎng)聯(lián)盟（W3C）正式宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的HTML5規(guī)范已經(jīng)正式定稿。根據(jù)W3C的發(fā)言稿稱(chēng)：“HTML5是開(kāi)放的Web網(wǎng)絡(luò)平臺(tái)的奠基石。”81.3HTML5的發(fā)展史1.HTML概述2013年5月6日，HTML5.1正式草案公布。該規(guī)范定義了第五次重大版本，第一次要修訂萬(wàn)維網(wǎng)的核心語(yǔ)言：超文本標(biāo)記語(yǔ)言（HTML）。在這個(gè)版本中，新功能不斷推出，以幫助Web應(yīng)用程序的作者，努力提高新元素的操作性。2014年10月29日，萬(wàn)維網(wǎng)聯(lián)盟宣布，經(jīng)過(guò)幾乎8年的艱辛努力，HTML5標(biāo)準(zhǔn)規(guī)范終于最終制定完成了，并已公開(kāi)發(fā)布。91.3HTML5的發(fā)展史1.HTML概述在2004年W3C成員內(nèi)部的一次研討會(huì)上，Opera公司的代表伊恩?希克森（IanHickson）提出了一個(gè)擴(kuò)展和改進(jìn)HTML的建議。他建議新任務(wù)組可以跟XHTML2并行，并在已有HTML的基礎(chǔ)上開(kāi)展工作，目標(biāo)是對(duì)HTML進(jìn)行擴(kuò)展。但是W3C并未通過(guò)該建議，之后Opera、Apple等瀏覽器廠商以及其他成員脫離了W3C，并成立了WHATWG（WebHypertextApplicationTechnologyWorkingGroup，Web超文本應(yīng)用技術(shù)工作組），致力于Web表單和應(yīng)用程序的研究。101.4HTML5的開(kāi)發(fā)團(tuán)隊(duì)1.HTML概述WHATWG在HTML的基礎(chǔ)上開(kāi)展工作，向其中添加新功能。該工作組成員大部分為瀏覽器廠商，因此可以保證實(shí)現(xiàn)各種新奇、可使用的創(chuàng)新。不斷提出的創(chuàng)新，逐一在瀏覽器中實(shí)現(xiàn)。WHATWG的工作效率很高，不久就初見(jiàn)成效。在此期間，W3C的XHTML2沒(méi)有什么實(shí)質(zhì)性的進(jìn)展。W3C在2007年組建了HTML5工作組。在這兩個(gè)工作組共同的努力下，確定了設(shè)計(jì)HTML5所要堅(jiān)持的原則，統(tǒng)一了HTML5語(yǔ)言規(guī)范，經(jīng)過(guò)8年的艱辛努力，于2014年10月29日由W3C公開(kāi)發(fā)布。111.4HTML5的開(kāi)發(fā)團(tuán)隊(duì)1.HTML概述HTML5的開(kāi)發(fā)是由三個(gè)重要組織負(fù)責(zé)的，具體如下。WHATWG：由來(lái)自Apple、Mozilla、Google、Opera等瀏覽器廠商組成，成立于2004年。WHATWG開(kāi)發(fā)HTML和Web應(yīng)用API，同時(shí)為各瀏覽器廠商以及其他有意向的組織提供開(kāi)放式合作。W3C：W3C管轄的HTML工作組，目前負(fù)責(zé)發(fā)布HTML5規(guī)范。IETF（InternetEngineeringTaskForce，因特網(wǎng)工程任務(wù)組）：該任務(wù)組下轄HTTP等負(fù)責(zé)Internet協(xié)議的團(tuán)隊(duì)。HTML5定義的一種新API（WebSocketAPI）依賴(lài)于新的WebSocket協(xié)議，IETF工作組負(fù)責(zé)開(kāi)發(fā)協(xié)議。121.4HTML5的開(kāi)發(fā)團(tuán)隊(duì)1.HTML概述W3School是W3C中國(guó)社區(qū)成員，致力于推廣W3C標(biāo)準(zhǔn)技術(shù)，是因特網(wǎng)上最大的Web開(kāi)發(fā)者資源，同時(shí)是完全免費(fèi)的、非盈利性的，并且在不斷升級(jí)和更新中。W3School包括全面的教程、完善的參考手冊(cè)以及龐大的代碼庫(kù)，可供HTML5學(xué)習(xí)者快速學(xué)習(xí)并了解HTML5的開(kāi)發(fā)及使用方法。131.5HTML5官方資源2.HTML5優(yōu)勢(shì)相對(duì)于之前的版本，HTML5有著以下優(yōu)勢(shì)。跨瀏覽器的兼容性增強(qiáng)交互功能更好的存儲(chǔ)技術(shù)用戶優(yōu)先更簡(jiǎn)單的代碼通用訪問(wèn)142.1優(yōu)勢(shì)2.HTML5優(yōu)勢(shì)跨瀏覽器的兼容性在一個(gè)瀏覽器中可以正常運(yùn)行的HTML+CSS+JavaScript頁(yè)面，換一個(gè)瀏覽器之后，可能會(huì)出現(xiàn)很多問(wèn)題，比如頁(yè)面布局混亂、JavaScript運(yùn)行出錯(cuò)等等。因此跨瀏覽器兼容就顯得尤為重要了。目前各種主流瀏覽器（如InternetExplorer、Chrome、Firefox、Opera、Safari等）都對(duì)HTML5有著良好的兼容性。在HTML5以前，各種瀏覽器對(duì)HTML、JavaScript的支持很不統(tǒng)一，這樣就造成了同一個(gè)頁(yè)面在不同瀏覽器中的表現(xiàn)不一致。HTML5的目標(biāo)是詳細(xì)分析各瀏覽器所具有的功能，并為此基礎(chǔ)制定一個(gè)通用規(guī)范，并要求各瀏覽器能支持這通用標(biāo)準(zhǔn)。152.1優(yōu)勢(shì)2.HTML5優(yōu)勢(shì)增強(qiáng)交互功能在傳統(tǒng)的Web應(yīng)用中，很多功能只能通過(guò)插件或者復(fù)雜程序來(lái)實(shí)現(xiàn)。在Web中使用插件的方式雖然很常見(jiàn)，但是存在很多問(wèn)題：插件安裝可能失敗。插件可以被禁用或者屏蔽（如Flash插件）。插件自身會(huì)成為被攻擊的對(duì)象。插件不容易與HTML文檔的其他部分集成，因?yàn)榇嬖诓寮吔纭⒓舨煤屯该鞫葐?wèn)題。162.1優(yōu)勢(shì)2.HTML5優(yōu)勢(shì)增強(qiáng)交互功能插件使用的是自帶的渲染模型，與普通Web頁(yè)面所使用的不一樣，所以當(dāng)彈出來(lái)的或者其他的可視化元素與插件重疊時(shí)，會(huì)發(fā)生錯(cuò)誤。HTML5很好地解決了這些問(wèn)題，它提供了一些不依托于插件的解決方案，如不使用Flash插件的視頻播放和音頻播放。以HTML5中的canvas元素為例，有很多非常底層的事情以前是沒(méi)辦法做到的（比如在HTML4的頁(yè)面中就很難畫(huà)出對(duì)角線），而有了canvas就可以很容易地實(shí)現(xiàn)了。172.1優(yōu)勢(shì)2.HTML5優(yōu)勢(shì)更好的存儲(chǔ)技術(shù)HTML5中提供了本地存儲(chǔ)功能。其中將比較老的技術(shù)cookie和客戶端數(shù)據(jù)庫(kù)融合。但是它比cookie更好用，因?yàn)橹С侄鄠€(gè)存儲(chǔ)，HTML5存儲(chǔ)技術(shù)擁有更好的安全和性能，即使瀏覽器關(guān)閉后也可以保存并且所有主流瀏覽器都支持。本地存儲(chǔ)對(duì)于Web前端開(kāi)發(fā)的改變可以說(shuō)是革命性的，它能夠保存數(shù)據(jù)到用戶的瀏覽器中，這就意味者可以通過(guò)此功能創(chuàng)建一些應(yīng)用特性，例如：保存用戶信息、緩存數(shù)據(jù)、加載用戶上一次的應(yīng)用狀態(tài)等。182.1優(yōu)勢(shì)2.HTML5優(yōu)勢(shì)用戶優(yōu)先HTML5規(guī)范是基于用戶優(yōu)先準(zhǔn)則編寫(xiě)的，其宗旨是“用戶即上帝”，這意味著在遇到無(wú)法解決的沖突時(shí)，規(guī)范會(huì)把用戶放到第一位，其次是頁(yè)面作者，再者是實(shí)現(xiàn)者（瀏覽器），接著是規(guī)范制定者，最后才考慮理論的純粹性。因此，HTML5的絕大部分是非常實(shí)用的。例如，下面的幾種代碼寫(xiě)法在HTML5中都能被識(shí)別。192.1優(yōu)勢(shì)2.HTML5優(yōu)勢(shì)更簡(jiǎn)單的代碼HTML5要的就是簡(jiǎn)單、避免不必要復(fù)雜性。HTML5的口號(hào)是“簡(jiǎn)單至上，盡可能簡(jiǎn)化”，因此，HTML做了如下改進(jìn)。以瀏覽器原生能力替代復(fù)雜的JavaScript代碼。新的簡(jiǎn)化的DOCTYPE。新的簡(jiǎn)化的字符集聲明。簡(jiǎn)單而強(qiáng)大的HTML5API。202.1優(yōu)勢(shì)2.HTML5優(yōu)勢(shì)通用訪問(wèn)通用訪問(wèn)遠(yuǎn)側(cè)分為三個(gè)概念進(jìn)行描述：可訪問(wèn)性：出于對(duì)殘障用戶的考慮，HTML5與WAI（WebAccessibilityInitiative，Web可訪問(wèn)性倡議）和ARIA（AccessibleRichInternetApplication，可訪問(wèn)的富Internet應(yīng)用）做到了緊密結(jié)合，WAI-ARIA中以屏幕閱讀器為基礎(chǔ)的元素已經(jīng)被添加到HTML中。媒體中立：如果可能得話，HTML5的功能在所有不同設(shè)備和平臺(tái)上應(yīng)該都能正常運(yùn)行。支持所有語(yǔ)種：例如，新的<ruby>元素支持，東南亞頁(yè)面排版中會(huì)用到的Ruby注釋為頁(yè)面中的內(nèi)容添加注釋?zhuān)缙匆簟?12.1優(yōu)勢(shì)2.HTML5優(yōu)勢(shì)HTML5的新功能有：新的DOCTYPE和字符集語(yǔ)義化標(biāo)記更靈活的選擇符JavaScript的日志和調(diào)試DOMLevel3222.2新功能2.HTML5優(yōu)勢(shì)新的DOCTYPE和字符集根據(jù)HTML5設(shè)計(jì)準(zhǔn)則，Web頁(yè)面的DOCTYPE被極大地簡(jiǎn)化了。HTML4中DOCTYPE代碼如下所示。HTML5中DOCTYPE代碼如下所示。HTML5之前的字符集聲明如下所示。HTML5中的字符集聲明如下所示。232.2新功能2.HTML5優(yōu)勢(shì)語(yǔ)義化標(biāo)記在HTML5出來(lái)之前，Web前端開(kāi)發(fā)者使用div來(lái)表示頁(yè)面章節(jié)，但div沒(méi)有實(shí)際意義，即使通過(guò)添加class和id的方式形容這塊內(nèi)容的意義，標(biāo)簽本身卻沒(méi)有含義，僅僅是提供給瀏覽器的指令，只是定義一個(gè)網(wǎng)頁(yè)的某些部分。HTML5為頁(yè)面章節(jié)定義了含義，也就是語(yǔ)義化元素。雖然對(duì)Web前端開(kāi)發(fā)者來(lái)說(shuō)這些語(yǔ)義化元素和普通的div元素沒(méi)有任何區(qū)別，但卻為瀏覽器提供了語(yǔ)義的支持，使得瀏覽器對(duì)HTML的解析更智能快捷。242.2新功能2.HTML5優(yōu)勢(shì)語(yǔ)義化標(biāo)記HTML5引入了一組新的片段類(lèi)元素，在目前主流的瀏覽器中已經(jīng)支持。252.2新功能2.HTML5優(yōu)勢(shì)更靈活的選擇符除了語(yǔ)義化元素外，HTML5還引入了一種用于查找頁(yè)面DOM元素的快捷方式。在HTML5出現(xiàn)之前，用來(lái)在頁(yè)面中查找特定元素的函數(shù)如表所示。262.2新功能2.HTML5優(yōu)勢(shì)更靈活的選擇符新的SelectorsAPI發(fā)布之后，可以用更精確的方式來(lái)指定希望獲取的元素，而不必再用標(biāo)準(zhǔn)DOM的方式循環(huán)遍歷。SelectorAPI與CSS中使用的選擇規(guī)則一樣，通過(guò)它可以查找頁(yè)面中的一個(gè)或多個(gè)元素。例如，CSS可以基于嵌套、兄弟節(jié)點(diǎn)和子模式進(jìn)行元素選擇，CSS最新版本添加了更多對(duì)偽類(lèi)的支持，還支持對(duì)屬性和層次的隨意組合疊加。能按照CSS規(guī)則來(lái)選取DOM的元素的函數(shù)如表所示。272.2新功能2.HTML5優(yōu)勢(shì)更靈活的選擇符SelectorsAPI函數(shù)可以同時(shí)指定多個(gè)選擇規(guī)則，例如：對(duì)于querySelector()來(lái)說(shuō)，選擇的是滿足規(guī)則中任意條件的第一個(gè)元素。對(duì)于querySelectorAll()來(lái)說(shuō)，頁(yè)面中的元素只要滿足規(guī)則中的任何一個(gè)條件，都會(huì)被返回。多條規(guī)則是用逗號(hào)分隔的。282.2新功能2.HTML5優(yōu)勢(shì)JavaScript日志和調(diào)試JavaScript日志和瀏覽器內(nèi)調(diào)試從技術(shù)上講不屬于HTML5的功能，但是過(guò)去幾年里，相關(guān)工具的發(fā)展出現(xiàn)了質(zhì)的飛躍。第一個(gè)可以用來(lái)分析Web頁(yè)面及其所運(yùn)行腳本的強(qiáng)大工具是一款名為Firebug的Firefox插件。目前，大部分主流瀏覽器已經(jīng)具有相同調(diào)試功能，例如Safari的WebInspector、Google的Chrome開(kāi)發(fā)者工具（DeveloperTools）、IE的開(kāi)發(fā)者工具（DeveloperTools），以及Opera的Dragonfly等。很多調(diào)試工具支持設(shè)置斷點(diǎn)來(lái)暫停代碼執(zhí)行、分析程序狀態(tài)以及查看變量的當(dāng)前值。console.logAPI已成為JavaScript開(kāi)發(fā)人員記錄日志的事實(shí)標(biāo)準(zhǔn)。為了便于開(kāi)發(fā)人員查看記錄到控制臺(tái)的信息，很多瀏覽器提供了分欄窗格的視圖。292.2新功能2.HTML5優(yōu)勢(shì)DOMLevel3事件處理是目前Web應(yīng)用開(kāi)發(fā)中最為復(fù)雜的內(nèi)容之一。絕大數(shù)瀏覽器都支持處理事件和元素的標(biāo)準(zhǔn)API。早期IE實(shí)現(xiàn)的是與最終標(biāo)準(zhǔn)不同的事件模型，IE9之后版本也逐步支持DOMLevel2和DOMLevel3的特性。在所有支持HTML5的瀏覽器中，可以使用相同的代碼來(lái)實(shí)現(xiàn)DOM操作和事件處理，包括非常重要的addEventListener()和dispatchEvent()方法。302.2新功能3.HTML5新特征與HTML4相比，HTML5在語(yǔ)法上發(fā)生了很大的變化。但是，HTML5中的語(yǔ)法變化，與其他開(kāi)發(fā)語(yǔ)言中的語(yǔ)法變化在根本意義上有所不同。最大的問(wèn)題在于在HTML5之前幾乎沒(méi)有符合標(biāo)準(zhǔn)規(guī)范的Web瀏覽器。HTML的語(yǔ)法是在SGML（StandardGeneralizedMarkupLanguage）語(yǔ)言的基礎(chǔ)上建立起來(lái)的。SGML語(yǔ)法非常復(fù)雜，要開(kāi)發(fā)能夠解析SGML語(yǔ)法的程序也很不容易，很多瀏覽器都不包含SGML的分析器。雖然HTML基本上遵循SGML的語(yǔ)法，但是對(duì)于HTML的執(zhí)行在各瀏覽器之間并沒(méi)有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)。313.1語(yǔ)法的改變3.HTML5新特征在這種情況下，各瀏覽器之間的兼容性和操作性在很大程度上取決于網(wǎng)站或網(wǎng)絡(luò)應(yīng)用程序的開(kāi)發(fā)者們?cè)陂_(kāi)發(fā)上所做的共同努力，而瀏覽器本身始終是存在缺陷的。在HTML5的制定中提高Web瀏覽器之間的兼容性是一個(gè)很大的目標(biāo)，為了確保兼容性，就要有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)。在HTML5中，圍繞著Web標(biāo)準(zhǔn)，重新定義了一套在現(xiàn)有HTML基礎(chǔ)上修改而來(lái)的語(yǔ)法，使運(yùn)行在各瀏覽器時(shí)都能夠符合這個(gè)通用標(biāo)準(zhǔn)。因?yàn)镠TML5語(yǔ)法解析的算法也都是提供了詳細(xì)的記載，所以各Web瀏覽器的供應(yīng)商們可以把HTML5分析器集中封裝在瀏覽器中。323.1語(yǔ)法的改變3.HTML5新特征在HTML5中，新增加了很多元素，同時(shí)也移除了一些舊元素。333.2元素3.HTML5新特征新增的結(jié)構(gòu)元素：section元素section元素表示頁(yè)面中的一個(gè)內(nèi)容區(qū)塊，比如章節(jié)、頁(yè)眉、頁(yè)腳或者頁(yè)面中的其他部分。它可以與h1、h2、h3、h4、h5、h6等元素結(jié)合起來(lái)使用，標(biāo)示文檔結(jié)構(gòu)。article元素article元素表示頁(yè)面中的一塊與上下文不相關(guān)的獨(dú)立內(nèi)容，如博客中一篇文章。aside元素aside元素表示article元素的內(nèi)容之外的。與article元素的內(nèi)容相關(guān)的輔助信息。343.2元素3.HTML5新特征新增的結(jié)構(gòu)元素：header元素header元素表示頁(yè)面中一個(gè)內(nèi)容區(qū)域或整個(gè)頁(yè)面的標(biāo)題。hgroup元素hgroup元素用于對(duì)整個(gè)頁(yè)面或者頁(yè)面中一個(gè)內(nèi)容區(qū)塊的標(biāo)題進(jìn)行組合。footer元素footer元素表示整個(gè)頁(yè)面或頁(yè)面中一個(gè)內(nèi)容區(qū)塊的腳注。一般來(lái)說(shuō)，它會(huì)包含創(chuàng)作者的姓名、創(chuàng)作日期以及創(chuàng)作者聯(lián)系信息。nav元素nav元素表示頁(yè)面中導(dǎo)航鏈接的部分。353.2元素3.HTML5新特征新增的結(jié)構(gòu)元素：figure元素figure元素表示一段獨(dú)立的流內(nèi)容，一般表示文檔主題流內(nèi)容中的一個(gè)獨(dú)立單元。使用figcaption元素為figure元素組添加標(biāo)題。363.2元素3.HTML5新特征新增的其他元素：video元素video元素定義視頻，比如電影片段或者其他視頻流。audio元素audio元素定義音頻，比如音樂(lè)或者其他音頻流。embed元素embed元素用來(lái)插入各種多媒體，格式可以是Midi、Wav、AIFF、AU、MP3等。373.2元素3.HTML5新特征新增的其他元素：mark元素mark元素主要用來(lái)在視覺(jué)上向用戶呈現(xiàn)需要突出顯示或高亮顯示的文字。mark元素的一個(gè)比較典型的應(yīng)用就是在搜索結(jié)果中向用戶高亮顯示搜索關(guān)鍵詞。time元素time元素表示日期或時(shí)間，也可以同時(shí)表示兩者。ruby元素ruby元素表示ruby注釋(中文注音或字符)。383.2元素3.HTML5新特征新增的其他元素：rt元素rt元素表示字符〔中文注音或字符)的解釋或發(fā)音。rp元素rp元素在ruby注釋中使用，以定義不支持ruby素的瀏覽器所顯示的內(nèi)容。wbr元素wbr元素表示軟換行。menu元素menu元素表示菜單列表，當(dāng)希望列出表單控件時(shí)使用該標(biāo)簽。393.2元素3.HTML5新特征新增的其他元素：canvas元素canvas元素表示圖形，比如圖表和其他圖像。這個(gè)元素本身沒(méi)有行為，僅提供一塊畫(huà)布，但它把一個(gè)繪圖API展現(xiàn)給客戶端JavaScript，以使腳本能夠把想繪制的東西繪制到這塊畫(huà)布上。command元素command元素表示命令按鈕，比如單選按鈕、復(fù)選框或按鈕。details元素details元素表示用戶要求得到并且可以得到的細(xì)節(jié)信息。它可以與summary元素配合使用。summary元素提供標(biāo)題或圖例。標(biāo)題是可見(jiàn)的，用戶點(diǎn)擊標(biāo)題時(shí)，會(huì)顯示出細(xì)節(jié)信息。summary元素應(yīng)該是details元素的第一個(gè)子元素。403.2元素3.HTML5新特征新增的其他元素：datagrid元素datagrid元素表示可選數(shù)據(jù)的列表，與input元素配合便用，可以制作出輸入值的下拉列表。keygen元素keygen元素表示生成秘鑰。output元素output元素表示不同類(lèi)型的輸出，比如腳本的輸出。source元素source元素為媒介元素(比如<video>和<audio)定義媒介資源。413.2元素3.HTML5新特征新增的input類(lèi)型：email類(lèi)型email類(lèi)型表示必須輸入E-mail地址的文本輸入框。url類(lèi)型url類(lèi)型表示必須輸入U(xiǎn)Rl地址的文本輸入框。number類(lèi)型number類(lèi)型表示必須輸入數(shù)值的文本輸入框。range類(lèi)型range類(lèi)型表示必須輸入一定范圍內(nèi)數(shù)字值的文本輸入框。423.2元素3.HTML5新特征新增的input類(lèi)型：DatePickers類(lèi)型HTML5擁有多個(gè)可供選取日期和時(shí)間的新型輸入文本框：date：選取日、月、年。month：選取月、年。week：選取周和年。time：選取時(shí)間(小時(shí)和分鐘)。datetime：選取時(shí)間、日，月、年(PTT時(shí)間)。datetime-local：選取時(shí)間、日、月、年(本地時(shí)間)。433.2元素3.HTML5新特征新增的input類(lèi)型：search類(lèi)型search類(lèi)型用于搜索域，search域顯示為常規(guī)的文本域。color類(lèi)型color類(lèi)型用于規(guī)定顏色，該輸入類(lèi)型允許您從拾色器中選取顏色。443.2元素3.HTML5新特征HTML5中，屬性方面也有一些改變。453.3屬性3.HTML5新特征新增的表單相關(guān)屬性：可以對(duì)input(type=text)、select、textarea元素指定autofocus屬性。它以指定屬性的方式讓元素在畫(huà)面打開(kāi)時(shí)自動(dòng)獲得焦點(diǎn)?？梢詫?duì)input元素(type=text)與textarea元素指定placeholder屬性，它會(huì)對(duì)用戶的輸入進(jìn)行提示，提示用戶可以輸人的內(nèi)容?？梢詫?duì)input、output、select、textarea、button與fieldset指定form屬性，聲明它屬于哪個(gè)表單，然后將其放置在頁(yè)面上任何位置，而不是表單之內(nèi)。可以對(duì)input元素(type=text)與textarea元素指定required屬性。該屬性表示在用戶提交的時(shí)候進(jìn)行檢查，檢查該元素內(nèi)一定要有輸入內(nèi)容。463.3屬性3.HTML5新特征新增的表單相關(guān)屬性：為input元素增加了幾個(gè)新的屬性：autocomplete、min、max、multiple、pattern與step。同時(shí)還有新的list元素與datalist元素配合使用，datalist元素與autocomplete屬性配合使用。multiple屬性允許在上傳文件時(shí)一次上傳多個(gè)文件。為input元素與button元素增加了新屬性formaciton、formenctype、formmethod、formnovalidate與formtarget，可以重載form元素的action、enctype、method、novalidate與target屬性。為fieldset元素增加了disabled屬性，可以把它的子元素設(shè)為disabled狀態(tài)。為input元素、button元素、form元素增加了novalidate屬性，該屬性可以取消提交時(shí)進(jìn)行的有關(guān)檢查，表單可以被無(wú)條件地提交。473.3屬性3.HTML5新特征新增鏈接相關(guān)屬性：為a與area元素增加了media屬性，該屬性規(guī)定目標(biāo)URL是以什么類(lèi)型的媒介/設(shè)備進(jìn)行優(yōu)化的，只能在href屬性存在時(shí)使用。為area元素增加了hreflang屬性與rel屬性，以保持與a元素、link元素的一致。為link元素增加了新屬性size，該屬性可以與icon元素結(jié)合使用，該屬性指定關(guān)聯(lián)圖標(biāo)的大小。為base元素增加了target屬性，主要目的是保持與a元素的一致性。483.3屬性3.HTML5新特征新增其他屬性：為ol元素增加屬性reversed，它指定列表倒序顯示。為meta元素增加charset屬性，因?yàn)檫@個(gè)屬性已經(jīng)被廣泛支持了，并且可以使文檔的字符編碼的指定變得更加的友好。為menu元素增加了兩個(gè)新的屬性：type與label。label屬性為菜單定義一個(gè)可見(jiàn)的標(biāo)簽，type屬性讓菜單可以以上下文菜單、工具條與列表菜單三種形式展示。為style元素增加scoped屬性，用來(lái)規(guī)定樣式作用范圍，譬如只對(duì)頁(yè)面上某個(gè)樹(shù)起作用。493.3屬性3.HTML5新特征新增其他屬性：為script元素增加async屬性，定義腳本是否異步執(zhí)行。為html元素增加屬性manifest，開(kāi)發(fā)離線Web應(yīng)用程序時(shí)與API結(jié)合使用，定義一個(gè)URL，在URL上描述文檔的緩存信息。為iframe元素增加三個(gè)屬性sandbox、seamless與srcdoc，用來(lái)提高頁(yè)面安全性，防止不信任的Web頁(yè)面執(zhí)行某些操作。503.3屬性3.HTML5新特征移除的舊屬性：513.3屬性3.HTML5新特征移除的舊屬性：523.3屬性3.HTML5新特征移除的舊屬性：533.3屬性3.HTML5新特征移除的舊屬性：543.3屬性3