目 錄
　　本書光盤"自主學習系統"內容索引...XIII
第1篇 入 門 篇

第1章 HTML5概述 2
（ 視頻講解：26分鐘）
1.1 HTML5簡介 3
1.2 HTML的發展歷程 3
1.3 HTML5的新認識和新特性 4
1.3.1 HTML5的新認識 4
1.3.2 HTML5的新特性 5
1.4 無插件方式 5
1.5 HTML的標簽構成 6
1.5.1 HTML標簽概述 6
1.5.2 開始標簽 html 7
1.5.3 頭部標簽 head 8
1.5.4 標題標簽 title 8
1.5.5 主體標簽 body 8
1.5.6 編寫時注意事項 8
1.6 編寫HTML文件 9
1.6.1 HTML文件的編寫方法 9
1.6.2 手工編寫頁面 10
1.6.3 使用可視化軟件制作頁面 11
1.6.4 使用瀏覽器瀏覽HTML文件 15
1.6.5 查看源文件 15
1.7 本章小結 16
第2章 HTML5基本標記 17
（ 視頻講解：44分鐘）
2.1 頭部標記 head 18
2.2 標題標記 title 18
2.3 元信息標記 meta 19
2.3.1 設置頁面關鍵字 19
2.3.2 設置頁面描述 20
2.3.3 設置作者信息 20
2.3.4 設置編輯工具 21
2.3.5 設置網頁文字及語言 21
2.3.6 設置限制搜索方式 22
2.3.7 設置定時跳轉頁面 22
2.3.8 設置網頁的有效期 24
2.3.9 刪除過期的cookie 24
2.3.10 禁止從緩存中調用 25
2.3.11 強制打開新窗口 25
2.3.12 設置網頁的過渡效果 26
2.4 基底網址標記 base 29
2.5 注釋 !-- -- 30
2.6 頁面主體標記 body 31
2.6.1 文字顏色屬性text 31
2.6.2 背景顏色屬性bgcolor 32
2.6.3 背景圖像屬性background 32
2.6.4 鏈接文字屬性link 35
2.6.5 邊距屬性margin 38
2.7 綜合應用 38
2.7.1 設定自動刷新 38
2.7.2 創建基本的HTML網頁 39
2.8 本章常見錯誤 40
2.8.1 時間和鏈接地址之間分隔符寫成
逗號或空格 40
2.8.2 頁面關鍵字設置過多 40
2.9 本章小結 41
2.10 跟我上機 41
第3章 網頁文本內容 42
（ 視頻講解：28分鐘）
3.1 標題文字 43
3.1.1 標題文字標記 h 43
3.1.2 標題文字的對齊方式屬性align 43
3.2 文字格式 45
3.2.1 文字字體屬性face 45
3.2.2 文字大小屬性size 46
3.2.3 文字顏色屬性color 47
3.2.4 粗體、斜體、下劃線標記 strong 、
em 、 u 48
3.2.5 上標與下標標記 sup 、 sub 49
3.2.6 刪除線標記 strike 49
3.2.7 等寬文字標記 code 、 samp 50
3.2.8 空格碼" " 51
3.2.9 其他特殊符號 52
3.3 段落格式 53
3.3.1 段落標記 p 53
3.3.2 取消換行標記 nobr 54
3.3.3 換行標記 br 54
3.3.4 保留原始排版標記 pre 55
3.3.5 水平居中標記 center 56
3.3.6 文字段落縮進標記
blockquote 57
3.4 添加水平線 58
3.4.1 水平線標記 hr 58
3.4.2 水平線寬度與高度屬性width、
size 59
3.4.3 水平線的顏色屬性color 60
3.4.4 水平線的對齊方式屬性align 61
3.4.5 去掉水平線陰影屬性noshade 61
3.5 其他文字標記 62
3.5.1 文字標注標記 ruby 62
3.5.2 聲明變量標記 var 63
3.5.3 忽視HTML標簽標記 plaintext 、 xmp 64
3.5.4 基字標記 BASEFONT 65
3.5.5 設置地址文字標記
ADDRESS 65
3.6 綜合應用 66
3.6.1 通過格式標簽定義文本樣式 66
3.6.2 在文字上方標注說明 67
3.7 本章常見錯誤 68
3.7.1 粗體和斜體使用錯誤 68
3.7.2 換行符 br 使用過多 68
3.8 本章小結 68
3.9 跟我上機 68
第4章 列表的使用 70
（ 視頻講解：34分鐘）
4.1 列表標記 71
4.2 有序列表 71
4.2.1 有序列表標記 ol 71
4.2.2 有序列表的類型屬性type 72
4.2.3 有序列表的起始數值屬性start 74
4.3 無序列表 75
4.3.1 無序列表標記 ul 75
4.3.2 無序列表的類型屬性type 76
4.4 有序列表和無序列表的組合 78
4.5 菜單列表標記 menu 80
4.6 定義列表標記 dl 81
4.7 目錄列表標記 dir 82
4.8 嵌套列表 83
4.8.1 定義列表的嵌套 83
4.8.2 有序列表和無序列表的嵌套 85
4.9 綜合應用 86
4.9.1 定義列表的使用 86
4.9.2 ol列表的使用 87
4.9.3 有序列表的嵌套 89
4.10 本章常見錯誤 90
4.10.1 有序列表的start屬性不是
數字 90
4.10.2 列表使用不當 90
4.11 本章小結 90
4.12 跟我上機 91
第5章 超鏈接 92
（ 視頻講解：20分鐘）
5.1 什么是超鏈接和路徑 93
5.1.1 超鏈接 93
5.1.2 路徑 93
5.2 超鏈接 94
5.2.1 超鏈接標記 a 94
5.2.2 鏈接到其他網頁 94
5.2.3 目標窗口屬性target 96
5.3 內部鏈接 98
5.4 外部鏈接 100
5.4.1 通過HTTP協議進行外部
鏈接 101
5.4.2 FTP協議的外部鏈接 102
5.4.3 發送E-mail的外部鏈接 103
5.4.4 下載文件鏈接 104
5.5 書簽鏈接 105
5.5.1 建立書簽 106
5.5.2 同頁面的書簽鏈接 107
5.5.3 不同頁面的書簽鏈接 109
5.6 其他鏈接 110
5.6.1 腳本鏈接 110
5.6.2 空鏈接 111
5.7 綜合應用 111
5.7.1 設置圖片的超鏈接 111
5.7.2 框架的嵌套 112
5.8 本章常見錯誤 113
5.8.1 鏈接文件地址不正確 113
5.8.2 建立書簽鏈接未寫"#" 114
5.9 本章小結 114
5.10 跟我上機 114
第6章 使用圖像 116
（ 視頻講解：32分鐘）
6.1 常用圖像格式 117
6.2 向網頁中插入圖像 117
6.3 圖像屬性 118
6.3.1 圖像高度屬性height 118
6.3.2 圖像寬度屬性width 119
6.3.3 圖像邊框屬性border 121
6.3.4 圖像水平間距屬性hspace 122
6.3.5 圖像垂直間距屬性vspace 123
6.3.6 圖像的對齊方式屬性align 123
6.3.7 圖像的提示文字屬性alt 125
6.4 圖像的超鏈接 126
6.4.1 設置圖像的超鏈接 126
6.4.2 設置圖像的熱區鏈接 128
6.5 綜合應用 131
6.5.1 圖像中的提示文字屬性 131
6.5.2 3種不同對齊方式 132
6.6 本章常見錯誤 133
6.6.1 同時設置圖像的寬度或高度使
圖像變形 133
6.6.2 圖像文件路徑不正確 133
6.7 本章小結 133
6.8 跟我上機 134
第7章 表格應用 135
（ 視頻講解：48分鐘）
7.1 表格的構成 136
7.1.1 表格的基本構成 table 、
tr 、 td 136
7.1.2 表格的標題 caption 137
7.1.3 表格的表頭 th 138
7.2 表格基本屬性 140
7.2.1 表格寬度width 140
7.2.2 表格高度height 141
7.2.3 表格對齊方式align 143
7.2.4 表格邊框寬度border 144
7.2.5 表格邊框顏色bordercolor 145
7.2.6 內框寬度cellspacing 146
7.2.7 表格內文字與邊框間距
cellpadding 147
7.2.8 表格背景顏色bgcolor 149
7.2.9 表格的背景圖像background 150
7.3 表格行屬性 151
7.3.1 行高度的設置height 151
7.3.2 行的邊框顏色bordercolor 152
7.3.3 行的背景顏色bgcolor、
background 153
7.3.4 行文字的水平對齊方式align 154
7.3.5 行文字的垂直對齊方式valign 156
7.3.6 表格標題的垂直對齊方式align 157
7.4 單元格屬性 158
7.4.1 單元格大小width、height 158
7.4.2 水平跨度colspan 159
7.4.3 垂直跨度rowspan 160
7.4.4 對齊方式align、valign 162
7.4.5 單元格的背景色bgcolor 163
7.4.6 單元格的邊框顏色
bordercolor 164
7.4.7 單元格的亮邊框
bordercolorlight 166
7.4.8 單元格的暗邊框
bordercolordark 167
7.4.9 單元格的背景圖像background 168
7.5 完整的表格結構 170
7.5.1 表格的表首標記 thead 170
7.5.2 表格的表主體標記 tbody 172
7.5.3 表格的表尾標記 tfoot 173
7.6 表格嵌套 175
7.7 綜合應用 176
7.7.1 表格的內部邊框樣式屬性
rules 176
7.7.2 表格的邊框樣式屬性frame 177
7.7.3 表格的嵌套應用 179
7.8 本章常見錯誤 181
7.8.1 背景圖像屬性放置在 tr
標記中 181
7.8.2 cellpadding參數值過大 181
7.9 本章小結 182
7.10 跟我上機 182
第8章 編輯表單頁面 183
（ 視頻講解：26分鐘）
8.1 表單概述 184
8.2 表單標記及其屬性 184
8.2.1 name屬性 185
8.2.2 action屬性 185
8.2.3 method屬性 185
8.2.4 enctype屬性 186
8.2.5 target屬性 186
8.3 輸入標記 input 186
8.3.1 文字域text 187
8.3.2 密碼域password 188
8.3.3 單選按鈕radio 189
8.3.4 復選框checkbox 190
8.3.5 普通按鈕button 190
8.3.6 提交按鈕submit 191
8.3.7 重置按鈕reset 191
8.3.8 圖像域image 192
8.3.9 隱藏域hidden 193
8.3.10 文件域file 193
8.4 文本域標記 textarea 194
8.5 菜單和列表標記 select 、
option 195
8.6 在Dreamweaver中快速創建
表單 196
8.7 綜合應用 198
8.7.1 讓密碼域更安全 198
8.7.2 制作個人信息頁面 199
8.7.3 編寫用戶注冊信息頁 201
8.8 本章常見錯誤 203
8.8.1 上傳文件表單沒有設置enctype
屬性 203
8.8.2 表單中的列表不能實現多選 203
8.9 本章小結 203
8.10 跟我上機 203
第9章 常用的網頁標簽 206
（ 視頻講解：26分鐘）
9.1 層 207
9.1.1 層的分類 207
9.1.2 定義數據塊 207
9.2 div 標簽 208
9.2.1 div 標簽概述 208
9.2.2 div 標簽的屬性 209
9.2.3 span 與 div 標簽 216
9.3 layer 和 ilayer 標簽 217
9.3.1 標簽層的使用 218
9.3.2 layer 和 ilayer 標簽的區別 219
9.4 iframe 標簽 219
9.4.1 iframe 標簽概述 219
9.4.2 iframe 標簽的屬性 220
9.5 綜合應用 222
9.5.1 兩個div并排 222
9.5.2 應用div制作下拉菜單
導航條 222
9.5.3 設置一行兩列浮動布局 226
9.6 本章常見錯誤 227
9.6.1 頁面中的id屬性值不唯一 227
9.6.2 主體層中z-index屬性值大于
背景層 228
9.7 本章小結 228
9.8 跟我上機 228
第10章 多媒體頁面 230
（ 視頻講解：20分鐘）
10.1 文字的滾動 231
10.1.1 marquee 標記 231
10.1.2 direction屬性 231
10.1.3 behavior屬性 232
10.1.4 scrollamount屬性 233
10.1.5 scrolldelay屬性 234
10.1.6 loop屬性 235
10.1.7 width、height屬性 235
10.1.8 bgcolor屬性 236
10.1.9 hspace、vspace屬性 237
10.2 背景音樂 238
10.2.1 bgsound 標記 238
10.2.2 loop屬性 239
10.3 多媒體文件 240
10.3.1 embed 標記 240
10.3.2 autostart屬性 241
10.3.3 loop屬性 242
10.3.4 hidden屬性 243
10.4 綜合應用 244
10.4.1 嵌入MP3音樂 244
10.4.2 嵌入Flash動畫 245
10.5 本章常見錯誤 246
10.5.1 文件URL地址不正確 246
10.5.2 embed 標記的loop屬性值設置
為數字 246
10.6 本章小結 246
10.7 跟我上機 246

　　
　　
第2篇 提 高 篇

