HTML5從入門到精通（第3版）

"目  錄
第1篇　HTML基礎(chǔ)
 第1章　HTML基礎(chǔ) 2
  視頻講解：25分鐘
1.1  HTML的基本概念 3
1.2  HTML發(fā)展史與HTML5 3
1.2.1  HTML的發(fā)展歷史 3
1.2.2  HTML 4.01和XHTML 4
1.2.3  從XHTML到HTML5 5
1.3  迎接新的Web時代 6
1.3.1  部分代替了原來的JavaScript 6
1.3.2  更明確的語義支持 6
1.3.3  增強了Web應(yīng)用程序功能 7
1.3.4  HTML5的目標 8
1.4  各瀏覽器對HTML5的支持 8
1.5  HTML5要解決的3個問題 9
1.6  HTML的基本結(jié)構(gòu) 10
1.6.1  HTML文件的編寫方法 10
1.6.2  文件開始標簽 12
1.6.3  文件頭部標簽 12
1.6.4  文件標題標簽 13
1.6.5  文件主體標簽 13
1.6.6  編寫文件的注意事項 13
1.7  編寫個HTML文件 14
1.7.1  HTML文件的編寫方法 14
1.7.2  手工編寫頁面 14
1.7.3  使用Dreamwaver制作頁面 15
1.7.4  使用WebStorm制作頁面 19
1.7.5  使用瀏覽器瀏覽HTML文件 22
1.7.6  HTML開發(fā)的明日圖書網(wǎng) 23
1.8  小結(jié) 24
1.9  習題 24
第2章　HTML文件基本標記 26
  視頻講解：43分鐘
2.1  HTML頭部標記 27
2.2  標題標記 27
2.3  元信息標記 28
2.3.1  設(shè)置頁面關(guān)鍵字 28
2.3.2  設(shè)置頁面描述 29
2.3.3  設(shè)置編輯工具 30
2.3.4  設(shè)定作者信息 30
2.3.5  限制搜索方式 31
2.3.6  設(shè)置網(wǎng)頁文字及語言 32
2.3.7  設(shè)置網(wǎng)頁的定時跳轉(zhuǎn) 32
2.3.8  設(shè)定有效期限 33
2.3.9  禁止從緩存中調(diào)用 34
2.3.10  刪除過期的cookie 35
2.3.11  強制打開新窗口 35
2.3.12  設(shè)定建立網(wǎng)站的日期 36
2.3.13  設(shè)定網(wǎng)頁版權(quán)信息 36
2.3.14  設(shè)定聯(lián)系人的郵箱 37
2.4  基底網(wǎng)址標記 38
2.5  頁面的主體標記 39
2.5.1  設(shè)置文字顏色—text 40
2.5.2  背景顏色屬性—bgcolor 40
2.5.3  背景圖像屬性—background 41
2.5.4  設(shè)置鏈接文字屬性—link 45
2.5.5  設(shè)置邊距—margin 47
2.6  頁面的注釋標記— 48
2.7  實例演練—創(chuàng)建基本的HTML網(wǎng)頁 48
2.8  小結(jié) 49
2.9  習題 50
第3章　設(shè)計網(wǎng)頁文本內(nèi)容 51
  視頻講解：28分鐘
3.1  標題文字的建立 52
3.1.1  標題字標記 52
3.1.2  標題文字的對齊方式—align 53
3.2  設(shè)置文字格式 54
3.2.1  設(shè)置文字字體—face 54
3.2.2  設(shè)置字號—size 55
3.2.3  設(shè)置文字顏色—color 56
3.2.4  粗體、斜體、下畫線—strong、em、u 57
3.2.5  上標與下標—sup、sub 57
3.2.6  設(shè)置刪除線—strike 58
3.2.7  等寬文字標記—code 59
3.2.8  空格—  60
3.2.9  其他特殊符號 61
3.3  設(shè)置段落格式 62
3.3.1  段落標記—p 62
3.3.2  取消文字換行標記—nobr 62
3.3.3  換行標記—br 63
3.3.4  保留原始排版方式標記—pre 64
3.3.5  居中對齊標記—center 65
3.3.6  向右縮進標記—blockquote 66
3.4  水平線標記 67
3.4.1  添加水平線—hr 67
3.4.2  設(shè)置水平線寬度與高度屬性—width、height   68
3.4.3  設(shè)置水平線的顏色—color 69
3.4.4  設(shè)置水平線的對齊方式—align 70
3.4.5  去掉水平線陰影—noshade 71
3.5  其他文字標記 72
3.5.1  文字標注標記—ruby 72
3.5.2  聲明變量標記—var 73
3.5.3  忽視HTML標簽標記—plaintext、xmp 74
3.5.4  設(shè)置地址文字標記 75
3.6  小結(jié) 75
3.7  習題 76
第4章　使用列表 77
  視頻講解：33分鐘
