《HTML 5與CSS 3 權威指南（第3版·上冊）》——導讀

為何寫作本書

2014年10月28日，w3c的html工作組正式釋出了html 5的正式推薦标準（w3c recommendation），這一消息是w3c在美國聖克拉拉舉行的w3c技術大會及顧問委員會會議（tpac 2014）上宣布的。html 5在這一版本中增加了支援web應用開發者的許多新特性，以及更符合開發者使用習慣的新元素，并重點關注定義清晰的、一緻的準則，以確定web應用和内容在不同使用者代理（浏覽器）中的互操作性。html 5是建構開放web平台的核心。

2015年4月9日，w3c的css工作組釋出css基本使用者接口子產品（css basic user interface module level 3，css3 ui）的标準工作草案。該文檔描述了css 3中對html、xml（包括xhtml）進行樣式處理所需的與使用者界面相關的css選擇器（selectors）、屬性及屬性值。它包含并擴充了在css level 2及selector規範中定義的與使用者接口有關的特性。

html 5帶來了一組新的使用者體驗，如web的音頻和視訊不再需要插件，通過canvas更靈活地完成圖像繪制，而不必考慮螢幕的分辨率，浏覽器對可擴充矢量圖（svg）和數學标記語言（mathml）的本地支援，通過引入新的注釋資訊以增強對東亞文字呈現（ruby）的支援，對富web應用資訊無障礙新特性的支援，等等。

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

在這種局勢下，學習html 5無疑成為web開發者的一大重要任務，誰先學會html 5，誰就掌握了開啟未來web平台的一把鑰匙。是以，筆者希望借助此書幫助國内的web開發者更好地學習html 5以及與之相伴的css 3技術，早日運用這些技術開發出一個具有現代水準的、在未來的web平台上正常運作的web網站或web應用程式。

第3版與第2版的差別

自2013年上半年本書第2版出版以來，一直受到廣大讀者的歡迎，筆者在這裡首先感謝廣大讀者的支援。自本書第2版出版之後，html 5與css 3标準處于不斷發展中，各主流浏覽器也以最快的速度對html 5中各種最新公布的api提供了支援，其中包括各種新增元素、webrtc通信api、滑鼠指針鎖定api、javascript promise等。是以，本書以第2版的内容為基礎，添加對2013上半年到2015年5月之間html 5中新增的各種元素及api的介紹，同時更新各主流浏覽器對css 3的最新支援情況，以使讀者能夠學到2015年5月為止關于html 5與css 3标準的各種知識，了解各種最新浏覽器對html 5與css 3标準的支援情況，能夠早日通過這些新知識打造一個html 5時代功能強大的web網站或web應用程式。

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

第2章中新增部分html 5屬性。

第3章中新增對main元素的介紹，移除第2版中對hgroup元素（html 5标準中已廢除該元素）的介紹。

第4章中新增對dialog元素的介紹。

第5章（第2版中第6章）中新增“使用path2d對象繪制路徑”和“圖形、圖像的組合與混合”的内容。

第6章（第2版中的第15章）中新增“對音頻或視訊添加字幕”内容。

第10章中新增“在indexeddb資料庫中儲存blob對象”内容。

新增第12章對webrtc通信的介紹。

第17章（第2版中的第16章）中新增“滑鼠指針鎖定api”、“requestanimationframe”、“mutation observer”、“javascript promise”、“beacon api”内容。

第21章中新增“使用rem機關定義字型大小”内容。

第22章中新增“建立盒内陰影”内容。

第23章中新增“新增的用于平鋪背景圖像的選項—space與round”和“使用漸變色背景”内容。

第24章中新增“使用3d變形功能”及“變形矩陣”内容。

第26章中根據css 3最新标準的内容重新編寫“彈性盒布局”并新增“calc方法”内容。

第28章中新增“實作css 3中的濾鏡特效”内容。

前　言

上冊

<a href="https://yq.aliyun.com/articles/108043">第1章?web時代的變遷</a>

<a href="https://yq.aliyun.com/articles/108049">1.1?迎接新的web時代</a>

1.1.1?html 5時代即将來臨

1.1.2?html 5的目标

