前言

為何寫作本書

如果要盤點2010年IT屆的十大熱門技術，云計算、移動開發、物聯網等無疑會在其中，HTML 5肯定也是少不了的。2010年，隨著HTML 5的迅猛發展，各大瀏覽器開發公司如Google、微軟、蘋果、Mozilla和Opera的瀏覽器開發業務都變得異常繁忙。在整個2010年度，無論是Mozilla的Firefox、Google的Chrome、蘋果的Safari，還是微軟的Internet Explorer，以及Opera都處于不斷地推陳出新的狀態當中。

2010年3月，在微軟的MIX2010大會上，微軟的工程師在介紹Internet Explorer 9瀏覽器的同時，從前端技術的角度把互聯網的發展分為了三個階段：

第一階段：Web 1.0的以內容為主的網絡，前端主流技術是HTML和CSS；

第二階段：Web 2.0的Ajax應用，熱門技術是JavaScript/DOM/異步數據請求；

第三階段：即將迎來的HTML 5時代，亮點是富圖形和富媒體內容（Graphically-Rich and Media-Rich）。

前端技術將進入一個嶄新的時代，至少已經開啟了這扇門。

在這種局勢下，學習HTML 5無疑成為Web開發者的一個重要任務，誰先學會HTML 5，誰就掌握了邁向未來Web平臺的一把鑰匙。因此，我希望能夠借助此書幫助國內的Web開發者更好地學習HTML 5以及與之相伴隨的CSS 3技術，使他們能夠早日運用這些技術開發出一個具有現代水平的、在未來的Web平臺上能夠流暢運行的Web網站或Web應用程序。

第2版與第1版的區別

自2011年上半年本書第1版出版以來，一直受到廣大讀者的歡迎，筆者在這里首先感謝廣大讀者的支持。自2011年之后，HTML 5與CSS 3標準處于不斷發展中，各主流瀏覽器也以最快的速度對HTML 5中各種最新公布的API提供了支持，其中包括各種新增元素、IndexedDB API、FileSystem API、Server-Sent Events API、擴展的XMLHttpRequest API等。因此，本書第2版以第1版的內容為基礎，添加2011年到2012年之間HTML 5中新增的各種元素及API，同時更新各主流瀏覽器CSS 3的最新支持情況，以使讀者能夠學習到截至2012年HTML 5與CSS 3標準中的各種知識，了解各種最新的瀏覽器對HTML 5與CSS 3標準的最新支持情況，能夠早日用這些新的知識打造一個HTML 5時代的功能強大的Web網站或Web應用程序。

具體來說，第2版在第1版的基礎上，做出如下主要修改：

• “第2章HTML 5與HTML 4的區別”中新增部分元素屬性。
• “第3章HTML 5的結構”中擴充“3.3.1大綱”一節中的內容。
• “第4章表單及其他新增和改良元素”中新增大量表單元素與頁面元素，移除“4.4文件API”一節與“4.5 拖放API”一節。
• 新增“第5章HTML編輯API”一章（原“第5章繪制圖形”修改為第6章，原“第6章多媒體播放”修改為“第15章多媒體相關API”中“15.1 多媒體播放”一節）。
• 新增“第7章HistoryAPI”一章（原“第7章本地存儲”章修改為“第8章本地存儲”，原“第8章離線應用程序”修改為“第9章離線應用程序”）。
• “第8章本地存儲”中新增“8.1.4 利用storage事件實時監視Web Storage中的數據”小節，新增“8.3 indexedDB數據庫”一節。
• 新增“第10章文件API”一章。
• 原“第9章通信API”修改為“第11章通信API”，“11.1 跨文檔消息傳輸”中新增“11.1.3 通道通信”小節，“11.2 Web Sockets通信”中新增“11.2.5 發送與接收原始二進制數據”、“11.2.6 實現Web Sockets API的開發框架”、“11.2.7 WebSocket 協議”與“11.2.8 Web Sockets API的適用場景”等小節，新增“11.3 Server-Sent Events API”一節。
• 新增“第12章擴展的XMLHttpRequest API”。
• 原“第10章使用Web Workers處理線程”修改為“第13章使用Web Workers處理線程”，新增“13.5 適用場合”一節和“13.6 SharedWorker”一節。
• 原“第11章獲取地理位置信息”修改為“第14章獲取地理位置信息”。
• 新增“第15章多媒體相關API”一章。
• 新增“第16章與頁面顯示相關的API”一章。
• 新增“第17章拖放API與通知API”（“17.1 拖放API”一節中內容為原“第4章表單及其他新增和改良元素”一章中“4.5 拖放API”一節內容）。
• 原“第12章CSS 3概述”修改為“第18章CSS 3概述”。
• “第19章選擇器”中“19.4 UI元素狀態偽類選擇器”一節中新增“19.4.6 E:invalid偽類選擇器與E:valid偽類選擇器”小節、“19.4.7 E:required偽類選擇器與E:optional偽類選擇器”小節與“19.4.8 E:in-range偽類選擇器與E:out-of-range偽類選擇器”小節。
• “第22章盒相關樣式”與“第23章背景與邊框相關樣式”的樣式代碼及其說明中移除部分瀏覽器供應商前綴。
• 重新編寫“第29章綜合實例”一章中兩個代碼示例，“29.2 實例2：使用HTML 5+CSS 3來構建Web應用程序”中添加了使用indexedDB API將數據書寫到indexedDB數據庫中的代碼示例部分。

