HTML 5與CSS 3權(quán)威指南預(yù)售商品

前言
第 1 章   Web時(shí)代的變遷 / 1
1.1   迎接新的Web時(shí)代 / 2
1.1.1   HTML 5時(shí)代即將來臨 / 2
1.1.2   HTML 5的目標(biāo) / 4
1.2   HTML 5會深受歡迎的理由 / 4
1.2.1   世界知名瀏覽器廠商對HTML 5的支持 / 4
1.2.2   第一個(gè)理由：時(shí)代的要求 / 5
1.2.3   第二個(gè)理由：Internet Explorer 8 / 6
1.3   可以放心使用HTML 5的三個(gè)理由 / 6
1.4   HTML 5要解決的三個(gè)問題 / 7
第 2 章   HTML 5與HTML 4的區(qū)別 / 9
2.1   語法的改變 / 10
2.1.1   HTML 5的語法變化 / 10
2.1.2   HTML 5中的標(biāo)記方法 / 11
2.1.3   HTML 5確保了與之前HTML版本的兼容性 / 11
2.1.4   標(biāo)記示例 / 13
2.2   新增的元素和廢除的元素 / 13
2.2.1   新增的結(jié)構(gòu)元素 / 13
2.2.2   新增的其他元素 / 15
2.2.3   新增的input元素的類型 / 19
2.2.4   廢除的元素 / 19
2.3   新增的屬性和廢除的屬性 / 20
2.3.1   新增的屬性 / 20
2.3.2   廢除的屬性 / 21
2.4   全局屬性 / 23
2.4.1   contentEditable屬性 / 23
2.4.2   designMode屬性 / 24
2.4.3   hidden屬性 / 25
2.4.4   spellcheck屬性 / 25
2.4.5   tabindex屬性 / 25
第 3 章   HTML 5的結(jié)構(gòu) / 27
3.1   新增的主體結(jié)構(gòu)元素 / 28
3.1.1   article元素 / 28
3.1.2   section元素 / 30
3.1.3   nav元素 / 32
3.1.4   aside元素 /33
3.1.5   time元素與微格式 / 35
3.1.6   pubdate屬性 / 36
3.2   新增的非主體結(jié)構(gòu)元素 / 36
3.2.1   header元素 / 37
3.2.2   hgroup元素 / 38
3.2.3   footer元素 / 38
3.2.4   address元素 / 39
3.3   HTML 5結(jié)構(gòu) / 40
3.3.1   大綱 / 40
3.3.2   對新的結(jié)構(gòu)元素使用樣式 / 43
3.3.3   article元素的樣式 / 44
第 4 章   表單與文件 / 45
4.1   新增元素與屬性 / 46
4.1.1   新增屬性 / 46
4.1.2   大幅度地增加與改良了input元素的種類 / 49
4.1.3   對新的表單元素使用樣式 / 54
4.1.4   output元素的追加 / 55
4.2   表單驗(yàn)證 / 55
4.2.1   自動(dòng)驗(yàn)證 / 55
4.2.2   顯式驗(yàn)證 / 57
4.2.3   取消驗(yàn)證 / 58
4.2.4   自定義錯(cuò)誤信息 / 58
4.3   增強(qiáng)的頁面元素 / 59
4.3.1   新增的figure元素與figcaption元素 / 60
4.3.2   新增的details元素 / 61
4.3.3   新增的mark元素 / 62
4.3.4   新增的progress元素 / 64
4.3.5   新增的meter元素 / 65
4.3.6   新增的menu元素與command元素 / 66
4.3.7   改良的ol列表 / 66
4.3.8   改良的dl列表 / 67
4.3.9   加以嚴(yán)格限制的cite元素 / 68
4.3.10   重新定義的small元素 / 69
4.4   文件API / 69
4.4.1   FileList對象與file對象 / 69
4.4.2   Blob對象 / 70
4.4.3   FileReader接口 / 72
4.5   拖放API / 77
4.5.1   實(shí)現(xiàn)拖放的步驟 / 77
4.5.2   DataTransfer對象的屬性與方法 / 80
4.5.3   設(shè)定拖放時(shí)的視覺效果 / 80
4.5.4   自定義拖放圖標(biāo) / 81
第 5 章   繪制圖形 / 82
5.1   canvas元素的基礎(chǔ)知識 / 83
5.1.1   在頁面中放置canvas元素 / 83
5.1.2   繪制矩形 / 84
5.2   使用路徑 / 86
5.2.1   繪制圓形 / 86
5.2.2   如果沒有關(guān)閉路徑會怎么樣 / 88
5.2.3   moveTo與lineTo / 90
5.2.4   使用bezierCurveTo繪制貝濟(jì)埃曲線 / 91
5.3   繪制漸變圖形 / 93
5.3.1   繪制線性漸變 / 93
5.3.2   繪制徑向漸變 / 95
5.4   繪制變形圖形 / 96
5.4.1   坐標(biāo)變換 / 96
5.4.2   坐標(biāo)變換與路徑的結(jié)合使用 / 98
5.4.3   矩陣變換 / 99
5.5   圖形組合 / 103
5.6   給圖形繪制陰影 / 105
5.7   使用圖像 / 107
5.7.1   繪制圖像 / 107
5.7.2   圖像平鋪 / 109
5.7.3   圖像裁剪 / 111
5.7.4   像素處理 / 113
5.8   繪制文字 / 115
5.9   補(bǔ)充知識 / 117
5.9.1   保存與恢復(fù)狀態(tài) / 117
5.9.2   保存文件 / 118
5.9.3   簡單動(dòng)畫的制作 / 119
第 6 章   多媒體播放 / 122
6.1   video元素與audio元素的基礎(chǔ)知識 / 123
6.1.1   HTML  4頁面中播放視頻或音頻的方法 / 123
6.1.2   HTML 5頁面中播放視頻或音頻的方法 / 124
6.2   屬性 / 125
6.3   方法 / 129
6.4   事件 / 132
6.4.1   事件處理方式 / 132
6.4.2   事件介紹 / 132
6.4.3   事件捕捉示例 / 133
第 7 章   本地存儲 / 135
7.1   Web Storage / 136
7.1.1   Web Storage是什么 / 136
7.1.2   簡單Web留言本 / 139
7.1.3   作為簡易數(shù)據(jù)庫來利用 / 141
7.2   本地?cái)?shù)據(jù)庫 / 144
7.2.1   本地?cái)?shù)據(jù)庫的基本概念 / 144
7.2.2   用executeSql來執(zhí)行查詢 / 145
7.2.3   使用數(shù)據(jù)庫實(shí)現(xiàn)Web留言本 / 146
7.2.4   transaction方法中的處理 / 149
第 8 章   離線應(yīng)用程序 / 151
8.1   離線Web應(yīng)用程序詳解 / 152
8.1.1   新增的本地緩存 / 152
8.1.2   本地緩存與瀏覽器網(wǎng)頁緩存的區(qū)別 / 152
8.2   manifest文件 / 153
8.3   瀏覽器與服務(wù)器的交互過程 / 155
8.4   applicationCache對象 / 156
8.4.1   swapCache方法 / 157
8.4.2   applicationCache對象的事件 / 158
第 9 章   通信API / 162
9.1   跨文檔消息傳輸 / 163
9.1.1  跨文檔消息傳輸?shù)幕局R / 163
9.1.2   跨文檔消息傳輸示例 / 163
9.2   Web Sockets通信 / 166
9.2.1   Web Sockets通信的基本知識 / 166
9.2.2   使用Web Sockets API / 166
9.2.3   Web Sockets API使用示例 / 167
9.2.4   發(fā)送對象 / 168
第10章   使用Web Workers處理線程 / 170
10.1   基礎(chǔ)知識 / 171
10.2   與線程進(jìn)行數(shù)據(jù)的交互 / 174
10.3   線程嵌套 / 176
10.3.1   單層嵌套 / 176
10.3.2   在多個(gè)子線程中進(jìn)行數(shù)據(jù)的交互 / 178
10.4   線程中可用的變量、函數(shù)與類 / 180
第11章   獲取地理位置信息 / 181
11.1   Geolocation  API的基本知識 / 182
11.1.1   取得當(dāng)前地理位置 / 182
11.1.2   持續(xù)監(jiān)視當(dāng)前地理位置的信息 / 184
11.1.3   停止獲取當(dāng)前用戶的地理位置信息 / 184
11.2   position對象 / 184
11.3   在頁面上使用google地圖 / 186
第12章   CSS 3概述 / 189
12.1   概要介紹 / 190
12.1.1   CSS 3是什么 / 190
12.1.2   CSS 3的歷史 / 190
12.2   使用CSS 3能做什么 / 191
12.2.1   模塊與模塊化結(jié)構(gòu) / 191
12.2.2   一個(gè)簡單的CSS 3示例 / 192
第13章   選擇器 / 195
13.1   選擇器概述 / 197
13.2   屬性選擇器 / 197
13.2.1   屬性選擇器是什么 / 197
13.2.2   CSS 3中的屬性選擇器 / 199
13.2.3   靈活運(yùn)用屬性選擇器 / 200
13.3   結(jié)構(gòu)性偽類選擇器 / 201
13.3.1   CSS中的偽類選擇器及偽元素 / 201
13.3.2   選擇器root、not、empty和target / 205
13.3.3  選擇器：first-child、last-child、nth-child和nth-last-child / 210
13.3.4   選擇器：nth-of-type和nth-last-of-type / 214
13.3.5   循環(huán)使用樣式 / 216
13.3.6   only-child選擇器 / 218
13.4   UI元素狀態(tài)偽類選擇器 / 219
13.4.1   選擇器：E:hover、E:active和E:focus / 220
13.4.2   E:enabled偽類選擇器與E:disabled偽類選擇器 / 222
13.4.3   E: read-only偽類選擇器與E:read-write偽類選擇器 / 223
13.4.4   偽類選擇器：E:checked、E:default和E: indeterminate /224
13.4.5   E::selection偽類選擇器 / 226
13.5   通用兄弟元素選擇器 / 228
第14章   使用選擇器在頁面中插入內(nèi)容 / 230
14.1   使用選擇器來插入文字 / 231
14.1.1   使用選擇器來?入內(nèi)容 / 231
14.1.2   指定個(gè)別元素不進(jìn)行插入 / 232
14.2   插入圖像文件 / 234
14.2.1   在標(biāo)題前插入圖像文件 / 234
14.2.2   插入圖像文件的好處 / 234
14.2.3   將alt屬性的值作為圖像的標(biāo)題來顯示 / 236
14.3   使用content屬性來插入項(xiàng)目編號 / 237
14.3.1   在多個(gè)標(biāo)題前加上連續(xù)編號 / 237
14.3.2   在項(xiàng)目編號中追加文字 / 238
14.3.3   指定編號的樣式 / 238
14.3.4   指定編號的種類 / 238
14.3.5   編號嵌套 / 239
14.3.6   中編號中嵌入大編號 / 240
14.3.7   在字符串兩邊添加嵌套文字符號 / 242
第15章   文字與字體相關(guān)樣式 / 244
15.1   給文字添加陰影—text-shadow屬性 / 245
15.1.1   text-shadow屬性的使用方法 / 245
15.1.2   位移距離 / 247
15.1.3   陰影的模糊半徑 / 247
15.1.4   陰影的顏色 / 248
15.1.5   ?定多個(gè)陰影 / 248
15.2   讓文本自動(dòng)換行—word-break屬性 / 249
15.2.1  依靠瀏覽器讓文本自動(dòng)換行 / 249
15.2.2   指定自動(dòng)換行的處理方法 / 249
15.3   讓長單詞與URL地址自動(dòng)換行—word-wrap屬性 / 251
15.4   使用服務(wù)器端字體—Web Font與@font-face屬性 / 251
15.4.1   在網(wǎng)頁上顯示服務(wù)器端字體 / 252
15.4.2   定義斜體或粗體字體 / 253
15.4.3   顯示客戶端本地的字體 / 255
15.4.4   屬性值的指定 / 256
15.5   修改字體種類而保持字體尺寸不變—font-size-adjust屬性 / 257
15.5.1   字體不同導(dǎo)致文字大小的不同 / 257
15.5.2   font-size-adjust屬性的使用方法 / 259
15.5.3   瀏覽器對于aspect值的計(jì)算方法 / 259
15.5.4   font-size-adjust屬性的使用示例 / 260
第16章   盒相關(guān)樣式 / 262
16.1   盒的類型 / 263
16.1.1   盒的基本類型 / 263
16.1.2   inline-block類型 / 264
16.1.3   inline-table類型 / 270
16.1.4   list-item類型 / 272
16.1.5   run-in類型與compact類型 / 273
16.1.6   表格相關(guān)類型 / 274
16.1.7   none類型 / 276
16.1.8   各種瀏覽器對于各種盒類型的支持情況 / 277
16.2   對于盒中容納不下的內(nèi)容的顯示 / 277
16.2.1   overflow屬性 / 278
16.2.2   overflow-x屬性與overflow-y屬性 / 281
16.2.3   text-overflow屬性 / 281
16.3   對盒使用陰影 / 283
16.3.1   box-shadow屬性的使用方法 / 283
16.3.2   將參數(shù)設(shè)定為0 / 284
16.3.3   對盒內(nèi)子元素使用陰影 / 285
16.3.4   對第一個(gè)文字或第一行使用陰影 / 286
16.3.5   對表格及單元格使用陰影 / 287
16.4   指定針對元素的寬度與高度的計(jì)算方法 / 288
16.4.1   box-sizing屬性 / 288
16.4.2   為什么要使用box-sizing屬性 / 291
第17章   與背景和邊框相關(guān)樣式 / 293
17.1   與背景相關(guān)的新增屬性 / 294
17.1.1   指定背景的顯示范圍—background-clip屬性 / 294
17.1.2   指定繪制背景圖像的繪制起點(diǎn)—background-origin屬性 / 296
17.1.3   指定背景圖像的尺寸—background-size屬性 / 299
17.1.4   指定內(nèi)聯(lián)元素背景圖像進(jìn)行平鋪時(shí)的循環(huán)方式—background-break屬性 /301
17.2   在一個(gè)元素中顯示多個(gè)背景圖像 / 302
17.3   圓角邊框的繪制 / 303
17.3.1   border-radius屬性 / 304
17.3.2   在border-radius屬性中指定兩個(gè)半徑 / 305
17.3.3   不顯示邊框的時(shí)候 / 306
17.3.4   修改邊框種類的時(shí)候 / 306
17.3.5   繪制四個(gè)角不同半徑的圓角邊框 / 306
17.4   使用圖像邊框 / 307
17.4.1   border-image屬性 / 307
17.4.2   border-image屬性最簡單的使用方法 / 308
17.4.3   使用border-image屬性來指定邊框?qū)挾?/ 310
17.4.4   中央圖像的自動(dòng)拉伸 / 311
17.4.5   指定四條邊中圖像的顯示方法 / 312
17.4.6   使用背景圖像 / 315
第18章   CSS 3中的變形處理 / 317
18.1   transform功能的基礎(chǔ)知識 / 318
18.1.1   如何使用transform功能 / 318
18.1.2   transform功能的分類 / 319
18.2   對一個(gè)元素使用多種變形的方法 / 323
18.2.1   兩個(gè)變形示例 / 323
18.2.2   指定變形的基準(zhǔn)點(diǎn) / 325
第19章   CSS 3中的動(dòng)畫功能 / 328
19.1   Transitions功能 / 329
19.1.1   Transitions功能的使用方法 / 329
19.1.2   使用Transitions功能同時(shí)平滑過渡多個(gè)屬性值 / 330
19.2   Animations功能 / 333
19.2.1   Animations功能的使用方法 / 333
19.2.2   實(shí)現(xiàn)多個(gè)屬性值同時(shí)改變的動(dòng)畫 / 335
19.2.3   實(shí)現(xiàn)動(dòng)畫的方法 / 337
19.2.4   實(shí)現(xiàn)網(wǎng)頁的淡入效果 / 339
第20章   布局相關(guān)樣式 / 340
20.1   多欄布局 / 341
20.1.1   使用float屬性或position屬性的缺點(diǎn) / 341
20.1.2   使用多欄布局方式 / 343
20.2   盒布局 / 346
20.2.1   盒布局的基礎(chǔ)知識 / 346
20.2.2   彈性盒布局 / 350
第21章   Media Queries相關(guān)樣式 / 362
21.1   根據(jù)瀏覽器的窗口大小來選擇使用不同的樣式 / 363
21.2   在iPhone中的顯示 / 367
21.3   Media Queries的使用方法 / 368
第22章   CSS 3的其他重要樣式和屬性 / 371
22.1   顏色相關(guān)樣式 / 372
22.1.1   利用alpha通道來設(shè)定顏色 / 372
22.1.2   alpha通道與opacity屬性的區(qū)別 / 374
22.1.3   指定顏色值為transparent / 376
22.2   用戶界面相關(guān)樣式 / 377
22.2.1   輪廓相關(guān)樣式 / 377
22.2.2   resize屬性 / 380
22.3   取消對元素的樣式指定—initial屬性值 / 381
22.3.1   取消對元素的樣式指定 / 381
22.3.2   使用initial屬性值并不等于取消樣式設(shè)定的特例 / 383
第23章   綜合實(shí)例 / 385
23.1   實(shí)例1：使用HTML 5中新增結(jié)構(gòu)元素來構(gòu)建網(wǎng)頁 / 386
23.1.1   組織網(wǎng)頁結(jié)構(gòu) / 386
23.1.2   header元素中的內(nèi)容 / 388
23.1.3   aside元素中的內(nèi)容 / 395
23.1.4   section元素中的內(nèi)容 / 398
23.1.5   footer元素中的內(nèi)容 / 400
23.2   實(shí)例2：使用HTML 5+CSS 3來構(gòu)建Web應(yīng)用程序 / 401
23.2.1   HTML 5頁面代碼分析 / 402
23.2.2   CSS 3樣式代碼分析 / 405
23.2.3   JavaScript腳本代碼分析 / 409