<a href="https://yq.aliyun.com/articles/108054">1.2?html 5深受歡迎的理由</a>

1.2.1?世界知名浏覽器廠商對html 5的支援

1.2.2?第一個理由：時代的要求

1.2.3?第二個理由：internet explorer 8

<a href="https://yq.aliyun.com/articles/108059">1.3?可以放心使用html 5的三個理由</a>

<a href="https://yq.aliyun.com/articles/108062">1.4?html 5要解決的三個問題</a>

<a href="https://yq.aliyun.com/articles/108065">第2章?html 5與html 4的差別</a>

<a href="https://yq.aliyun.com/articles/108077">2.1?文法的改變</a>

2.1.1?html 5的文法變化

2.1.2?html 5中的标記方法

2.1.3?html 5確定的相容性

2.1.4?标記示例

<a href="https://yq.aliyun.com/articles/108101">2.2?新增的元素和廢除的元素</a>

2.2.1?新增的結構元素

2.2.2?新增的其他元素

2.2.3?新增的input元素的類型

2.2.4?廢除的元素

<a href="https://yq.aliyun.com/articles/108106">2.3?新增的屬性和廢除的屬性</a>

2.3.1?新增的屬性

2.3.2?廢除的屬性

<a href="https://yq.aliyun.com/articles/108111">2.4?全局屬性</a>

2.4.1?contenteditable屬性

2.4.2?designmode屬性

2.4.3?hidden屬性

2.4.4?spellcheck屬性

2.4.5?tabindex屬性

<a href="https://yq.aliyun.com/articles/108116">2.5?新增的事件</a>

<a href="https://yq.aliyun.com/articles/108123">第3章?html 5的結構</a>

<a href="https://yq.aliyun.com/articles/108134">3.1?新增的主體結構元素</a>

3.1.1?article元素

3.1.2?section元素

3.1.3?nav元素

3.1.4?aside元素

3.1.5?time元素與微格式

3.1.6?pubdate屬性

<a href="https://yq.aliyun.com/articles/108144">3.2?新增的非主體結構元素</a>

3.2.1?header元素

3.2.2?footer元素

3.2.3?address元素

3.2.4?main元素

<a href="https://yq.aliyun.com/articles/108176">3.3?html 5中網頁結構</a>

3.3.1?html 5中的大綱

3.3.2?大綱的編排規則

3.3.3?對新的結構元素使用樣式

第4章?表單及其他新增和改良元素

4.1?新增元素與屬性

4.1.1?新增屬性

4.1.2?大幅度地增加與改良input元素的種類

4.1.3?對新的表單元素使用樣式

4.1.4?output元素的追加

4.2?表單驗證

4.2.1?自動驗證

4.2.2?取消驗證

4.2.3?顯式驗證

4.3?增強的頁面元素

4.3.1?新增的f?igure元素與f?igcaption元素

4.3.2?新增的details元素與summary元素

4.3.3?新增的mark元素

4.3.4?新增的progress元素

4.3.5?新增的meter元素

4.3.6?新增的dialog元素

4.3.7?改良的a元素

4.3.8?改良的ol清單

4.3.9?改良的dl清單

4.3.10?加以嚴格限制的cite元素

4.3.11?重新定義的small元素

4.3.12?安全性增強的iframe元素

4.3.13?增強的script元素

第5章?繪制圖形

5.1　canvas元素的基礎知識

5.1.1　在頁面中放置canvas元素

5.1.2　繪制矩形

5.2　使用路徑

5.2.1　繪制圓形

5.2.2　不關閉路徑會怎麼樣

5.2.3　繪制直線

5.2.4　繪制曲線

5.2.5　使用path2d對象繪制路徑

5.3　繪制漸變圖形

5.3.1　繪制線性漸變

5.3.2　繪制徑向漸變

5.4　繪制變形圖形

5.4.1　坐标變換

5.4.2　坐标變換與路徑的結合使用

5.4.3　矩陣變換

5.5　給圖形繪制陰影

5.6　使用圖像

5.6.1　繪制圖像

5.6.2　圖像平鋪

5.6.3　圖像裁剪

5.6.4　像素處理

5.7　圖形、圖像的組合與混合

