詳盡講解HTML5與CSS 3的所有功能和特性，內容系統而全面，希望能藉由本書幫助Web 開發者更進一步地學習HTML 5 以及與之相伴隨的CSS 3 技術，使他們能夠早日運用這些技術開發出一個具有現代品質的、在未來的Web 平台上能夠流暢執行的Web 網站或Web 應用程式。



　　全書涵蓋HTML 5 新增的各種元素及API，注重實戰，除大量輔助理解的案例，還包含兩個綜合性案例。同時也有各主流瀏覽器CSS 3的最新支援情況，以讓讀者學習到HTML 5 與CSS 3 標準中的各種知識，了解各種最新的瀏覽器對HTML 5 與CSS 3 標準的最新支援情況，應用這些新的知識打造一個HTML 5 時代的功能強大的Web 網站或Web 應用程式。



　　1 -17 章，針對HTML 5 中新增的語法與標記方法、新增元素、新增API 以及這些元素與API 到目前為止受到哪些瀏覽器的支援等做詳細的介紹。



　　17-29 章，詳細介紹CSS 3 中各種新增樣式與屬性，主要包含CSS3 中的各種選擇器、文字與字型、背景與邊框、各種盒狀元素模型、CSS 3 中的版面配置方式、CSS 3 中的變形與動畫、CSS 3 中與媒體類型相關的一些樣式與屬性等。



　　實最後詳細列舉兩個綜合性實例，實例1：綜合運用HTML 5 中新增結構元素來建構網頁；實例2：使用HTML 5+CSS 3 來建構具現代風格的Web 應用程式，完成頁面的版面配置以及視覺效果的美化工作。

前言



第1章　Web 時代的變遷

1.1 迎接新的Web 時代 ?

1.1.1 HTML 5 時代即將來臨 ?

1.1.2 HTML 5 的目標 ?

1.2 HTML 5 會深受歡迎的理由 ?

1.2.1 世界知名瀏覽器廠商對HTML 5 的支援

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

1.2.3 第二個理由：Internet Explorer 新版 ?

1.3 可以放心使用HTML 5 的三個理由 ?

1.4 HTML 5 要解決的三個問題



第2章　HTML 5 與HTML 4 的區別

2.1 語法的改變

2.1.1 HTML 5 的語法變化

2.1.2 HTML 5 中的標記方法 ?

2.1.3 HTML 5 確保了與之前HTML 版本的相容性 ?

2.1.4 標記範例

2.2 新增的元素和廢除的元素

2.2.1 新增的結構元素

2.2.2 新增的其他元素

2.2.3 新增的input 元素的類型 ?

2.2.4 廢除的元素 ?

2.3 新增的屬性和廢除的屬性 ?

2.3.1 新增的屬性 ?

2.3.2 廢除的屬性

2.4 全域屬性

2.4.1 contentEditable 屬性

2.4.2 designMode 屬性 ?

2.4.3 hidden 屬性 ?

2.4.4 spellcheck 屬性

2.4.5 tabindex 屬性



第3章　HTML 5 的結構

3.1 新增的主體結構元素 ?

3.1.1 article 元素 ?

3.1.2 section 元素 ?

3.1.3 nav 元素

3.1.4 aside 元素 ?

3.1.5 time 元素與微格式

3.1.6 pubdate 屬性 ?

3.2 新增的非主體結構元素 ?

3.2.1 header 元素 ?

3.2.2 hgroup 元素 ?

3.2.3 footer 元素 ?

3.2.4 address 元素 ?

3.3 HTML 5 結構 ?

3.3.1 大綱 ?

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 新增的figure 元素與figcaption 元素

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

4.3.3 新增的mark 元素

4.3.4 新增的progress 元素 ?

4.3.5 新增的meter 元素 ?

4.3.6 改良的ol 列表 ?

4.3.7 改良的dl 列表 ?

4.3.8 加以嚴格限制的cite 元素

4.3.9 重新定義的small 元素

4.3.10 安全性增強的iframe 元素 ?

4.3.11 增強的script 元素



第5章　HTML 編輯API

5.1 Range 物件與Selection 物件 ?

5.1.1 基本概念

5.1.2 Range 物件的屬性與方法 ?

5.1.3 Selection 物件的屬性與方法

5.2 指令 ?

5.2.1 基本概念 ?

5.2.2 execCommand 方法 ?

5.2.3 queryCommandSupported 方法 ?

5.2.4 queryCommandState 方法 ?

5.2.5 queryCommandIndeterm 方法 ?

5.2.6 queryCommandEnabled 方法 ?

