HTML5 + CSS3 從入門到精通, 2/e (微課精編版)

目錄

■上冊 · HTML5篇

第1章  HTML5基礎 / 1

1.1  HTML5概述 / 1

1.1.1  HTML歷史 / 1

1.1.2  HTML5起源 / 2

1.1.3  HTML5組織 / 3

1.1.4  HTML5規則 / 3

1.1.5  HTML5特性 / 3

1.1.6  瀏覽器支持 / 5

1.2  HTML5設計原則 / 5

1.2.1  避免不必要的復雜性 / 6

1.2.2  支持已有內容 / 6

1.2.3  解決實際問題 / 7

1.2.4  用戶怎麽使用就怎麽設計規範 / 7

1.2.5  優雅地降級 / 7

1.2.6  支持的優先級 / 8

1.3  HTML5語法特性 / 9

1.3.1  文檔和標記 / 9

1.3.2  寬松的約定 / 9

1.4  HTML5 API / 10

1.4.1  新增的API / 10

1.4.2  修改的API / 11

1.4.3  擴展Document / 12

1.4.4  擴展HTMLElement / 12

1.4.5  其他接口擴展 / 13

1.4.6  棄用的API / 14

1.5  案例實戰 / 14

1.5.1  新建HTML5文檔 / 14

1.5.2  比較HTML4和HTML5文檔 / 15

1.6  在線支持 / 16

第2章  HTML5文檔 / 17

2.1  HTML5標簽概述 / 17

2.1.1  新增的元素 / 17

2.1.2  廢除的元素 / 17

2.1.3  新增的屬性 / 18

2.1.4  廢除的屬性 / 18

2.1.5  新增的事件 / 18

2.1.6  事件監聽配置對象 / 19

2.2  HTML5全局屬性 / 20

2.2.1  內容可編輯 / 20

2.2.2  data—自定義屬性 / 21

2.2.3  draggable—拖動 / 22

2.2.4  hidden—隱藏 / 22

2.2.5  語法檢查 / 22

2.2.6  翻譯 / 23

2.3  HTML5新結構 / 23

2.3.1  定義頁眉 / 23

2.3.2  定義導航 / 24

2.3.3  定義主要區域 / 25

2.3.4  定義文章塊 / 26

2.3.5  定義區塊 / 27

2.3.6  定義附欄 / 28

2.3.7  定義頁腳 / 29

2.3.8  使用role / 30

2.4  案例實戰 / 31

2.5  在線支持 / 33

第3章  HTML5文本 / 34

3.1  通用文本 / 34

3.1.1  標題文本 / 34

3.1.2  段落文本 / 34

3.2  描述性文本 / 35

3.2.1  強調文本 / 35

3.2.2  標記細則 / 35

3.2.3  特殊格式 / 36

3.2.4  定義上標和下標 / 36

3.2.5  定義術語 / 38

3.2.6  標記代碼 / 39

3.2.7  預定義格式 / 39

3.2.8  定義縮寫詞 / 40

3.2.9  標註編輯或不用文本 / 40

3.2.10  指明引用或參考 / 42

3.2.11  引述文本 / 42

3.2.12  換行顯示 / 44

3.2.13  修飾文本 / 44

3.2.14  非文本註解 / 44

3.3  特殊用途文本 / 45

3.3.1  標記高亮顯示 / 45

3.3.2  標記進度信息 / 46

3.3.3  標記刻度信息 / 47

3.3.4  標記時間信息 / 48

3.3.5  標記聯系信息 / 49

3.3.6  標記顯示方向 / 49

3.3.7  標記換行斷點 / 50

3.3.8  標記旁註 / 50

3.3.9  標記展開/收縮詳細信息 / 51

3.3.10  標記對話框信息 / 51

3.4  其他類型文本 / 53

3.4.1  超鏈接 / 53

3.4.2  有序列表 / 53

3.4.3  描述列表 / 54

3.4.4  浮動框架 / 54

