HTML 5 網頁設計與製作全程揭秘

第1章從HTML到HTML5
1.1 HTML基礎1
1.1.1 HTML概述1
1.1.2 HTML特性1
1.1.3 HTML文檔結構2
1.1.4 HTML的基本語法2
1.1.5 HTML編寫注意事項3
1.2 XHTML基礎3
1.2.1 XHTML概述3
1.2.2 XHTML文檔結構4
1.2.3 XHTML的文檔類型5
1.2.4名字空間5
1.3 HTML5基礎5
1.3.1 HTML5概述6
1.3.2 HTML5的文檔結構6
1.3.3 HTML5的優勢6
1.3.4 HTML5精簡的頭部7
1.4 HTML文件的編寫方式8
1.4.1使用記事本編寫8
實戰使用記事本製作HTML頁面8
1.4.2使用Dreamweaver編寫9
實戰使用Dreamweaver製作HTML頁面10
1.5 HTML5中的標籤11
1.6 HTML5的標準屬性13
1.7 HTML5的事件屬性14

第２章HTML5頁面基本設置
2.1網頁頭部標籤16
2.1.1網頁標題標籤16
實戰使用標籤設置網頁標題17
2.1.2基底網址標籤17
實戰設置網頁基底網址18
2.2元信息標籤18
2.2.1設置網頁關鍵字19
2.2.2設置網頁說明19
2.2.3設置網頁作者信息20
2.2.4設置網頁編輯軟件20
實戰設置網頁基礎元信息20
2.2.5設置網頁定時跳轉21
實戰設置網頁定時跳轉22
2.2.6限制搜索方式22
2.2.7設置網頁文字及語言23
2.2.8設置網頁有效期限23
2.2.9禁止緩存調用24
2.2.10刪除過期的cookie24
2.2.11強制打開新窗口24
2.3網頁主體標籤25
2.3.1網頁邊距margin屬性25
實戰設置網頁整體邊距25
2.3.2網頁背景顏色bgcolor屬性26
實戰設置網頁背景顏色27
2.3.3背景圖像background屬性27
實戰設置網頁背景圖像28
2.3.4文字顏色text屬性28
實戰設置網頁默認文字顏色29
2.3.5鏈接文字顏色link屬性29
實戰設置網頁默認鏈接文字顏色29
2.4在HTML代碼中添加註釋30

第3章設置文本與段落
3.1設置文本效果32
3.1.1文字樣式標籤32
實戰設置網頁文字基本樣式33
3.1.2傾斜文字和標籤34
實戰設置文字傾斜效果34
3.1.3加粗文字和標籤35
實戰設置網頁文字加粗效果36
3.1.4下畫線標籤36
實戰為文字添加下畫線37
3.1.5刪除線和標籤37
實戰為文字添加刪除線37
3.1.6上標與下標和標籤38
實戰設置上標和下標文字效果38
3.1.7等寬文本和標籤39
3.1.8標題文本至標籤39
實戰設置標題文字40
3.2特殊文字標籤40
3.2.1空格40
實戰在網頁文本中添加空格41
3.2.2其他特殊符號41
實戰在網頁中添加特殊文本符號42
3.2.3水平線標籤42
實戰在網頁中插入並設置水平線42
3.3文本的分行與分段43
3.3.1文本換行
標籤43
實戰為網頁文本進行換行處理43
3.3.2強制不換行標籤44
實戰強製網頁文本不換行44
3.3.3文本分段標籤45
實戰為網頁文本進行分段處理45
3.3.4段落文字對齊align屬性46
實戰設置文字水平對齊效果46
3.3. 5保留原始排版標籤47
實戰保留網頁文本原始排版效果47
3.4其他文字標籤47
3.4.1文字標註標籤47
實戰在網頁中實現文字標註說明效果47
3.4.2聲明變量標籤48
實戰使用聲明變量標籤48
3.4 .3忽視HTML和標籤49
實戰使用忽視HTML標籤49
3.5滾動文本標籤50
實戰製作網頁文本滾動效果50

