HTML5和CSS3實例教程（簡體書）

《HTML5和CSS3實例教程》共分3部分，集中討論了HTML5和CSS3規范及其技術的使用方法。首先是規范概述，介紹了新的結構化標簽、表單域及其功能（包括自動聚焦功能和占位文本）和CSS3的新選擇器。接下來是HTML對視頻和音頻的支持，講述了畫布上的圖形繪制及CSS陰影、漸變和變換的使用方法。最後介紹使用HTML5的客戶端特性（包括WebStorage、WebSQLDatabases以及離線支持）建立客戶端應用，使用HTML5實現跨域消息和數據傳送，以及操作瀏覽器歷史等的方法。《HTML5和CSS3實例教程》適合所有使用HTML和CSS的Web開發人員學習參考。

作者：(美國)霍根 (Brian P. Hogan) 譯者：李杰 劉曉娜 朱嵬 合著者：柳靖

霍根，1995年起便開始以自由職業者的身份開發專業網站并提供咨詢服務，目前常使用Ruby、jQuery、HTML5和CSS3構建Web應用。他樂于講述并撰寫與Web設計和開發有關的內容，倡導為殘障人士(特別是視覺障礙者)研發輔助功能。

《HTML5和CSS3實例教程》：HTML5和CSS3代表著Web開發的未來，雖然相關規范還未最終敲定，但最新版瀏覽器和移動設備都已支持HTML5和CSS3。《HTML5和CSS3實例教程》將帶你領略現今可用的HTML5元素和CSS3特性，并提供了對舊瀏覽器的向下兼容解決方案，使開發人員避免因此丟失用戶。
如果你還在為給按鈕添加不同樣式而大量添加標記，不妨拿起《HTML5和CSS3實例教程》，學習一下HTML5和CSS3新特性吧。HTML5新標記可以呈現更好的結構和表單界面，編寫出更為整潔易讀的代碼。
如果不想使用Flash，不妨看看《HTML5和CSS3實例教程》是如何在頁面中嵌入音頻、視頻和矢量圖的。此外，書中關于Web Sockets、客戶端存儲、離線緩存和跨文檔消息機制的內容將為你免去不少Web開發之苦。簡單的CSS3亦將豐富頁面區域的樣式。如果你作為Web設計師擔心舊瀏覽器的兼容問題，《HTML5和CSS3實例教程》中相應的解決方案將為你排憂解難。Web和移動開發必讀掌握技術走向，自信應對未來輕松實用、細致入微。

第1章　HTML5和CSS3概述　1
1.1　一個新的Web開發平臺　1
1.1.1　更多的描述性標記　1
1.1.2　較少依賴于插件的多媒體支持　1
1.1.3　更強大的Web應用　2
1.1.4　跨文檔消息通信　2
1.1.5　Web Sockets　2
1.1.6　客戶端存儲　2
1.1.7　更精美的界面　2
1.1.8　更強大的表單　2
1.1.9　提升可訪問性　3
1.1.10　先進的選擇器　3
1.1.11　視覺效果　3
1.2　向後兼容　3
1.3　未來之路崎嶇不平　4
1.3.1　IE　5
1.3.2　可訪問性　5
1.3.3　廢棄的標簽　6
1.3.4　企業利益的競爭　7
1.3.5　HTML5和CSS3仍在改進　8

第一部分　改善用戶界面
第2章　新的結構標簽和屬性　10
2.1　實例1：用語義化標記重定義博客　11
2.1.1　以正確的文檔類型聲明為基礎　13
2.1.2　頭部　13
2.1.3　尾部　14
2.1.4　導航　14
2.1.5　區段和文章　15
2.1.6　文章　16
2.1.7　旁白和側邊欄　17
2.1.8　旁白絕非頁面側邊欄　18
2.1.9　添加樣式　19
2.1.10　回退　21
2.2　實例2：使用自定義數據屬性創建彈出窗口　22
2.2.1　行為與內容的分離，或者說為什么設置onclick不好　22
2.2.2　提升可訪問性　23
2.2.3　廢棄onclick　23
2.2.4　自定義數據屬性來解圍　24
2.2.5　回退　25
2.2.6　未來展望　25

