産品特色
編輯推薦
適讀人群 :本書對HTML 5、CSS 3、JavaScript的介紹是“從零開始”的,因此閱讀本書並不需要額外的基礎。對於剛剛從事前端開發的新人,本書具有很好的學習價值;對於有一定工作經驗的前端工程師,本書具有很高的參考價值。本書也可作為高校、培訓機構的培訓教材。 《瘋狂 HTML5+CSS 3+JavaScript講義(第2版)》由知名IT作傢李剛老師創作
全書麵嚮HTML5.1規範正式版,更新多個元素、拖放規範的相關知識,新增外掛字幕、點綫模式等內容,著重介紹新增的手機端相關特性
詳細介紹漸變背景支持、彈性盒布局、手機瀏覽器響應式布局、3D變換等CSS新增特性及重大改進
內容簡介
W3C於2016年11月1日正式發布瞭HTML5.1規範,該規範已經得到廣大瀏覽器廠商的支持,主流的*新版本的瀏覽器幾乎都支持該規範。與此同時,前端開發的持續火爆,使得HTML5成為目前的熱門領域。本書是一本全麵介紹HTML5、CSS 3和JavaScript前端開發技術的圖書,係統地介紹瞭HTML 5常用的元素和屬性、HTML5的錶單元素和屬性、HTML5的繪圖支持、HTML5的多媒體支持、CSS 3的功能和用法、*前沿的變形與動畫功能等。除此之外,本書還係統地介紹瞭JavaScript編程知識,包括JavaScript基本語法、DOM編程,以及HTML5新增的本地存儲、Indexed數據庫、離綫應用、JavaScript多綫程、客戶端通信支持、WebSocket編程等。本書的定位是一本前端開發的“實戰性”圖書,因此在介紹各知識點時並不是簡單地停留在知識點層麵闡述,而是結閤瞭大量實例來讓讀者對照練習、學以緻用。本書*後還提供瞭一個基於HTML 5技術的小遊戲:瘋狂俄羅斯方塊。該遊戲綜閤運用瞭HTML 5的繪圖支持、客戶端存儲等技術,具有較高的參考價值。本書提供瞭配套的答疑網站,如果讀者在閱讀本書時遇到瞭技術問題,可以登錄瘋狂Java聯盟(http://www.crazyit.org)發帖,筆者將會及時予以解答。
作者簡介
李剛,十餘年軟件開發從業經驗,瘋狂軟件教育中心教學總監。瘋狂Java實訓營創始人,瘋狂Java體係原創圖書作者。廣東技術師範學院計算機科學係兼職副教授,51CTO專傢門診特邀嘉賓。培訓的學生已在華為、IBM、阿裏軟件、網易、電信盈科等名企就職。國內知名高端IT技術圖書作傢,已齣版《瘋狂Java講義》《瘋狂Android講義》《輕量級JavaEE企業應用實戰》《瘋狂iOS講義(基礎篇)(提高篇)》《瘋狂前端開發講義》《瘋狂HTML5/CSS3/JavaScript講義》《瘋狂XML講義》《經典JavaEE企業應用實戰》《Struts2。x專業指南》等著作。其中瘋狂Java體係圖書均已沉澱多年,贏得極高的市場認同,多次重印,多部著作印刷數量超過10萬冊,並被多所“985”“211”院校選作教材,部分圖書已被翻譯成繁體中文版,授權到中國颱灣地區。
目錄
?
第1章 HTML 5簡介 1
1.1 HTML曆史與HTML 5 2
1.1.1 HTML發展曆史 2
1.1.2 HTML 4.01和XHTML 3
1.1.3 HTML和XHTML的文檔類型定義(DTD) 4
1.1.4 從XHTML到HTML 5 5
1.2 HTML 5的優勢 6
1.2.1 解決跨瀏覽器問題 6
1.2.2 部分代替瞭原來的JavaScript 6
1.2.3 更明確的語義支持 7
1.2.4 增強瞭Web應用程序的功能 8
1.3 HTML 5的基本結構和語法變化 8
1.3.1 HTML 5的基本結構 8
1.3.2 標簽不再區分大小寫 9
1.3.3 元素可以省略結束標簽 10
1.3.4 支持boolean值的屬性 11
1.3.5 允許屬性值不使用引號 12
1.4 本章小結 12
第2章 HTML 5的常用元素與屬性 14
2.1 HTML 5保留的常用元素 15
2.1.1 基本元素 15
2.1.2 文本格式相關元素 17
2.1.3 語義相關元素 19
2.1.4 使用a元素添加超鏈接和錨點 21
2.1.5 列錶相關元素 24
2.1.6 使用img元素添加圖片 27
2.1.7 錶格相關元素 30
2.2 HTML 5增強的iframe元素 34
2.2.1 HTML 5新增的srcdoc屬性 35
2.2.2 HTML 5新增的seamless屬性 36
2.2.3 HTML 5新增的sandbox屬性 36
2.3 HTML 5保留的通用屬性 40
2.3.1 id、style、class屬性 40
2.3.2 dir屬性 41
2.3.3 title屬性 42
2.3.4 lang屬性 43
2.3.5 accesskey屬性 43
2.3.6 tabindex屬性 43
2.4 HTML 5新增的通用屬性 44
2.4.1 contentEditable屬性 44
2.4.2 designMode屬性 46
2.4.3 hidden屬性 46
2.4.4 spellcheck屬性 47
2.4.5 contextmenu屬性 47
2.5 HTML 5新增的結構元素 48
2.5.1 article與section元素 48
2.5.2 header與footer元素 51
2.5.3 nav與aside元素 52
2.5.4 main元素 53
2.5.5 figure與figcaption元素 54
2.6 HTML 5新增的語義元素 55
2.6.1 mark元素 55
2.6.2 time元素 56
2.6.3 details與summary元素 56
2.6.4 ruby、rtc、rb、rt和rp元素 57
2.6.5 bdi元素 58
2.6.6 wbr元素 58
2.6.7 menu和menuitem元素 59
2.7 HTML 5頭部和元信息 59
2.7.1 link元素 60
2.7.2 base元素 62
2.7.3 meta元素 62
2.8 HTML 5新增的拖放API 63
2.8.1 啓動拖動 63
2.8.2 接受“放” 65
2.8.3 DataTransfer對象 67
2.8.4 拖放行為 69
2.8.5 改變拖放圖標 70
2.9 本章小結 71
第3章 HTML 5錶單相關的元素和屬性 72
3.1 HTML原有的錶單及錶單控件 73
3.1.1 form元素 73
3.1.2 input元素 74
3.1.3 使用label定義標簽 77
3.1.4 使用button定義按鈕 78
3.1.5 select與option元素 79
3.1.6 HTML 5增強的textarea 80
3.1.7 fieldset與legend元素 82
3.2 HTML 5新增的錶單屬性 83
3.2.1 form屬性 83
3.2.2 formaction屬性 83
3.2.3 formxxx屬性 84
3.2.4 autofocus屬性 85
3.2.5 placeholder屬性 85
3.2.6 list屬性 86
3.2.7 autocomplete屬性 87
3.2.8 label的control屬性 88
3.2.9 錶單元素的labels屬性 88
3.2.10 文本框的selectionDirection屬性 89
3.2.11 復選框的indeterminate屬性 89
3.3 HTML 5新增的錶單元素 90
3.3.1 功能豐富的input元素 90
3.3.2 output元素 93
3.3.3 meter元素 94
3.3.4 progress元素 95
3.3.5 keygen元素 95
3.4 HTML 5新增的客戶端校驗 96
3.4.1 使用校驗屬性執行校驗 96
3.4.2 調用checkValidity方法進行校驗 97
3.4.3 自定義錯誤提示 98
3.4.4 關閉校驗 99
3.5 本章小結 100
第4章 HTML 5的繪圖支持 101
4.1 使用canvas元素 102
4.2 繪圖 103
4.2.1 canvas繪圖基礎:CanvasRenderingContext2D 103
4.2.2 繪製幾何圖形 105
4.2.3 點綫模式 107
4.2.4 繪製字符串 109
4.2.5 設置陰影 110
4.2.6 使用路徑 111
4.2.7 繪製麯綫 115
4.2.8 繪製位圖 117
4.3 坐標變換 118
4.3.1 使用坐標變換 118
4.3.2 坐標變換與路徑結閤使用 119
4.3.3 使用矩陣變換 121
4.4 控製疊加風格 123
4.5 控製填充風格 124
4.5.1 綫性漸變 124
4.5.2 徑嚮漸變 126
4.5.3 位圖填充 127
4.6 位圖處理 128
4.6.1 位圖裁剪 128
4.6.2 像素處理 129
4.7 輸齣位圖 132
4.8 動畫製作 133
4.8.1 基於定時器的動畫 133
4.8.2 基於requestAnimationFrame的動畫 135
4.9 本章小結 136
第5章 HTML 5的多媒體支持 137
5.1 使用audio和video元素 138
5.2 使用JavaScript腳本控製媒體播放 141
5.2.1 HTMLAudioElement與HTMLVideoElement支持的方法 141
5.2.2 HTMLAudioElement與HTMLVideoElement的屬性 143
5.3 事件監聽 144
5.3.1 事件 144
5.3.2 監聽器 145
5.4 track元素 146
5.4.1 使用track元素添加字幕 146
5.4.2 WebVTT文件簡介 147
5.4.3 字幕內容的標記 148
5.5 本章小結 149
第6章 級聯樣式單與CSS選擇器 150
6.1 樣式單概述 151
6.1.1 CSS概述 151
6.1.2 CSS的發展曆史 152
6.2 CSS樣式單的基本使用 152
6.2.1 引入外部樣式文件 152
6.2.2 導入外部樣式單 154
6.2.3 使用內部CSS樣式 155
6.2.4 使用行內樣式 156
6.3 CSS選擇器 158
6.3.1 元素選擇器 158
6.3.2 屬性選擇器 159
6.3.3 ID選擇器 161
6.3.4 class選擇器 162
6.3.5 包含選擇器 163
6.3.6 子選擇器 164
6.3.7 CSS 3新增的兄弟選擇器 165
6.3.8 選擇器組閤 166
6.4 僞元素選擇器 167
6.4.1 內容相關的屬性 169
6.4.2 插入圖像 170
6.4.3 隻插入部分元素 171
6.4.4 配閤quotes屬性執行插入 171
6.4.5 配閤counter-increment屬性添加編號 172
6.4.6 使用自定義編號 173
6.4.7 添加多級編號 174
6.5 CSS 3新增的僞類選擇器 176
6.5.1 結構性僞類選擇器 176
6.5.2 UI元素狀態僞類選擇器 186
6.5.3 :target僞類選擇器 193
6.5.4 :not僞類選擇器 194
6.6 在腳本中修改顯示樣式 195
6.6.1 隨機改變頁麵的背景色 195
6.6.2 動態增加立體效果 196
6.7 本章小結 197
第7章 字體與文本相關屬性 198
7.1 字體相關屬性 199
7.1.1 使用text-shadow添加陰影 201
7.1.2 添加多個陰影 202
7.1.3 使用font-size-adjust屬性微調字體大小 203
7.2 CSS 3支持的顔色錶示方法 205
7.3 文本相關屬性 206
7.3.1 使用white-space控製空白的處理行為 208
7.3.2 文本自動換行:word-break 209
7.3.3 用word-warp控製長單詞或URL地址換行 210
7.4 CSS 3新增的服務器字體 212
7.4.1 使用服務器字體 212
7.4.2 定義粗體、斜體字 213
7.4.3 優先使用客戶端字體 214
7.5 本章小結 215
第8章 背景、邊框和邊距相關屬性 216
8.1 盒模型簡介 217
8.2 背景相關屬性 217
8.2.1 背景圖片固定 219
8.2.2 CSS 3新增的background-clip屬性 220
8.2.3 CSS 3新增的background-origin屬性 221
8.2.4 CSS 3新增的background-size屬性 222
8.2.5 CSS 3為background-repeat新增的space和round 224
8.2.6 CSS 3新增的多背景圖片 225
8.3 使用漸變背景 226
8.3.1 使用linear-gradient設置綫性漸變 226
8.3.2 使用repeating-linear-gradient設置循環綫性漸變 230
8.3.3 使用radial-gradient設置徑嚮漸變 231
8.3.4 使用repeating-radial-gradient設置循環徑嚮漸變 238
8.4 邊框相關屬性 239
8.4.1 CSS 3提供的漸變邊框 241
8.4.2 CSS 3提供的圓角邊框 242
8.4.3 CSS 3提供的圖片邊框 244
8.5 使用opacity控製透明度 246
8.6 padding和margin相關屬性 247
8.6.1 內填充相關屬性 247
8.6.2 外邊距相關屬性 248
8.7 本章小結 249
第9章 大小、定位、輪廓相關屬性 250
9.1 width、height相關屬性 251
9.1.1 CSS 3新增的box-sizing屬性 252
9.1.2 CSS 3新增的resize屬性 253
9.1.3 CSS 3新增的calc函數 254
9.2 定位相關屬性 255
9.3 輪廓相關屬性 257
9.4 用戶界麵和濾鏡屬性 258
9.4.1 appearance屬性 259
9.4.2 使用filter屬性應用濾鏡 260
9.5 本章小結 263
第10章 盒模型與布局相關屬性 264
10.1 盒模型和display屬性 265
10.1.1 兩種最基本的盒類型 265
10.1.2 none值和visibility屬性 267
10.1.3 inline-block類型的盒模型 267
10.1.4 inline-table類型的盒模型 270
10.1.5 使用table類型的盒模型實現錶格 271
10.1.6 list-item類型的盒模型 272
10.1.7 run-in類型的盒模型 273
10.2 對盒添加陰影 275
10.2.1 使用box-shadow屬性 275
10.2.2 對錶格及單元格添加陰影 277
10.3 布局相關屬性 278
10.3.1 通過float屬性實現多欄布局 279
10.3.2 使用clear屬性實現換行 280
10.3.3 使用overflow設置滾動條 282
10.3.4 使用overflow-style控製滾動方式 283
10.3.5 使用clip屬性控製裁剪 284
10.4 CSS 3新增的多欄布局 285
10.4.1 使用column-width指定欄寬度 286
10.4.2 使用column-gap和column-rule控製分欄間隔 287
10.4.3 使用column-span設置跨欄 288
10.5 使用彈性盒布局 289
10.5.1 使用flex類型的盒模型 290
10.5.2 通過flex-direction指定盒內元素的排列方嚮 291
10.5.3 使用flex-wrap控製換行 293
10.5.4 使用order控製元素顯示順序 294
10.5.5 使用flex屬性控製子元素的縮放 295
10.5.6 使用align-items和align-self控製對齊方式 301
10.5.7 使用justify-content控製元素分布 302
10.5.8 使用align-content控製行的分布方式 304
10.6 本章小結 306
第11章 錶格、列錶相關屬性及media query 307
11.1 錶格相關屬性 308
11.1.1 使用border-collapse、border-spacing控製單元格邊框 308
11.1.2 使用caption-side控製錶格標題的位置 310
11.1.3 使用table-layout控製錶格布局 311
11.2 列錶相關屬性 313
11.2.1 使用list-style屬性控製列錶項 313
11.2.2 使用list-style屬性控製普通元素 315
11.3 控製光標的屬性 316
11.4 media query和響應式布局 317
11.4.1 media query語法 318
11.4.2 針對瀏覽器寬度響應式布局 319
11.4.3 響應手機瀏覽器 321
11.5 本章小結 323
第12章 變形與動畫相關屬性 324
12.1 CSS 3提供的變形支持 325
12.1.1 4種基本變形 326
12.1.2 同時應用多種變形 330
12.1.3 指定變換中心點 331
12.1.4 使用矩陣變換 333
12.2 CSS 3新增的3D變換 337
12.2.1 perspective屬性 337
12.2.2 transform-style屬性 339
12.2.3 backface-visibility屬性 340
12.3 CSS 3提供的Transition動畫 341
12.3.1 多個屬性同時漸變 342
12.3.2 指定動畫速度 344
12.4 CSS 3提供的Animation動畫 345
12.4.1 同時改變多個屬性的動畫 347
12.4.2 魚眼效果 348
12.5 本章小結 349
第13章 JavaScript語法詳解 350
13.1 JavaScript簡介 351
13.1.1 運行JavaScript 352
13.1.2 導入JavaScript文件 352
13.1.3 使用script元素的defer推遲腳本執行 353
13.1.4 使用script元素的async異步執行腳本 354
13.1.5 noscript元素 355
13.2 數據類型和變量 356
13.2.1 定義變量的方式 356
13.2.2 類型轉換 357
13.2.3 變量作用域 358
13.2.4 變量提升 361
13.2.5 新增的let變量 362
13.2.6 使用const定義常量 363
13.3 基本數據類型 364
13.3.1 數值類型 364
13.3.2 字符串類型 369
13.3.3 布爾類型 372
13.3.4 undefined和null 373
13.3.5 正則錶達式 374
13.4 復閤類型 376
13.4.1 對象 376
13.4.2 數組 376
13.4.3 函數 379
13.5 運算符 381
13.5.1 賦值運算符 381
13.5.2 算術運算符 382
13.5.3 位運算符 383
13.5.4 加強的賦值運算符 385
13.5.5 比較運算符 385
13.5.6 邏輯運算符 386
13.5.7 三目運算符 388
13.5.8 逗號運算符 389
13.5.9 void運算符 389
13.5.10 typeof和instanceof運算符 390
13.6 語句 391
13.6.1 語句塊 391
13.6.2 空語句 391
13.6.3 異常拋齣語句 392
13.6.4 異常捕捉語句 393
13.6.5 with語句 394
13.7 流程控製 395
13.7.1 分支 395
13.7.2 while循環 397
13.7.3 do while循環 398
13.7.4 for循環 398
13.7.5 for in循環 399
13.7.6 break和continue 400
13.8 函數 403
13.8.1 定義函數的3種方式 403
13.8.2 遞歸函數 406
13.8.3 局部變量和局部函數 407
13.8.4 函數、方法、對象、變量和類 409
13.8.5 函數的實例屬性和類屬性 413
13.8.6 調用函數的3種方式 415
13.8.7 函數的獨立性 416
13.8.8 函數提升 418
13.8.9 箭頭函數 421
13.9 函數的參數處理 425
13.9.1 基本類型和復閤類型的參數傳遞 425
13.9.2 空參數 426
13.9.3 參數類型 427
13.10 麵嚮對象 429
13.10.1 麵嚮對象的概念 429
13.10.2 對象和關聯數組 430
13.10.3 繼承和prototype 431
13.10.4 構造器實現僞繼承 436
13.10.5 使用apply或call實現僞繼承 437
13.11 創建對象 437
13.11.1 使用new關鍵字調用構造器創建對象 438
13.11.2 使用Object直接創建對象 438
13.11.3 使用JSON語法創建對象 440
13.12 本章小結 443
第14章 DOM編程詳解 444
14.1 DOM模型概述 445
14.2 DOM模型和HTML文檔 446
14.2.1 HTML元素之間的繼承關係 446
14.2.2 HTML元素之間常見的包含關係 447
14.3 訪問HTML元素 448
14.3.1 根據ID訪問HTML元素 448
14.3.2 根據CSS選擇器訪問HTML元素 449
14.3.3 利用節點關係訪問HTML元素 451
14.3.4 訪問錶單控件 453
14.3.5 訪問列錶框、下拉菜單的選項 454
14.3.6 訪問錶格子元素 455
14.4 修改HTML元素 456
14.5 增加HTML元素 458
14.5.1 創建或復製節點 458
14.5.2 添加節點 460
14.5.3 為列錶框、下拉菜單添加選項 460
14.5.4 動態添加錶格內容 462
14.6 刪除HTML元素 463
14.6.1 刪除節點 463
14.6.2 刪除列錶框、下拉菜單的選項 464
14.6.3 刪除錶格的行或單元格 465
14.7 傳統的DHTML模型 467
14.8 使用window對象 469
14.8.1 訪問頁麵URL 471
14.8.2 客戶機屏幕信息 472
14.8.3 彈齣新窗口 473
14.8.4 確認對話框和輸入對話框 473
14.8.5 使用定時器 474
14.8.6 桌麵通知 476
14.9 navigator和地理定位 479
14.9.1 HTML 5新增的geolocation屬性 480
14.9.2 獲取地理位置 481
14.9.3 在高德地圖上定位 483
14.9.4 獲取電池信息 484
14.10 HTML 5增強的History API 485
14.11 使用document對象 490
14.11.1 動態頁麵 491
14.11.2 讀寫Cookie 492
14.12 HTML 5新增的瀏覽器分析 493
14.12.1 分析時間性能 493
14.12.2 分析導航行為 495
14.13 本章小結 496
第15章 事件處理機製 497
15.1 事件模型的基本概念 498
15.2 綁定事件處理函數 499
15.2.1 綁定HTML元素屬性 499
15.2.2 綁定JavaScript對象屬性 501
15.2.3 addEventListener與attachEvent 502
15.3 事件處理函數的執行環境 505
15.3.1 事件處理函數中this關鍵字 505
15.3.2 訪問事件對象 507
15.3.3 使用返迴值取消默認行為 510
15.3.4 調用順序 510
15.3.5 在代碼中觸發事件 511
15.3.6 事件傳播 512
15.3.7 取消事件的默認行為 517
15.3.8 轉發事件 519
15.4 事件類型 521
15.4.1 事件類型概述 521
15.4.2 文檔事件 523
15.4.3 鼠標滾輪事件 525
15.4.4 鍵盤事件 528
15.4.5 觸屏事件和移動設備事件 529
15.5 本章小結 534
第16章 本地存儲與離綫應用 535
16.1 Web Storage 536
16.1.1 Storage接口 536
16.1.2 使用Storage存儲、讀取數據 538
16.1.3 基於Web Storage的記事本 539
16.1.4 存儲結構化數據 541
16.1.5 監聽存儲事件 543
16.2 Indexed數據庫API 545
16.2.1 使用IDBFactory打開數據庫 545
16.2.2 使用IDBDatabase創建對象存儲和索引 547
16.2.3 使用IDBTransaction(事務) 550
16.2.4 使用IDBObjectStore執行CRUD操作 551
16.2.5 使用IDBObjectStore根據主鍵檢索數據 557
16.2.6 使用IDBIndex根據索引檢索數據 559
16.2.7 使用復閤索引 562
16.3 離綫應用 564
16.3.1 離綫應用與瀏覽器緩存的區彆 564
16.3.2 構建離綫應用 564
16.3.3 判斷在綫狀態 566
16.3.4 applicationCache對象 567
16.3.5 離綫應用的事件與監聽 569
16.4 本章小結 571
第17章 文件支持與二進製數據 572
17.1 HTML 5增強的文件上傳域 573
17.1.1 FileList對象與File對象 573
17.1.2 使用FileReader讀取文件內容 574
17.2 ArrayBuffer與TypedArray 578
17.2.1 TypedArray類 579
17.2.2 DataView類 581
17.3 Blob類 583
17.3.1 使用Blob對象 583
17.3.2 存儲Blob對象 585
17.4 本章小結 587
第18章 Web Worker多綫程API 588
18.1 使用Worker創建多綫程 589
18.2 與Worker綫程進行數據交換 591
18.2.1 與Worker綫程交換數據 591
18.2.2 Worker綫程中可用的API 593
18.3 Worker綫程嵌套 594
18.3.1 嵌套Worker綫程 594
18.3.2 子綫程之間的數據交換 596
18.4 使用SharedWorker創建共享綫程 597
18.4.1 SharedWorker的用法 598
18.4.2 共享綫程實例 601
18.5 Promise 603
18.5.1 Promise基本用法 603
18.5.2 鏈式調用then方法 605
18.5.3 Promise鏈 606
18.5.4 catch的用法 607
18.5.5 all和race的用法 609
18.6 本章小結 611
第19章 客戶端通信 612
19.1 跨文檔消息傳遞 613
19.1.1 postMessage與onmessage 613
19.1.2 跨文檔消息傳遞示例 614
19.1.3 發送復雜消息 616
19.1.4 使用MessageChannel通信 618
19.2 使用WebSocket與服務器通信 621
19.2.1 WebSocket接口 622
19.2.2 使用WebSocket進行通信 623
19.2.3 基於WebSocket的多人實時聊天 625
19.2.4 發送二進製數據 627
19.3 使用Server-Sent Events API 630
19.3.1 使用EventSource獲取數據 630
19.3.2 EventSource的生命周期 633
19.4 使用Beacon 635
19.5 本章小結 636
第20章 HTML 5的瘋狂俄羅斯方塊 637
20.1 俄羅斯方塊簡介 638
20.2 開發遊戲界麵 639
20.2.1 開發界麵布局 639
20.2.2 開發遊戲界麵組件 640
20.3 俄羅斯方塊的數據模型 640
20.3.1 定義數據模型 641
20.3.2 初始化遊戲狀態數據 641
20.4 實現遊戲邏輯 644
20.4.1 處理方塊掉落 644
20.4.2 處理方塊左移 648
20.4.3 處理方塊右移 650
20.4.4 處理方塊鏇轉 651
20.4.5 初始化遊戲狀態 653
20.5 本章小結 654
前言/序言
W3C於2016年11月1日正式發布瞭HTML 5.1規範,再次引起廣大前端開發者對HTML 5的極大熱情。而Firefox、Opera、Chrome、Safari等主流瀏覽器的最新版本都能很好地支持該規範,這對廣大開發者來說也是很大的利好消息。
本書作為《瘋狂HTML 5/CSS 3/JavaScript講義》的第2版,針對目前最新的HTM L 5.1規範,對全書內容進行瞭大量的更新和升級。全書內容包括如下升級:
(1)重寫瞭HTML 5增強的<a.../>、<img.../>、<iframe.../>、<textarea.../>等重要元素。
(2)重寫瞭主流瀏覽器更新支持的<details.../>、<summary.../>、<ruby.../>、<rtc.../>、<rb.../>、<rt.../>和<rp.../>等元素。
(3)重寫瞭HTML 5.1重新定義的拖放規範。
(4)新增瞭HTML 5繪圖API關於點綫模式支持的內容。
(5)新增瞭多媒體支持的<track.../>元素來添加外掛字幕的內容。
(6)詳細介紹瞭CSS 3新增的漸變背景支持。
(7)詳細介紹瞭CSS 3最新定義的彈性盒布局,這是CSS 3關於布局的最大改進。
(8)新增瞭關於手機瀏覽器響應式布局的內容。
(9)新增瞭CSS 3關於3D變換支持的內容。
(10)以ES 6標準為基礎,介紹瞭最新的JavaScript語法,包括JavaScript的箭頭函數、閉包語句、Promise的重要內容。
(11)深入補充瞭JavaScript僞繼承的常用實現方式。
(12)新增介紹瞭HTML 5最新添加的電池訪問API、通知API等內容。
(13)重寫瞭上一版中關於事件機製的相關內容。既針對最新DOM 3事件模型做瞭詳細介紹,也兼顧瞭傳統IE事件模型。並補充瞭目前熱門的手機瀏覽器中觸碰事件的處理機製。
(14)新增介紹瞭HTML 5新增的Indexed數據庫API。
(15)新增介紹瞭HTML 5規範新增的ArrayBuffer、TypedArray、Blob等二進製支持的相關內容。
(16)新增介紹瞭HTML 5中使用SharedWorker創建共享綫程的內容。
(17)補充介紹瞭WebSocket發送二進製數據的相關知識。
(18)新增介紹瞭HTML 5新增的Server-Sent Events API、Beacon等單嚮網絡通信的內容。
本書有什麼特點
本書是一本介紹HTML 5、CSS 3和JavaScript開發技術的實用圖書。全書可分為4個部分。
第1部分:全麵介紹瞭HTML 5的全部標簽,並且詳細介紹瞭各標簽所支持的屬性,並為各HTML標簽、屬性都提供瞭配套的示例頁麵,這些內容不僅可以作為學習HTML 5的教程,也可以作為日常開發的參考手冊。
第2部分:詳細介紹瞭CSS 3的絕大部分常用選擇器、屬性,並為這些選擇器、屬性提供瞭示例,方便廣大讀者參考本書全麵、係統地掌握CSS 3的功能和用法。這部分內容也可以作為前端開發者的參考手冊。
第3部分:重點介紹瞭JavaScript編程的相關內容,包括JavaScript基礎語法、JavaScript函數、JavaScript對象、DOM編程、事件處理、本地存儲、Indexed數據庫、離綫應用、多綫程、跨文檔消息通信、網絡通信編程等知識,這些內容既覆蓋瞭初學者的編程基礎,也覆蓋瞭HTML 5所支持的新功能,非常適閤作為前端開發者的學習教程。
第4部分:綜閤運用瞭HTML 5的繪圖支持、客戶端存儲、CSS樣式、JavaScript編程等內容,開發瞭一個網頁版的“瘋狂俄羅斯方塊”。這個小遊戲既可讓讀者鞏固前麵所掌握的各種知識,也可讓讀者將所學理論運用到實際開發中。
需要說明的是,本書隻是一本介紹HTML 5、CSS 3、JavaScript實際開發的圖書,而不是一本關於所謂“設計思想”的書,不要指望學習本書能提高你所謂的“設計思想”,所以奉勸那些希望提高思想的讀者不要閱讀本書。
本書所介紹的知識都很“淺顯”,隻要讀者願意坐下來、靜心閱讀本書,並把書中所有示例循序漸進地練習一遍,本書帶給你的隻是9個字:“看得懂、學得會、做得齣”。本書並沒有堆砌“深奧”的新名詞、堆砌“高深”的思想,本書依然保持瞭“瘋狂Java體係”的一貫風格:思路清晰,語言平實,操作步驟詳細。
不管怎樣,隻要讀者在閱讀本書時遇到知識上的問題,都可以登錄瘋狂Java聯盟與廣大Java學習者交流,筆者也會通過該平颱與大傢一起交流、學習。
本書具有如下幾個特點。
1.知識全麵,覆蓋麵廣
本書全麵介紹瞭HTML 5、CSS 3、JavaScript的各種相關知識,包括HTML 5增強的錶單標簽、繪圖支持、多媒體支持、CSS選擇器、CSS盒模型屬性、CSS變形和動畫相關屬性、離綫應用、客戶端存儲、JavaScript多綫程、跨文檔消息傳遞、WebSocket等內容。本書基本全麵覆蓋瞭W3C官網上已發布的HTML 5.1新規範。
2.內容實際,實用性強
本書並不局限於枯燥的理論介紹,而是采用瞭“項目驅動”的方式來講授知識點。無論是講解HTML 5標簽還是CSS 3選擇器、屬性的功能,幾乎每個知識點都可找到對應的參考示例。本書最後還提供瞭“瘋狂俄羅斯方塊”案例,實用性很強。
3.講解詳細,上手容易
本書保持瞭“瘋狂Java體係”的一貫風格:思路清晰,語言平實,操作步驟詳細。隻要認真閱讀本書,把書中所有示例循序漸進地練習一遍,並把本書最後一個案例獨立完成,讀者就可達到企業前端開發的要求。
本書寫給誰看
本書是一本“從零學習”的HTML 5、CSS 3、JavaScript專業圖書,閱讀本書並不需要額外的基礎。對於剛剛從事前端開發的新人,本書具有很好的學習價值;對於有一定工作經驗的前端工程師,本書具有很高的參考價值。本書也可作為高校、培訓機構的教材使用。由於本書是一本專業級的前端開發技術圖書,對於那些隻想簡單瞭解HTML、CSS的業餘人士,不推薦選擇本書。
2017-3-10