內容介紹
《HTML自學視頻教程》共分3篇20章，其中，第1篇為入門篇，主要包括HTML5概述、HTML5基本標記、網頁文本內容、列表的使用、超連結、使用圖像、表格套用、編輯表單頁面、常用的網頁標籤、多媒體頁面等內容；第2篇為提高篇，主要包括繪製圖形、HTML5與HTML4、HTML5的新增結構元素、表單的新增元素、多媒體播放、檔案與拖放、Web API與通信API、Web Workers處理執行緒、離線套用和地理位置定位等內容；第3篇為實戰篇，主要介紹旅遊信息網前台頁面設計這一實戰項目。另外本書光碟含：
12小時視頻講解/1120個編程實例/15個經典模組分析/17個項目開發案例/587個編程實踐任務/596個能力測試題目（基礎能力測試、數學及邏輯思維能力測試、面試能力測試、編程英語能力測試）/23個IT勵志故事。
以初學者為主要對象，全面介紹了使用HTML5進行網頁開發的各種技術。
目錄
本書光碟"自主學習系統"內容索引...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