5.2.7 queryCommandValue 方法 ?

5.2.8 可以在各種瀏覽器中執行的所有指令



第6章　繪製圖形?

6.1 canvas 元素的基礎知識 ?

6.1.1 在頁面中放置canvas 元素 ?

6.1.2 繪製矩形 ?

6.2 使用路徑 ?

6.2.1 繪製圓形 ?

6.2.2 如果沒有關閉路徑會怎麼樣 ?

6.2.3 moveTo 與lineTo ?

6.2.4 使用bezierCurveTo 繪製貝茲曲線 ?

6.3 繪製漸層圖形 ?

6.3.1 繪製線性漸層 ?

6.3.2 繪製徑向漸層 ?

6.4 繪製變形圖形 ?

6.4.1 座標轉換 ?

6.4.2 座標轉換與路徑的結合使用 ?

6.4.3 矩陣轉換 ?

6.5 圖形組合 ?

6.6 替圖形繪製陰影 ?

6.7 使用影像 ?

6.7.1 繪製影像 ?

6.7.2 影像延展 ?

6.7.3 影像修改 ?

6.7.4 像素處理 ?

6.8 繪製文字 ?

6.9 補充知識 ?

6.9.1 儲存與恢復狀態 ?

6.9.2 儲存檔案 ?

6.9.3 簡單動畫的製作 ?



第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 物件與file 物件 ?

10.2 ArrayBuffer 物件與ArrayBufferView 物件? ?

10.2.1 基本概念 ?

10.2.2 ArrayBuffer 物件 ?

10.2.3 ArrayBufferView 物件 ?

10.2.4 DataView 物件 ?

10.3 Blob 物件與BlobBuilder 物件 ?

10.3.1 Blob 物件 ?

10.3.2 BlobBuilder 物件 ?

10.3.3 Blob 物件的slice 方法 ?

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 filesystem: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 的使用範例 ?



第12章　擴充的XMLHttpRequest API ?

12.1 從伺服器端取得二進位資料 ?

12.1.1 ArrayBuffer 回應 ?

12.1.2 Blob 回應 ?

12.2 發送資料

12.2.1 發送字串 ?

12.2.2 發送表單資料 ?

12.2.3 上傳檔案 ?

12.2.4 發送Blob 物件 ?

12.2.5 發送ArrayBuffer 物件 ?

12.3 跨域資料請求 ?



第13章　使用Web Workers 處理執行緒?

13.1 基礎知識 ?

13.2 與執行緒進行資料的互動 ?

13.3 執行緒巢狀結構

13.3.1 單層巢狀結構 ?

13.3.2 在多個子執行緒中進行資料的互動 ?

13.4 執行緒中可用的變數、函數與類別 ?

13.5 適用場合 ?

13.6 SharedWorker ?

13.6.1 基礎知識 ?

13.6.2 實現前台頁面與後台執行緒之間的通訊 ?

13.6.3 定義頁面與共用的後台執行緒開始通訊時的處理 ?

13.6.4 SharedWorker 的使用範例



第14章　取得地理位置資訊?

14.1 Geolocation API 的基礎 ?

14.1.1 取得目前地理位置

14.1.2 持續監視目前地理位置的資訊 ?

14.1.3 停止取得目前使用者的地理位置資訊 ?

14.2 position 物件 ?

14.3 在頁面上使用google 地圖



第15章　多媒體相關API?

15.1 多媒體播放 ?

15.1.1 video 元素與audio 元素的基礎知識 ?

15.1.2 屬性 ?

15.1.3 方法 ?

15.1.4 事件 ?

15.2 Web Audio API ?

15.2.1 AudioContext 物件 ?

15.2.2 載入聲音 ?

15.2.3 播放聲音 ?

15.2.4 將聲音載入處理封裝在類別中 ?

15.2.5 控制節奏 ?

15.2.6 控制音量 ?

15.2.7 兩個聲音的交換混合 ?

15.2.8 多個音訊檔案之間的平滑過渡 ?

15.2.9 對音訊使用濾波處理



第16章　與頁面顯示相關的API?

16.1 Page Visibility API ?

16.1.1 Page Visibility API 概述 ?

16.1.2 Page Visibility API 的使用場合 ?

16.1.3 實現Page Visibility API ?

16.2 Fullscreen API ?

16.2.1 Fullscreen API 概述 ?

16.2.2 實現Fullscreen API ?

16.2.3 Fullscreen API 程式使用範例



第17章　拖放API 與通知API?

17.1 拖放API ?

17.1.1 實現拖放的步驟 ?

17.1.2 DataTransfer 物件的屬性與方法 ?

