《HTML5 CSS3 JavaScript網頁設計教程（微課版）》以基礎知識、實例、綜合案例相結合的方式詳細講解了使用HTML 5、CSS 3和JavaScript開發(fā)Web前端頁面所需掌握的知識。 全書共12章，主要內容包括初步認識HTML 5簡介、HTML 5網頁結構、HTML 5表單應用、HTML 5多媒體應用、HTML 5繪圖應用、HTML 5數據存儲、HTML 5文件和拖放、CSS 3新增選擇器、CSS 3修飾文本和背景、CSS 3變形/過渡和動畫及JavaScript腳本編程快速入門�！禜TML5 CSS3 JavaScript網頁設計教程（微課版）》不僅僅將筆墨局限于語法講解上，還通過一個個鮮活、典型的實例來達到學以致用的目的。每個語法都有相應的實例，每章又配有綜合實例，力求達到理論知識與實踐操作完美結合的效果；同時本書配套有各實例的操作微視頻、電子課件、習題答案等數字教學資源。 《HTML5 CSS3 JavaScript網頁設計教程（微課版）》可作為普通高校、高職高專計算機及相關專業(yè)的教材，也可供從事網頁設計與制作、網站開發(fā)、網頁編程等行業(yè)人員參考閱讀。

《HTML5 CSS3 JavaScript網頁設計教程（微課版）》以HTML5、CSS3、JavaScript為中心，以實操案例為重心，對HTML5、CSS3和JavaScript的知識進行了全面闡述。全書共13章，遵循由淺入深、循序漸進的思路，以基礎知識、示例、綜合案例相結合的方式依次對HTML5、CSS3和JavaScript的前端入門必學、HTML5中的canvas、HTML5表單和拖拽、HTML5定位機制、CSS3中的選擇器、CSS3中的動畫效果、CSS3彈性盒子和自適應、JavaScript入門知識、JavaScript基礎語法等知識進行了詳細講解。后通過模仿微博網頁端、制作旅游觀賞網頁、網頁圖片翻轉效果，對前面所學的知識進行了綜合應用，以實現舉一反三、學以致用的目的。同時，《HTML5 CSS3 JavaScript網頁設計教程（微課版）》配套各實例的操作微視頻、電子課件、習題答案等數字教學資源，方便教與學�！　　　�

互聯網技術日新月異。在2011年以前，HTML 5和CSS 3看起來還遙不可及，如今很多公司都已經開始運用這些技術了，Chrome、Safari、Firefox、JE和Opera等主流瀏覽器已經逐步實現對它們的支持。從前端開發(fā)技術來看，互聯網經歷了三個階段：個階段是Web 1.0以內容為主的網絡，主流技術是HTML和CSS；第二個階段是Web 2.0的Ajax應用，熱門技術是JavaScript和DOM；第三個階段是現在的HTML 5和CSS 3技術，這兩者相輔相成，使互聯網進入一個嶄新的時代。
所以如果想從事網頁設計或網站管理相關工作，就必須學習并掌握HTML、CSS和JavaScript技術。本書緊密圍繞網頁設計師在制作網頁過程中的實際需要和應該掌握的技術，全面介紹了使用HTML、CSS、JavaScript進行網頁設計和制作的各方面內容和技巧。在講解時采用了的HTML 5規(guī)范和CSS 3標準，并以Chrome瀏覽器為主要測試環(huán)境。
本書內容
本書共分為12章，主要內容如下。
第1章 初步認識HTML 5。本章首先帶領讀者了解網頁設計的基礎知識和Web標準布局知識，然后介紹從HTML到XHTML再到HTML 5的過渡，之后對HTML 5的語法變化作了詳細介紹。
第2章 HTML 5網頁結構。本章主要介紹HTML 5中新增與網頁結構相關的元素，包括頭部元素、結構元素、語義元素、節(jié)點元素和交互元素、全局屬性。
第3章 HTML 5表單應用。本章主要介紹HTML 5中新增的表單輸入類型、表單屬性、表單元素和表單驗證方式。
第4章 HTML?5多媒體應用。本章主要介紹如何使用HTML 5新增的video元素和audio元素播放視頻和音頻。
第5章 HTML?5繪圖應用。本章主要介紹使用canvas元素對圖形進行各種繪制，像繪制三角形、文本、漸變和陰影等，還介紹了操作圖形的各種方法，像坐標轉換等。
第6章 HTML?5數據存儲。本章主要介紹HTML?5中新增的兩種數據存儲方式，即Web存儲和本地數據庫存儲。
第7章 HTML 5文件和拖放。本章主要介紹HTML 5的文件新特性，主要包括允許選擇多個文件、讀取文件的信息和內容、實現文件上傳以及判斷是否在線等；后介紹了如何對元素進行拖放。
第8章 CSS 3新增選擇器。本章主要介紹CSS 3新增選擇器的使用，像屬性選擇器、偽類選擇器和偽對象選擇器等。
第9章 CSS 3修飾文本和背景。本章主要介紹CSS 3中新增的背景、邊框、字體、顏色等相關屬性，例如與背景有關的background-clip、background-size、background-origin屬性，與邊框有關的border-radius、bobx-shadow、border-image屬性，等等。
第10章 CSS 3變形、過渡和動畫。本章主要介紹CSS 3的動畫功能，包括變形效果、過渡效果和動畫幀等。
第11章 CSS 3布局屬性。本章主要介紹CSS 3中的新增布局屬性，例如多列布局屬性、盒模型布局屬性等。
第?12?章???JavaScript腳本編程快速入門。本章主要介紹JavaScript的基礎知識，包括JavaScript語言的語法規(guī)則、運算符、流程控制語句、常用函數、常用對象及常用事件等內容。
本書特色
本書中采用大量的實例進行講解，力求通過實際操作使讀者更容易地制作出前端頁面、設計出頁面樣式和操作頁面腳本。本書難度適中，內容由淺入深，實用性強，覆蓋面廣，條理清晰。
1. 知識點全
本書緊緊圍繞前端的HTML 5、CSS 3和JavaScript展開講解，具有很強的邏輯性和系統(tǒng)性。
* 實例豐富
本書實例豐富，既能體現出知識點，同時又錄制了相應的微視頻，讓讀者能輕松地進行學習，并能靈活地應用到實際的軟件項目中去。
* 應用廣泛
對于精選案例，給出了詳細步驟，結構清晰簡明，分析深入淺出，而且有些程序能夠直接在項目中使用，幫助讀者進行二次開發(fā)。
* 基于理論，注重實踐
在講解過程中，不僅介紹理論知識，而且在合適位置安排綜合應用實例或者小型應用程序，將理論應用到實踐中，來加強讀者的實際應用能力，鞏固開發(fā)基礎和知識。
2. 貼心的提示
為了便于讀者閱讀，本書還穿插了一些提示、注意和技巧等小板塊，體例約定如下。
* 提示：通常是一些貼心的提醒，讓讀者加深印象，或提供建議以及解決問題的方法。
* 注意：提出學習過程中需要特別注意的一些知識點和內容，或者相關信息。
* 技巧：通過簡短的文字，指出知識點在應用時的一些小竅門。
本書由甘肅建筑職業(yè)技術學院的張潤花、趙培植、王尚瀛主編，其中，張潤花老師負責編寫了第2、3、4、9章，共計173千字；趙培植老師負責編寫了第5～8章，共計167千字；王尚瀛老師負責編寫了第1、10、11、12章，共計129千字。其他參與本書內容整理及設計的人員還有鄭志榮、侯艷書、劉利利、侯政洪、肖進、李海燕、侯政云、祝紅濤、崔再喜、賀春雷等，在此表示感謝。
在本書的編寫過程中，我們力求精益求精，但難免存在一些不足之處，敬請廣大讀者批評指正。

編 者

張潤花，某網絡開發(fā)應用中心技術總監(jiān)、曾經參與開發(fā)凡科建站網頁平臺，并與2015年參與優(yōu)化了58同城網站的前臺結構。精通ASP.NET、CSS樣式設計、JavaScript腳本語言、C#程序設計，熟練掌握Photoshop、coreldraw設計軟件。