第4章插入並設置圖像
4.1了解網頁中的圖像格式52
4.1.1網頁常用的圖像格式52
4.1 .2選擇合適的圖像格式53
4.2插入圖像標籤53
實戰製作圖像頁面54
4.3設置圖像屬性54
4.3.1圖像寬度和高度width和height屬性55
實戰插入圖像並設置圖像寬度和高度55
4.3.2圖像邊框border屬性56
實戰為圖像添加邊框57
4.3.3圖像替代文本alt屬性57
實戰為圖像添加替代文本和提示文字信息58
4.3.4圖像相對於文字的對齊方式align屬性59
實戰設置圖像相對於文字的對齊效果59
4.3.5圖文混排效果align屬性60
實戰製作圖文混排頁面60
4.4滾動圖像標籤62
實戰製作滾動圖像效果62

第５章創建和設置列表
5.1認識列表標籤64
5.2項目列表64
5.2.1創建項目列表標籤64
實戰創建新聞列表65
5.2.2項目列表符號type屬性66
實戰設置列表符號效果67
5.3編號列表68
5.3.1創建編號列表標籤68
實戰創建排行列表69
5.3.2編號列表符號type屬性69
實戰設置編號列表符號70
5.3 .3編號列表起始值start屬性71
實戰設置編號列表起始數值72
5.4定義列表標籤73
實戰製作複雜新聞列表73

第6章創建和設置超鏈接
6.1超鏈接基礎75
6.1.1什麼是超鏈接75
6.1.2超鏈接路徑76
6.2創建超鏈接77
6.2.1超鏈接標籤77
6.2.2超鏈接提示alt屬性77
6.2.3超鏈接打開方式target屬性78
實戰為文字和圖像設置超鏈接78
6.3創建錨點鏈接79
6.3.1插入錨點79
6.3. 2創建錨點鏈接80
實戰製作錨點鏈接頁面81
6.4創建特殊超鏈接83
6.4.1空鏈接83
6.4.2文件下載鏈接83
實戰創建空鏈接和文件下載鏈接83
6.4.3腳本鏈接84
實戰創建關閉窗口腳本鏈接85
6.4.4 E-mail鏈接85
實戰創建電子郵件鏈接86

第7章插入多媒體
7.1插入Flash動畫標籤87
實戰製作Flash歡迎頁87
7.2添加背景音樂88
7.2.1網頁中支持的音頻格式88
7.2.2背景音樂標籤89
7.2.3音樂循環播放次數loop屬性89
實戰為網頁設置背景音樂90
7.2.4嵌入音頻標籤90
實戰在網頁中嵌入音頻播放控制條91
7.3插入普通視頻92
7.3.1網頁中支持的視頻格式92
7.3.2插入視頻標籤92
7.3.3設置自動播放autostart屬性92
實戰在網頁中插入視頻93
7.3.4隱藏播放控件hidden屬性94

第8章插入和設置表單元素
8.1關於表單95
8.1.1插入表單域標籤95
8.1.2表單動作action屬性96
8.1.3表單名稱name屬性96
8.1.4表單傳送方式method屬性96
8.1.5表單編碼方式enctype屬性97
8.1.6目標顯示方式target98
8.2添加表單元素98
8.3輸入類型表單元素99
8.3.1文本域text類型99
8.3.2密碼域password類型100
8.3.3圖像域image類型100
實戰製作登錄頁面101
8.3.4隱藏域hidden類型104
8.3.5複選框checkbox類型104
實戰製作網站調查表單104
8.3 .6單選按鈕radio類型107
實戰製作網站投票107
8.3.7文件域file類型109
8.3.8普通按鈕button類型110
8.3.9提交按鈕submit類型110
8.3.10重置按鈕reset類型110
8.4其他類型表單元素110
8.4.1文本區域標籤111
8.4.2列表菜單標籤111
實戰製作網站搜索112
8.5製作用戶註冊頁面114
實戰用戶註冊頁面114

