從0到1 HTML5+CSS3修煉之道

第 一部分　HTML5實(shí)戰(zhàn)
第 1章　HTML5簡(jiǎn)介 3
1．1　HTML、XHTML和HTML5 3
1．1．1　HTML和XHTML 3
1．1．2　HTML5 4
1．2　學(xué)前準(zhǔn)備 7
1．3　本章練習(xí) 8
第 2章　新增元素 9
2．1　結(jié)構(gòu)元素 9
2．1．1　header元素 9
2．1．2　nav元素 12
2．1．3　article元素 13
2．1．4　aside元素 14
2．1．5　section元素 14
2．1．6　footer元素 14
2．2　表單元素 15
2．2．1　新增input元素類(lèi)型 15
2．2．2　新增其他表單元素 26
2．3　其他新增元素 29
2．3．1　address元素 29
2．3．2　time元素 31
2．3．3　progress元素 32
2．3．4　meter元素 34
2．3．5　figure和figcaption元素 34
2．3．6　fieldset和legend元素 35
2．4　改良后的元素 36
2．4．1　a元素 36
2．4．2　ol元素 37
2．4．3　small元素 38
2．4．4　script元素 39
2．5　本章練習(xí) 40
第3章　新增屬性 42
3．1　公共屬性 42
3．1．1　hidden屬性 42
3．1．2　draggable屬性 43
3．1．3　contenteditable屬性 44
3．1．4　data-*屬性 45
3．2　input元素的新增屬性 47
3．2．1　autocomplete屬性 47
3．2．2　autofocus屬性 48
3．2．3　placeholder屬性 49
3．2．4　required屬性 50
3．2．5　pattern屬性 51
3．3　form元素的新增屬性 52
3．4　本章練習(xí) 54
第4章　元素拖放 56
4．1　元素拖放簡(jiǎn)介 56
4．2　dataTransfer對(duì)象 58
4．2．1　dataTransfer對(duì)象簡(jiǎn)介 58
4．2．2　dataTransfer對(duì)象應(yīng)用 59
4．3　本章練習(xí) 62
第5章　文件操作 63
5．1　文件操作簡(jiǎn)介 63
5．2　File對(duì)象 68
5．3　FileReader對(duì)象 70
5．4　Blob對(duì)象 77
5．5　本章練習(xí) 81
第6章　本地存儲(chǔ) 83
6．1　本地存儲(chǔ)簡(jiǎn)介 83
6．2　localStorage 84
6．3　sessionStorage 88
6．4　indexedDB 90
6．4．1　操作“數(shù)據(jù)庫(kù)” 91
6．4．2　操作“對(duì)象倉(cāng)庫(kù)” 94
6．4．3　增刪查改 97
6．5　實(shí)戰(zhàn)題：計(jì)數(shù)器 107
6．6　本章練習(xí) 108
第7章　音頻視頻 109
7．1　視頻音頻簡(jiǎn)介 109
7．1．1　Flash時(shí)代的逝去 109
7．1．2　HTML5時(shí)代的來(lái)臨 110
7．2　開(kāi)發(fā)視頻 110
7．2．1　video元素 110
7．2．2　視頻格式 112
7．2．3　自定義視頻 113
7．3　開(kāi)發(fā)音頻 122
7．3．1　audio元素 122
7．3．2　音頻格式 123
7．3．3　自定義音頻 124
7．4　本章練習(xí) 125
第8章　離線應(yīng)用 126
8．1　搭建服務(wù)器環(huán)境 126
8．2　離線存儲(chǔ) 128
8．3　更新緩存 131
8．4　本章練習(xí) 132
第9章　多線程處理 133
9．1　Web Worker簡(jiǎn)介 133
9．2　Web Worker應(yīng)用 135
9．3　實(shí)戰(zhàn)題：后臺(tái)計(jì)算 137
9．4　本章練習(xí) 138
第 10章　地理位置 139
10．1　地理位置簡(jiǎn)介 139
10．1．1　getCurrentPosition()方法 139
10．1．2　watchPosition()方法 143
10．1．3　clearWatch()方法 145
10．2　百度地圖 147
10．2．1　API簡(jiǎn)介 147
10．2．2　API應(yīng)用 151
10．3　本章練習(xí) 152
第 11章　桌面通知 153
11．1　Notification API簡(jiǎn)介 153
11．2　Notification API應(yīng)用 155
11．3　本章練習(xí) 157
第 12章　Canvas 158
12．1　Canvas是什么 158
12．1．1　Canvas簡(jiǎn)介 158
12．1．2　Canvas與SVG 160
12．2　Canvas元素 160
12．2．1　Canvas元素 161
12．2．2　Canvas對(duì)象 162
12．3　直線 164
12．3．1　Canvas坐標(biāo)系 164
12．3．2　直線的繪制 165
12．4　矩形 170
12．4．1　描邊矩形 170
12．4．2　填充矩形 173
12．4．3　rect()方法 176
12．4．4　清空矩形 178
12．5　多邊形 180
12．5．1　Canvas繪制箭頭 181
12．5．2　Canvas繪制正多邊形 182
12．5．3　Canvas繪制五角星 184
12．6　實(shí)戰(zhàn)題：繪制調(diào)色板 186
12．7　本章練習(xí) 188
第二部分　CSS3實(shí)戰(zhàn)
第 13章　CSS3簡(jiǎn)介 191
13．1　CSS3簡(jiǎn)介 191
13．2　瀏覽器私有前綴 192
13．3　一個(gè)酷炫的CSS3效果 194
13．4　本章練習(xí) 197
第 14章　新增選擇器 198
14．1　CSS3選擇器簡(jiǎn)介 198
14．2　屬性選擇器 199
14．3　子元素偽類(lèi)選擇器 201
14．3．1　
：first-child、：last-child、：nth-child(n)、：only-child 201
14．3．2　
：first-of-type、：last-of-type、：nth-of-type(n)、：only-of-type 204
14．4　UI偽類(lèi)選擇器 205
14．4．1?。篺ocus 205
14．4．2?。海簊election 206
14．4．3?。篶hecked 209
14．4．4?。篹nabled和：disabled 210
14．4．5?。簉ead-write和：read-only 211
14．5　其他偽類(lèi)選擇器 212
14．5．1?。簉oot 212
14．5．2?。篹mpty 213
14．5．3?。簍arget 214
14．5．4?。簄ot() 217
14．6　本章練習(xí) 218
第 15章　文本樣式 220
15．1　文本樣式簡(jiǎn)介 220
15．2　文本陰影：text-shadow 220
15．2．1　W3C坐標(biāo)系 220
15．2．2　text-shadow屬性簡(jiǎn)介 221
15．2．3　定義多個(gè)陰影 224
15．3　文本描邊：text-stroke 224
15．4　文本溢出：text-overflow 226
15．5　強(qiáng)制換行：word-wrap、
word-break 228
15．6　嵌入字體：@font-face 230
15．7　實(shí)戰(zhàn)題：火焰字 232
15．8　本章練習(xí) 233
第 16章　顏色樣式 234
16．1　顏色樣式簡(jiǎn)介 234
16．2　opacity透明度 234
16．3　RGBA顏色 235
16．4　CSS3漸變 239
16．4．1　線性漸變 240
16．4．2　徑向漸變 242
16．5　實(shí)戰(zhàn)題：漸變按鈕 248
16．6　實(shí)戰(zhàn)題：雞蛋圓 249
16．7　本章練習(xí) 250
第 17章　邊框樣式 251
17．1　邊框樣式簡(jiǎn)介 251
17．2　圓角效果：border-radius 251
17．2．1　border-radius實(shí)現(xiàn)圓角 252
17．2．2　border-radius實(shí)現(xiàn)半圓和圓 256
17．2．3　border-radius實(shí)現(xiàn)橢圓 258
17．2．4　border-radius的派生子屬性 260
17．3　邊框陰影：box-shadow 260
17．3．1　box-shadow屬性簡(jiǎn)介 260
17．3．2　4個(gè)方向陰影獨(dú)立樣式 265
17．4　多色邊框：border-colors 266
17．5　邊框背景：border-image 269
17．5．1　border-image屬性簡(jiǎn)介 269
17．5．2　border-image的派生子屬性 272
17．6　實(shí)戰(zhàn)題：3D卡通頭像 273
17．7　本章練習(xí) 276
第 18章　背景樣式 279
18．1　背景樣式簡(jiǎn)介 279
18．2　背景大?。篵ackground-size 279
18．3　背景位置：background-origin 282
18．4　背景剪切：background-clip 285
18．5　多背景圖片 288
18．6　本章練習(xí) 290
第 19章　CSS3變形 291
19．1　CSS3變形簡(jiǎn)介 291
19．2　平移：translate() 292
19．3　縮放：scale() 296
19．4　傾斜：skew() 300
19．5　旋轉(zhuǎn)：rotate() 304
19．6　中心原點(diǎn)：transform-origin 305
19．7　實(shí)戰(zhàn)題：個(gè)性照片墻 307
19．8　本章練習(xí) 309
第 20章　CSS3過(guò)渡 310
20．1　CSS3過(guò)渡簡(jiǎn)介 310
20．2　過(guò)渡屬性：transition-property 312
20．3　過(guò)渡時(shí)間：transition-duration 313
20．4　過(guò)渡方式：transition-
timing-function 315
20．5　延遲時(shí)間：transition-delay 317
20．6　深入了解transition屬性 318
20．6．1　transition-property取值為all 318
20．6．2　transition-delay的省略 320
20．6．3　transition屬性的位置 320
20．7　實(shí)戰(zhàn)題：鼠標(biāo)指針移上去顯示內(nèi)容 321
20．8　實(shí)戰(zhàn)題：圖片文字介紹滑動(dòng)效果 323
20．9　實(shí)戰(zhàn)題：白光閃過(guò)效果 326
20．10　實(shí)戰(zhàn)題：脈動(dòng)效果 327
20．11　實(shí)戰(zhàn)題：手風(fēng)琴效果 328
20．12　本章練習(xí) 330
第 21章　CSS3動(dòng)畫(huà) 331
21．1　CSS3動(dòng)畫(huà)簡(jiǎn)介 331
21．2　@keyframes 333
21．3　動(dòng)畫(huà)名稱(chēng)：animation-name 335
21．4　持續(xù)時(shí)間：animation-duration 338
21．5　動(dòng)畫(huà)方式：animation-
timing-function 340
21．6　延遲時(shí)間：animation-delay 342
21．7　播放次數(shù)：animation-
iteration-count 343
21．8　播放方向：animation-direction 345
21．9　播放狀態(tài)：animation-play-state 347
21．10　實(shí)戰(zhàn)題：脈沖動(dòng)畫(huà) 348
21．11　實(shí)戰(zhàn)題：loading效果 350
21．12　本章練習(xí) 352
第 22章　多列布局 353
22．1　多列布局 353
22．2　列數(shù)：column-count 354
22．3　列寬：column-width 356
22．4　間距：column-gap 358
22．5　邊框：column-rule 360
22．6　跨列：column-span 362
22．7　實(shí)戰(zhàn)題：瀑布流布局 364
22．8　本章練習(xí) 366
第 23章　濾鏡效果 367
23．1　濾鏡效果簡(jiǎn)介 367
23．2　亮度：brightness() 368
23．3　灰度：grayscale() 369
23．4　復(fù)古：sepia() 370
23．5　反色：invert() 371
23．6　旋轉(zhuǎn)：hue-rotate() 372
23．7　陰影：drop-shadow() 373
23．8　透明度：opacity() 374
23．9　模糊度：blur() 375
23．10　對(duì)比度：contrast() 376
23．11　飽和度：saturate() 377
23．12　多種濾鏡 378
23．13　實(shí)戰(zhàn)題：鬼屋 379
23．14　本章練習(xí) 381
第 24章　彈性盒子模型 382
24．1　彈性盒子模型簡(jiǎn)介 382
24．2　放大比例：flex-grow 385
24．3　縮小比例：flex-shrink 387
24．4　元素寬度：flex-basis 389
24．5　復(fù)合屬性：flex 391
24．6　排列方向：flex-direction 392
24．7　多行顯示：flex-wrap 394
24．8　復(fù)合屬性：flex-flow 396
24．9　排列順序：order 397
24．10　水平對(duì)齊：justify-content 399
24．11　垂直對(duì)齊：align-items 401
24．12　實(shí)戰(zhàn)題：水平居中和垂直居中 404
24．13　實(shí)戰(zhàn)題：伸縮菜單 405
24．14　本章練習(xí) 407
第 25章　其他樣式 408
25．1　outline屬性 408
25．2　initial取值 409
25．3　calc()函數(shù) 410
25．4　overflow-x和overflow-y 413
25．5　pointer-events屬性 417
25．6　本章練習(xí) 418
附錄A　HTML5新增元素 420
附錄B　HTML5新增屬性 422
附錄C　CSS3新增選擇器 423
附錄D　CSS3新增屬性 425