3.4.5  異步執行腳本 / 54

3.5  在線支持 / 55

第4章  HTML5多媒體 / 56

4.1  響應式圖像 / 56

4.1.1  定義流內容 / 56

4.1.2  使用picture元素 / 57

4.1.3  設計橫屏和豎屏顯示 / 58

4.1.4  根據分辨率顯示不同圖像 / 59

4.1.5  根據格式顯示不同圖像 / 59

4.1.6  自適應像素比 / 59

4.1.7  自適應視圖寬 / 60

4.2  使用插件 / 61

4.3  使用音頻和視頻 / 62

4.3.1  使用audio元素 / 62

4.3.2  使用video元素 / 63

4.3.3  視頻同步字幕 / 65

4.4  案例實戰 / 69

4.5  在線支持 / 72

第5章  HTML5表單 / 73

5.1  認識HTML5表單 / 73

5.2  HTML5新型輸入框 / 74

5.2.1  定義E-mail框 / 74

5.2.2  定義URL框 / 74

5.2.3  定義數字框 / 75

5.2.4  定義範圍框 / 76

5.2.5  定義日期選擇器 / 77

5.2.6  定義搜索框 / 80

5.2.7  定義電話號碼框 / 81

5.2.8  定義拾色器 / 81

5.3  HTML5輸入屬性 / 82

5.3.1  定義自動完成 / 82

5.3.2  定義自動獲取焦點 / 83

5.3.3  定義所屬表單 / 84

5.3.4  定義表單重寫 / 84

5.3.5  定義高和寬 / 85

5.3.6  定義列表選項 / 85

5.3.7  定義最小值、最大值和步長 / 85

5.3.8  定義多選 / 86

5.3.9  定義匹配模式 / 86

5.3.10  定義替換文本 / 87

5.3.11  定義必填 / 87

5.3.12  定義文本區域 / 88

5.3.13  定義復選框狀態 / 88

5.3.14  獲取文本選取方向 / 89

5.3.15  訪問標簽綁定的控件 / 89

5.3.16  訪問控件的標簽集 / 90

5.4  HTML5新表單元素 / 90

5.4.1  定義數據列表 / 90

5.4.2  定義密鑰對生成器 / 91

5.4.3  定義輸出結果 / 91

5.5  HTML5表單屬性 / 92

5.5.1  定義自動完成 / 92

5.5.2  定義禁止驗證 / 93

5.6  案例實戰 / 93

5.6.1  設計HTML5表單頁 / 93

5.6.2  設計表單驗證 / 95

5.7  在線支持 / 97

第6章  HTML5繪圖 / 98

6.1  使用canvas / 98

6.2  繪制圖形 / 100

6.2.1  矩形 / 100

6.2.2  路徑 / 100

6.2.3  直線 / 102

6.2.4  圓弧 / 102

6.2.5  二次方曲線 / 104

6.2.6  三次方曲線 / 105

6.3  定義樣式和顏色 / 106

6.3.1  顏色 / 106

6.3.2  不透明度 / 107

6.3.3  實線 / 108

6.3.4  虛線 / 110

6.3.5  線性漸變 / 110

6.3.6  徑向漸變 / 111

6.3.7  圖案 / 112

6.3.8  陰影 / 112

6.3.9  填充規則 / 113

6.4  圖形變形 / 113

6.4.1  保存和恢復狀態 / 113

6.4.2  清除畫布 / 114

6.4.3  移動坐標 / 115

6.4.4  旋轉坐標 / 116

6.4.5  縮放圖形 / 117

6.4.6  變換圖形 / 118

6.5  圖形合成 / 119

6.5.1  合成 / 119

6.5.2  裁切 / 121

6.6  繪制文本 / 121

6.6.1  填充文字 / 121

6.6.2  輪廓文字 / 122

6.6.3  文本樣式 / 123

6.6.4  測量寬度 / 124

6.7  使用圖像 / 125

6.7.1  導入圖像 / 125