第9章表格與Div
9.1了解表格119
9.2創建表格119
9.2.1表格標籤119
9.2.2表格標題標籤120
9.2.3表頭標籤121
實戰創建學習安排表122
9.3表格結構標籤123
9.3.1表格頭部標籤123
9.3.2表格主體標籤124
9.3.3表格尾部標籤125
實戰製作學生成績數據表126
9.4設置表格屬性127
9.4.1表格寬度與高度width和height屬性127
9.4.2表格對齊方式align屬性128
9.4.3表格邊框粗細border屬性129
9.4.4表格邊框顏色bordercolor屬性130
9.4.5表格背景顏色bgcolor屬性131
9.4.6表格背景圖像background屬性132
實戰為表格設置背景顏色和背景圖像133
9.5設置單元行和單元格屬性135
9.5.1設置單元行內容水平和垂直對齊135
9.5.2單元格間距136
9.5.3單元格邊距137
9.5.4合併單元格138
實戰使用表格製作新聞列表139
9.6 IFrame框架141
9.6.1 IFrame框架源文件142
9.6.2 IFrame框架的寬度和高度142
9.6.3 IFrame框架的對齊方式142
9.6.4 IFrame框架是否顯示滾動條142
9.6.5 IFrame框架的邊框142
實戰設置IFrame框架屬性142
9.7插入Div 143
9.7.1標籤144
9.7.2設置Div屬性144
9.7.3與標籤144
實戰製作歡迎頁面145

第10章HTML 5文檔結構
10.1認識HTML5文檔結構147
10.2 HTML5元素分類148
10.2.1結構片段元素149
10.2. 2進度信息元素149
10.2.3交互性元素149
10.2.4內嵌應用元素和輔助元素149
10.2.5文檔和應用中使用的元素150
10.2.6註釋元素150
10.2.7文本和文本標記元素150
10.2.8其他元素150
10.3創建HTML5主體內容151
10.3.1文章標籤151
10.3.2章節標籤152
10.3.3導航標籤154
10.3.4輔助信息標籤156
10.3.5發布日期標籤與微格式157
10.4添加語義模塊158
10.4.1頁眉標籤158
10.4.2標題組標籤159
10.4.3頁腳標籤159
10.4.4聯繫信息標籤160
10.5使用文檔結構元素製作頁面160
實戰製作企業網站首頁面161

第11章使用HTML5畫布繪圖
11.1使用HTML5畫布繪圖166
11.1.1了解canvas元素166
11.1.2在網頁中插入canvas元素166
11.1.3如何使用canvas元素實現繪圖167
11.2繪製基本圖形169
11.2.1繪製直線169
實戰在網頁中繪製直線169
11.2.2繪製矩形170
實戰在網頁中繪製矩形171
11.2.3繪製圓形172
實戰在網頁中繪製圓形173
11.2.4繪製三角形174
實戰在網頁中繪製三角形174
11.2.5清除圖形175
實戰清除使用canvas元素所繪製的部分圖形175
11.3繪製文本176
11.3.1使用文本176
實戰在網頁中繪製文字177
11.3.2獲取文字寬度177
實戰獲取所繪製文字寬度178
11.4繪製弧線和曲線178
11.4.1使用arc方法179
實戰通過中心點和半徑繪製弧線.179
11.4.2使用arcTo方法180
實戰通過輔助線繪製弧線180
11.4.3使用quadraticCurveTo方法181
實戰繪製二次樣條曲線182
11.4.4使用bezierCurveTo方法183
實戰繪製貝塞爾曲線183
11.5圖形的組合與裁切184
11.5.1圖形組合184
實戰繪製組合圖形效果185
11.5.2使用圖像186
實戰使用canvas元素繪製圖像187
11.5.3使用圖像模式188
實戰設置圖像平鋪效果188
11.5.4裁切路徑189
實戰在網頁中實現圓形裁切圖像效果189
11.6圖形變換處理191
11.6.1移動變換操作191
實戰移動所繪製圖形位置191
11.6.2縮放變換操作193
實戰使用縮放操作繪製橢圓形193
11.6.3旋轉變換操作194
實戰繪製矩形並進行旋轉195
11.6.4矩陣變形操作196
11.7圖形顏色與樣式設置196
11.7.1繪製線性漸變196
實戰在網頁中繪製矩形並填充線性漸變197
11.7.2繪製徑向漸變198
實戰在網頁中繪製圓形並填充徑向漸變198
11.7.3不同的線型199
11.7.4創建對象陰影201
實戰為圖形添加陰影效果201

