前言

為何寫作本書？

如果要盤點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應用程序。

第4版與第3版的區別

自2016年上半年本書第3版出版以來，一直受到廣大讀者的歡迎，筆者在這里首先感謝廣大讀者的支持。自本書第3版出版之后，HTML 5與CSS 3標準不斷發展，2016年11月，W3C發布HTML 5.1版本；2017年12月，W3C發布HTML 5.2版本。各主流瀏覽器也以最快的速度對HTML 5中各種最新公布的API提供了支持，其中包括對ECMA Script 2015以上版本的支持、對indexedDB 2.0版本的支持、對Fetch API的支持、改用Service Worker對離線應用程序提供支持、對BroadcastChannel API的支持、對Web組件模塊（其中包括HTML模塊、Shadow DOM、自定義元素、HTML導入）的支持、對Web Animations API的支持等。因此，本書第4版以第3版的內容為基礎，添加2016年上半年到2018年上半年之間HTML 5中新增的各種元素及API，同時更新各主流瀏覽器CSS 3的最新支持情況，以使讀者能夠學到HTML 5與CSS 3標準中的各種知識，了解各種最新的瀏覽器中對HTML 5與CSS 3標準的最新支持情況，以幫助讀者能夠早日將這些新的知識打造成一個HTML 5時代的功能強大的Web網站或Web應用程序。

具體來說，在第4版在第3版的基礎上做出的主要修改如下所示：

·第2章“HTML5與HTML4的區別”中刪除在HTML 5.1中被移除的元素。

·新增第5章“ECMAScript中的新增功能”。

·第7章“本地存儲”（原書中第8章）中新增indexedDB 2.0部分。

·第8章“擴展的XMLHttpRequest API”（原書中第13章）修改為“擴展的XMLHttp-Request API及Fetch API”，新增8.4節“使用Fetch API”。

·新增第10章“使用Service Worker實現離線應用程序”。

·第11章“通信API”中新增11.4節“BroadcastChannel API”。

·新增第12章“Web組件”。

·第13章“繪制圖形”（原書中第5章）中新增13.9.3節“將canvas元素中的圖像轉換為Blob對象”與13.9.5節“解碼圖像”。

·第18章“文字與字體相關樣式”中新增18.4節“指定用戶是否可選取文字的user-select屬性”。

·第22章“CSS3中的動畫功能”中新增22.3節“Web Animations API”。

·第23章“布局相關樣式”中新增23.4節“網格布局”。

·第24章“Media Queries相關樣式”一章修改為第24章“媒體查詢表達式與特性查詢表達式”，新增24.2節“特性查詢表達式”。

·第25章“CSS 3的其他重要樣式和屬性”中新增25.4節“用于控制鼠標事件的pointer-events屬性”與25.6節“CSS變量”。

本書面向的讀者

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

·具有一定基礎的Web前端開發工程師

·具有一定美術功底的Web前端設計師和UI設計師

·Web項目的管理人員

·開設了Web開發等相關專業的高等院校師生和相關培訓機構的學員及教師

如何閱讀本書

本書從邏輯上共分為三個部分：

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

第二部分（第15～25章）　詳細介紹了CSS 3中的各種新增樣式與屬性，其中主要包括CSS 3中的各種選擇器、文字與字體、背景與邊框、各種盒模型、CSS 3中的布局方式、CSS 3中的變形與動畫、CSS 3中與媒體類型相關的一些樣式與屬性等。在介紹的同時也詳細講述了到本書截稿時這些樣式與屬性受到了哪些瀏覽器的支持，以及針對各種瀏覽器應該怎樣在樣式代碼中進行各種屬性的正確書寫。

第三部分（第26章）　詳細講解了一個實例，該實例展示了如何使用HTML 5中新增的表單元素、如何讀取本地數據庫中的數據、如何保存數據到本地數據庫、如何使用Fetch API讀取服務器端的數據及提交數據到服務器端并處理服務器端響應、如何保存數據到LocalStorage及從LocalStorage讀取保存后的數據、從而實現一個具有現代風格的Web應用程序，如何在這個由HTML 5語言及其功能編寫而成的Web應用程序中綜合使用CSS 3樣式來完成頁面的布局以及視覺效果的美化工作。

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

致謝

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

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