6.7.2  縮放圖像 / 126

6.7.3  裁切圖像 / 127

6.7.4  平鋪圖像 / 127

6.8  像素操作 / 128

6.8.1  認識ImageData對象 / 128

6.8.2  創建圖像數據 / 129

6.8.3  將圖像數據寫入畫布 / 129

6.8.4  在畫布中復制圖像數據 / 130

6.8.5  保存圖片 / 131

6.9  案例實戰 / 131

6.10  在線支持 / 134

第7章  HTML5 SVG矢量圖 / 135

7.1  SVG基礎 / 135

7.1.1  SVG發展歷史 / 135

7.1.2  SVG特點 / 135

7.1.3  在HTML中應用SVG / 136

7.1.4  設計第一個SVG圖形 / 136

7.2  使用SVG / 137

7.2.1  矩形 / 137

7.2.2  圓形 / 139

7.2.3  橢圓 / 139

7.2.4  多邊形 / 140

7.2.5  直線 / 141

7.2.6  折線 / 141

7.2.7  路徑 / 142

7.2.8  文本 / 143

7.2.9  線框樣式 / 144

7.2.10  SVG濾鏡 / 146

7.2.11  模糊效果 / 147

7.2.12  陰影效果 / 147

7.2.13  線性漸變 / 147

7.2.14  放射漸變 / 148

7.3  案例實戰 / 149

7.4  在線支持 / 151

第8章  HTML5請求動畫和異步處理 / 152

8.1  請求動畫 / 152

8.1.1  requestAnimationFrame基礎 / 152

8.1.2  案例：設計進度條 / 153

8.2  異步處理 / 154

8.2.1  Promise基礎 / 154

8.2.2  創建Promise對象 / 159

8.2.3  使用then()方法 / 160

8.2.4  隊列化異步操作 / 162

8.2.5  異常處理 / 163

8.2.6  創建序列 / 164

8.2.7  並行處理 / 166

8.3  在線支持 / 168

第9章  HTML5文件操作 / 169

9.1  FileList / 169

9.2  Blob / 170

9.2.1  訪問Blob / 170

9.2.2  創建Blob / 171

9.2.3  截取Blob / 172

9.2.4  保存Blob / 173

9.3  FileReader / 174

9.3.1  讀取文件 / 174

9.3.2  事件監測 / 176

9.4  ArrayBuffer和ArrayBufferView / 177

9.4.1  使用ArrayBuffer / 178

9.4.2  使用ArrayBufferView / 178

9.4.3  使用DataView / 179

9.5  FileSystem API / 181

9.5.1  認識FileSystem API / 181

9.5.2  訪問FileSystem / 181

9.5.3  申請配額 / 183

9.5.4  新建文件 / 184

9.5.5  寫入數據 / 186

9.5.6  添加數據 / 187

9.5.7  讀取數據 / 188

9.5.8  復制文件 / 188

9.5.9  刪除文件 / 189

9.5.10  創建目錄 / 190

9.5.11  讀取目錄 / 191

9.5.12  刪除目錄 / 193

9.5.13  復制目錄 / 194

9.5.14  重命名目錄 / 195

9.5.15  使用filesystem:URL / 196

9.6  案例實戰 / 197

9.7  在線支持 / 199

第10章  HTML5通信 / 200

10.1  跨文檔發送消息 / 200

10.2  消息通道通信 / 203

10.3  網絡套接字通信 / 205

10.3.1  什麽是Socket / 205

10.3.2  為什麽需要Socket / 206

10.3.3  Socket的歷史 / 206

10.3.4  WebSocket基礎 / 207

10.3.5  使用WebSocket API / 207

10.3.6  案例：設計簡單的通信 / 209

10.3.7  案例：發送JSON信息 / 213

10.4  服務器推送事件通信 / 213

10.4.1  Server-Sent Events基礎 / 213

10.4.2  使用Server-Sent Events / 214

10.5  廣播通道通信 / 217

10.6  案例實戰 / 218