4.1  列表的標記 78
4.2  使用無序列表 78
4.2.1  無序列表標記—ul 78
4.2.2  設(shè)置無序列表的類型—type 79
4.3  使用有序列表 81
4.3.1　有序列表標記—ol 81
4.3.2　有序列表的類型—type 82
4.3.3　有序列表的起始數(shù)值—start 84
4.4  定義列表標記—dl 86
4.5  菜單列表標記—menu 88
4.6  目錄列表—dir 89
4.7  設(shè)置列表文字的顏色 90
4.8  使用嵌套列表 92
4.8.1　定義列表的嵌套 92
4.8.2　無序列表和有序列表的嵌套 93
4.8.3　有序列表之間的嵌套 95
4.9  小結(jié) 96
4.10  習題 96
第5章　超鏈接 97
  視頻講解：21分鐘
5.1  超鏈接的基本知識 98
5.1.1  超鏈接 98
5.1.2  路徑 98
5.1.3  相對路徑 98
5.2  超鏈接的建立 99
5.2.1  超鏈接標記的基本語法 99
5.2.2  建立文本超鏈接 99
5.2.3  設(shè)置超鏈接的目標窗口 101
5.3  內(nèi)部鏈接 103
5.4  書簽鏈接 105
5.4.1  建立書簽 106
5.4.2  鏈接到同一頁面的書簽 107
5.4.3  鏈接到不同頁面的書簽 109
5.5  外部鏈接 110
5.5.1  通過HTTP協(xié)議 110
5.5.2  通過FTP 111
5.5.3  發(fā)送E-mail 112
5.5.4  下載文件 114
5.6  其他鏈接 115
5.6.1  腳本鏈接 115
5.6.2  空鏈接 116
5.7  小結(jié) 117
5.8  習題 117
第6章　使用圖像 119
  視頻講解：33分鐘
6.1  圖片的基本格式 120
6.2  添加圖像—img 120
6.3  設(shè)置圖像屬性 121
6.3.1  圖像高度—height 121
6.3.2  圖像寬度—width 122
6.3.3  圖像邊框—border 123
6.3.4  圖像水平間距—hspace 125
6.3.5  圖像垂直間距—vspace 126
6.3.6  圖像相對于文字基準線的對齊方式—align 126
6.3.7  圖像的提示文字—title 128
6.3.8  圖像的替換文字—alt 129
6.4  圖像的超鏈接 130
6.4.1　設(shè)置圖像的超鏈接 130
6.4.2　設(shè)置圖像熱區(qū)鏈接 132
6.5  小結(jié) 134
6.6  習題 134
第7章　表格的應(yīng)用 136
  視頻講解：46分鐘