第3章　創建易用的Web表單　27
3.1　實例3：使用新的輸入域描述數據　28
3.1.1　改進AwesomeCo項目中的表單　28
3.1.2　創建基礎表單　29
3.1.3　使用range類型創建滑塊　29
3.1.4　使用選值框處理數字　30
3.1.5　日期控件　30
3.1.6　email類型　31
3.1.7　url類型　31
3.1.8　color類型　32
3.1.9　回退　32
3.1.10　替換顏色選擇器　33
3.1.11　Modernizr　34
3.2　實例4：使用autofocus屬性定位第一個表單域元素　34
3.3　實例5：使用placeholder屬性進行提示　35
3.3.1　簡單的注冊表單　36
3.3.2　阻止自動完成　37
3.3.3　回退　38
3.4　實例6：基于contenteditable屬性實現在位編輯　42
3.4.1　賬戶表單　42
3.4.2　持久化數據　44
3.4.3　回退　44
3.4.4　創批建編輯頁面　44
3.4.5　未來展望　47

第4章　用CSS3打造更好的用戶界面　48
4.1　實例7：使用偽類渲染表格　49
4.1.1　優化付款清單樣式　49
4.1.2　使用:nth-of-type條紋化表格的行　51
4.1.3　使用:nth-child對齊列文本　52
4.1.4　使用:last-child加粗最後一行　53
4.1.5　使用:nth-last-child向前查找元素　54
4.1.6　回退　55
4.1.7　修改html代碼　55
4.1.8　使用JavaScript　56
4.2　實例8：使用:after和content支持打印頁面上的鏈接　57
4.2.1　使用CSS　57
4.2.2　回退　58
4.3　實例9：創建多列布局　60
4.3.1　分欄　60
4.3.2　回退　63
4.4　實例10：使用媒體查詢構建移動設備界面　65
4.4.1　回退　66
4.4.2　未來展望　66

第5章　增強可訪問性　67
5.1　實例11：使用ARIA角色提供導航提示　68
5.1.1　標志角色　68
5.1.2　文檔結構角色　70
5.1.3　回退　71
5.2　實例12：創建可訪問的可更新區域　71
5.2.1　創建頁面　72
5.2.2　polite和assertive更新　74
5.2.3　atomic更新　74
5.2.4　隱藏區域　74
5.2.5　回退　76
5.2.6　未來展望　76

第二部分　新的影音解決方案
第6章　在canvas上繪圖　78
6.1　實例13：繪制logo　78
6.1.1　繪制logo　80
6.1.2　添加文字　81
6.1.3　繪制線條　81
6.1.4　移動原點　82
6.1.5　添加顏色　83
6.1.6　回退　84
6.2　實例14：使用RGraph繪制統計圖　84
6.2.1　使用HTML描述數據　85
6.2.2　將HTML內容轉換為條形圖　86
6.2.3　顯示備用內容　87
6.2.4　回退　88
6.2.5　未來展望　90

第7章　嵌入音頻和視頻　92
7.1　發展歷史　92
7.2　容器和編解碼器　93
7.2.1　視頻編解碼器　94
7.2.2　音頻編解碼器　95
7.2.3　容器和編解碼器協同工作　96
7.3　實例15：音頻　96
7.3.1　建立基本列表　97
7.3.2　回退　98
7.4　實例16：嵌入視頻　99
7.4.1　回退　101
7.4.2　HTML5視頻的限制　103
7.4.3　音頻、視頻和可訪問性　104
7.4.4　未來展望　105

第8章　柔化視覺體驗　106
8.1　實例17：創建圓角　106
8.1.1　圓角化登錄表單　107
8.1.2　特定于瀏覽器的選擇器　108
8.1.3　回退　109
8.1.4　檢測對圓角的支持　109
8.1.5　jQuery Corners　110
8.1.6　自制表單圓角插件　111
8.1.7　生成圓角　111
8.1.8　微調　112
8.2　實例18：使用陰影、漸變和變換　113
8.2.1　基礎結構　113
8.2.2　增加漸變　115
8.2.3　給標志加上陰影　115
8.2.4　旋轉標志　116
8.2.5　調節背景的透明度　117
8.2.6　回退　118
8.2.7　旋轉　119
8.2.8　漸變　119
8.2.9　透明度　120
8.2.10　整合　120
8.3　實例19：使用實用的字體　122
8.3.1　@font-face　122
8.3.2　字體格式　123
8.3.3　改變字體　124
8.3.4　回退　125
8.3.5　未來展望　126