第12章HTML5的音頻和視頻
12.1 HTML5多媒體基礎203
12.1.1視頻文件格式203
12.1.2在線多媒體的發展203
12.1.3 HTML5音頻和視頻的優勢204
12.1.4音頻和視頻編解碼器204
12.1.5 HTML5音頻和視頻的不足205
12.1.6檢查瀏覽器是否支持HTML5音頻和視頻205
12.2使用HTML5音頻206
12.2.1標籤所支持的音頻格式206
12.2.2使用標籤206
實戰在網頁中嵌入音頻播放206
12.3使用HTML5視頻207
12.3.1標籤所支持的視頻格式207
12.3.2使用標籤207
實戰在網頁中嵌入視頻播放208
12.3.3使用標籤209
12.4與標籤的屬性209
12.4 .1元素的標籤屬性209
12.4.2元素的接口屬性210
實戰為網頁文本進行分段處理211
12.5與標籤的接口方法和事件212
12.5.1與標籤的接口方法212
實戰控制視頻的播放和暫停212
12.5.2與標籤的接口事件214
12.5.3與標籤接口事件的使用方法.214
12.5.4自定義視頻播放控制組件214
實戰自定義視頻播放控制組件215

第13章使用HTML5的表單元素
13.1了解HTML5表單219
13.1.1 HTML表單的發展219
13.1.2 HTML5新增表單元素的作用219
13.1.3瀏覽器對HTML5表單的支持情況220
13.2 HTML5新增表單輸入類型220
13.2.1 url類型220
13.2.2 email類型220
13.2.3 range類型220
13.2.4 number類型221
13.2.5 tel類型221
13.2.6 search類型221
13.2.7 color類型221
13.2.8 date類型221
13.2.9 month、week、time、datetime、datetime-local類型222
13.2.10使用HTML5表單元素222
實戰製作留言表單頁面222
13.3 HTML5新增其他表單元素226
13.3.1 datalist元素和list屬性226
13.3.2 keygen元素226
13.3.3 output元素227
13.4 HTML5新增表單屬性227
13.4.1 form屬性227
13.4.2 formaction屬性227
13.4.3 formmethod、formenctype、formnovalidate、formtarget屬性228
13.4.4 placeholder屬性228
實戰為表單元素設置默認提示內容228
13.4.5 autofocus屬性229
13.4.6 autocomplete屬性229
13.5 HTML5表單驗證標籤屬性229
13.5.1 required屬性230
13.5.2 pattern屬性230
13.5.3 min、max和step屬性230
13.5.4 novalidate屬性230
實戰對網頁表單進行驗證230
13.6 HTML5表單驗證API 231
13.6.1表單驗證的屬性231
13.6 .2 ValidityState對象232
13.6.3 checkValidity方法驗證表單233
實戰使用checkValidity方法驗證表單233
13.6.4 setCustomValidity方法驗證表單234
實戰使用setCustomValidity方法驗證表單234
13.6.5表單驗證事件236
實戰使用invalid事件驗證表單236

