本節書摘來自異步社群《html5實戰》一書中的第1章，第1.1節，作者： 【美】rob crowther , joe lennon , ash blue , grey wanish 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
本章主要内容
html5的基本知識
新語義标記及媒體特性
新的javascript api
緊密相關的web規範
html5是現在web開發的最熱門主題之一，這是有充分理由的。這不僅因為它是最新的web标記語言，還因為它制定了web應用開發的一整套新标準。上一個版本的html語言（以及它那以嚴格著稱的基于xml的兄弟：xhtml）主要把html限定為一種用于頁面文檔的标記性語言。html5則是第一個将web作為應用開發平台的html語言。
html5定義了一系列新元素，用以幫助開發者建立富網際網路應用，另外還提供了一些标準 javascript api，用來在浏覽器内實作類原生應用。< video>元素就是 html5 的新元素中的一員，有了它，我們就可以在浏覽器中播放視訊，而無需安裝任何額外插件。另外，html5還提供了media element interface，能讓我們借助javascript來控制視訊播放。它還具有開發遊戲、建構移動應用等諸多功能。
本章主要學習内容
html5新引入的傑出特性，如何将它們立即應用到web應用中。
對于還在使用舊版或不相容浏覽器的使用者，如何提供回退或替代方案。
使用可通路的富網際網路應用（accessible rich internet applications，aria）角色和微資料來進一步增強html頁面的語義。
html5自身所用到的大量javascript api，以及一些緊密相關的api規範。
通過本章的學習，你會對html5所能提供的功能範圍有更為清晰的認識，并将其用于自己的應用中。
文檔（html4）與應用（html5）
web起初隻有文檔。1993年，mosaic浏覽器添加了表單，但隻有資料輸入，所有的應用邏輯還隻能位于伺服器端。1995年出現了javascript技術，進而使得實作浏覽器應用在理論上成為可能，但其可行性仍不高，直到1999年出現了xmlhttprequest對象。html的一個重要版本是4.01，但也隻是一個推薦标準。是以并不奇怪，4.01規範基本上還着重于如何使用标記來描述文檔，也就是我們現在通常所說的語義标記。
html5姗姗來遲，這期間網際網路已經發生了巨變。如下文所示，在語義标記方面，html5有很多改進。然而，相比起html4來說，html5最大的改進和差異在于利用javascript建構浏覽器應用的能力。基于此，而且也由于本書内容的重點在于介紹html5的新特性，我們更主要介紹的是javascript，而非标記語言。當然，我們會涉及到标記語言，但如你所知，javascript才是html5真正的主角。
下面，我們先從如何建立html5文檔開始。
要想學習html5的新技術，最好直接上手進行實踐的探索。本節不僅會概要介紹各種新特性，還會教你順利地将現有的應用利用html5約定進行更新，即使使用者沒有最新最強大的浏覽器，他們的使用者體驗也不會變差。
本節主要學習内容
如何建立基本的html5文檔結構。
如何使用新的語義元素來布局頁面。
如何處理無法識别新元素的舊版本ie浏覽器。
能立刻用html5實作的新表單功能。
如何使用新的ui元素，例如進度條與可折疊部分。
我們先從html5文檔的基本結構出發，假如你不喜歡這些基礎知識，可以快速閱讀它們。到了1.2節，就已經略過了語義标記，進而進入到html5的生态系統中。
1.1.1 html5文檔的基本結構
與采用舊版本的html語言相比，html5在建構文檔的方式上别無二緻：文檔都以< !doctype >聲明開頭，整個html文檔都要包含在< html >和 html >這兩個互相比對的标簽内。在這些标簽間，還有一個< head >部分，用于存放< meta >資訊及其他一些非内容的項目（如樣式表），以及一個存放頁面内容的< body >部分。如果你之前寫過html文檔或應用，就會很熟悉這些概念，但是你應該留意html5的一些細微差别，本節就将介紹這些差别：
html5的doctype聲明的格式；
如何使用開放的元素；
在部分中，如何使用各種元素的精簡版本。
下面，我們通過hello.html文檔來詳細讨論一下具體差別。代碼清單1-1是用html5寫的一個“hello, world!”程式。
基本的頁面結構就是這樣，接着，讓我們來看看如何利用新的語義元素來建構一個簡單的部落格文章頁面。
html與xml
對于之前的html規範，我們既可以認為它們是html，也可以認為是xhtml。html标記設計得非常寬松，而xhtml則是基于xml的，并具有一種很嚴格的解析模型。xhtml要求所有元素都具有結束标簽（如不能隻有開始标簽< br >而沒有結束标簽< br />），另外它還要求所有的标簽與屬性都必須小寫。一個小錯誤就能導緻整個頁面的加載失敗。正是由于這種苛刻的錯誤處理機制，多數網站根本無法正确實作xhtml。它們更傾向于使用xhtml的文法的表單，但卻利用text/html内容類型來發送頁面，将xml标記用html來解析。
html5将html與xml的各種規範融合為一種規範，也就是說，規範提供了一種詞彙表，既可以用html，也可以用xhtml來表達。xhtml序列化必須要帶上的xml内容類型（如aplication/xml+xhtml）一齊發送，另外，它還需要遵從xml的解析原則，帶上xmlns聲明、閉合标簽等内容。在本章的下載下傳代碼中，還有着代碼清單1-1的另外兩個版本，展示了用正确及不正确的xhtml标記書寫的同樣的标記：hello-invalid.xhtml，在xml文檔中使用html文法；hello-valid.xhtml，将标記都改成了正确的xml。
1.1.2 使用新的語義元素
如果此前你了解過html5内容，那麼有可能聽說過大量關于新語義元素。它們具有十分重要的作用，尤其是能讓搜尋引擎或輔助技術（如螢幕閱讀器）更好地了解頁面，使用起來也比你所熟悉并喜愛的html4元素要更容易。
但不要是以而特别興奮。如果你希望這些新元素能夠讓頁面變得絢麗，那你可能會有些失望了。就功能而言，這些新的元素相當于一系列
元素。預設情況下，它們的作用就像是塊元素一樣，并且可以使用css進行樣式化。它們的重要性來自于它們所有的标準語義。
考慮一個常見的部落格文章頁面，web頁面包含一系列區塊（section）。首先，你需要有站點的标題和導航連結，或者是一些側邊欄導航連結，一個主要的内容區域，帶有更深一層導航連結的頁腳，或是一些版權聲明和法律聲明連結。代碼清單 1-2 展示了如何用html4或xhtml來書寫該部落格文章的标記。
https://yqfile.alicdn.com/28687a733b1a9a4f08f1008b134417f7ee168b88.png" >
之前的代碼沒有錯，在html5裡仍然有效，你完全可以繼續使用
元素再配上你喜歡的語義類名。但從語義的角度來看，這種方法卻暴露出幾個問題。
使用舊式标準，使用已命名的類來區分部落格文章頁面内的各個區域。這貌似沒有問題，但類的命名規範完全取決于作者。一個人可能取“header”，另一個人可能取“heading”，主要内容部分或許叫做“main”，而另一個人或許把它取作“body”或“article”。
有些人可能更喜歡使用id來取代類，他們可能會把id定義為“header”，而另一些人可能會把類名定義為“header”。
總之，搜尋引擎或其他由計算機控制的應用程式無法可靠地确認每一區塊所呈現的内容。
這個問題需要利用新的語義元素來解決。現在，我們與其使用類和id來定義各種區塊（标題、導航連結、頁腳），不如采用幾種不同的html元素來定義，如代碼清單1-3所示。把這個代碼插入到hello.html檔案的
标簽之中。
另外兩個重要的html5元素：< aside >與< mark >
有必要再介紹一下另兩個以後會常用的html5元素：< aside >與< mark >。你可以用元素來定義一個在頁面中獨立于主要内容區域的部分。在傳統的書籍或雜志中，這部分内容通常表現為邊欄，包含同一主題的資訊，但跟頁面上的主要文章又不盡相同。如在一個部落格内，可能會在文章旁邊放上廣告，這些廣告内容就可以放在元素中。在web應用主要部分的上方，還可以用< aside >來實作彈出式廣告或浮動視窗。
< mark >元素可以用來展示文檔中應被标記或者說突出顯示的文本部分，通常用來高亮顯示文檔中的搜尋詞。
有了新的語義元素，頁面标記結構不僅清晰易讀，搜尋引擎機器人和輔助技術也能輕易了解頁面。說到輔助技術，就涉及到了下面要談到的一個主要主題：aria角色。
1.1.3 使用aria角色來增強可通路性
在建構web應用時，你必須確定所有使用者都能通路，這其中就包括那些需要輔助技術（如螢幕閱讀器）才能通路的使用者。要想確定頁面被通路，就應該慎重考慮标記語義的問題。單純使用html标記就能讓這項任務變得簡單起來，而且現在html5的新元素還進一步增強了語義。但是，在建立web應用時，迎合輔助技術卻變得更加困難。這是因為，在現今的web應用中，用于動态修改頁面的javascript代碼量不斷增加，進而使得單純通過良好的标記來實作優秀可通路性變得愈發困難。為了解決這種問題，人們制定了wai（web accessibility initiative，web可通路性倡議）和aria标準及規範。
wai-aria規範旨在通過對html文檔作者提供的可通路性資訊加以擴充來改善web應用。aria角色、關系、狀态及屬性，可為web應用定義出能夠被螢幕閱讀器這樣的輔助技術所了解的工作方式。例如，建構了一個用于文本輸入的下拉清單和一個無序清單，可以将aria角色combobox添加到< input >元素中，進而使其可以正确地在使用者裝置上顯示出下拉清單框（combobox）。代碼清單1-4展示了直接取自wai-aria 1.0規範文檔的一個範例。
html5規範現已明确聲明，可以按照aria規範所描述的那樣，在html元素上使用aria的 role 和 aria-* 屬性，而在html4中，是不可以這樣做的。html5還為特定html 元素定義了 aria 預設角色。如暗示了複選框的< input
元素的角色是checkbox，是以不需要像其他元素一樣顯式地使用role或aria-*屬性了。
關于預設、暗示的aria語義的完整清單以及具體元素語義的修改限制，可以參看html5規範的wai-aria部分。
1.1.4 ie6～ie8的支援情況
html5元素與舊浏覽器的相容性可能是你比較關心的問題，這也理所當然。html的每一版都會引入新的元素，html5也不例外。多數現代的浏覽器都能呈現這些元素，即使對于那些并不特别支援這些元素的版本也是如此。多數浏覽器在處理未能識别的元素時，一般會将其渲染為通常的内聯元素。然後，隻需将其設定為block with css，讓它們按照css來呈現即可。遺憾的是，ie例外。在ie9之前，未能識别的元素雖然能夠渲染，但卻不能按照css來呈現。可想而知，這就導緻在生産應用的開發中很難利用新的html5元素，因為使用者有可能還在使用ie6、ie7或ie8。
在ie中渲染新的元素屬性
幸好，這個問題補救起來也很簡單。如果想在頁面上應用< header >元素，并使用css樣式，可将下列代碼段放入頁面的< head> 部分内。這将強制ie在标簽中使用css樣式，即使所使用的ie本身并不支援某個元素。
需要為每個希望在頁面中使用的html5元素都執行一個作用相等的javascript語句。這樣做會導緻從ie6到ie8都能正确地渲染格式，但在試圖列印頁面時，問題依然存在。
如何在ie列印頁面上正确地渲染新元素
一種叫做ie print protector的解決方案可以修補這個列印問題。但與其重複勞動，還是推薦使用html shiv腳本來解決這個問題。remy sharp最先開發出的這個最流行的html shiv腳本，随後很多人又對其加以不斷地改進。
警告 html5 shiv解決方案需要使用javascript。如果不想使用javascript，可以用基于xml的html5同胞兄弟——xhtml5。
html5還有哪些功能可以對現存應用加以大幅改善的呢？利用一些整合的簡單功能，讓表單變得有趣起來，怎麼樣？雖然表單在頁面上很常見，但有了html5，它們就變得不再那麼蒼白乏味了。
1.1.5 html5所引入的新表單特性
雖然web表單極其簡陋，幾乎沒人喜歡，但web之是以開始成為應用開發平台，關鍵因素之一即是web表單。正是由于關注web應用，是以html5在web表單上做出了很大的改進，所有功能現在就可以用到舊浏覽器上，無需為相容性操心。
使用新的表單輸入類型，改善資料輸入語義
文本字段的使用範疇和頻率早已遠遠超出了它的基本功能。就像在html4中
元素也被用來包含所有的塊元素一樣，文本字段也被用來處理所有的文本輸入。html5提供了一些新的、向後相容的類型，比簡單的文本字段的功能更為強大，表 1-1 列出了html5中所提供的新輸入類型。
現在，即使舊版本的浏覽器并不了解某些輸入類型，這些新型web輸入類型都能夠立刻使用，但需要将其回退到标準輸入類型再加以使用。一些新輸入類型還允許浏覽器為某些指定類型的表單字段提供标準的小部件。圖1-1展示了一些新的小部件範例。
第2章介紹如何通過modernizr（html5的一個特性偵測腳本）來判斷浏覽器是否支援指定的輸入類型，并在需要時提供能夠回退使用的javascript部件。
改變字段行為的新屬性
除了引入新的表單字段類型，html5還引入了10種通用屬性，如表1-2所示。利用它們，就可以改變指定字段的行為。拿其中的placeholder屬性來說，它可以讓文本字段在沒有輸入之前，顯示一些預設文本，如圖1-2所示。
表1-2展示了html5新引入的一些輸入屬性。到了第2章，再來介紹這些屬性與相關輸入類型的應用方式。
https://yqfile.alicdn.com/32dc742cff207ebbc84d47151ec17051b7fc355f.png" >
能夠執行用戶端驗證的新屬性
無需使用javascript，有些屬性就可以使浏覽器執行用戶端驗證。例如，required屬性明确要求字段必須被填充，否則浏覽器就會報錯。pattern屬性定義驗證輸入數值的正規表達式。max和min屬性則限制了number和date字段類型的最大值及最小值。
另外，浏覽器對一些新的輸入類型會執行一些驗證，當使用者輸入的數值格式不正确時，浏覽器就會警告使用者。例如使用者在email輸入字段中輸入了錯誤的電子郵件位址，浏覽器就會給出一個出錯提示，進而防止表單被送出至伺服器端。
警告 不能單純依靠用戶端驗證。無論是html5新增的浏覽器原生驗證，還是javascript驗證代碼，它們都不可靠。由于可以很容易繞過用戶端驗證，伺服器端驗證輸入是不可或缺的。用戶端驗證主要應該用在改善使用者體驗上，并不能用作保障應用絕對安全的手段。
第2章将更為詳細地介紹新增輸入類型及屬性。先來介紹一些html5新增的其他元素，它們可以輕松快速地與現有應用進行完美整合。
1.1.6 進度條、度量器和可折疊内容
html5定義了很多新穎的用于向使用者傳遞資訊的元素。這其中就包括很多開發者此前隻能靠第三方的javascript庫來實作的小部件，如進度條、度量器和可折疊内容等。
使用進度條來顯示完成進度
利用< progress >屬性，可以向使用者呈現确定（或不确定）的進度條。确定的進度條有指定數值，進度條的進度由該值确定，是以很适用于顯示檔案上傳進度——随着檔案上傳量，動态地改變進度條數值。不确定進度條則沒有明确的數值，進度條會完全充滿，在不确定操作進度的情況下，應用這種進度條，使用者就能知道應用正在加載。這兩種進度條的具體情況如圖1-3所示。
圖1-3 左邊的進度條是一種已确定的進度條。在圖中這種情況下，進度條的值為50%，
是以圖中的進度條隻走到了一半。右手進度條是不确定的進度條，沒有值，
它通常顯示為一個有着動畫的完整的進度條，旨在表明
正在加載，但卻不知道整體的進度
要想建立圖1-3所示的進度條，隻需下面這兩行代碼：
使用度量器來顯示已知範圍内的使用者資料
< meter >元素與< progress >元素較為類似。< progress >主要用于展示任務的完成度（百分比），而< meter >則能展示在已知的标量範圍内的資料變化。除了使用填充條圖形來展示數值之外，我們還可以定義low、high和optimum這些範圍關鍵點參數，還可以賦予這些參數更廣泛的含義。當取值在低（low）範圍時，度量器的填充條顯示為紅色；取值在中等範圍時，顯示為黃色；取值為高（high）和最高（optimum）範圍時，顯示為綠色。圖1-4展示元素在取值不同情況下的顯示效果。
圖1-4所示的元素範例的代碼如下：
https://yqfile.alicdn.com/8d3123d97b7d21434c781c4726d4e36d5b8ff610.png" >
無需javascript，使用< details >和< summary >來建立可折疊内容
以前要想建立可折疊内容，需要利用javascript切換該内容部分的css屬性，才能實作内容的隐藏與實作。而html5利用< details >和< summary >元素，無需腳本代碼，就能提供這樣的功能。圖1-5顯示了這些新元素的實際應用效果。
圖1-5 < details >和< summary >元素的實際效果範例。處于折疊狀态時，< summary >元素之内的内容才能顯示；打開狀态時，< details >元素内所有内容都顯示了出來
該< details >和< summary >範例代碼如下：
https://yqfile.alicdn.com/5236c46aa2f834edf049fe16a5507069e1885e09.png" >
遺憾的是，浏覽器對這些新元素的支援相當緩慢。不過，可以使用javascript輕松地建立一些回退方案。
利用本節所學的這些技術，你現在應該可以将已有應用更新到html5規範中去，不會因為使用者沒有使用最新、最強大的浏覽器而導緻任何副作用。下一節将介紹标記之外的一些特性及規範，并利用css3與javascript改善文檔樣式與互動性。