7.1　創(chuàng)建表格 137
7.1.1　表格的基本構(gòu)成—table、tr、td 137
7.1.2　設(shè)置表格的標題—caption 138
7.1.3　表格的表頭—th 139
7.2　設(shè)置表格基本屬性 141
7.2.1　設(shè)置表格寬度—width 141
7.2.2　設(shè)置表格高度—height 143
7.2.3　設(shè)置表格對齊方式—align 144
7.3　設(shè)置表格的邊框 145
7.3.1　表格邊框?qū)挾?mdash;border 145
7.3.2　表格邊框顏色—bordercolor 146
7.3.3　內(nèi)框?qū)挾?mdash;cellspacing 148
7.3.4　表格內(nèi)文字與邊框間距—cellpadding 149
7.4　設(shè)置表格背景 150
7.4.1　設(shè)置表格背景顏色—bgcolor 150
7.4.2　設(shè)置表格的背景圖像—background 151
7.5　設(shè)置表格的行屬性 152
7.5.1　高度的控制—height 152
7.5.2　邊框顏色—bordercolor 153
7.5.3　行背景—bgcolor、background 155
7.5.4　行文字的水平對齊方式—align 156
7.5.5　行文字的垂直對齊方式—valign 157
7.5.6  設(shè)置表格標題的垂直對齊方式—align 158
7.6　調(diào)整單元格屬性 159
7.6.1　單元格大小—width、height 159
7.6.2　水平跨度—colspan 160
7.6.3　垂直跨度—rowspan 162
7.6.4　對齊方式—align、valign 163
7.6.5　設(shè)置單元格的背景色 164
7.6.6　設(shè)置單元格的邊框顏色—bordercolor 165
7.6.7　設(shè)置單元格的亮邊框—bordercolorlight 167
7.6.8　設(shè)置單元格的暗邊框—bordercolordark 168
7.6.9　設(shè)置單元格的背景圖像—background 169
7.7　表格的結(jié)構(gòu) 171
7.7.1　表格的表首標記—thead 171
7.7.2　表格的表主體標記—tbody 172
7.7.3　表格的表尾標記—tfoot 174
7.8  表格的嵌套 176
7.9  小結(jié) 177
7.10  習題 178
第8章　層——＜div＞標簽 179
  視頻講解：32分鐘
8.1  層 180
8.1.1  層的分類 180
8.1.2  定義數(shù)據(jù)塊 180
8.2  標簽 181
8.2.1  標簽 181
8.2.2  標簽的屬性 182
8.2.3  標簽與標簽 190
8.3  標簽 191
8.3.1  標簽 191
8.3.2  標簽的屬性 192
8.4  應(yīng)用div制作下拉菜單導(dǎo)航條 194
8.5  小結(jié) 197
8.6  習題 197
第9章　編輯表單 199
  視頻講解：25分鐘
9.1　使用表單標記—form 200
9.1.1　處理動作—action 200
9.1.2　表單名稱—ame 201
9.1.3　傳送方法—method 201
9.1.4　編碼方式—enctype 202
9.1.5　目標顯示方式—target 203
9.2  添加控件 204
9.3　輸入類的控件 204
9.3.1　文字字段—text 204
9.3.2　密碼域—password 206
9.3.3　單選按鈕—radio 208
9.3.4　復(fù)選框—checkbox 209
9.3.5　普通按鈕—button 209
9.3.6　提交按鈕—submit 211
9.3.7　重置按鈕—reset 212
9.3.8　圖像域—image 213
9.3.9　隱藏域—hidden 214
9.3.10　文件域—file 215
9.4　使用label定義標簽 216
9.5　使用button定義按鈕 217
9.6　列表/菜單標記 218
9.7　文本域標記textarea 220
9.8　id標記 221
9.9　在Dreamweaver中快速創(chuàng)建表單 222
9.10　小結(jié) 224
9.11　習題 224
第10章　多媒體頁面 226
  視頻講解：18分鐘
10.1  設(shè)置滾動文字 227
10.1.1  滾動文字標記—marquee 227
10.1.2  滾動方向?qū)傩?mdash;direction 227
10.1.3  滾動方式屬性—behavior 228
10.1.4  滾動速度屬性—scrollamount 229
10.1.5  滾動延遲屬性—scrolldelay 230
10.1.6  滾動循環(huán)屬性—loop 231
10.1.7  滾動范圍屬性—width、height 232
10.1.8  滾動背景顏色屬性—bgcolor 233
10.1.9  滾動空間屬性—hspace、vspace 233
10.2  添加多媒體文件 234
10.2.1  添加多媒體文件標記—embed 235
10.2.2  設(shè)置自動運行—autostart 235
10.2.3  設(shè)置媒體文件的循環(huán)播放—loop 236
10.2.4  隱藏面板—hidden 237
10.2.5  添加其他類型的媒體文件 238
10.3  標簽 239
10.3.1  插入音頻文件 239
10.3.2  插入Flash動畫 240
10.3.3  插入背景透明的Flash動畫 242
10.3.4  插入視頻文件 243
10.4  小結(jié) 244
10.5  習題 244 
第2篇　HTML5高級應(yīng)用 
第11章　HTML5的開發(fā)和新特性 248
  視頻講解：4分鐘