5.7.1　組合圖形

5.7.2　混合圖像

5.8　繪制文字

5.9　補充知識

5.9.1　儲存與恢複狀态

5.9.2　儲存檔案

5.9.3　簡單動畫的制作

第6章?多媒體相關api

6.1　多媒體播放

6.1.1　video元素與audio元素的基礎知識

6.1.2　屬性

6.1.3　方法

6.1.4　事件

6.2　對音頻或視訊添加字幕

6.2.1　track元素的基礎知識

6.2.2　track元素的各種屬性

6.2.3　webvtt檔案

第7章?history api

7.1　history api的基本概念

7.2　history api使用示例

7.2.1　使用history api

7.2.2　結合使用canvas api與history api

第8章?本地存儲

8.1　web storage

8.1.1　web storage是什麼

8.1.2　簡單web留言本

8.1.3　作為簡易資料庫來利用

8.1.4　利用storage事件實時監視web storage中的資料

8.2　本地資料庫

8.2.1　本地資料庫的基本概念

8.2.2　用executesql來執行查詢

8.2.3　使用資料庫實作web留言本

8.2.4　transaction方法中的處理

8.3　indexeddb資料庫

8.3.1　indexeddb資料庫的基本概念

8.3.2　連接配接資料庫

8.3.3　資料庫的版本更新

8.3.4　建立對象倉庫

8.3.5　建立索引

8.3.6　索引的multientry屬性值

8.3.7　使用事務

8.3.8　儲存資料

8.3.9　擷取資料

8.3.10　根據主鍵值檢索資料

8.3.11　根據索引屬性值檢索資料

8.3.12　複合索引

8.3.13　統計對象倉庫中的資料數量

8.3.14　使用indexeddb api制作web留言本

第9章?離線應用程式

9.1　離線web應用程式詳解

9.1.1　新增的本地緩存

9.1.2　本地緩存與浏覽器網頁緩存的差別

9.2　manifest檔案

9.3　浏覽器與伺服器的互動過程

9.4　applicationcache對象

9.4.1　swapcache方法

9.4.2　applicationcache對象的事件

第10章?檔案api

10.1　filelist對象與f?ile對象

10.2　arraybuffer對象與arraybufferview對象

10.2.1　基本概念

10.2.2　arraybuffer對象

10.2.3　arraybufferview對象

10.2.4　dataview對象

10.3　blob對象

10.3.1　blob對象概述

10.3.2　建立blob對象

10.3.3　blob對象的slice方法

10.3.4　在indexeddb資料庫中儲存blob對象

10.4　filereader對象

10.4.1　filereader對象的方法

10.4.2　filereader對象的事件

10.4.3　filereader對象的使用示例

10.5　filesystem api

10.5.1　filesystem api概述

10.5.2　filesystem api的适用場合

10.5.3　請求通路檔案系統

10.5.4　申請磁盤配額

10.5.5　建立檔案

10.5.6　寫入檔案

10.5.7　在檔案中追加資料

10.5.8　讀取檔案

10.5.9　複制磁盤中的檔案

10.5.10　删除檔案

10.5.11　建立目錄

10.5.12　讀取目錄中的内容

10.5.13　删除目錄

10.5.14　複制檔案或目錄

10.5.15　移動檔案或目錄與重命名檔案或目錄

10.5.16　f?ilesystem:url字首

10.5.17　綜合案例

10.6　base64編碼支援

10.6.1　base64編碼概述

10.6.2　在html 5中支援base64編碼

第11章?通信api

11.1　跨文檔消息傳輸

11.1.1　跨文檔消息傳輸的基本知識

11.1.2　跨文檔消息傳輸示例

11.1.3　通道通信

11.2　websockets通信

11.2.1　websockets通信的基本知識

11.2.2　使用websockets api

11.2.3　websockets api使用示例

11.2.4　發送對象

11.2.5　發送與接收原始二進制資料

11.2.6　實作websockets api的開發架構

11.2.7　websocket協定

11.2.8　websockets api的适用場景

11.3　server-sent events api

11.3.1　server-sent events api的基本概念

11.3.2　server-sent events api的實作方法

11.3.3　事件id的使用示例