第11章 繪制圖形 248
（ 視頻講解：1小時25分鐘）
11.1 canvas基礎 249
11.1.1 canvas元素簡介 249
11.1.2 插入canvas元素 249
11.1.3 繪制矩形實例 251
11.2 使用路徑繪制圓形 252
11.2.1 繪制圓形 253
11.2.2 繪制火柴人 254
11.2.3 繪制貝濟埃曲線 257
11.3 運用樣式與顏色 259
11.3.1 fillStyle和strokeStyle屬性 259
11.3.2 globalAlpha屬性 261
11.3.3 線型Line styles 262
11.4 實現圖形的變形 264
11.4.1 坐標的變換 264
11.4.2 矩陣變換 266
11.5 繪制漸變圖形 269
11.5.1 繪制線性漸變 269
11.5.2 繪制徑向漸變 271
11.6 繪制陰影和組合圖形 272
11.6.1 繪制陰影 272
11.6.2 繪制組合圖形 273
11.7 繪制文字 275
11.8 應用圖像 277
11.8.1 繪制圖像 277
11.8.2 圖像的局部放大 279
11.8.3 圖像平鋪 280
11.8.4 圖像裁剪 282
11.8.5 處理像素 283
11.9 保存與恢復狀態 285
11.10 文件的保存 285
11.11 對畫布繪制實現動畫 286
11.12 綜合應用 287
11.12.1 使用canvas API繪制簡單
動畫 287
11.12.2 移動、縮放、旋轉繪制的
圖形 288
11.13 本章常見錯誤 288
11.13.1 canvas未設置id屬性 288
11.13.2 shadowBlur屬性值錯誤 289
11.14 本章小結 289
11.15 跟我上機 289
第12章 HTML5與HTML4 291
（ 視頻講解：50分鐘）
12.1 HTML5的語法變化 292
12.1.1 HTML5中的標記方法 292
12.1.2 HTML5與之前版本的區別 293
12.2 新增的元素和廢除的元素 294
12.2.1 新增的結構元素 294
12.2.2 新增的行內（inline）語義
元素 295
12.2.3 新增的塊級（block）語義
元素 296
12.2.4 新增的input元素的類型 297
12.2.5 新增的多媒體元素與交互性
元素 298
12.2.6 廢除的元素 299
12.3 新增的屬性和廢除的屬性 299
12.3.1 新增的屬性 300
12.3.2 廢除的屬性 302
12.4 全局屬性 303
12.4.1 designMode屬性 303
12.4.2 hidden屬性 304
12.4.3 contentEditable屬性 304
12.4.4 tabindex屬性 305
12.4.5 spellcheck屬性 305
12.5 綜合應用 306
12.5.1 article元素嵌套 306
12.5.2 section元素 307
12.6 本章常見錯誤 308
12.6.1 charset和http-equiv屬性同時
使用 308
12.6.2 spellcheck未聲明屬性值 308
12.7 本章小結 309
12.8 跟我上機 309
第13章 HTML5的新增結構元素 310
（ 視頻講解：20分鐘）
13.1 新增的主體結構元素 311
13.1.1 article元素 311
13.1.2 section元素 314
13.1.3 nav元素 316
13.1.4 aside元素 317
13.1.5 time元素 319
13.1.6 pubdate屬性 320
13.2 新增的非主體結構元素 320
13.2.1 header元素 320
13.2.2 hgroup元素 321
13.2.3 footer元素 322
13.2.4 address元素 323
13.3 綜合應用 323
13.3.1 article元素嵌套 323
13.3.2 section元素應用 324
13.4 本章常見錯誤 325
13.4.1 使用section元素時的常見
錯誤 325
13.4.2 用menu元素代替nav元素 325
13.5 本章小結 325
13.6 跟我上機 326
第14章 表單的新增元素 327
（ 視頻講解：48分鐘）
14.1 新增表單元素與屬性 328
14.1.1 增加與改良的input元素 328
14.1.2 output元素 333
14.1.3 應用新增元素制作注冊表單 333
14.1.4 新增的屬性 335
14.2 驗證表單 338
14.2.1 自動驗證 338
14.2.2 checkValidity顯式驗證法 339
14.2.3 使用setCustomValidity()方法
自定義錯誤信息 340
14.2.4 避免驗證 342
14.3 新增和改良的頁面元素 342
14.3.1 details元素 342
14.3.2 figure與figcaption元素 343
14.3.3 progress元素 344
14.3.4 mark元素 346
14.3.5 meter元素 348
14.3.6 cite元素 349
14.3.7 重新定義的small元素 349
14.3.8 改良的ol列表 349
14.3.9 改良的dl列表 350
14.4 綜合應用 351
14.4.1 search搜索類型的input元素 351
14.4.2 range類型的input元素 352
14.5 本章常見錯誤 353
14.5.1 progress元素的屬性值錯誤 353
14.5.2 使用required或pattern未指
定name屬性的值 354
14.6 本章小結 354
14.7 跟我上機 354
第15章 多媒體播放 356
（ 視頻講解：36分鐘）
15.1 HTML5頁面中的多媒體 357
15.2 多媒體元素的屬性 358
15.3 多媒體元素的方法 362
15.3.1 媒體播放時的方法 362
15.3.2 canPlayType()方法 363
15.4 多媒體元素的事件 364
15.4.1 事件處理 364
15.4.2 事件介紹 364
15.5 綜合應用 368
15.5.1 video元素的error屬性的
返回值 368
15.5.2 自定義video元素控制條
工具欄 369
15.6 本章常見錯誤 370
15.6.1 不支持的播放格式 370
15.6.2 播放文件URL地址不正確 371
15.7 本章小結 371
15.8 跟我上機 371
第16章 文件與拖放 373
（ 視頻講解：40分鐘）
16.1 選擇文件 374
16.1.1 FileList與file對象 374
16.1.2 BIob對象的屬性 375
16.1.3 通過類型過濾文件 376
16.2 使用FileReader對象讀取
文件 377
16.2.1 檢測瀏覽器對FileReader對象
的支持 378
16.2.2 FileReader對象的方法 378
16.2.3 實現圖片的預覽 379
16.2.4 文本文件的讀取 380
16.2.5 FileReader對象中的事件 382
16.3 拖放API 384
16.3.1 實現拖放的步驟 384
16.3.2 拖放實例 384
16.4 dataTransfer對象 386
16.4.1 設置拖放效果 387
16.4.2 設置拖放圖標 387
16.5 綜合應用 388
16.5.1 使用JavaScript實現元素
拖放 388
16.5.2 元素在拖放過程中觸發的
事件 389
16.6 本章常見錯誤 390
16.6.1 兩個拖放效果值不相等 390
16.6.2 頁面未設置為不執行默認
處理 390
16.7 本章小結 391
16.8 跟我上機 391
第17章 Web API與通信API 393
（ 視頻講解：54分鐘）
17.1 Web Storage 394
17.1.1 Web Storage簡介 394
17.1.2 WebStorage的API 394
17.1.3 兩種不同存儲類型的實例--
計數器 396
17.2 Web SQL數據庫 398
17.2.1 Web SQL數據庫簡介 398
17.2.2 Web SQL Database API的
使用 398
17.3 跨文檔消息通信 400
17.3.1 postMessageAPI的使用 401
17.3.2 跨文檔消息傳輸 401
17.4 綜合應用 403
17.4.1 JSON對象的存儲實例--用戶
信息卡 403
17.4.2 簡單用戶登錄 406
17.5 本章常見錯誤 409
17.5.1 重復創建已經存在的數據表 409
17.5.2 創建數據表時未使用事務 409
17.6 本章小結 409
17.7 跟我上機 410
第18章 Web Workers處理線程 412
（ 視頻講解：22分鐘）
18.1 創建和使用Worker 413
18.2 Worker能做什么 413
18.3 多個JavaScript文件的加載與
執行 414
18.4 線程的嵌套 415
18.4.1 線程的單層嵌套 415
18.4.2 多個子線程實現數據交互 417
18.5 綜合應用 420
18.5.1 使用線程傳遞JSON對象 420
18.5.2 使用線程嵌套交互數據 421
18.6 本章常見錯誤 422
18.6.1 在后臺線程的腳本文件中使用
文檔對象或窗口對象 422
18.6.2 導入腳本文件出現錯誤 422
18.7 本章小結 422
18.8 跟我上機 422
第19章 離線應用和地理位置定位 425
（ 視頻講解：20分鐘）
19.1 HTML5離線Web應用概述 426
19.2 創建HTML5離線應用 427
19.2.1 緩存清單文件manifest 427
19.2.2 配置IIS服務器 429
19.2.3 瀏覽manifest文件 429
19.3 瀏覽器與服務器的交互 430
19.4 applicationCache對象 431
19.4.1 swapCache()方法 432
19.4.2 applicationCache對象的事件 433
19.5 Geolocation API概述 436
19.5.1 getCurrentPosition()方法 436
19.5.2 watchCurrentPosition()方法 438
19.5.3 clearWatch()方法 439
19.6 position對象 439
19.7 綜合應用 440
19.7.1 簡單離線應用 440
19.7.2 離線留言數據交互 441
19.7.3 在頁面上使用Google地圖 442
19.7.4 獲取地理位置定位 444
19.8 本章常見錯誤 445
19.8.1 使用swapCache()方法得不到
及時更新的頁面 445
19.8.2 獲得用戶當前位置信息時拒絕
共享 445
19.9 本章小結 445
19.10 跟我上機 445

　　
　　
　　
第3篇 實 戰 篇

第20章 旅游信息網前臺頁面設計 448
（ 視頻講解：24分鐘）
20.1 網站簡介 449
20.2 系統設計 449
20.2.1 系統目標 449
20.2.2 網站預覽 449
20.3 系統開發及運行環境 453
20.4 關鍵技術 453
20.4.1 網站主體結構設計 453
20.4.2 HTML5結構元素的使用 454
20.5 網站公共部分設計 455
20.5.1 設計網站header 455
20.5.2 設計網站footer 461
20.6 網站主頁設計 462
20.6.1 網站介紹及相關圖片 462
20.6.2 左側導航的實現 464
20.7 留下足跡頁設計 467
20.7.1 音樂播放 467
20.7.2 添加留言功能 468
20.8 本章小結 470

　　
　　
　　
　　
　　
　　
IV
　　
　　
XI