10.7  在線支持 / 221

第11章  HTML5存儲 / 222

11.1  Web Storage / 222

11.1.1  使用Web Storage / 222

11.1.2  案例：用戶登錄 / 223

11.2  indexedDB / 225

11.2.1  indexedDB概述 / 225

11.2.2  建立連接 / 225

11.2.3  數據庫版本 / 227

11.2.4  對象倉庫 / 227

11.2.5  索引 / 229

11.2.6  事務 / 231

11.2.7  游標 / 233

11.2.8  保存數據 / 234

11.2.9  訪問數據 / 235

11.2.10  更新版本 / 236

11.2.11  訪問鍵值 / 236

11.2.12  訪問屬性 / 238

11.2.13  案例：留言本 / 240

11.3  案例實戰 / 242

11.4  在線支持 / 251

第12章  HTML5異步請求 / 252

12.1  XMLHttpRequest 2基礎 / 252

12.1.1  XMLHttpRequest 2概述 / 252

12.1.2  請求時限 / 252

12.1.3  FormData數據對象 / 253

12.1.4  上傳文件 / 254

12.1.5  跨域訪問 / 255

12.1.6  響應不同類型數據 / 256

12.1.7  接收二進制數據 / 257

12.1.8  監測數據傳輸進度 / 260

12.2  Fetch基礎 / 263

12.2.1  Fetch概述 / 263

12.2.2  使用Fetch / 263

12.2.3  Fetch接口類型 / 265

12.3  案例實戰 / 266

12.3.1  接收Blob對象 / 266

12.3.2  發送Blob對象 / 267

12.4  在線支持 / 268

第13章  HTML5線程 / 269

13.1  Web Workers基礎 / 269

13.1.1  Web Workers概述 / 269

13.1.2  使用Worker / 270

13.1.3  使用共享線程 / 273

13.1.4  使用Inline Worker / 275

13.2  案例實戰 / 276

13.2.1  過濾運算 / 276

13.2.2  並發運算 / 277

13.3  在線支持 / 279

第14章  HTML5緩存 / 280

14.1  online/offline status API基礎 / 280

14.2  Cache API基礎 / 281

14.2.1  Cache API概述 / 281

14.2.2  使用Cache / 282

14.3  Service Worker基礎 / 285

14.3.1  Service Worker概述 / 285

14.3.2  使用Service Worker / 286

14.4  案例實戰 / 291

14.5  在線支持 / 293

第15章  HTML5 Web組件 / 294

15.1  HTML5模板 / 294

15.1.1  認識template / 294

15.1.2  使用template元素 / 295

15.1.3  應用模板 / 296

15.2  Shadow DOM組件 / 297

15.2.1  認識Shadow DOM / 297

15.2.2  創建Shadow DOM / 298

15.2.3  使用slot元素 / 300

15.2.4  設置Shadow DOM樣式 / 301

15.2.5  使用slotchange事件 / 305

15.3  自定義元素 / 306

15.3.1  認識自定義元素 / 306

15.3.2  新建自定義元素 / 307

15.3.3  派生元素類型 / 307

15.3.4  註冊自定義元素 / 308

15.3.5  生命周期響應函數 / 309

15.3.6  元素升級 / 310

15.3.7  派生內置元素類型 / 311

15.3.8  自定義元素的屬性 / 311

15.3.9  設置自定義元素的內容 / 312

15.4  HTML導入 / 313

15.5  在線支持 / 314

第16章  HTML5歷史記錄 / 315

16.1  History API基礎 / 315

16.1.1  認識History API / 315

16.1.2  使用History API / 315

16.2  案例實戰 / 317

16.2.1  設計無刷新站點導航 / 317

16.2.2  設計能回退的畫板 / 319

16.3  在線支持 / 321

第17章  HTML5訪問多媒體設備 / 322

17.1  WebRTC基礎 / 322

17.1.1  認識WebRTC / 322

17.1.2  訪問本地設備 / 323