第14章文件與拖放處理
14.1文件API 238
14.1.1新增的上傳表單元素屬性238
14.1.2 File對象與FileList對象239
實戰同時上傳多個文件並顯示文件名稱239
14.1.3 Blob對象240
實戰獲取所上傳文件數據240
14.2 FileReader接口242
14.2.1檢查瀏覽器是否支持FileReader接口242
14.2.2 FileReader接口的屬性242
14.2.3 FileReader接口的方法243
實戰使用FileReader接口方法將上傳的文件讀取為不同數據243
14.2.4 FileReader接口的事件245
實戰FileReader接口的事件響應順序245
14.3拖放API 247
14.3.1新增的draggable屬性247
14.3.2新增的鼠標拖放事件247
14.3.3 DataTransfer對象247
14.3.4把圖像拖放到網頁中248
實戰把圖像拖放到網頁中248

第15章HTML5本地存儲
15.1 Web Storage 251
15.1.1什麼是Web Storage251
15.1.2 Cookie存儲數據的不足251
15.1.3使用Web Storage存儲的優勢252
15.1.4會話存儲與本地存儲的區別252
15.2使用Web Storage252
15.2 .1檢查瀏覽器是否支持Web Storage252
實戰檢查瀏覽器是否支持Web Storage 253
15.2.2設置和獲取Storage數據254
實戰使用sessionStorage和localStorage254
15.2.3 Storage API的屬性和方法255
實戰使用storage對象保存頁面內容256
15.2.4格式化數據257
實戰使用Storage對象存儲JOSN數據257
15.2.5 Storage API事件259
實戰使用Web Storage製作簡單留言板260
15.3本地數據庫Web SQL261
15.3.1了解Web SQL數據庫262
15.3.2 Web SQL數據庫的基本操作262
15.3.3使用Web SQL數據庫263
實戰實現選擇網頁背景顏色263

第16章HTML5離線應用緩存
16.1 Web離線應用緩存268
16.1.1新增的離線應用緩存268
16.1.2離線應用緩存與傳統頁面緩存的區別269
16.1.3離線應用緩存與本地數據存儲的區別269
16.2 manifest緩存清單文件269
16.2.1 manifest文件的結構269
16.2.2如何使用manifest文件270
16.2.3服務器端的配置270
16.2.4檢查瀏覽器網絡狀態271
實戰檢查瀏覽器的網絡狀態271
16.3應用緩存接口applicationCache 273
16.3.1檢查瀏覽器是否支持應用緩存接口273
實戰檢查瀏覽器是否支持Web離線應用273
16.3.2 applicationCache接口274
16.3.3接口的status屬性274
16.3.4接口的方法275
16.3.5接口的事件275
實戰離線應用緩存的事件發生順序275
16.4離線緩存網頁內容277
實戰離線緩存網頁內容277

第17章使用Web Workers處理線程
17.1了解Web Workers281
17.1.1什麼是Web Workers281
17.1.2 Web Workers線程的特點281
17.1 .3 Web Workers體系結構282
17.2專屬線程Dedicated Worker 282
17.2.1檢查瀏覽器是否支持Worker對象282
17.2.2創建專屬線程282
17.2.3為線程添加監聽消息事件282
17.2.4向線程中發送消息283
17.2.5編寫線程處理的腳本文件283
17.2.6在線程中加載多個文件283
17.2.7監聽線程錯誤283
實戰簡單的專屬線程應用284
17.2.8多線程嵌套285
17.2.9單層線程嵌套286
實戰線程嵌套輸出最大質數286
17.2.10多層線程嵌套287
17.3共享線程Shared Worker288
17.3.1共享線程的基本用法288
17.3.2使用共享線程289
實戰使用共享線程顯示連接數289
17.4 Web Workers接口框架291
17.4.1線程外部接口291
17.4.2線程內部接口293

