從0到1 HTML5+CSS3修煉之道

莫振傑

從事前後端開發4年多，開發過綠葉學習網、廣州智能工程研究會網站、大量在線應用工具以及各種類型網站，著有多本編程書。 
現為綠葉學習網的站長，該網站用於分享前後端開發經驗和前後端開發的在線教程，在因特網引起廣泛關註，受到網友推崇。

第一部分HTML5實戰
 

第1章HTML5簡介\t3
1.1 HTML、XHTML和HTML5\t3
1.1.1 HTML和XHTML\t3
1.1.2 HTML5\t4
1.2學前準備\t7
1.3本章練習\t8

第2章新增元素\t9
2.1結構元素\t9
2.1.1 header元素\t9
2.1.2 nav元素\t12
2.1.3 article元素\t13
2.1.4 aside元素\t14
2.1.5 section元素\ t14
2.1.6 footer元素\t14
2.2表單元素\t15
2.2.1新增input元素類型\t15
2.2.2新增其他表單元素\t26
2.3其他新增元素\t29
2.3.1 address元素\t29
2.3.2 time元素\t31
2.3.3 progress元素\t32
2.3.4 meter元素\t34
2.3.5 figure和figcaption元素\t34
2.3.6 fieldset和legend元素\t35
2.4改良後的元素\t36
2.4.1 a元素\t36

2.4.2 ol元素\t37

2.4.3 small元素\t38
2.4.4 script元素\t39
2.5本章練習\t40

第3章新增屬性\t42
3.1公共屬性\t42
3.1.1 hidden屬性\t42
3.1.2 draggable屬性\t43
3.1.3 contenteditable屬性\t44
3.1.4 data-*屬性\t45
3.2 input元素的新增屬性\t47
3.2.1 autocomplete屬性\t47
3.2.2 autofocus屬性\t48
3.2.3 placeholder屬性\t49
3.2.4 required屬性\t50
3.2.5 pattern屬性\t51
3.3 form元素的新增屬性\t52
3.4本章練習\t54

第4章元素拖放\t56
4.1元素拖放簡介\t56
4.2 dataTransfer對象\t58
4.2.1 dataTransfer對像簡介\t58
4.2.2 dataTransfer對象應用\t59
4.3本章練習\t62

第5章文件操作\t63
5.1文件操作簡介\t63
5.2 File對象\t68
5.3 FileReader對象\t70
5.4 Blob對象\t77
5.5本章練習\t81

第6章本地存儲\t83
6.1本地存儲簡介\t83
6.2 localStorage\t84
6.3 sessionStorage\t88
6.4 indexedDB\t90
6.4.1操作“數據庫”\t91
6.4.2操作“對象倉庫”\t94
6.4.3增刪查改\t97
6.5實戰題：計數器\t107
6.6本章練習\ t108

第7章音頻視頻\t109
7.1視頻音頻簡介\t109
7.1.1 Flash時代的逝去\t109
7.1.2 HTML5時代的來臨\t110
7.2開發視頻\t110
7.2.1 video元素\t110
7.2.2視頻格式\ t112
7.2.3自定義視頻\t113
7.3開發音頻\t122
7.3.1 audio元素\t122
7.3.2音頻格式\t123
7.3.3自定義音頻\t124
7.4本章練習\t125

第8章離線應用\t126
8.1搭建服務器環境\t126
8.2離線存儲\t128
8.3更新緩存\t131
8.4本章練習\t132

第9章多線程處理\t133
9.1 Web Worker簡介\t133
9.2 Web Worker應用\t135
9.3實戰題：後臺計算\t137
9.4本章練習\t138

第10章地理位置\t139
10.1地理位置簡介\t139
10.1.1 getCurrentPosition()方法\t139
10.1.2 watchPosition()方法\t143
10.1.3 clearWatch()方法\t145
10.2百度地圖\t147
10.2.1 API簡介\t147
10.2.2 API應用\t151
10.3本章練習\t152

第11章桌面通知\t153
11.1 Notification API簡介\t153
11.2 Notification API應用\t155
11.3本章練習\t157

第12章Canvas\t158
12.1 Canvas是什麼\t158
12.1.1 Canvas簡介\t158
12.1.2 Canvas與SVG\t160
12.2 Canvas元素\t160
12.2.1 Canvas元素\t161
12.2.2 Canvas對象\t162
12.3直線\t164
12.3.1 Canvas坐標系\t164
12.3.2直線的繪製\t165
12.4矩形\t170
12.4.1描邊矩形\t170
12.4.2填充矩形\t173
12.4.3 rect()方法\t176
12.4. 4清空矩形\t178
12.5多邊形\t180
12.5.1 Canvas繪製箭頭\t181
12.5.2 Canvas繪製正多邊形\t182
12.5.3 Canvas繪製五角星\t184
12.6實戰題：繪製調色板\t186
12.7本章練習\t188
 

第二部分CSS3實戰
 

第13章CSS3簡介\t191
13.1 CSS3簡介\t191
13.2瀏覽器私有前綴\t192
13.3一個酷炫的CSS3效果\t194
13.4本章練習\t197

第14章新增選擇器\t198
14.1 CSS3選擇器簡介\t198
14.2屬性選擇器\t199
14.3子元素偽類選擇器\t201
14.3.1:first-child、:last-child、:nth-child(n)、:only-child\t201
14.3.2:first-of-type、:last-of-type、:nth-of-type(n) 、:only-of-type\t204
14.4 UI偽類選擇器\t205
14.4.1 :focus\t205
14.4.2 ::selection\t206
14.4.3 :checked\t209
14.4.4 :enabled和:disabled\t210
14.4 .5 :read-write和:read-only\t211
14.5其他偽類選擇器\t212
14.5.1 :root\t212
14.5.2 :empty\t213
14.5.3 :target\t214
14.5.4 :not()\ t217
14.6本章練習\t218