11.1  誰在開發(fā)HTML5 249
11.2  HTML5的新認識 249
11.2.1  兼容性 249
11.2.2  實用性和用戶優(yōu)先 249
11.2.3  化繁為簡 250
11.3  無插件范式 250
11.4  HTML5的新特性 251
第12章　HTML5與HTML4的區(qū)別 252
  視頻講解：50分鐘
12.1  語法的改變 253
12.1.1  HTML5的語法變化 253
12.1.2  HTML5中的標記方法 253
12.1.3  HTML5語法中需要掌握的3個要點 254
12.1.4  標記示例 255
12.2  新增的元素和廢除的元素 256
12.2.1  新增的結(jié)構(gòu)元素 256
12.2.2  新增的塊級（block）的語義元素 257
12.2.3  新增的行內(nèi)（inline）的語義元素 258
12.2.4  新增的嵌入多媒體元素與交互性元素 259
12.2.5  新增的input元素的類型 260
12.2.6  廢除的元素 260
12.3  新增的屬性和廢除的屬性 261
12.3.1  新增的屬性 261
12.3.2  廢除的屬性 263
12.4  全局屬性 265
12.4.1  contentEditable屬性 265
12.4.2  designMode屬性 267
12.4.3  hidden屬性 268
12.4.4  spellcheck屬性 269
12.4.5  tabindex屬性 270
12.5  小結(jié) 270
12.6  習題 271
第13章　HTML5的結(jié)構(gòu) 272
  視頻講解：18分鐘
13.1  新增的主體結(jié)構(gòu)元素 273
13.1.1  article元素 273
13.1.2  section元素 276
13.1.3  nav元素 279
13.1.4  aside元素 281
13.1.5  time元素 283
13.1.6  pubdate屬性 283
13.2  新增的非主體結(jié)構(gòu)元素 284
13.2.1  header元素 284
13.2.2  hgroup元素 284
13.2.3  footer元素 285
13.2.4  address元素 286
13.3  HTML5結(jié)構(gòu) 287
13.3.1  大綱 287
13.3.2  對結(jié)構(gòu)元素使用樣式 291
13.3.3  article元素的樣式 292
13.4  小結(jié) 292
13.5  習題 293
第14章　HTML5中的表單 294
  視頻講解：47分鐘
14.1  新增元素與屬性 295
14.1.1  新增的屬性 295
14.1.2  增加與改良的input元素的種類 298
14.1.3  output元素的添加 305
14.1.4  應(yīng)用新增元素制作注冊表單 305
14.2  對表單的驗證 307
14.2.1  自動驗證 307
14.2.2  checkValidity顯式驗證法 308
14.2.3  避免驗證 309
14.2.4  使用setCustomValidity方法自定義錯誤信息 310
14.3  增加的頁面元素 311
14.3.1  新增的figure元素 312
14.3.2  新增的details元素 313
14.3.3  新增的mark元素 315
14.3.4  新增的progress元素 317
14.3.5  新增的meter元素 318
14.3.6  改良的ol列表 319
14.3.7  改良的dl列表 320
14.3.8  加以嚴格限制的cite元素 321
14.3.9  重新定義的small元素 322
14.4  小結(jié) 322
14.5  習題 323
第15章　HTML5中的文件與拖放 324
  視頻講解：40分鐘
15.1  選擇文件 325
15.1.1  通過file對象選擇文件 325
15.1.2  使用Blob接口獲取文件的類型與大小 326
15.1.3  通過類型過濾選擇的文件 327
15.2　使用FileReader接口讀取文件 329
15.2.1  檢測瀏覽器對FileReader接口的支持性 329
15.2.2　FileReader接口的方法 329
15.2.3  使用readAsDataURL方法預(yù)覽圖片 330
15.2.4　使用readAsText方法讀取文本文件 331
15.2.5　FileReader接口中的事件 333
15.3  拖放API 335
15.3.1  實現(xiàn)拖放的步驟 335
15.3.2  通過拖放顯示歡迎信息 339
15.3.3  使用拖放將商品拖入購物車 341
15.4  dataTransfer對象應(yīng)用詳解 343
15.4.1  使用effectAllowed和dropEffect屬性設(shè)置拖放效果 344
15.4.2  使用setDragImage方法設(shè)置拖放圖標 344
15.5  小結(jié) 345
15.6  習題 346
第16章　多媒體播放 347
  視頻講解：35分鐘