17.1.3 設定拖放時的視覺效果

17.1.4 自訂拖放圖示 ?

17.2 通知API ?

17.2.1 通知API 的基礎知識 ?

17.2.2 通知API 的程式使用範例



第18章　CSS 3 概述?

18.1 概要介紹 ?

18.1.1 CSS 3 是什麼 ?

18.1.2 CSS 3 的歷史 ?

18.2 使用CSS 3 能做什麼 ?

18.2.1 模組與模組化結構 ?

18.2.2 一個簡單的CSS 3 範例



第19章　選擇器?

19.1 選擇器概述 ?

19.2 屬性選擇器 ?

19.2.1 屬性選擇器概述 ?

19.2.2 CSS 3 中的屬性選擇器 ?

19.2.3 靈活運用屬性選擇器 ?

19.3 結構性虛擬類別選取器 ?

19.3.1 CSS 中的虛擬類別選取器及虛擬元素 ?

19.3.2 選擇器root、not、empty 和target ?

19.3.3 選擇器：first-child、last-child、nth-child 和nth-last-child ?

19.3.4 選擇器：nth-of-type 和nth-last-of-type ?

19.3.5 循環使用樣式 ?

19.3.6 only-child 選擇器 ?

19.4 UI 元素狀態虛擬類別選取器 ?

19.4.1 選擇器：E:hover、E:active 和E:focus ?

19.4.2 E:enabled 虛擬類別選取器與E:disabled 虛擬類別選取器 ?

19.4.3 E:read-only 虛擬類別選取器與E:read-write 虛擬類別選取器 ?

19.4.4 虛擬類別選取器：E:checked、E:default 和E:indeterminate ?

19.4.5 E::selection 虛擬類別選取器 ?

19.4.6 E:invalid 虛擬類別選取器與E:valid 虛擬類別選取器 ?

19.4.7 E:required 虛擬類別選取器與E:optional 虛擬類別選取器 ?

19.4.8 E:in-range 虛擬類別選取器與E:out-of-range 虛擬類別選取器 ?

19.5 通用兄弟元素選擇器 ?



第20章　使用選擇器在頁面中插入內容?

20.1 使用選擇器來插入文字 ?

20.1.1 使用選擇器來插入內容 ?

20.1.2 指定個別元素不進行插入 ?

20.2 插入影像檔 ?

20.2.1 在標題前插入影像檔 ?

20.2.2 插入影像檔的好處

20.2.3 將alt 屬性的值作為影像的標題來顯示 ?

20.3 使用content 屬性來插入項目編號 ?

20.3.1 在多個標題前加上連續編號 ?

20.3.2 在項目編號中新增文字 ?

20.3.3 指定編號的樣式 ?

20.3.4 指定編號的種類 ?

20.3.5 編號巢狀結構 ?

20.3.6 中編號中嵌入大編號 ?

20.3.7 在字串兩邊增加巢狀結構文字符號



第21章　文字與字型相關樣式?

21.1 替文字增加陰影—text-shadow 屬性 ?

21.1.1 text-shadow 屬性的使用方法 ?

21.1.2 位移距離 ?

21.1.3 陰影的模糊半徑 ?

21.1.4 陰影的顏色 ?

21.1.5 指定多個陰影 ?

21.2 讓文字自動換行—word-break 屬性 ?

21.2.1 依靠瀏覽器讓文字自動換行 ?

21.2.2 指定自動換行的處理方法 ?

21.3 讓長單字與URL 位址自動換行—word-wrap 屬性 ?

21.4 使用伺服器端字型—Web Font 與@font-face 屬性

21.4.1 在網頁上顯示伺服器端字型 ?

21.4.2 定義斜體或粗體字型 ?

21.4.3 顯示用戶端本機的字型 ?

21.4.4 屬性值的指定 ?

21.5 修改字型種類而保持字型尺寸不變—font-size-adjust 屬性 ?

21.5.1 字型不同導致文字大小的不同 ?

21.5.2 font-size-adjust 屬性的使用方法 ?

21.5.3 瀏覽器對於aspect 值的計算方法 ?

21.5.4 font-size-adjust 屬性的使用範例



第22章　盒狀元素相關樣式?

22.1 盒狀元素的類型 ?

22.1.1 盒狀元素的基本類型 ?

22.1.2 inline-block 類型 ?

22.1.3 inline-table 類型 ?

22.1.4 list-item 類型 ?

22.1.5 run-in 類型與compact 類型 ?

22.1.6 表格相關類型 ?

22.1.7 none 類型 ?