第三部分　HTML5延伸
第9章　客戶端數據的使用　128
9.1　實例20：使用localStorage保存參數設置　129
9.1.1　創建參數表單　130
9.1.2　保存和加載設置　131
9.1.3　應用設置　132
9.1.4　回退　132
9.2　實例21：在客戶端關系數據庫中保存數據　135
9.2.1　瀏覽器中的CRUD　135
9.2.2　留言的前端展現　136
9.2.3　連接數據庫　138
9.2.4　創建留言表　139
9.2.5　加載留言　139
9.2.6　獲取指定記錄　140
9.2.7　插入、更新和刪除記錄　141
9.2.8　包裝　143
9.2.9　回退　144
9.3　實例22：離線運行　145
9.3.1　使用manifest定義緩存　145
9.3.2　manifest和緩存　146
9.3.3　未來展望　147

第10章　使用其他API錦上添花　148
10.1　實例23：維護歷史記錄　148
10.1.1　保存當前狀態　149
10.1.2　獲取先前狀態　149
10.1.3　默認狀態　150
10.1.4　回退　150
10.2　實例24：跨域對話　151
10.2.1　聯系人列表　152
10.2.2　發送消息　153
10.2.3　支持頁面　153
10.2.4　接收消息　155
10.2.5　回退　156
10.3　實例25：使用Web Sockets進行即時通信　157
10.3.1　即時通信界面　157
10.3.2　與服務器交互　159
10.3.3　回退　160
10.3.4　什么是Flash套接字策略　161
10.3.5　服務器　162
10.4　實例26：Geolocation　162
10.4.1　定位Awesomeness　163
10.4.2　如何定位　163
10.4.3　回退　164
10.4.4　未來展望　166

第11章　未來的發展方向　167
11.1　CSS3變換　167
11.2　Web Workers　170
11.3　原生拖放支持　171
11.3.1　拖放事件　172
11.3.2　釋放元素　173
11.3.3　修改樣式　174
11.3.4　拖動文件　175
11.3.5　并不完美　175
11.4　WebGL　176
11.5　Indexed Database API　176
11.6　客戶端表單驗證　176
11.7　前進！　177

附錄A　功能快速索引　178
A.1　新元素　178
A.2　屬性　178
A.3　表單　178
A.4　表單域屬性　179
A.5　可訪問性　179
A.6　多媒體　180
A.7　CSS3　180
A.8　客戶端存儲　181
A.9　其他API　181

附錄B　jQuery入門　183
B.1　加載jQuery　183
B.2　jQuery基礎　183
B.3　修改內容的方法　184
B.3.1　hide和show　184
B.3.2　html、val和attr　184
B.3.3　append、prepend和wrap　185
B.3.4　CSS和類　185
B.3.5　鏈　186
B.4　創建元素　186
B.5　事件　187
B.5.1　綁定　187
B.5.2　原始事件　187
B.6　document.ready　188

附錄C　音頻和視頻編碼　189
C.1　音頻編碼　189
C.2　為Web進行視頻編碼　189
附錄D　資源　191
附錄E　參考書目　193

2.2實例2：使用自定義數據屬性創建彈出窗口
在開發Web應用時，有時會用JavaScript獲取文檔之外的信息，某些情況下，我們需要用一些技巧來處理這些額外信息以保證Web應用能夠正常運行。一般而言，技巧無外乎是將額外的信息塞入事件處理程序或濫用rel屬性或class屬性以方便注入行為。感謝HTML5規范引入了自定義數據屬性，讓不堪回首的往日一去不返。
所有的自定義數據屬性都以data-前綴開頭，HTML5文檔的驗證器會在驗證時忽略它。開發人員可以在任意元素中加入自定義數據屬性，屬性值可以是照片的元數據、經緯度坐標或者彈出窗口的尺寸。最棒的是，幾乎在所有瀏覽器中，你都能夠使用自定義數據屬性，因為我們可以輕易地使用JavaScript來獲取它們。
2.2.1 行為與內容的分離，或者說為什么設置onclick不好
過去的數年里，彈出窗口的名聲一直不好，而這通常是很自然的事情。彈出窗口常被用來向用戶顯示廣告，或者偽裝成不被懷疑的間諜軟件或病毒，而最糟糕的是騙取個人信息并隨後加以出售。因此，大多數瀏覽器都有阻止彈出窗口的插件也就不足為怪了。