《從0到1:HTML5+CSS3修煉之道》是2020年1月人民郵電出版社出版的圖書，作者是莫振傑。
基本介紹
- 中文名：從0到1:HTML5+CSS3修煉之道
- 作者：莫振傑
- 出版時間：2020年1月
- 出版社：人民郵電出版社
- 頁數：427 頁
- ISBN：9787115525055
- 定價：69.8 元
- 開本：16 開
- 裝幀：平裝
內容簡介,圖書目錄,
內容簡介
作者根據自己多年的前後端開發經驗，站在完全零基礎讀者的角度，詳盡介紹了HTML5和CSS3的基礎知識、新技術及各種高級開發技巧。
全書分為兩大部分：第一部分介紹HTML5的新技術，主要包括新增元素、新增屬性、元素拖放、檔案操作、本地存儲、音頻視頻、離線套用等；第二部分介紹CSS3的新技術，主要包括新增選擇器、CSS3變形、CSS3過渡、CSS3動畫、多列布局、濾鏡效果、彈性盒子模型等。
為了方便高校老師教學，本書不但配備了所有案例的原始碼，還提供了配套的PPT 課件。本書適合作為前端開發人員的參考書，也可以作為大中專院校相關專業的教學參考書。
圖書目錄
第 一部分 HTML5實戰
第 1章 HTML5簡介 3
1.1 HTML、XHTML和HTML5 3
1.1.1 HTML和XHTML 3
1.1.2 HTML5 4
1.2 學前準備 7
1.3 本章練習 8
第 2章 新增元素 9
2.1 結構元素 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元素類型 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 本章練習 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 本章練習 54
第4章 元素拖放 56
4.1 元素拖放簡介 56
4.2 dataTransfer對象 58
4.2.1 dataTransfer對象簡介 58
4.2.2 dataTransfer對象套用 59
4.3 本章練習 62
第5章 檔案操作 63
5.1 檔案操作簡介 63
5.2 File對象 68
5.3 FileReader對象 70
5.4 Blob對象 77
5.5 本章練習 81
第6章 本地存儲 83
6.1 本地存儲簡介 83
6.2 localStorage 84
6.3 sessionStorage 88
6.4 indexedDB 90
6.4.1 操作“資料庫” 91
6.4.2 操作“對象倉庫” 94
6.4.3 增刪查改 97
6.5 實戰題：計數器 107
6.6 本章練習 108
第7章 音頻視頻 109
7.1 視頻音頻簡介 109
7.1.1 Flash時代的逝去 109
7.1.2 HTML5時代的來臨 110
7.2 開發視頻 110
7.2.1 video元素 110
7.2.2 視頻格式 112
7.2.3 自定義視頻 113
7.3 開發音頻 122
7.3.1 audio元素 122
7.3.2 音頻格式 123
7.3.3 自定義音頻 124
7.4 本章練習 125
第8章 離線套用 126
8.1 搭建伺服器環境 126
8.2 離線存儲 128
8.3 更新快取 131
8.4 本章練習 132
第9章 多執行緒處理 133
9.1 Web Worker簡介 133
9.2 Web Worker套用 135
9.3 實戰題：後台計算 137
9.4 本章練習 138
第 10章 地理位置 139
10.1 地理位置簡介 139
10.1.1 getCurrentPosition()方法 139
10.1.2 watchPosition()方法 143
10.1.3 clearWatch()方法 145
10.2 百度地圖 147
10.2.1 API簡介 147
10.2.2 API套用 151
10.3 本章練習 152
第 11章 桌面通知 153
11.1 Notification API簡介 153
11.2 Notification API套用 155
11.3 本章練習 157
第 12章 Canvas 158
12.1 Canvas是什麼 158
12.1.1 Canvas簡介 158
12.1.2 Canvas與SVG 160
12.2 Canvas元素 160
12.2.1 Canvas元素 161
12.2.2 Canvas對象 162
12.3 直線 164
12.3.1 Canvas坐標系 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 實戰題：繪製調色板 186
12.7 本章練習 188
第二部分 CSS3實戰
第 13章 CSS3簡介 191
13.1 CSS3簡介 191
13.2 瀏覽器私有前綴 192
13.3 一個酷炫的CSS3效果 194
13.4 本章練習 197
第 14章 新增選擇器 198
14.1 CSS3選擇器簡介 198
14.2 屬性選擇器 199
14.3 子元素偽類選擇器 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偽類選擇器 205
14.4.1 :focus 205
14.4.2 ::selection 206
14.4.3 :checked 209
14.4.4 :enabled和:disabled 210
14.4.5 :read-write和:read-only 211
14.5 其他偽類選擇器 212
14.5.1 :root 212
14.5.2 :empty 213
14.5.3 :target 214
14.5.4 :not() 217
14.6 本章練習 218
第 15章 文本樣式 220
15.1 文本樣式簡介 220
15.2 文本陰影：text-shadow 220
15.2.1 W3C坐標系 220
15.2.2 text-shadow屬性簡介 221
15.2.3 定義多個陰影 224
15.3 文本描邊：text-stroke 224
15.4 文本溢出：text-overflow 226
15.5 強制換行：word-wrap、
word-break 228
15.6 嵌入字型：@font-face 230
15.7 實戰題：火焰字 232
15.8 本章練習 233
第 16章 顏色樣式 234
16.1 顏色樣式簡介 234
16.2 opacity透明度 234
16.3 RGBA顏色 235
16.4 CSS3漸變 239
16.4.1 線性漸變 240
16.4.2 徑向漸變 242
16.5 實戰題：漸變按鈕 248
16.6 實戰題：雞蛋圓 249
16.7 本章練習 250
第 17章 框線樣式 251
17.1 框線樣式簡介 251
17.2 圓角效果：border-radius 251
17.2.1 border-radius實現圓角 252
17.2.2 border-radius實現半圓和圓 256
17.2.3 border-radius實現橢圓 258
17.2.4 border-radius的派生子屬性 260
17.3 框線陰影：box-shadow 260
17.3.1 box-shadow屬性簡介 260
17.3.2 4個方向陰影獨立樣式 265
17.4 多色框線：border-colors 266
17.5 框線背景：border-image 269
17.5.1 border-image屬性簡介 269
17.5.2 border-image的派生子屬性 272
17.6 實戰題：3D卡通頭像 273
17.7 本章練習 276
第 18章 背景樣式 279
18.1 背景樣式簡介 279
18.2 背景大小：background-size 279
18.3 背景位置：background-origin 282
18.4 背景剪下：background-clip 285
18.5 多背景圖片 288
18.6 本章練習 290
第 19章 CSS3變形 291
19.1 CSS3變形簡介 291
19.2 平移：translate() 292
19.3 縮放：scale() 296
19.4 傾斜：skew() 300
19.5 旋轉：rotate() 304
19.6 中心原點：transform-origin 305
19.7 實戰題：個性照片牆 307
19.8 本章練習 309
第 20章 CSS3過渡 310
20.1 CSS3過渡簡介 310
20.2 過渡屬性：transition-property 312
20.3 過渡時間：transition-duration 313
20.4 過渡方式：transition-
timing-function 315
20.5 延遲時間：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 實戰題：滑鼠指針移上去顯示內容 321
20.8 實戰題：圖片文字介紹滑動效果 323
20.9 實戰題：白光閃過效果 326
20.10 實戰題：脈動效果 327
20.11 實戰題：手風琴效果 328
20.12 本章練習 330
第 21章 CSS3動畫 331
21.1 CSS3動畫簡介 331
21.2 @keyframes 333
21.3 動畫名稱：animation-name 335
21.4 持續時間：animation-duration 338
21.5 動畫方式：animation-
timing-function 340
21.6 延遲時間：animation-delay 342
21.7 播放次數：animation-
iteration-count 343
21.8 播放方向：animation-direction 345
21.9 播放狀態：animation-play-state 347
21.10 實戰題：脈衝動畫 348
21.11 實戰題：loading效果 350
21.12 本章練習 352
第 22章 多列布局 353
22.1 多列布局 353
22.2 列數：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 實戰題：瀑布流布局 364
22.8 本章練習 366
第 23章 濾鏡效果 367
23.1 濾鏡效果簡介 367
23.2 亮度：brightness() 368
23.3 灰度：grayscale() 369
23.4 復古：sepia() 370
23.5 反色：invert() 371
23.6 旋轉：hue-rotate() 372
23.7 陰影：drop-shadow() 373
23.8 透明度：opacity() 374
23.9 模糊度：blur() 375
23.10 對比度：contrast() 376
23.11 飽和度：saturate() 377
23.12 多種濾鏡 378
23.13 實戰題：鬼屋 379
23.14 本章練習 381
第 24章 彈性盒子模型 382
24.1 彈性盒子模型簡介 382
24.2 放大比例：flex-grow 385
24.3 縮小比例：flex-shrink 387
24.4 元素寬度：flex-basis 389
24.5 複合屬性：flex 391
24.6 排列方向：flex-direction 392
24.7 多行顯示：flex-wrap 394
24.8 複合屬性：flex-flow 396
24.9 排列順序：order 397
24.10 水平對齊：justify-content 399
24.11 垂直對齊：align-items 401
24.12 實戰題：水平居中和垂直居中 404
24.13 實戰題：伸縮選單 405
24.14 本章練習 407
第 25章 其他樣式 408
25.1 outline屬性 408
25.2 initial取值 409
25.3 calc()函式 410
25.4 overflow-x和overflow-y 413
25.5 pointer-events屬性 417
25.6 本章練習 418
附錄A HTML5新增元素 420
附錄B HTML5新增屬性 422
附錄C CSS3新增選擇器 423
附錄D CSS3新增屬性 425