17.2  案例實戰 / 325

17.2.1  拍照和攝像 / 325

17.2.2  錄音並壓縮 / 326

17.3  在線支持 / 329

第18章  HTML5訪問傳感器 / 330

18.1  傳感器API基礎 / 330

18.1.1  認識傳感器API / 330

18.1.2  方向事件和移動事件 / 330

18.1.3  瀏覽器支持 / 332

18.1.4  應用場景 / 332

18.2  案例實戰 / 332

18.2.1  記錄搖手機的次數 / 332

18.2.2  重力測試小游戲 / 334

18.3  在線支持 / 335

第19章  HTML5訪問位置 / 336

19.1  Geolocation API基礎 / 336

19.1.1  Geolocation API應用場景 / 336

19.1.2  位置信息來源 / 336

19.1.3  位置信息表示方式 / 336

19.1.4  獲取位置信息 / 337

19.1.5  瀏覽器兼容性 / 338

19.1.6  監測位置信息 / 339

19.1.7  停止獲取位置信息 / 339

19.1.8  保護隱私 / 339

19.1.9  處理位置信息 / 340

19.1.10  使用position / 340

19.2  案例實戰 / 341

19.2.1  定位手機位置 / 341

19.2.2  獲取經緯度及其詳細地址 / 342

19.2.3  輸入提示查詢位置 / 343

19.2.4  從當前位置查詢指定位置路線 / 344

19.2.5  記錄行蹤路線 / 345

19.3  在線支持 / 347

第20章  HTML5拖放操作 / 348

20.1  拖放API基礎 / 348

20.1.1  定義拖放功能 / 348

20.1.2  認識DataTransfer對象 / 350

20.2  案例實戰 / 353

20.3  在線支持 / 355

第21章  HTML5通知和顯示 / 356

21.1  通知API / 356

21.1.1  Notification API基礎 / 356

21.1.2  案例：設計桌面通知 / 358

21.1.3  案例：關閉通知 / 358

21.1.4  案例：設計多條通知 / 359

21.2  頁面可見API / 360

21.2.1  Page Visibility API基礎 / 360

21.2.2  案例：設計視頻頁面 / 362

21.3  全屏API / 363

21.3.1  Fullscreen API基礎 / 363

21.3.2  案例：設計全屏播放 / 365

21.4  在線支持 / 366

 

■下冊 · CSS3篇

第22章  CSS3基礎 / 367

22.1  CSS3概述 / 367

22.1.1  CSS歷史 / 367

22.1.2  CSS3模塊 / 368

22.1.3  CSS3特性 / 368

22.1.4  瀏覽器兼容性 / 369

22.2  CSS3選擇器概述 / 369

22.3  使用CSS3選擇器 / 371

22.3.1  兄弟選擇器 / 371

22.3.2  屬性選擇器 / 372

22.3.3  偽類選擇器 / 373

22.3.4  偽對象選擇器 / 374

22.4  案例實戰 / 375

22.5  在線支持 / 379

第23章  CSS3文本 / 380

23.1  CSS3文本模塊 / 380

23.1.1  文本模塊概述 / 380

23.1.2  文本溢出 / 381

23.1.3  文本換行 / 381

23.1.4  書寫模式 / 382

23.1.5  initial值 / 383

23.1.6  inherit值 / 384

23.1.7  unset值 / 385

23.1.8  all屬性 / 385

23.1.9  opacity屬性 / 385

23.1.10  transparent值 / 386

23.1.11  currentColor值 / 387

23.1.12  rem值 / 387

23.1.13  font-size-adjust屬性 / 388

23.2  色彩模式 / 388

23.2.1  rgba()函數 / 389

23.2.2  hsl()函數 / 389

23.2.3  hsla()函數 / 390

23.3  文本陰影 / 390

23.4  動態生成內容 / 392

23.5  網絡字體 / 393

23.6  案例實戰 / 395

23.7  在線支持 / 398

第24章  CSS3背景 / 399