第18章跨源通信和WebSocket雙向通信
18.1了解跨文檔信息傳輸296
18.1.1跨文檔信息傳輸的實現296
18.1.2網頁源安全297
18.2使用postMessage接口297
18.2.1檢查瀏覽器是否支持postMessage接口298
18.2.2使用postMessage方法發送信息298
18.2.3使用message事件監聽收到的信息298
實戰實現簡單的跨文檔信息傳輸299
18.3信息事件接口MessageEvent 301
18.3.1 MessageEvent接口清單301
18.3.2 MessageEvent接口屬性301
18.3.3 initMessageEvent接口方法302
18.3.4 MessageEvent接口說明302
18.4了解XMLHttpRequestLevel2規範302
18.4.1 XMLHttpRequestLevel2規範的優勢302
18.4.2 XMLHttpRequestLevel2規範的接口303
18.4.3 XMLHttpRequestLevel2規範中新的響應事件304
18.4.4檢查瀏覽器是否支持全新的XMLHttpRequest對象304
18.4.5構建跨源請求304
18.4.6添加監聽事件304
18.4.7部署服務器305
18.5了解WebSocket 305
18.5.1 WebSocket概述305
18.5.2 WebSocket的優勢306
18.5.3 WebSocket編程接口306
18.6了解WebSocket編程基礎308
18.6.1檢查瀏覽器是否支持WebSocket 308
18.6.2創建連接308
18.6.3添加狀態和消息監聽事件309
18.6.4發送信息309
18.6.5關閉連接309

第19章使用HTML5獲取地理位置
19.1 Geolocation API 310
19.1.1地理位置坐標信息310
19.1.2地理位置信息的來源310
19.1.3地理位置信息的應用311
19.1.4 Geolocation API中的隱私保護311
19.2使用Geolocation前的準備312
19.2.1 Geolocation的瀏覽器支持情況312
19.2.2檢查瀏覽器是否支持Geolocation API312
實戰檢查瀏覽器是否支持GeolocationAPI312
19.3使用GeolocationAPI獲取地理位置313
19.3.1 getCurrentPosition方法313
19.3.2回調函數successCallback 314
19.3.3回調函數errorCallback 314
19.3.4可選參數options 315
19.3.5單次獲取地理位置信息315
實戰單次獲取地理位置信息316
19.3.6重複更新地理位置信息319
19.4 Geolocation接口319
19.4.1 NavigatorGeolocation接口清單319
19.4.2 Geolocation接口清單319
19.4.3 PositionOptions接口清單320
19.4 .4 Position接口清單320
19.4.5 Coordinates接口清單321
19.4.6 PositionError接口清單321
19.5在地圖上顯示位置321
實戰在地圖上顯示位置322

第20章HTML5網頁綜合實戰
20.1製作電子商務網站頁面327
20.1.1設計分析327
20.1.2佈局結構分析327
20.1. 3製作HTML5頁面328
實戰製作頁眉header和導航nav區域328
實戰製作網頁廣告區域330
實戰製作網頁側邊欄區域332
實戰製作網頁主體內容區域334
實戰製作網頁版底footer區域338
20.2製作企業網站頁面340
20.2.1設計分析340
20.2.2佈局結構分析340
20.2.3製作HTML5頁面341
實戰製作頁面頭部header區域341
實戰製作網頁焦點輪換廣告圖344
實戰製作頁面主體內容區域346
實戰製作頁腳部分內容348
HTML5手機網頁實戰

21.1如何製作響應式網站頁面351
21.1.1什麼是響應式設計351
21.1.2響應式設計的相關術語352
21.1.3標籤設置353
21.2製作響應式攝影圖片網頁354
21.2.1設計分析354
21.2.2佈局結構分析354
21.2.3製作HTML5響應式網頁355
實戰製作頁面導航區域355
實戰製作頁面主體內容區域360
第21章實戰製作頁面版底信息區域365