HTML5+CSS3+JavaScript網頁設計教程（微課版）

張潤花，某網絡開發應用中心技術總監、曾經參與開發“凡科建站”網頁平台，並與2015年參與優化了“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發展歷史 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的優勢 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  節點元素 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  創建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  創建數據庫 152
6.5.2  執行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 讀取事件 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:t(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  綜合應用實例：製作一張優惠券 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  綜合應用實例：動態復古時鐘 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  Fle佈局屬性 272
11.2.2  fle-direction屬性 273
11.2.3  fle-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循環語句 298
12.4.4  do while循環語句 298
12.4.5  for循環語句 299
12.4.6  for in循環語句 299
12.5  函數 300
12.5.1系統函數 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