第1章 初步認識HTML 5 1
1.1 認識網頁和網站 2
1.1.1 網頁 2
1.1.2 網站 3
1.2 Web標準布局介紹 4
1.2.1 為什么使用Web標準 4
1.2.2 CSS布局標準 5
1.3 HTML與HTML 5 6
1.3.1 HTML發(fā)展歷史 6
1.3.2 HTML 4.01和XHTML 7
1.3.3 HTML和XHTML的文檔
類型定義 8
1.3.4 從XHTML到HTML 5 10
1.3.5 HTML 5的優(yōu)勢 10
1.4 HTML 5語法變化 12
1.4.1 DOCTYPE聲明 12
1.4.2 命名空間聲明 13
1.4.3 編碼類型 13
1.4.4 文檔媒體類型 14
1.4.5 HTML 5兼容HTML 15
1.5 綜合應用實例：瀏覽器HTML 5
性能測試 18
本章小結 20
習題 20
第2章 HTML 5網頁結構 21
2.1 認識html根元素 22
2.2 文檔頭部元素 22
2.3 結構元素 25
2.3.1 header元素 26
2.3.2 article元素 27
2.3.3 section元素 28
2.3.4 aside元素 29
2.3.5 footer元素 31
2.4 節(jié)點元素 31
2.4.1 nav元素 31
2.4.2 hgroup元素 32
2.4.3 address元素 33
2.5 語義元素 33
2.5.1 mark元素 34
2.5.2 cite元素 35
2.5.3 time元素 35
2.5.4 wbr元素 35
2.5.5 ruby、rt和rp元素 36
2.6 交互元素 36
2.6.1 meter元素 36
2.6.2 progress元素 38
2.6.3 details元素 39
2.6.4 summary元素 40
2.7 全局屬性 41
2.7.1 hidden屬性 41
2.7.2 contenteditable屬性 42
2.7.3 spellcheck屬性 43
2.8 綜合應用實例：設計旅游網站
首頁 44
本章小結 50
習題 50
第3章 HTML 5表單應用 53
3.1 重新認識HTML表單 54
3.1.1 表單簡介 54
3.1.2 表單標記 54
3.2 新增輸入類型 55
3.2.1 url類型 56
3.2.2 number類型 57
3.2.3 email類型 58
3.2.4 range類型 58
3.2.5 datepickers類型 59
3.2.6 color類型 61
3.2.7 tel類型 61
3.2.8 search類型 62
3.3 新增屬性 62
3.3.1 表單類屬性 62
3.3.2 輸入類屬性 64
3.4 表單元素 69
3.4.1 datalist元素 69
3.4.2 keygen元素 70
3.4.3 output元素 71
3.4.4 optgroup元素 72
3.5 表單驗證 73
3.5.1 自動驗證 73
3.5.2 顯式驗證 74
3.5.3 自定義驗證 76
3.5.4 取消驗證 76
3.6 綜合應用實例：設計用戶錄入表單 77
本章小結 81
習題 81
第4章 HTML 5多媒體應用 83
4.1 多媒體簡介 84
4.2 播放視頻 85
4.2.1 video元素基礎用法 85
4.2.2 video元素方法 87
4.2.3 video元素事件 88
4.3 播放音頻 90
4.3.1 audio元素基礎用法 90
4.3.2 audio元素事件 91
4.4 綜合應用實例：網頁視頻播放器 92
本章小結 97
習題 98
第5章 HTML 5繪圖應用 99
5.1 認識canvas元素 100
5.1.1 canvas簡介 100
5.1.2 創(chuàng)建canvas元素 100
5.1.3 綜合應用實例：判斷瀏覽器
是否支持canvas元素 101
5.2 繪制簡單圖形 101
5.2.1 繪制矩形 102
5.2.2 繪制直線 104
5.2.3 繪制圓形 107
5.2.4 綜合應用實例：
繪制三角形 109
5.2.5 保存和恢復圖形 111
5.2.6 輸出圖形 112
5.3 繪制文本 113
5.3.1 繪制普通文本 113
5.3.2 繪制陰影文本 115
5.4 變換圖形 116
5.4.1 坐標變換 117
5.4.2 矩陣變換 120
5.4.3 組合圖形 122
5.4.4 線性漸變 124
5.4.5 徑向漸變 126
5.5 使用圖像 127
5.5.1 繪制圖像 128
5.5.2 平鋪圖像 129
5.5.3 裁剪和復制圖像 131
5.6 綜合應用實例：制作圖片黑白和
反轉效果 132
本章小結 134
習題 134
第6章 HTML 5數據存儲 137
6.1 認識Web存儲和Cookie存儲 138
6.2 兩大Web存儲對象 138
6.2.1 sessionStorage對象 139
6.2.2 localStorage對象 140
6.3 操作本地數據 142
6.3.1 保存數據 142
6.3.2 讀取數據 143
6.3.3 清空數據 145
6.3.4 遍歷數據 145
6.4 綜合應用實例：實現工程管理
模塊 147
6.5 操作本地數據庫數據 152
6.5.1 創(chuàng)建數據庫 152
6.5.2 執(zhí)行SQL語句 153
6.6 綜合應用實例：查看學生列表 154
本章小結 156
習題 156
第7章 HTML 5文件和拖放 159
7.1 操作文件 160
7.1.1 獲取文件信息 160
7.1.2 限制文件類型 161
7.2 綜合應用實例：文件上傳 163
7.3 FileReader接口 164
7.3.1 FileReader接口簡介 165
7.3.2 讀取文本文件內容 165
7.3.3 監(jiān)聽讀取事件 167
7.3.4 處理讀取異常 169
7.4 綜合應用實例：預覽圖片 170
7.5 拖放功能 171
7.5.1 拖放API簡介 171
7.5.2 dataTransfer對象 173
本章小結 176
習題 176
第8章 CSS 3新增選擇器 179
8.1 CSS 3簡介 180
8.2 綜合應用實例：瀏覽器CSS 3性能
測試 183
8.3 CSS選擇器分類 185
8.4 屬性選擇器 188
8.4.1 E[att^="val"] 188
8.4.2 E[att$="val"] 189
8.4.3 E[att*="val"] 189
8.4.4 綜合應用實例：設計顏色
選擇器 190
8.5 偽類選擇器 191
8.5.1 E:last-child選擇器 191
8.5.2 E:only-child選擇器 193
8.5.3 E:nth-child(n)選擇器 193
8.5.4 E:nth-last-child(n)選擇器 194
8.5.5 E:root選擇器 195
8.5.6 E:not(s)選擇器 196
8.5.7 E:empty選擇器 197
8.5.8 E:target選擇器 197
8.5.9 綜合應用實例：單擊超鏈接
顯示具體內容 199
8.6 偽對象選擇器 200
8.6.1 E::selection選擇器 200
8.6.2 E::placeholder選擇器 201
8.6.3 已修改的選擇器 201
8.6.4 綜合應用實例：練習content
屬性 202
8.7 兄弟選擇器 205
本章小結 206
習題 207
第9章 CSS 3修飾文本和背景 209
9.1 新增基本屬性 210
9.1.1 文本屬性 210
9.1.2 字體屬性 211
9.1.3 顏色屬性 212
9.1.4 邊框屬性 212
9.1.5 背景屬性 213
9.2 設置文本樣式 213
9.2.1 文本換行設置 213
9.2.2 文本對齊方式 216
9.2.3 文本單個陰影 217
9.2.4 文本多個陰影 219
9.2.5 綜合應用實例：制作
火焰字 220
9.3 設置邊框樣式 221
9.3.1 邊框圓角屬性 221
9.3.2 圖形填充邊框 224
9.3.3 邊框陰影效果 227
9.4 設置背景樣式 229
9.4.1 background-size屬性 229
9.4.2 background-origin屬性 231
9.4.3 background-clip屬性 232
9.5 綜合應用實例：制作太極圖 232
9.6 漸變屬性 233
9.6.1 線性漸變 234
9.6.2 綜合應用實例：實現圖片
閃光劃過效果 235
9.6.3 徑向漸變 236
9.6.4 綜合應用實例：制作一張
優(yōu)惠券 239
9.6.5 重復漸變 240
9.6.6 綜合應用實例：制作記事本
紙張效果 240
本章小結 241
習題 241
第10章 CSS 3變形、過渡和動畫 245
10.1 變形屬性 246
10.1.1 平移 246
10.1.2 縮放 247
10.1.3 旋轉 248
10.1.4 傾斜 249
10.1.5 綜合應用實例：制作個性
圖片墻 250
10.1.6 指定變形中心原點 252
10.2 過渡屬性 253
10.2.1 過渡屬性概述 253
10.2.2 單個屬性實現過渡 254
10.2.3 多個屬性同時過渡 255
10.2.4 綜合應用實例：光標懸浮
特效的過渡功能 257
10.3 動畫屬性 258
10.3.1 了解animation屬性 258
10.3.2 @keyframes動畫幀 260
10.3.3 綜合應用實例：繪制旋轉的
太極圖案 262
10.4 綜合應用實例：動態(tài)復古時鐘 262
本章小結 265
習題 265
第11章 CSS 3布局屬性 267
11.1 多列布局屬性 268
11.1.1 多列布局屬性列表 268
11.1.2 設置顯示列的寬度 268
11.1.3 設置顯示的固定列 270
11.1.4 設置顯示列的樣式 270
11.1.5 設置各列間的間距 271
11.2 彈性盒模型布局屬性 272
11.2.1 Flex布局屬性 272
11.2.2 flex-direction屬性 273
11.2.3 flex-wrap屬性 275
11.2.4 justify-content屬性 276
11.2.5 其他屬性簡述 277
11.2.6 綜合應用實例：實現三欄
布局 280
本章小結 281
習題 282
第12章 JavaScript腳本編程
快速入門 285
12.1 JavaScript語言簡介 286
12.2 編寫JavaScript程序 287
12.2.1 集成JavaScript程序 287
12.2.2 使用外部JavaScript文件 289
12.3 JavaScript腳本語法 290
12.3.1 數據類型 290
12.3.2 變量與常量 290
12.3.3 運算符 291
12.4 腳本控制語句 294
12.4.1 if條件語句 294
12.4.2 switch條件語句 297
12.4.3 while循環(huán)語句 298
12.4.4 do while循環(huán)語句 298
12.4.5 for循環(huán)語句 299
12.4.6 for in循環(huán)語句 299
12.5 函數 300
12.5.1 系統(tǒng)函數 300
12.5.2 自定義函數 301
12.6 常用對象 302
12.6.1 Array對象 302
12.6.2 Document對象 303
12.6.3 Window對象 304
12.7 常用事件 305
12.7.1 鍵盤事件 305
12.7.2 鼠標事件 306
12.7.3 頁面事件 307
本章小結 308
習題 308
參考文獻 310