24.1  背景圖像 / 399

24.1.1  設置定位原點 / 399

24.1.2  設置裁剪區域 / 400

24.1.3  設置背景圖像大小 / 401

24.1.4  設置多重背景圖像 / 402

24.2  漸變背景 / 403

24.2.1  定義線性漸變 / 404

24.2.2  定義重復線性漸變 / 407

24.2.3  定義徑向漸變 / 408

24.2.4  定義重復徑向漸變 / 412

24.3  案例實戰 / 413

24.3.1  設計條紋 / 413

24.3.2  設計紋理 / 415

24.3.3  設計折角效果 / 416

24.3.4  設計圖標 / 417

24.4  在線支持 / 418

第25章  CSS3用戶接口 / 419

25.1  界面顯示 / 419

25.1.1  顯示方式 / 419

25.1.2  調整尺寸 / 420

25.1.3  縮放比例 / 421

25.2  輪廓 / 421

25.3  邊框 / 423

25.3.1  定義圖像源 / 423

25.3.2  定義平鋪方式 / 424

25.3.3  定義寬度 / 425

25.3.4  定義分割方式 / 425

25.3.5  定義擴展 / 426

25.3.6  定義圓角 / 427

25.4  盒子陰影 / 429

25.5  案例實戰 / 431

25.6  在線支持 / 434

第26章  CSS3佈局 / 435

26.1  舊版彈性盒 / 435

26.1.1  啟動彈性盒 / 435

26.1.2  設置寬度 / 435

26.1.3  設置順序 / 437

26.1.4  設置方向 / 438

26.1.5  設置對齊方式 / 439

26.2  新版彈性盒 / 440

26.2.1  認識Flexbox系統 / 440

26.2.2  啟動彈性盒 / 441

26.2.3  設置主軸方向 / 442

26.2.4  設置行數 / 443

26.2.5  設置對齊方式 / 444

26.2.6  設置彈性項目 / 445

26.3  多列佈局 / 448

26.3.1  設置列寬 / 448

26.3.2  設置列數 / 448

26.3.3  設置間距 / 449

26.3.4  設置列邊框 / 450

26.3.5  設置跨列顯示 / 450

26.3.6  設置列高度 / 451

26.4  案例實戰 / 451

26.5  在線支持 / 454

第27章  CSS3動畫 / 455

27.1  元素變形 / 455

27.1.1  認識Transform / 455

27.1.2  設置原點 / 455

27.1.3  2D旋轉 / 456

27.1.4  2D縮放 / 457

27.1.5  2D平移 / 457

27.1.6  2D傾斜 / 458

27.1.7  2D矩陣 / 458

27.1.8  設置變形類型 / 459

27.1.9  設置透視距離和原點 / 459

27.1.10  3D平移 / 462

27.1.11  3D縮放 / 463

27.1.12  3D旋轉 / 463

27.1.13  透視函數 / 464

27.1.14  變形原點 / 465

27.1.15  背景可見 / 465

27.2  過渡動畫 / 465

27.2.1  設置過渡屬性 / 466

27.2.2  設置過渡時間 / 466

27.2.3  設置延遲過渡時間 / 467

27.2.4  設置過渡動畫類型 / 467

27.2.5  設置過渡觸發動作 / 468

27.3  幀動畫 / 472

27.3.1  設置關鍵幀 / 472

27.3.2  設置動畫屬性 / 473

27.4  案例實戰 / 475

27.5  在線支持 / 476

第28章  CSS3媒體查詢 / 477

28.1  媒體查詢基礎 / 477

28.1.1  媒體類型和媒體查詢 / 477

28.1.2  使用@media / 478

28.1.3  應用@media / 479

28.2  案例實戰 / 482

28.2.1  設計響應式菜單 / 482

28.2.2  設計自動隱藏的欄目 / 483

28.2.3  設計自適應的頁面 / 486

28.3  在線支持 / 489

第29章  CSS3項目實戰 / 490