16.1  HTML5多媒體的簡述 348
16.1.1  HTML4中多媒體的應(yīng)用 348
16.1.2  HTML5頁面中的多媒體 348
16.2  多媒體元素基本屬性 349
16.3  多媒體元素常用方法 359
16.3.1  媒體播放時的方法 359
16.3.2  canPlayType(type)方法 360
16.4  多媒體元素重要事件 362
16.4.1  事件處理方式 362
16.4.2  事件介紹 363
16.4.3  事件示例 366
16.5  小結(jié) 368
16.6  習題 369
第17章　繪制圖形 370
  視頻講解：1小時34分鐘
17.1  canvas的基礎(chǔ)知識 371
17.1.1  canvas的由來 371
17.1.2  canvas是什么 371
17.1.3  替代內(nèi)容 371
17.1.4  CSS和canvas 372
17.1.5  瀏覽器對HTML5 Canvas的支持 372
17.1.6  在頁面中放置canvas元素 372
17.1.7  繪制帶邊框矩形 374
17.2  在畫布中使用路徑 376
17.2.1  使用arc方法繪制圓形 376
17.2.2  使用moveTo與lineTo路徑繪制火柴人 378
17.2.3  貝塞爾曲線 380
17.3  運用樣式與顏色 382
17.3.1  fillStyle和strokeStyle屬性 382
17.3.2  透明度globalAlpha 384
17.3.3  線型Line styles 385
17.4  繪制漸變圖形 387
17.4.1  繪制線性漸變 387
17.4.2  繪制徑向漸變 388
17.5  繪制變形圖形 390
17.5.1  坐標的變換 390
17.5.2  坐標變換與路徑的結(jié)合 391
17.5.3  矩陣變換 392
17.6  組合多個圖形 395
17.7  給圖形繪制陰影 398
17.8  應(yīng)用圖像 401
17.8.1  繪制圖像 401
17.8.2  圖像的局部放大 402
17.8.3  圖像平鋪 403
17.8.4  圖像裁剪 405
17.8.5  像素的處理 406
17.9  繪制文字 408
17.10  保存與恢復(fù)狀態(tài) 410
17.11  文件的保存 411
17.12  對畫布繪制實現(xiàn)動畫 412
17.13  綜合實例—桌面時鐘 414
17.14  小結(jié) 417
17.15  習題 417
第18章　SVG的使用 418
  視頻講解：1小時15分鐘
18.1  SVG基礎(chǔ) 419
18.1.1  為什么使用SVG 419
18.1.2  如何使用SVG 419
18.2  SVG繪制基本形狀 420
18.2.1  繪制矩形 420
18.2.2  繪制圓形 421
18.2.3  繪制橢圓 422
18.2.4  繪制多邊形 423
18.2.5  繪制直線 424
18.2.6  繪制曲線 425
18.2.7  繪制路徑 426
18.2.8  繪制文本 428
18.3  SVG中的濾鏡 429
18.3.1  SVG實現(xiàn)模糊效果 429
18.3.2  SVG實現(xiàn)馬賽克效果 430
18.3.3  SVG實現(xiàn)文字陰影 432
18.4  SVG實現(xiàn)動畫 432
18.4.1  animate 433
18.4.2  animateMotion 434
18.4.3  animateTransform 435
18.5  SVG中的漸變 437
18.5.1  線性漸變 437
18.5.2  徑向漸變 438
18.6  小結(jié) 439
18.7  習題 439
第19章　數(shù)據(jù)存儲 441
  視頻講解：49分鐘
19.1  初識Web Storage 442
19.1.1  Web Storage是什么 442
19.1.2  使用Web Storage中的API 442
19.1.3  sessionStorage和localStorage的實例—計數(shù)器 447
19.1.4  Web Storage綜合實例—留言本 449
19.1.5  JSON對象的存儲實例—用戶信息卡 451
19.2  本地數(shù)據(jù)庫 453
19.2.1  Web SQL數(shù)據(jù)庫簡介 453
19.2.2  使用Web SQL Database API 454
19.2.3  本地數(shù)據(jù)庫實例—用戶登錄 458
19.3  小結(jié) 461
19.4  習題 462
第20章　離線應(yīng)用程序 463
  視頻講解：13分鐘
