瘋狂 HTML 5+CSS 3+JavaScript 講義, 2/e 疯狂HTML 5+CSS 3+JavaScript讲义(第2版)

W3C於2016年11月1日正式發布了HTML 5.1規範，該規範已經得到廣大瀏覽器廠商的支持，主流的最新版本的瀏覽器幾乎都支持該規範。與此同時，前端開發的持續火爆，使得HTML 5成為目前的熱門領域。本書是一本全面介紹HTML 5、CSS 3和JavaScript前端開發技術的圖書，系統地介紹了HTML 5常用的元素和屬性、HTML 5的表單元素和屬性、HTML 5的繪圖支持、HTML 5的多媒體支持、CSS 3的功能和用法、最前沿的變形與動畫功能等。除此之外，本書還系統地介紹了JavaScript編程知識，包括JavaScript基本語法、DOM編程，以及HTML 5新增的本地存儲、Indexed數據庫、離線應用、JavaScript多線程、客戶端通信支持、WebSocket編程等。本書的定位是一本前端開發的“實戰性”圖書，因此在介紹各知識點時並不是簡單地停留在知識點層面闡述，而是結合了大量實例來讓讀者對照練習、學以致用。本書最後還提供了一個基於HTML 5技術的小游戲：瘋狂俄羅斯方塊。該游戲綜合運用了HTML 5的繪圖支持、客戶端存儲等技術，具有較高的參考價值。本書提供了配套的答疑網站，如果讀者在閱讀本書時遇到了技術問題，可以登錄瘋狂Java聯盟（http://www.crazyit.org）發帖，筆者將會及時予以解答。

十多年的軟件開發從業經驗，瘋狂軟件教育中心教學總監。瘋狂Java實訓營創始人，瘋狂Java體係原創圖書作者。

廣東技術師範學院計算機科學系的兼職副教授，51CTO專家門診特邀嘉賓。

培訓的學生已在華為、IBM、阿里軟件、網易、電信盈科等名企就職。國內著名高端IT技術作家，已出版《瘋狂Java講義》《瘋狂Android講義》《輕量級Java EE企業應用實戰》《瘋狂iOS講義（基礎篇）（高級篇）》《瘋狂Swift講義》《瘋狂Ajax講義》《瘋狂XML講義》

《經典Java EE企業應用實戰》《Struts 2.x權威指南》《瘋狂HTML 5/CSS 3/JavaScript講義》等著作。

其中瘋狂Java體系圖書均已沉澱多年、贏得極高的市場認同、多次重印成為超級暢銷圖書，並被多所“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章H TML 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 :ta rget偽類選擇器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修改HT ML元素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開發遊戲界面6 39 
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