本書面向的讀者

本書主要適合如下人群閱讀：

• 具有一定基礎的Web前端開發工程師。
• 具有一定美術功底的Web前端設計師和UI設計師。
• Web項目的項目管理人員。
• 開設了Web開發等相關專業的高等院校師生和相關培訓機構的學員及教師。

如何閱讀本書

相較于第1版，第2版有了很大的變化，篇幅也大量增加，于是我們將第2版分成上下兩冊。

上冊對HTML 5中新增的語法與標記方法、新增元素、新增API以及這些元素與API到目前為止受到了哪些瀏覽器的支持等進行了詳細的介紹。在對它們進行介紹的同時將其與HTML 4中的各種元素與功能進行了對比，以幫助讀者更好地理解為什么需要使用HTML 5、使用HTML 5有什么好處、HTML 5中究竟增加了哪些目前HTML 4不具備而在第3代Web平臺上將會起到重要作用的功能與API，以及這些功能與API的詳細使用方法。

下冊詳細介紹了CSS 3中各種新增樣式與屬性，其中主要包括CSS 3中的各種選擇器、文字與字體、背景與邊框、各種盒模型、CSS 3中的布局方式、CSS 3中的變形與動畫、CSS 3中與媒體類型相關的一些樣式與屬性等。在介紹的同時也詳細講述了這些樣式與屬性目前為止受到了哪些瀏覽器的支持，以及針對各種瀏覽器應該怎樣在樣式代碼中進行各種屬性的正確書寫。最后，詳細講解了兩個實例，第一個實例展示了如何在一個用HTML 5語言編寫而成的頁面中綜合運用HTML 5中新增的各種結構元素，如何對這些結構元素綜合使用CSS 3樣式；第二個實例展示了如何使用HTML 5中新增的表單元素，以及操作本地數據庫的功能來實現一個具有現代風格的Web應用程序，如何在這個利用HTML 5語言及其功能編寫而成的Web應用程序中綜合使用CSS 3樣式來完成頁面的布局以及視覺效果的美化工作。

上下兩冊一共351個示例頁面，每個頁面都經過筆者上機實踐，確保運行結果正確無誤。每個頁面的詳細代碼及其使用到的腳本文件、各種資源文件都可在華章公司的官方網站（www.hzbook.com）本書的相應頁面上下載，因為是由HTML 5編寫而成的網頁，所以可直接在各種瀏覽器中打開該文件并查看運行結果（少量頁面需要首先建立網站，然后通過訪問網站中該頁面的方式來進行查看，少量頁面使用服務器端PHP腳本語言，可在Apache服務器中運行）。同時，對于HTML 5中的各種元素和各種API，以及CSS 3中的各種屬性和樣式受到了哪些瀏覽器的支持在書中都進行了詳細介紹，讀者可以針對不同的頁面選擇正確的瀏覽器來查看其正確的運行結果。

致謝

在本書的寫作過程中，策劃編輯楊福川先生和姜影女士給予了很大的幫助和支持，并提出了很多中肯的建議，在此表示感謝。同時，還要感謝機械工業出版社的所有編審人員為本書的出版所付出的辛勤勞動。本書的成功出版是大家共同努力的結果，謝謝你們。

另外，在本書的寫作過程當中，由于時間及水平上的原因，有可能存在一些對HTML 5及CSS 3上認識不全面或疏漏的地方，敬請讀者批評更正，作者的聯系QQ為240824399，聯系郵箱為240824399@qq.com，謹以最真誠的心希望能與讀者共同交流，共同成長。

陸凌牛