20.1  HTML5離線Web應(yīng)用概述 464
20.1.1  離線Web應(yīng)用概述 464
20.1.2  本地緩存與瀏覽器網(wǎng)頁緩存的區(qū)別 465
20.2  創(chuàng)建HTML5離線應(yīng)用 465
20.2.1  緩存清單（manifest） 465
20.2.2  配置IIS服務(wù)器 467
20.2.3  瀏覽manifest清單 467
20.3  瀏覽器與服務(wù)器的交互過程 469
20.4  判斷在線狀態(tài) 471
20.5  applicationCache對象 474
20.5.1  swapCache方法 476
20.5.2  applicationCache對象的事件 478
20.6  小結(jié) 481
20.7  習題 481
第21章　使用Web Workers處理線程 482
  視頻講解：20分鐘
21.1  Web Workers概述 483
21.1.1  創(chuàng)建和使用Worker 483
21.1.2  Web Workers應(yīng)用實例—求和運算 485
21.1.3  與線程進行數(shù)據(jù)的交互 487
21.2  在Worker內(nèi)部能做什么 489
21.3  多個JavaScript文件的加載與執(zhí)行 490
21.4  線程嵌套 490
21.4.1  單層嵌套 491
21.4.2  在多個子線程中進行數(shù)據(jù)的交互 493
21.5  小結(jié) 496
21.6  習題 496
第22章　通信API 497
  視頻講解：3分鐘
22.1  跨文檔消息通信 498
22.1.1  使用postMessageAPI 498
22.1.2  跨文檔消息傳輸 498
22.1.3  跨域通信 500
22.2  小結(jié) 503
第23章　獲取地理位置信息 504
  視頻講解：12分鐘
23.1  Geolocation API的概述 505
23.1.1  使用getCurrentPosition獲取當前地理位置 505
23.1.2  持續(xù)監(jiān)視當前地理位置的信息 507
23.1.3  停止獲取當前用戶的地理位置信息 507
23.2  position對象 507
23.3  在谷歌地圖上顯示“我在這里” 510
23.4  利用HTML5和百度地圖實現(xiàn)定位處理 512
23.5  小結(jié) 514
23.6  習題 514
第24章　響應(yīng)式網(wǎng)頁設(shè)計 515
  視頻講解：36分鐘
24.1  響應(yīng)式概述 516
24.1.1  響應(yīng)式網(wǎng)頁設(shè)計的概念 516
24.1.2  響應(yīng)式設(shè)計的技術(shù)原理 516
24.1.3  響應(yīng)式設(shè)計的優(yōu)缺點 517
24.2  響應(yīng)式相關(guān)概念 517
24.2.1  像素和屏幕分辨率 517
24.2.2  視口 518
24.2.3  常見的網(wǎng)頁布局類型 520
24.2.4  布局的常見實現(xiàn)方式 521
24.3  響應(yīng)式設(shè)計的實現(xiàn) 522
24.3.1  通過CSS實現(xiàn)響應(yīng)式設(shè)計 522
24.3.2  通過第三方插件實現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計 525
24.4  小結(jié) 527
24.5  習題 527 
第3篇　HTML5項目實戰(zhàn) 
第25章　旅游信息網(wǎng)前臺頁面 530
  視頻講解：22分鐘
25.1  概述 531
25.2  網(wǎng)站預(yù)覽 531
25.3  關(guān)鍵技術(shù) 535
25.3.1  網(wǎng)站主體結(jié)構(gòu)設(shè)計 535
25.3.2  HTML5結(jié)構(gòu)元素的使用 535
25.4  網(wǎng)站公共部分設(shè)計 536
25.4.1  設(shè)計網(wǎng)站公共header 536
25.4.2  設(shè)計網(wǎng)站公共footer 543
25.5  網(wǎng)站主頁設(shè)計 544
25.5.1  顯示網(wǎng)站介紹及相關(guān)圖片 544
25.5.2  主頁左側(cè)導(dǎo)航的實現(xiàn) 545
25.6  “留下足跡”頁面設(shè)計 548
25.6.1  播放音樂 548
25.6.2  添加留言功能的實現(xiàn) 549
25.7  小結(jié) 551
附錄　習題參考答案 552