HTML 5網(wǎng)頁(yè)設(shè)計(jì)與制作全程揭秘

第1 章從HTML 到HTML5
1.1　HTML 基礎(chǔ) 1
1.1.1　HTML 概述1
1.1.2　HTML 特性1
1.1.3　HTML 文檔結(jié)構(gòu)2
1.1.4　HTML 的基本語(yǔ)法2
1.1.5　HTML 編寫(xiě)注意事項(xiàng) 3
1.2　XHTML 基礎(chǔ)3
1.2.1　XHTML 概述3
1.2.2　XHTML 文檔結(jié)構(gòu)4
1.2.3　XHTML 的文檔類(lèi)型 5
1.2.4　名字空間5
1.3　HTML5 基礎(chǔ)5
1.3.1　HTML5 概述6
1.3.2　HTML5 的文檔結(jié)構(gòu) 6
1.3.3　HTML5 的優(yōu)勢(shì) 6
1.3.4　HTML5 精簡(jiǎn)的頭部 7
1.4　HTML 文件的編寫(xiě)方式 8
1.4.1　使用記事本編寫(xiě) 8
實(shí)戰(zhàn)　使用記事本制作HTML 頁(yè)面8
1.4.2　使用Dreamweaver 編寫(xiě)9
實(shí)戰(zhàn)　使用Dreamweaver 制作HTML 頁(yè)面10
1.5　HTML5 中的標(biāo)簽11
1.6　HTML5 的標(biāo)準(zhǔn)屬性 13
1.7　HTML5 的事件屬性 14
第２章HTML5 頁(yè)面基本設(shè)置
2.1　網(wǎng)頁(yè)頭部—— 標(biāo)簽 16
2.1.1　網(wǎng)頁(yè)標(biāo)題—— 標(biāo)簽 16
實(shí)戰(zhàn)　使用 標(biāo)簽設(shè)置網(wǎng)頁(yè)標(biāo)題 17
2.1.2　基底網(wǎng)址—— 標(biāo)簽 17
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)基底網(wǎng)址 18
2.2　元信息—— 標(biāo)簽 18
2.2.1　設(shè)置網(wǎng)頁(yè)關(guān)鍵字19
2.2.2　設(shè)置網(wǎng)頁(yè)說(shuō)明 19
2.2.3　設(shè)置網(wǎng)頁(yè)作者信息20
2.2.4　設(shè)置網(wǎng)頁(yè)編輯軟件20
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)基礎(chǔ)元信息20
2.2.5　設(shè)置網(wǎng)頁(yè)定時(shí)跳轉(zhuǎn)21
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)定時(shí)跳轉(zhuǎn)22
2.2.6　限制搜索方式22
2.2.7　設(shè)置網(wǎng)頁(yè)文字及語(yǔ)言23
2.2.8　設(shè)置網(wǎng)頁(yè)有效期限23
2.2.9　禁止緩存調(diào)用24
2.2.10　刪除過(guò)期的cookie24
2.2.11　強(qiáng)制打開(kāi)新窗口24
2.3　網(wǎng)頁(yè)主體—— 標(biāo)簽25
2.3.1　網(wǎng)頁(yè)邊距——margin 屬性25
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)整體邊距25
2.3.2　網(wǎng)頁(yè)背景顏色——bgcolor 屬性 26
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)背景顏色27
2.3.3　背景圖像——background 屬性27
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)背景圖像28
2.3.4　文字顏色——text 屬性 28
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)默認(rèn)文字顏色29
2.3.5　鏈接文字顏色——link 屬性 29
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)默認(rèn)鏈接文字顏色 29
2.4　在HTML 代碼中添加注釋30
第3章設(shè)置文本與段落
3.1　設(shè)置文本效果32
3.1.1　文字樣式—— 標(biāo)簽32
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)文字基本樣式33
3.1.2　傾斜文字—— 和 標(biāo)簽 34
實(shí)戰(zhàn)　設(shè)置文字傾斜效果34
3.1.3　加粗文字—— 和標(biāo)簽35
實(shí)戰(zhàn)　設(shè)置網(wǎng)頁(yè)文字加粗效果36
3.1.4　下畫(huà)線—— 標(biāo)簽36
實(shí)戰(zhàn)　為文字添加下畫(huà)線37
3.1.5　刪除線—— 和 標(biāo)簽37
實(shí)戰(zhàn)　為文字添加刪除線37
3.1.6　上標(biāo)與下標(biāo)—— 和標(biāo)簽38
實(shí)戰(zhàn)　設(shè)置上標(biāo)和下標(biāo)文字效果 38
3.1.7　等寬文本—— 和標(biāo)簽39
3.1.8　標(biāo)題文本—— 至 標(biāo)簽 39
實(shí)戰(zhàn)　設(shè)置標(biāo)題文字40
3.2　特殊文字標(biāo)簽40
3.2.1　空格——  40
實(shí)戰(zhàn)　在網(wǎng)頁(yè)文本中添加空格41
3.2.2　其他特殊符號(hào)41
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中添加特殊文本符號(hào) 42
3.2.3　水平線—— 標(biāo)簽42
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中插入并設(shè)置水平線 42
3.3　文本的分行與分段43
3.3.1　文本換行——
標(biāo)簽43
實(shí)戰(zhàn)　為網(wǎng)頁(yè)文本進(jìn)行換行處理 43
3.3.2　強(qiáng)制不換行—— 標(biāo)簽 44
實(shí)戰(zhàn)　強(qiáng)制網(wǎng)頁(yè)文本不換行44
3.3.3　文本分段—— 標(biāo)簽45
實(shí)戰(zhàn)　為網(wǎng)頁(yè)文本進(jìn)行分段處理 45
3.3.4　段落文字對(duì)齊——align 屬性46
實(shí)戰(zhàn)　設(shè)置文字水平對(duì)齊效果46
3.3.5　保留原始排版—— 標(biāo)簽47
實(shí)戰(zhàn)　保留網(wǎng)頁(yè)文本原始排版效果 47
3.4　其他文字標(biāo)簽47
3.4.1　文字標(biāo)注—— 標(biāo)簽47
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中實(shí)現(xiàn)文字標(biāo)注說(shuō)明效果 47
3.4.2　聲明變量—— 標(biāo)簽48
實(shí)戰(zhàn)　使用聲明變量標(biāo)簽48
3.4.3　忽視HTML—— 和標(biāo)簽49
實(shí)戰(zhàn)　使用忽視HTML 標(biāo)簽49
3.5　滾動(dòng)文本—— 標(biāo)簽 50
實(shí)戰(zhàn)　制作網(wǎng)頁(yè)文本滾動(dòng)效果50
第4 章插入并設(shè)置圖像
4.1　了解網(wǎng)頁(yè)中的圖像格式52
4.1.1　網(wǎng)頁(yè)常用的圖像格式52
4.1.2　選擇合適的圖像格式53
4.2　插入圖像—— 標(biāo)簽 53
實(shí)戰(zhàn)　制作圖像頁(yè)面54
4.3　設(shè)置圖像屬性54
4.3.1　圖像寬度和高度——width 和height屬性 55
實(shí)戰(zhàn)　插入圖像并設(shè)置圖像寬度和高度 55
4.3.2　圖像邊框——border 屬性 56
實(shí)戰(zhàn)　為圖像添加邊框57
4.3.3　圖像替代文本——alt 屬性57
實(shí)戰(zhàn)　為圖像添加替代文本和提示文字信息58
4.3.4　圖像相對(duì)于文字的對(duì)齊方式——align屬性 59
實(shí)戰(zhàn)　設(shè)置圖像相對(duì)于文字的對(duì)齊效果 59
4.3.5　圖文混排效果——align 屬性60
實(shí)戰(zhàn)　制作圖文混排頁(yè)面60
4.4　滾動(dòng)圖像—— 標(biāo)簽 62
實(shí)戰(zhàn)　制作滾動(dòng)圖像效果62
第５章創(chuàng)建和設(shè)置列表
5.1　認(rèn)識(shí)列表標(biāo)簽64
5.2　項(xiàng)目列表 64
5.2.1　創(chuàng)建項(xiàng)目列表—— 標(biāo)簽64
實(shí)戰(zhàn)　創(chuàng)建新聞列表65
5.2.2　項(xiàng)目列表符號(hào)——type 屬性66
實(shí)戰(zhàn)　設(shè)置列表符號(hào)效果67
5.3　編號(hào)列表68
5.3.1　創(chuàng)建編號(hào)列表—— 標(biāo)簽68
實(shí)戰(zhàn)　創(chuàng)建排行列表69
5.3.2　編號(hào)列表符號(hào)——type 屬性 69
實(shí)戰(zhàn)　設(shè)置編號(hào)列表符號(hào)70
5.3.3　編號(hào)列表起始值——start 屬性 71
實(shí)戰(zhàn)　設(shè)置編號(hào)列表起始數(shù)值72
5.4　定義列表—— 標(biāo)簽 73
實(shí)戰(zhàn)　制作復(fù)雜新聞列表73
第6 章創(chuàng)建和設(shè)置超鏈接
6.1　超鏈接基礎(chǔ)75
6.1.1　什么是超鏈接75
6.1.2　超鏈接路徑76
6.2　創(chuàng)建超鏈接77
6.2.1　超鏈接—— 標(biāo)簽77
6.2.2　超鏈接提示——alt 屬性77
6.2.3　超鏈接打開(kāi)方式——target 屬性78
實(shí)戰(zhàn)　為文字和圖像設(shè)置超鏈接 78
6.3　創(chuàng)建錨點(diǎn)鏈接79
6.3.1　插入錨點(diǎn) 79
6.3.2　創(chuàng)建錨點(diǎn)鏈接80
實(shí)戰(zhàn)　制作錨點(diǎn)鏈接頁(yè)面81
6.4　創(chuàng)建特殊超鏈接 83
6.4.1　空鏈接 83
6.4.2　文件下載鏈接83
實(shí)戰(zhàn)　創(chuàng)建空鏈接和文件下載鏈接 83
6.4.3　腳本鏈接 84
實(shí)戰(zhàn)　創(chuàng)建關(guān)閉窗口腳本鏈接85
6.4.4　E-mail 鏈接 85
實(shí)戰(zhàn)　創(chuàng)建電子郵件鏈接86
第7 章插入多媒體
7.1　插入Flash 動(dòng)畫(huà)——標(biāo)簽 87
實(shí)戰(zhàn)　制作Flash 歡迎頁(yè) 87
7.2　添加背景音樂(lè)88
7.2.1　網(wǎng)頁(yè)中支持的音頻格式 88
7.2.2　背景音樂(lè)—— 標(biāo)簽89
7.2.3　音樂(lè)循環(huán)播放次數(shù)——loop 屬性 89
實(shí)戰(zhàn)　為網(wǎng)頁(yè)設(shè)置背景音樂(lè) 90
7.2.4　嵌入音頻—— 標(biāo)簽 90
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中嵌入音頻播放控制條 91
7.3　插入普通視頻92
7.3.1　網(wǎng)頁(yè)中支持的視頻格式92
7.3.2　插入視頻—— 標(biāo)簽 92
7.3.3　設(shè)置自動(dòng)播放——autostart 屬性 92
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中插入視頻93
7.3.4　隱藏播放控件——hidden 屬性94
第8 章插入和設(shè)置表單元素
8.1　關(guān)于表單95
8.1.1　插入表單域—— 標(biāo)簽 95
8.1.2　表單動(dòng)作——action 屬性96
8.1.3　表單名稱(chēng)——name 屬性 96
8.1.4　表單傳送方式——method 屬性96
8.1.5　表單編碼方式——enctype 屬性97
8.1.6　目標(biāo)顯示方式——target98
8.2　添加表單元素98
8.3　輸入類(lèi)型表單元素 99
8.3.1　文本域——text 類(lèi)型 99
8.3.2　密碼域——password 類(lèi)型 100
8.3.3　圖像域——image 類(lèi)型 100
實(shí)戰(zhàn)　制作登錄頁(yè)面101
8.3.4　隱藏域——hidden 類(lèi)型104
8.3.5　復(fù)選框——checkbox 類(lèi)型104
實(shí)戰(zhàn)　制作網(wǎng)站調(diào)查表單104
8.3.6　單選按鈕——radio 類(lèi)型 107
實(shí)戰(zhàn)　制作網(wǎng)站投票107
8.3.7　文件域——file 類(lèi)型 109
8.3.8　普通按鈕——button 類(lèi)型 110
8.3.9　提交按鈕——submit 類(lèi)型110
8.3.10　重置按鈕——reset 類(lèi)型 110
8.4　其他類(lèi)型表單元素110
8.4.1　文本區(qū)域—— 標(biāo)簽 111
8.4.2　列表/ 菜單—— 標(biāo)簽 111
實(shí)戰(zhàn)　制作網(wǎng)站搜索 112
8.5　制作用戶(hù)注冊(cè)頁(yè)面 114
實(shí)戰(zhàn)　用戶(hù)注冊(cè)頁(yè)面 114
第9 章表格與Div
9.1　了解表格 119
9.2　創(chuàng)建表格 119
9.2.1　表格—— 標(biāo)簽 119
9.2.2　表格標(biāo)題—— 標(biāo)簽120
9.2.3　表頭—— 標(biāo)簽121
實(shí)戰(zhàn)　創(chuàng)建學(xué)習(xí)安排表122
9.3　表格結(jié)構(gòu)標(biāo)簽123
9.3.1　表格頭部—— 標(biāo)簽 123
9.3.2　表格主體—— 標(biāo)簽 124
9.3.3　表格尾部—— 標(biāo)簽 125
實(shí)戰(zhàn)　制作學(xué)生成績(jī)數(shù)據(jù)表126
9.4　設(shè)置表格屬性127
9.4.1　表格寬度與高度——width 和height屬性 127
9.4.2　表格對(duì)齊方式——align 屬性128
9.4.3　表格邊框粗細(xì)——border 屬性129
9.4.4　表格邊框顏色——bordercolor 屬性130
9.4.5　表格背景顏色——bgcolor 屬性 131
9.4.6　表格背景圖像——background屬性132
實(shí)戰(zhàn)　為表格設(shè)置背景顏色和背景圖像133
9.5　設(shè)置單元行和單元格屬性135
9.5.1　設(shè)置單元行內(nèi)容水平和垂直對(duì)齊135
9.5.2　單元格間距136
9.5.3　單元格邊距137
9.5.4　合并單元格138
實(shí)戰(zhàn)　使用表格制作新聞列表 139
9.6　IFrame 框架141
9.6.1　IFrame 框架源文件 142
9.6.2　IFrame 框架的寬度和高度142
9.6.3　IFrame 框架的對(duì)齊方式142
9.6.4　IFrame 框架是否顯示滾動(dòng)條142
9.6.5　IFrame 框架的邊框 142
實(shí)戰(zhàn)　設(shè)置IFrame 框架屬性142
9.7　插入Div 143
9.7.1　 標(biāo)簽 144
9.7.2　設(shè)置Div 屬性144
9.7.3　 與 標(biāo)簽144
實(shí)戰(zhàn)　制作歡迎頁(yè)面145
第10 章HTML 5 文檔結(jié)構(gòu)
10.1　認(rèn)識(shí)HTML5 文檔結(jié)構(gòu)147
10.2　HTML5 元素分類(lèi)148
10.2.1　結(jié)構(gòu)片段元素149
10.2.2　進(jìn)度信息元素149
10.2.3　交互性元素149
10.2.4　內(nèi)嵌應(yīng)用元素和輔助元素 149
10.2.5　文檔和應(yīng)用中使用的元素 150
10.2.6　注釋元素150
10.2.7　文本和文本標(biāo)記元素 150
10.2.8　其他元素150
10.3　創(chuàng)建HTML5 主體內(nèi)容151
10.3.1　文章—— 標(biāo)簽151
10.3.2　章節(jié)—— 標(biāo)簽 152
10.3.3　導(dǎo)航—— 標(biāo)簽 154
10.3.4　輔助信息—— 標(biāo)簽156
10.3.5　發(fā)布日期—— 標(biāo)簽與微格式157
10.4　添加語(yǔ)義模塊 158
10.4.1　頁(yè)眉—— 標(biāo)簽 158
10.4.2　標(biāo)題組—— 標(biāo)簽 159
10.4.3　頁(yè)腳—— 標(biāo)簽 159
10.4.4　聯(lián)系信息—— 標(biāo)簽 160
10.5　使用文檔結(jié)構(gòu)元素制作頁(yè)面160
實(shí)戰(zhàn)　制作企業(yè)網(wǎng)站首頁(yè)面 161
第11 章使用HTML5 畫(huà)布繪圖
11.1　使用HTML5 畫(huà)布繪圖166
11.1.1　了解canvas 元素166
11.1.2　在網(wǎng)頁(yè)中插入canvas 元素 166
11.1.3　如何使用canvas 元素實(shí)現(xiàn)繪圖 167
11.2　繪制基本圖形169
11.2.1　繪制直線169
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中繪制直線 169
11.2.2　繪制矩形170
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中繪制矩形 171
11.2.3　繪制圓形172
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中繪制圓形 173
11.2.4　繪制三角形174
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中繪制三角形 174
11.2.5　清除圖形175
實(shí)戰(zhàn)　清除使用canvas 元素所繪制的部分圖形 175
11.3　繪制文本176
11.3.1　使用文本176
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中繪制文字 177
11.3.2　獲取文字寬度177
實(shí)戰(zhàn)　獲取所繪制文字寬度 178
11.4　繪制弧線和曲線 178
11.4.1　使用arc( ) 方法179
實(shí)戰(zhàn)　通過(guò)中心點(diǎn)和半徑繪制弧線 .179
11.4.2　使用arcTo( ) 方法 180
實(shí)戰(zhàn)　通過(guò)輔助線繪制弧線 180
11.4.3　使用quadraticCurveTo( ) 方法181
實(shí)戰(zhàn)　繪制二次樣條曲線 182
11.4.4　使用bezierCurveTo( ) 方法 183
實(shí)戰(zhàn)　繪制貝塞爾曲線 183
11.5　圖形的組合與裁切184
11.5.1　圖形組合184
實(shí)戰(zhàn)　繪制組合圖形效果 185
11.5.2　使用圖像186
實(shí)戰(zhàn)　使用canvas 元素繪制圖像187
11.5.3　使用圖像模式188
實(shí)戰(zhàn)　設(shè)置圖像平鋪效果 188
11.5.4　裁切路徑189
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中實(shí)現(xiàn)圓形裁切圖像效果189
11.6　圖形變換處理191
11.6.1　移動(dòng)變換操作191
實(shí)戰(zhàn)　移動(dòng)所繪制圖形位置 191
11.6.2　縮放變換操作193
實(shí)戰(zhàn)　使用縮放操作繪制橢圓形193
11.6.3　旋轉(zhuǎn)變換操作194
實(shí)戰(zhàn)　繪制矩形并進(jìn)行旋轉(zhuǎn) 195
11.6.4　矩陣變形操作196
11.7　圖形顏色與樣式設(shè)置196
11.7.1　繪制線性漸變196
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中繪制矩形并填充線性漸變197
11.7.2　繪制徑向漸變198
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中繪制圓形并填充徑向漸變 198
11.7.3　不同的線型199
11.7.4　創(chuàng)建對(duì)象陰影201
實(shí)戰(zhàn)　為圖形添加陰影效果 201
第12 章HTML5 的音頻和視頻
12.1　HTML5 多媒體基礎(chǔ)203
12.1.1　視頻文件格式203
12.1.2　在線多媒體的發(fā)展203
12.1.3　HTML5 音頻和視頻的優(yōu)勢(shì) 204
12.1.4　音頻和視頻編解碼器 204
12.1.5　HTML5 音頻和視頻的不足205
12.1.6　檢查瀏覽器是否支持HTML5 音頻和視頻205
12.2　使用HTML5 音頻206
12.2.1　 標(biāo)簽所支持的音頻格式206
12.2.2　使用 標(biāo)簽206
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中嵌入音頻播放 206
12.3　使用HTML5 視頻207
12.3.1　 標(biāo)簽所支持的視頻格式207
12.3.2　使用 標(biāo)簽207
實(shí)戰(zhàn)　在網(wǎng)頁(yè)中嵌入視頻播放 208
12.3.3　使用 標(biāo)簽209
12.4　 與 標(biāo)簽的屬性209
12.4.1　元素的標(biāo)簽屬性209
12.4.2　元素的接口屬性210
實(shí)戰(zhàn)　為網(wǎng)頁(yè)文本進(jìn)行分段處理211
12.5　 與 標(biāo)簽的接口方法和事件212
12.5.1　 與 標(biāo)簽的接口方法 212
實(shí)戰(zhàn)　控制視頻的播放和暫停 212
12.5.2　 與 標(biāo)簽的接口事件 214
12.5.3　 與 標(biāo)簽接口事件的使用方法.214
12.5.4　自定義視頻播放控制組件 214
實(shí)戰(zhàn)　自定義視頻播放控制組件215
第13 章使用HTML5 的表單元素
13.1　了解HTML5 表單219
13.1.1　HTML 表單的發(fā)展 219
13.1.2　HTML5 新增表單元素的作用 219
13.1.3　瀏覽器對(duì)HTML5 表單的支持情況 220
13.2　HTML5 新增表單輸入類(lèi)型 220
13.2.1　url 類(lèi)型 220
13.2.2　email 類(lèi)型 220
13.2.3　range 類(lèi)型 220
13.2.4　number 類(lèi)型 221
13.2.5　tel 類(lèi)型 221
13.2.6　search 類(lèi)型221
13.2.7　color 類(lèi)型221
13.2.8　date 類(lèi)型 221
13.2.9　month、week、time、datetime、datetime-local 類(lèi)型222
13.2.10　使用HTML5 表單元素222
實(shí)戰(zhàn)　制作留言表單頁(yè)面 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
實(shí)戰(zhàn)　為表單元素設(shè)置默認(rèn)提示內(nèi)容 228
13.4.5　autofocus 屬性 229
13.4.6　autocomplete 屬性229
13.5　HTML5 表單驗(yàn)證標(biāo)簽屬性 229
13.5.1　required 屬性 230
13.5.2　pattern 屬性230
13.5.3　min、max 和step 屬性 230
13.5.4　novalidate 屬性230
實(shí)戰(zhàn)　對(duì)網(wǎng)頁(yè)表單進(jìn)行驗(yàn)證 230
13.6　HTML5 表單驗(yàn)證API 231
13.6.1　表單驗(yàn)證的屬性231
13.6.2　ValidityState 對(duì)象232
13.6.3　checkValidity( ) 方法驗(yàn)證表單 233
實(shí)戰(zhàn)　使用checkValidity( ) 方法驗(yàn)證表單233
13.6.4　setCustomValidity( ) 方法驗(yàn)證表單234
實(shí)戰(zhàn)　使用setCustomValidity( ) 方法驗(yàn)證表單 234
13.6.5　表單驗(yàn)證事件236
實(shí)戰(zhàn)　使用invalid 事件驗(yàn)證表單236
第14 章文件與拖放處理
14.1　文件API 238
14.1.1　新增的上傳表單元素屬性 238
14.1.2　File 對(duì)象與FileList 對(duì)象 239
實(shí)戰(zhàn)　同時(shí)上傳多個(gè)文件并顯示文件名稱(chēng)239
14.1.3　Blob 對(duì)象240
實(shí)戰(zhàn)　獲取所上傳文件數(shù)據(jù) 240
14.2　FileReader 接口 242
14.2.1　檢查瀏覽器是否支持FileReader接口 242
14.2.2　FileReader 接口的屬性 242
14.2.3　FileReader 接口的方法 243
實(shí)戰(zhàn)　使用FileReader 接口方法將上傳的文件讀取為不同數(shù)據(jù) 243
14.2.4　FileReader 接口的事件 245
實(shí)戰(zhàn)　FileReader 接口的事件響應(yīng)順序245
14.3　拖放API 247
14.3.1　新增的draggable 屬性247
14.3.2　新增的鼠標(biāo)拖放事件 247
14.3.3　DataTransfer 對(duì)象247
14.3.4　把圖像拖放到網(wǎng)頁(yè)中248
實(shí)戰(zhàn)　把圖像拖放到網(wǎng)頁(yè)中 248
第15 章HTML5 本地存儲(chǔ)
15.1　Web Storage 251
15.1.1　什么是Web Storage251
15.1.2　Cookie 存儲(chǔ)數(shù)據(jù)的不足 251
15.1.3　使用Web Storage 存儲(chǔ)的優(yōu)勢(shì)252
15.1.4　會(huì)話存儲(chǔ)與本地存儲(chǔ)的區(qū)別252
15.2　使用Web Storage252
15.2.1　檢查瀏覽器是否支持Web Storage252
實(shí)戰(zhàn)　檢查瀏覽器是否支持Web Storage 253
15.2.2　設(shè)置和獲取Storage 數(shù)據(jù)254
實(shí)戰(zhàn)　使用sessionStorage 和localStorage254
15.2.3　Storage API 的屬性和方法255
實(shí)戰(zhàn)　使用storage 對(duì)象保存頁(yè)面內(nèi)容256
15.2.4　格式化數(shù)據(jù)257
實(shí)戰(zhàn)　使用Storage 對(duì)象存儲(chǔ)JOSN 數(shù)據(jù) 257
15.2.5　Storage API 事件259
實(shí)戰(zhàn)　使用Web Storage 制作簡(jiǎn)單留言板260
15.3　本地?cái)?shù)據(jù)庫(kù)Web SQL261
15.3.1　了解Web SQL 數(shù)據(jù)庫(kù)262
15.3.2　Web SQL 數(shù)據(jù)庫(kù)的基本操作 262
15.3.3　使用Web SQL 數(shù)據(jù)庫(kù)263
實(shí)戰(zhàn)　實(shí)現(xiàn)選擇網(wǎng)頁(yè)背景顏色263
第16 章HTML5 離線應(yīng)用緩存
16.1　Web 離線應(yīng)用緩存 268
16.1.1　新增的離線應(yīng)用緩存 268
16.1.2　離線應(yīng)用緩存與傳統(tǒng)頁(yè)面緩存的區(qū)別269
16.1.3　離線應(yīng)用緩存與本地?cái)?shù)據(jù)存儲(chǔ)的區(qū)別269
16.2　manifest 緩存清單文件269
16.2.1　manifest 文件的結(jié)構(gòu) 269
16.2.2　如何使用manifest 文件 270
16.2.3　服務(wù)器端的配置270
16.2.4　檢查瀏覽器網(wǎng)絡(luò)狀態(tài) 271
實(shí)戰(zhàn)　檢查瀏覽器的網(wǎng)絡(luò)狀態(tài)271
16.3　應(yīng)用緩存接口applicationCache 273
16.3.1　檢查瀏覽器是否支持應(yīng)用緩存接口273
實(shí)戰(zhàn)　檢查瀏覽器是否支持Web 離線應(yīng)用 273
16.3.2　applicationCache 接口274
16.3.3　接口的status 屬性274
16.3.4　接口的方法275
16.3.5　接口的事件275
實(shí)戰(zhàn)　離線應(yīng)用緩存的事件發(fā)生順序 275
16.4　離線緩存網(wǎng)頁(yè)內(nèi)容277
實(shí)戰(zhàn)　離線緩存網(wǎng)頁(yè)內(nèi)容 277
第17 章使用Web Workers 處理線程
17.1　了解Web Workers281
17.1.1　什么是Web Workers281
17.1.2　Web Workers 線程的特點(diǎn)281
17.1.3　Web Workers 體系結(jié)構(gòu) 282
17.2　專(zhuān)屬線程Dedicated Worker 282
17.2.1　檢查瀏覽器是否支持Worker對(duì)象282
17.2.2　創(chuàng)建專(zhuān)屬線程282
17.2.3　為線程添加監(jiān)聽(tīng)消息事件 282
17.2.4　向線程中發(fā)送消息283
17.2.5　編寫(xiě)線程處理的腳本文件 283
17.2.6　在線程中加載多個(gè)文件283
17.2.7　監(jiān)聽(tīng)線程錯(cuò)誤283
實(shí)戰(zhàn)　簡(jiǎn)單的專(zhuān)屬線程應(yīng)用 284
17.2.8　多線程嵌套285
17.2.9　單層線程嵌套286
實(shí)戰(zhàn)　線程嵌套輸出質(zhì)數(shù) 286
17.2.10　多層線程嵌套 287
17.3　共享線程Shared Worker288
17.3.1　共享線程的基本用法 288
17.3.2　使用共享線程289
實(shí)戰(zhàn)　使用共享線程顯示連接數(shù) 289
17.4　Web Workers 接口框架291
17.4.1　線程外部接口291
17.4.2　線程內(nèi)部接口293
第18 章跨源通信和WebSocket雙向通信
18.1　了解跨文檔信息傳輸 296
18.1.1　跨文檔信息傳輸?shù)膶?shí)現(xiàn)296
18.1.2　網(wǎng)頁(yè)源安全297
18.2　使用postMessage 接口297
18.2.1　檢查瀏覽器是否支持postMessage接口298
18.2.2　使用postMessage( ) 方法發(fā)送信息298
18.2.3　使用message 事件監(jiān)聽(tīng)收到的信息298
實(shí)戰(zhàn)　實(shí)現(xiàn)簡(jiǎn)單的跨文檔信息傳輸 299
18.3　信息事件接口MessageEvent 301
18.3.1　MessageEvent 接口清單 301
18.3.2　MessageEvent 接口屬性 301
18.3.3　initMessageEvent( ) 接口方法302
18.3.4　MessageEvent( ) 接口說(shuō)明302
18.4　了解XMLHttpRequestLevel2 規(guī)范 302
18.4.1　XMLHttpRequestLevel2 規(guī)范的優(yōu)勢(shì) 302
18.4.2　XMLHttpRequestLevel2 規(guī)范的接口303
18.4.3　XMLHttpRequestLevel2 規(guī)范中新的響應(yīng)事件304
18.4.4　檢查瀏覽器是否支持全新的XMLHttpRequest 對(duì)象304
18.4.5　構(gòu)建跨源請(qǐng)求304
18.4.6　添加監(jiān)聽(tīng)事件304
18.4.7　部署服務(wù)器305
18.5　了解WebSocket 305
18.5.1　WebSocket 概述 305
18.5.2　WebSocket 的優(yōu)勢(shì) 306
18.5.3　WebSocket 編程接口306
18.6　了解WebSocket 編程基礎(chǔ) 308
18.6.1　檢查瀏覽器是否支持WebSocket 308
18.6.2　創(chuàng)建連接308
18.6.3　添加狀態(tài)和消息監(jiān)聽(tīng)事件 309
18.6.4　發(fā)送信息309
18.6.5　關(guān)閉連接309
第19 章使用HTML5 獲取地理位置
19.1　Geolocation API 310
19.1.1　地理位置坐標(biāo)信息310
19.1.2　地理位置信息的來(lái)源 310
19.1.3　地理位置信息的應(yīng)用 311
19.1.4　Geolocation API 中的隱私保護(hù) 311
19.2　使用Geolocation 前的準(zhǔn)備 312
19.2.1　Geolocation 的瀏覽器支持情況312
19.2.2　檢查瀏覽器是否支持Geolocation API312
實(shí)戰(zhàn)　檢查瀏覽器是否支持GeolocationAPI312
19.3　使用GeolocationAPI 獲取地理位置313
19.3.1　getCurrentPosition( ) 方法313
19.3.2　回調(diào)函數(shù)successCallback( )314
19.3.3　回調(diào)函數(shù)errorCallback( ) 314
19.3.4　可選參數(shù)options 315
19.3.5　單次獲取地理位置信息315
實(shí)戰(zhàn)　單次獲取地理位置信息 316
19.3.6　重復(fù)更新地理位置信息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
實(shí)戰(zhàn)　在地圖上顯示位置 322
第20 章HTML5 網(wǎng)頁(yè)綜合實(shí)戰(zhàn)
20.1　制作電子商務(wù)網(wǎng)站頁(yè)面 327
20.1.1　設(shè)計(jì)分析327
20.1.2　布局結(jié)構(gòu)分析327
20.1.3　制作HTML5 頁(yè)面328
實(shí)戰(zhàn)　制作頁(yè)眉header 和導(dǎo)航nav 區(qū)域 328
實(shí)戰(zhàn)　制作網(wǎng)頁(yè)廣告區(qū)域 330
實(shí)戰(zhàn)　制作網(wǎng)頁(yè)側(cè)邊欄區(qū)域 332
實(shí)戰(zhàn)　制作網(wǎng)頁(yè)主體內(nèi)容區(qū)域 334
實(shí)戰(zhàn)　制作網(wǎng)頁(yè)版底footer 區(qū)域338
20.2　制作企業(yè)網(wǎng)站頁(yè)面340
20.2.1　設(shè)計(jì)分析340
20.2.2　布局結(jié)構(gòu)分析340
20.2.3　制作HTML5 頁(yè)面341
實(shí)戰(zhàn)　制作頁(yè)面頭部header 區(qū)域341
實(shí)戰(zhàn)　制作網(wǎng)頁(yè)焦點(diǎn)輪換廣告圖344
實(shí)戰(zhàn)　制作頁(yè)面主體內(nèi)容區(qū)域 346
實(shí)戰(zhàn)　制作頁(yè)腳部分內(nèi)容 348
HTML5 手機(jī)網(wǎng)頁(yè)實(shí)戰(zhàn)
21.1　如何制作響應(yīng)式網(wǎng)站頁(yè)面351
21.1.1　什么是響應(yīng)式設(shè)計(jì)351
21.1.2　響應(yīng)式設(shè)計(jì)的相關(guān)術(shù)語(yǔ)352
21.1.3　 標(biāo)簽設(shè)置353
21.2　制作響應(yīng)式攝影圖片網(wǎng)頁(yè)354
21.2.1　設(shè)計(jì)分析354
21.2.2　布局結(jié)構(gòu)分析354
21.2.3　制作HTML5 響應(yīng)式網(wǎng)頁(yè)355
實(shí)戰(zhàn)　制作頁(yè)面導(dǎo)航區(qū)域 355
實(shí)戰(zhàn)　制作頁(yè)面主體內(nèi)容區(qū)域 360
第21 章實(shí)戰(zhàn)　制作頁(yè)面版底信息區(qū)域 365顯示全部信息前　　言隨著互聯(lián)網(wǎng)信息技術(shù)的發(fā)展，特別是移動(dòng)互聯(lián)網(wǎng)的迅速崛起，原來(lái)的網(wǎng)頁(yè)描述語(yǔ)言HTML 已經(jīng)不能滿(mǎn)足日益豐富的網(wǎng)頁(yè)設(shè)計(jì)制作需要。HTML5是下一代HTML 的標(biāo)準(zhǔn)，與HTML4 相比，HTML5的發(fā)展有著革命性的進(jìn)步。在HTML5 中，不但新增了許多全新的實(shí)用功能，而且對(duì)涉及的每一個(gè)細(xì)節(jié)都做出了明確的規(guī)定。HTML5以其簡(jiǎn)潔、高效的特點(diǎn)，在網(wǎng)頁(yè)中的應(yīng)用越來(lái)越廣泛。
《HTML 5網(wǎng)頁(yè)設(shè)計(jì)與制作全程揭秘》全面系統(tǒng)地向讀者介紹HTML5 中的各個(gè)知識(shí)點(diǎn)，每個(gè)重要的知識(shí)點(diǎn)都配合實(shí)戰(zhàn)練習(xí)進(jìn)行講解，將知識(shí)點(diǎn)與實(shí)戰(zhàn)練習(xí)緊密結(jié)合，避免枯燥無(wú)味的基礎(chǔ)知識(shí)講解，使讀者能夠更加輕松地掌握和應(yīng)用的HTML5 網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)，提高學(xué)習(xí)效率，并能夠?qū)W以致用。全書(shū)共分21 章，各章內(nèi)容介紹如下。
第1 章　從HTML 到HTML5，介紹HTML、XHTML 和HTML5 的相關(guān)基礎(chǔ)知識(shí)，使讀者能夠清晰地了解HTML 的發(fā)展，以及HTML、XHTML 和HTML5 之間的聯(lián)系和區(qū)別，認(rèn)識(shí)到HTML5 的優(yōu)勢(shì)。
第2 章　HTML5頁(yè)面基本設(shè)置，介紹如何在HTML 中對(duì)網(wǎng)頁(yè)頭部 head 標(biāo)簽和網(wǎng)頁(yè)主體 body 標(biāo)簽進(jìn)行設(shè)置，從而達(dá)到控制網(wǎng)頁(yè)整體屬性的目的。隨著互聯(lián)網(wǎng)信息技術(shù)的發(fā)展，特別是移動(dòng)互聯(lián)網(wǎng)的迅速崛起，原來(lái)的網(wǎng)頁(yè)描述語(yǔ)言HTML 已經(jīng)不能滿(mǎn)足日益豐富的網(wǎng)頁(yè)設(shè)計(jì)制作需要。HTML5是下一代HTML 的標(biāo)準(zhǔn)，與HTML4 相比，HTML5的發(fā)展有著革命性的進(jìn)步。在HTML5 中，不但新增了許多全新的實(shí)用功能，而且對(duì)涉及的每一個(gè)細(xì)節(jié)都做出了明確的規(guī)定。HTML5以其簡(jiǎn)潔、高效的特點(diǎn)，在網(wǎng)頁(yè)中的應(yīng)用越來(lái)越廣泛。
《HTML 5網(wǎng)頁(yè)設(shè)計(jì)與制作全程揭秘》全面系統(tǒng)地向讀者介紹HTML5 中的各個(gè)知識(shí)點(diǎn)，每個(gè)重要的知識(shí)點(diǎn)都配合實(shí)戰(zhàn)練習(xí)進(jìn)行講解，將知識(shí)點(diǎn)與實(shí)戰(zhàn)練習(xí)緊密結(jié)合，避免枯燥無(wú)味的基礎(chǔ)知識(shí)講解，使讀者能夠更加輕松地掌握和應(yīng)用的HTML5 網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)，提高學(xué)習(xí)效率，并能夠?qū)W以致用。全書(shū)共分21 章，各章內(nèi)容介紹如下。
第1 章　從HTML 到HTML5，介紹HTML、XHTML 和HTML5 的相關(guān)基礎(chǔ)知識(shí)，使讀者能夠清晰地了解HTML 的發(fā)展，以及HTML、XHTML 和HTML5 之間的聯(lián)系和區(qū)別，認(rèn)識(shí)到HTML5 的優(yōu)勢(shì)。
第2 章　HTML5頁(yè)面基本設(shè)置，介紹如何在HTML 中對(duì)網(wǎng)頁(yè)頭部 標(biāo)簽和網(wǎng)頁(yè)主體 標(biāo)簽進(jìn)行設(shè)置，從而達(dá)到控制網(wǎng)頁(yè)整體屬性的目的。
第3 章　設(shè)置文本與段落，文本是網(wǎng)頁(yè)中重要的基本元素之一。本章詳細(xì)介紹HTML5 中對(duì)文本和段落進(jìn)行設(shè)置的相關(guān)標(biāo)簽和屬性設(shè)置方法，使讀者能夠輕松地對(duì)網(wǎng)頁(yè)中的文本和段落進(jìn)行處理。
第4 章　插入并設(shè)置圖像，介紹在HTML5 頁(yè)面中插入圖像的方法，以及在圖像標(biāo)簽中添加各種屬性對(duì)圖像進(jìn)行設(shè)置的方法。
第5 章　創(chuàng)建和設(shè)置列表，介紹在HTML5 中創(chuàng)建項(xiàng)目列表、編號(hào)列表和定義列表的方法，以及對(duì)各種列表進(jìn)行設(shè)置的相關(guān)屬性。
第6 章　創(chuàng)建和設(shè)置超鏈接，超鏈接是互聯(lián)網(wǎng)的基礎(chǔ)。本章詳細(xì)介紹網(wǎng)頁(yè)超鏈接的創(chuàng)建和設(shè)置方法，以及各種特殊鏈接的創(chuàng)建方法，并且還介紹了鏈接路徑的相關(guān)知識(shí)。
第7 章　插入多媒體，介紹如何在HTML5 頁(yè)面中應(yīng)用各種不同類(lèi)型的多媒體元素，包括Flash 動(dòng)畫(huà)、背景音樂(lè)和普通視頻文件等。
第8 章　插入和設(shè)置表單元素，表單是網(wǎng)頁(yè)交互的重要途徑。本章主要介紹在HTML5 頁(yè)面中插入各種不同類(lèi)型的表單元素，以及對(duì)表單元素屬性進(jìn)行設(shè)置的方法和技巧。
第9 章　表格與Div，主要介紹在HTML5 頁(yè)面中創(chuàng)建表格以及對(duì)表格和單元格屬性進(jìn)行設(shè)置的方法和技巧，還介紹了在HTML5 頁(yè)面中插入IFrame 框架和應(yīng)用Div 的方法。
第10 章　HTML5文檔結(jié)構(gòu)，主要介紹HTML5 中新增的文檔結(jié)構(gòu)標(biāo)簽的作用和使用方法，以及如何通過(guò)使用HTML5 文檔結(jié)構(gòu)標(biāo)簽創(chuàng)建規(guī)范的HTML5 文檔。
第11 章　使用HTML5 畫(huà)布繪圖，canvas 元素是HTML5 的亮點(diǎn)之一，通過(guò)使用canvas 元素可以在網(wǎng)頁(yè)中繪制出各種幾何圖形。本章詳細(xì)介紹使用HTML5 中的canvas 元素在網(wǎng)頁(yè)中繪制圖形、文字、漸變的方法。
第12 章　HTML5的音頻和視頻，多媒體的應(yīng)用也是HTML5 的一大亮點(diǎn)。本章詳細(xì)介紹HTML5 中Video 與Audio 元素的使用方法和屬性設(shè)置技巧。
第13 章　使用HTML5 的表單元素，在HTML5 中新增了許多表單屬性和表單元素，通過(guò)這些新增的表單屬性可以方便地對(duì)表單元素的有效性進(jìn)行驗(yàn)證，新的表單元素則能夠方便用戶(hù)創(chuàng)建出更加友好的表單應(yīng)用。
第14 章　文件與拖放處理，本章詳細(xì)介紹HTML5 中新增的文件API 和拖放API 功能，通過(guò)文件API 功能可以同時(shí)上傳多個(gè)文件，通過(guò)拖放API 功能可以實(shí)現(xiàn)網(wǎng)頁(yè)元素拖放處理。
第15 章　HTML5本地存儲(chǔ)，介紹HTML5 中的兩種本地存儲(chǔ)方式，分別是Web Storage 和Web SQL 數(shù)據(jù)庫(kù)，通過(guò)使用HTML5 的本地存儲(chǔ)功能，可以更輕松地開(kāi)發(fā)Web 應(yīng)用程序。
第16 章　HTML5離線應(yīng)用緩存，介紹HTML5 中新增的離線應(yīng)用緩存功能，包括緩存清單文件的編寫(xiě)方式、離線應(yīng)用緩存的應(yīng)用等內(nèi)容。
第17 章　使用Web Workers 處理線程，介紹Web Workers 的相關(guān)知識(shí)，重點(diǎn)講解專(zhuān)屬線程和共享線程的作用、創(chuàng)建和使用方法等內(nèi)容。
第18 章　跨源通信和WebSocket 雙向通信，介紹HTML5 中新增的跨源通信和WebSocket 雙向通信的相關(guān)知識(shí)，實(shí)現(xiàn)簡(jiǎn)單的跨文檔信息傳輸，對(duì)跨源通信和WebSocket 有全新的認(rèn)識(shí)和了解。
第19 章　使用HTML5 獲取地理位置，介紹獲取地理位置信息的原理，以及使用HTML5 中新增的Geolocation API 實(shí)現(xiàn)獲取用戶(hù)地理位置信息的方法。
第20 章　HTML5網(wǎng)頁(yè)綜合實(shí)戰(zhàn)，通過(guò)兩個(gè)網(wǎng)站頁(yè)面案例的制作講解，使讀者能夠更加輕松地掌握使用HTML5 中的各種標(biāo)簽制作符合HTML5 標(biāo)準(zhǔn)的網(wǎng)站頁(yè)面的方法和技巧。
第21 章　HTML5手機(jī)網(wǎng)頁(yè)實(shí)戰(zhàn)，介紹響應(yīng)式網(wǎng)頁(yè)的制作方法和注意事項(xiàng)，并通過(guò)響應(yīng)式網(wǎng)頁(yè)實(shí)例的制作講解，使讀者能夠輕松地掌握制作HTML5 手機(jī)網(wǎng)頁(yè)的方法。 
《HTML 5網(wǎng)頁(yè)設(shè)計(jì)與制作全程揭秘》由賈勇編著，另外張曉景、李曉斌、高鵬、胡敏敏、張國(guó)勇、林秋、胡衛(wèi)東、姜玉聲、周曉麗、郭慧等人也參與了部分編寫(xiě)工作。《HTML 5網(wǎng)頁(yè)設(shè)計(jì)與制作全程揭秘》在寫(xiě)作過(guò)程中力求嚴(yán)謹(jǐn)，由于作者水平所限，書(shū)中難免有疏漏和不足之處，希望廣大讀者批評(píng)、指正，歡迎與我們溝通和交流。QQ 群名稱(chēng)：網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā)交流群；QQ 群號(hào)：705894157。
為了方便讀者學(xué)習(xí)，《HTML 5網(wǎng)頁(yè)設(shè)計(jì)與制作全程揭秘》為每個(gè)實(shí)例提供了教學(xué)視頻，只要掃描一下書(shū)中實(shí)例名稱(chēng)旁邊的二維碼，即可直接打開(kāi)視頻進(jìn)行觀看，或者推送到自己的郵箱中下載后進(jìn)行觀看?！禜TML 5網(wǎng)頁(yè)設(shè)計(jì)與制作全程揭秘》配套的立體化學(xué)習(xí)資源中提供了書(shū)中所有實(shí)例的素材源文件、終文件、教學(xué)視頻和PPT 課件，并附贈(zèng)海量實(shí)用資源。讀者在學(xué)習(xí)時(shí)可掃描下面的二維碼，然后將內(nèi)容推送到自己的郵箱中，即可下載獲取相應(yīng)的資源( 注意：請(qǐng)將這兩個(gè)二維碼下的壓縮文件全部下載完畢后，再進(jìn)行解壓，即可得到完整的文件內(nèi)容)。 編　者顯示全部信息