22.1.8 各種瀏覽器對於各種盒狀元素類型的支援情況 ?

22.2 對於盒狀元素中容納不下的內容的顯示 ?

22.2.1 overflow 屬性 ?

22.2.2 overflow-x 屬性與overflow-y 屬性 ?

22.2.3 text-overflow 屬性 ?

22.3 對盒狀元素使用陰影 ?

22.3.1 box-shadow 屬性的使用方法 ?

22.3.2 將參數設定為0 ?

22.3.3 對盒狀元素內子元素使用陰影 ?

22.3.4 對第一個文字或第一行使用陰影 ?

22.3.5 對表格及儲存格使用陰影 ?

22.4 指定針對元素的寬度與高度的計算方法 ?

22.4.1 box-sizing 屬性 ?

22.4.2 為什麼要使用box-sizing 屬性 ?



第23章　背景與邊框相關樣式?

23.1 與背景相關的新增屬性 ?

23.1.1 指定背景的顯示範圍—backg-round-clip 屬性 ?

23.1.2 指定繪製背景影像的繪製起點—background-origin 屬性 ?

23.1.3 指定背景影像的尺寸—background-size 屬性 ?

23.2 在一個元素中顯示多個背景影像 ?

23.3 圓角邊框的繪製 ?

23.3.1 border-radius 屬性 ?

23.3.2 在border-radius 屬性中指定兩個半徑 ?

23.3.3 不顯示邊框時 ?

23.3.4 修改邊框種類時 ?

23.3.5 繪製四個角不同半徑的圓角邊框 ?

23.4 使用影像邊框 ?

23.4.1 border-image 屬性 ?

23.4.2 border-image 屬性的最簡單的使用方法

23.4.3 使用border-image 屬性來指定邊框寬度 ?

23.4.4 中央影像的自動伸展 ?

23.4.5 指定四條邊中影像的顯示方法 ?

23.4.6 使用背景影像



第24章　CSS 3 中的變形處理?

24.1 transform 功能的基礎知識 ?

24.1.1 如何使用transform 功能 ?

24.1.2 transform 功能的分類 ?

24.2 對一個元素使用多種變形的方法 ?

24.2.1 兩個變形範例 ?

24.2.2 指定變形的基準點



第25章　CSS 3 中的動畫功能?

25.1 Transitions 功能 ?

25.1.1 Transitions 功能的使用方法 ?

25.1.2 使用Transitions 功能同時平滑過渡多個屬性值 ?

25.2 Animations 功能 ?

25.2.1 Animations 功能的使用方法 ?

25.2.2 實現多個屬性值同時改變的動畫 ?

25.2.3 實現動畫的方法 ?

25.2.4 實現網頁的淡入效果



第26章　版面配置相關樣式?

26.1 多欄版面配置 ?

26.1.1 使用float 屬性或position 屬性的缺點 ?

26.1.2 使用多欄版面配置方式

26.2 盒狀元素版面配置 ?

26.2.1 盒狀元素版面配置的基礎知識 ?

26.2.2 彈性盒狀元素版面配置



第27章　Media Queries 相關樣式?

27.1 根據瀏覽器的視窗大小來選擇使用不同的樣式 ?

27.2 在iPhone 中的顯示 ?

27.3 Media Queries 的使用方法



第28章　CSS 3 的其他重要樣式和屬性?

28.1 顏色相關樣式 ?

28.1.1 利用alpha 通道來設定顏色 ?

28.1.2 alpha 通道與opacity 屬性的區別 ?

28.1.3 指定顏色值為transparent ?

28.2 使用者介面相關樣式 ?

28.2.1 輪廓相關樣式 ?

28.2.2 resize 屬性 ?

28.3 取消對元素的樣式指定—initial 屬性值 ?

28.3.1 取消對元素的樣式指定 ?

28.3.2 使用initial 屬性值並不等於取消樣式設定的特例 ?



第29章　綜合實例?

29.1 實例1：使用HTML 5 中新增結構元素來建構網頁 ?

29.1.1 組織網頁結構 ?

29.1.2 建構網頁標題?? ?

29.1.3 建構側邊欄 ?

29.1.4 建構主體內容 ?

29.1.5 建構版權資訊 ?

29.2 實例2：使用HTML 5+CSS 3 來建構Web 應用程式 ?

29.2.1 HTML 5 頁面程式分析 ?

29.2.2 CSS 3 樣式程式分析 ?

29.2.3 JavaScript 指令稿程式分析



附錄A　可以在各種瀏覽器中執行的所有指令

附錄B　五大瀏覽器對HTML 5 的支援情況