第15章文本樣式\t220
15.1文本樣式簡介\t220
15.2文本陰影：text-shadow\t220
15.2.1 W3C坐標系\t220
15.2.2 text-shadow屬性簡介\t221
15.2.3定義多個陰影\t224
15.3文本描邊：text-stroke\t224
15.4文本溢出：text-overflow\t226
15.5強制換行：word-wrap、word-break\t228
15.6嵌入字體：@font-face\t230
15.7實戰題：火焰字\t232
15.8本章練習\t233

第16章顏色樣式\t234
16.1顏色樣式簡介\t234
16.2 opacity透明度\t234
16.3 RGBA顏色\t235
16.4 CSS3漸變\t239
16.4.1線性漸變\t240
16.4.2徑向漸變\t242
16.5實戰題：漸變按鈕\t248
16.6實戰題：雞蛋圓\t249
16.7本章練習\t250

第17章邊框樣式\t251
17.1邊框樣式簡介\t251
17.2圓角效果：border-radius\t251
17.2.1 border-radius實現圓角\t252
17.2.2 border-radius實現半圓和圓\t256
17.2.3 border-radius實現橢圓\t258
17.2.4 border-radius的派生子屬性\t260
17.3邊框陰影：box-shadow\t260
17.3.1 box-shadow屬性簡介\t260
17.3.2 4個方向陰影獨立樣式\t265
17.4多色邊框：border-colors\t266
17.5邊框背景：border-image\t269
17.5.1 border-image屬性簡介\t269
17.5.2 border-image的派生子屬性\t272
17.6實戰題：3D卡通頭像\t273
17.7本章練習\t276

第18章背景樣式\t279
18.1背景樣式簡介\t279
18.2背景大小：background-size\t279
18.3背景位置：background-origin\t282
18.4背景剪切：background-clip\t285
18.5多背景圖片\t288
18.6本章練習\t290

第19章CSS3變形\t291
19.1 CSS3變形簡介\t291
19.2平移：translate()\t292
19.3縮放：scale()\t296
19.4傾斜：skew()\t300
19.5旋轉：rotate()\t304
19.6中心原點：transform-origin\t305
19.7實戰題：個性照片牆\t307
19.8本章練習\t309

第20章CSS3過渡\t310
20.1 CSS3過渡簡介\t310
20.2過渡屬性：transition-property\t312
20.3過渡時間：transition-duration\t313
20.4過渡方式：transition -timing-function\t315
20.5延遲時間：transition-delay\t317
20.6深入瞭解transition屬性\t318
20.6.1 transition-property取值為all\t318
20.6.2 transition-delay的省略\t320
20.6.3 transition屬性的位置\t320
20.7實戰題：鼠標指針移上去顯示內容\t321
20.8實戰題：圖片文字介紹滑動效果\t323
20.9實戰題：白光閃過效果\t326
20.10實戰題：脈動效果\t327
20.11實戰題：手風琴效果\t328
20.12本章練習\t330

第21章CSS3動畫\t331
21.1 CSS3動畫簡介\t331
21.2 @keyframes\t333
21.3動畫名稱：animation-name\t335
21.4持續時間：animation-duration\t338
21.5動畫方式：animation-timing-function\t340
21.6延遲時間：animation-delay\t342
21.7播放次數：animation-iteration-count\t343
21.8播放方向：animation-direction\t345
21.9播放狀態：animation-play-state\t347
21.10實戰題：脈衝動畫\t348
21.11實戰題：loading效果\t350
21.12本章練習\t352

第22章多列佈局\t353
22.1多列佈局\t353
22.2列數：column-count\t354
22.3列寬：column-width\t356
22.4間距：column-gap\t358
22.5邊框：column-rule\t360
22.6跨列：column-span\t362
22.7實戰題：瀑布流佈局\t364
22.8本章練習\t366

第23章濾鏡效果\t367
23.1濾鏡效果簡介\t367
23.2亮度：brightness()\t368
23.3灰度：grayscale()\t369
23.4復古：sepia()\t370
23.5反色：invert()\t371
23.6旋轉：hue-rotate()\t372
23.7陰影：drop-shadow ()\t373
23.8透明度：opacity()\t374
23.9模糊度：blur()\t375
23.10對比度：contrast()\t376
23.11飽和度：saturate()\t377
23.12多種濾鏡\t378
23.13實戰題：鬼屋\t379
23.14本章練習\t381

第24章彈性盒子模型\t382
24.1彈性盒子模型簡介\t382
24.2放大比例：flex-grow\t385
24.3縮小比例：flex-shrink\t387
24.4元素寬度：flex-basis\t389
24.5複合屬性：flex\t391
24.6排列方向：flex-direction\t392
24.7多行顯示：flex-wrap\t394
24.8複合屬性：flex-flow\t396
24.9排列順序：order\t397
24.10水平對齊：justify-content\t399
24.11垂直對齊：align-items\t401
24.12實戰題：水平居中和垂直居中\t404
24.13實戰題：伸縮菜單\t405
24.14本章練習\t407

第25章其他樣式\t408
25.1 outline屬性\t408
25.2 initial取值\t409
25.3 calc()函數\t410
25.4 overflow-x和overflow-y\t413
25.5 pointer-events屬性\t417
25.6本章練習\t418

附錄A HTML5新增元素\t420

附錄B HTML5新增屬性\t422

附錄C CSS3新增選擇器\t423

附錄D CSS3新增屬性\t425