目 錄

第1章 HTML5概述 1
1．1 HTML5簡介 1
1．1．1 HTML發(fā)展歷程 1
1．1．2 HTML開發(fā)組織 2
1．1．3 HTML5的新特性 2
1．2 HTML的標(biāo)簽構(gòu)成 3
1．2．1 HTML標(biāo)簽概述 3
1．2．2 開始標(biāo)簽 4
1．2．3 頭部標(biāo)簽 4
1．2．4 標(biāo)題標(biāo)簽
1．2．5 主體標(biāo)簽 5
1．2．6 編寫時(shí)注意事項(xiàng) 5
1．3 HTML文件的編寫方法 6
1．3．1 手工編寫頁面 6
1．3．2 使用可視化軟件制作頁面 7
1．3．3 使用瀏覽器瀏覽HTML文件 10
1．4 綜合實(shí)例——在瀏覽器中輸出“你好” 11
知識點(diǎn)提煉 11
習(xí)題 11

第2章 HTML5的元素與屬性 12
2．1 HTML5的語法變化 12
2．1．1 HTML5中的標(biāo)記方法 12
2．1．2 HTML5與之前版本的不同 13
2．2 新增的元素和廢除的元素 14
2．2．1 新增的結(jié)構(gòu)元素 14
2．2．2 新增的行內(nèi)(inline)語義元素 15
2．2．3 新增的塊級(block)語義元素 15
2．2．4 新增的input元素的類型 16
2．2．5 新增的多媒體元素與交互性元素 16
2．2．6 廢除的元素 17
2．3 新增的屬性和廢除的屬性 18
2．3．1 新增的屬性 18
2．3．2 廢除的屬性 20
2．4 全局屬性 22
2．4．1 designMode屬性 22
2．4．2 hidden屬性 22
2．4．3 contentEditable屬性 22
2．4．4 tabindex屬性 23
2．4．5 spellcheck屬性 23
2．5 綜合實(shí)例——檢查單詞的拼寫情況 24
知識點(diǎn)提煉 24
習(xí)題 24

第3章 HTML5表單 25
3．1 表單概述 25
3．2 表單的基本元素 26
3．2．1 表單標(biāo)記及其屬性 26
3．2．2 表單基本元素 29
3．3 表單新增元素 40
3．3．1 新增表單元素與屬性 40
3．3．2 驗(yàn)證表單 46
3．3．3 新增和改良的頁面元素 48
3．4 綜合實(shí)例——search搜索類型的input元素 55
知識點(diǎn)提煉 56
習(xí)題 56

第4章 文件與拖放 58
4．1 選擇文件 58
4．1．1 FileList對象與file對象 58
4．1．2 Blob對象的屬性 59
4．1．3 通過類型過濾文件 60
4．2 使用FileReader對象讀取文件 62
4．2．1 檢測瀏覽器對FileReader對象的支持 62
4．2．2 FileReader對象的方法 62
4．2．3 實(shí)現(xiàn)圖片的預(yù)覽 62
4．2．4 文本文件的讀取 64
4．2．5 FileReader對象中的事件 65
4．3 拖放API的使用 66
4．3．1 實(shí)現(xiàn)拖放的步驟 66
4．3．2 拖放實(shí)例 67
4．4 dataTransfer對象 69
4．4．1 設(shè)置拖放效果 69
4．4．2 設(shè)置拖放圖標(biāo) 70
4．5 綜合實(shí)例——使用拖放API將商品拖入購物車 71
知識點(diǎn)提煉 73
習(xí)題 73

第5章 繪制圖形 74
5．1 canvas基礎(chǔ) 74
5．1．1 canvas元素簡介 74
5．1．2 插入canvas元素 74
5．1．3 繪制矩形實(shí)例 76
5．2 使用路徑繪制圓形 77
5．2．1 繪制圓形 77
5．2．2 繪制火柴人 78
5．2．3 繪制貝塞爾曲線 80
5．3 運(yùn)用樣式與顏色 82
5．3．1 fillStyle 和 strokeStyle屬性 82
5．3．2 globalAlpha屬性 84
5．3．3 線型Line styles 85
5．4 實(shí)現(xiàn)圖形的變形 87
5．4．1 坐標(biāo)的變換 87
5．4．2 矩陣變換 88
5．5 繪制漸變圖形 91
5．5．1 繪制線性漸變 91
5．5．2 繪制徑向漸變 92
5．6 繪制陰影和組合圖形 93
5．6．1 繪制陰影 93
5．6．2 繪制組合圖形 94
5．7 繪制文字 96
5．8 應(yīng)用圖像 97
5．8．1 繪制圖像 97
5．8．2 圖像的局部放大 99
5．8．3 圖像平鋪 100
5．8．4 圖像裁剪 102
5．8．5 處理像素 102
5．9 保存與恢復(fù)狀態(tài) 103
5．10 文件的保存 104
5．11 使用畫布繪制動(dòng)畫 104
5．12 綜合實(shí)例——繪制桌面時(shí)鐘 105
知識點(diǎn)提煉 108
習(xí)題 108

第6章 HTML5中的多媒體 109
6．1 HTML5頁面中的多媒體 109
6．2 多媒體元素的屬性 110
6．3 多媒體元素的方法 114
6．3．1 媒體播放時(shí)的方法 114
6．3．2 canPlayType方法 115
6．4 多媒體元素的事件 116
6．4．1 事件處理 116
6．4．2 事件介紹 116
6．5 綜合實(shí)例——用timeupdate事件動(dòng)態(tài)顯示媒體文件播放時(shí)間 117
知識點(diǎn)提煉 119
習(xí)題 119

第7章 HTML5的數(shù)據(jù)存儲(chǔ) 120
7．1 Web Storage 120
7．1．1 Web Storage簡介 120
7．1．2 WebStorage的API 121
7．1．3 兩種不同存儲(chǔ)類型的實(shí)例——計(jì)數(shù)器 122
7．1．4 JSON對象的存儲(chǔ)實(shí)例——用戶信息卡 124
7．2 Web SQL數(shù)據(jù)庫 126
7．2．1 Web SQL數(shù)據(jù)庫簡介 126
7．2．2 Web SQL Database API的使用 126
7．3 跨文檔消息通信 128
7．3．1 postMessageAPI的使用 128
7．3．2 跨文檔消息傳輸 128
7．4 綜合實(shí)例——簡單的Web留言本 130
知識點(diǎn)提煉 132
習(xí)題 132

第8章 離線Web應(yīng)用和地理定位 133
8．1 HTML5離線Web應(yīng)用 133
8．1．1 HTML5離線Web應(yīng)用概述 133
8．1．2 創(chuàng)建HTML5離線應(yīng)用 135
8．1．3 瀏覽器與服務(wù)器的交互 137
8．1．4 applicationCache對象 138
8．2 獲取地理位置 142
8．2．1 Geolocation API概述 142
8．2．2 position對象 144
8．3 綜合實(shí)例——在頁面上使用google地圖 146
知識點(diǎn)提煉 147
習(xí)題 148

第9章 CSS3基礎(chǔ) 149
9．1 CSS3概述 149
9．2 CSS3新特性 150
9．3 CSS3選擇器 151
9．3．1 選擇器概述 151
9．3．2 屬性選擇器 152
9．3．3 結(jié)構(gòu)性偽類選擇器 154
9．3．4 UI元素狀態(tài)偽類選擇器 161
9．3．5 通用兄弟元素選擇器 166
9．4 綜合實(shí)例——生動(dòng)的列表導(dǎo)航 167
知識點(diǎn)提煉 170
習(xí)題 171

第10章 CSS字體與文本相關(guān)屬性 172
10．1 給文字添加陰影——text-shadow屬性 172
10．1．1 text-shadow屬性的使用方法 172
10．1．2 指定多個(gè)陰影 174
10．2 文本相關(guān)屬性 174
10．2．1 文本自動(dòng)換行：word-break 174
10．2．2 長單詞和URL地址換行 175
10．3 CSS 3新增的服務(wù)器字體 176
10．3．1 使用服務(wù)器字體 176
10．3．2 定義粗體、斜體字 177
10．3．3 優(yōu)先使用客戶端字體 179
10．4 使用font-size-adjust屬性微調(diào)字體大小 180
10．4．1 字體不同導(dǎo)致文字大小的不同 180
10．4．2 font-size-adjust屬性的使用方法 181
10．4．3 font-size-adjust屬性的使用示例 181
10．5 綜合實(shí)例——設(shè)計(jì)立體文本 182
知識點(diǎn)提煉 183
習(xí)題 183

第11章 CSS3美化背景與邊框 184
11．1 設(shè)置背景 184
11．1．1 設(shè)置背景顏色 184
11．1．2 設(shè)置背景圖片 186
11．1．3 CSS 3新增的與背景相關(guān)的屬性 189
11．2 邊框設(shè)置 193
11．2．1 設(shè)置邊框的線寬 193
11．2．2 設(shè)置邊框的樣式 195
11．2．3 設(shè)置邊框的顏色 196
11．2．4 邊框綜合屬性 197
11．2．5 CSS 3新增的與邊框相關(guān)的屬性 198
11．3 內(nèi)外邊距的相關(guān)屬性 201
11．3．1 設(shè)置內(nèi)邊距 201
11．3．2 設(shè)置外邊距 202
11．4 綜合實(shí)例——設(shè)計(jì)企業(yè)門戶網(wǎng)站首頁 203
知識點(diǎn)提煉 205
習(xí)題 205

第12章 變形與動(dòng)畫相關(guān)屬性 206
12．1 CSS變形(Transformation) 206
12．1．1 變形基礎(chǔ)——transform屬性 206
12．1．2 旋轉(zhuǎn)動(dòng)畫——rotate()函數(shù) 207
12．1．3 縮放動(dòng)畫——scale()函數(shù) 208
12．1．4 移動(dòng)動(dòng)畫——translate()函數(shù) 210
12．1．5 傾斜動(dòng)畫——skew()函數(shù) 211
12．1．6 變形原點(diǎn)——transform-origin屬性 213
12．2 CSS過渡——transition屬性 214
12．2．1 設(shè)置過渡的CSS屬性——transition-property屬性 214
12．2．2 設(shè)置過渡的時(shí)間——transition-duration屬性 216
12．2．3 設(shè)置過渡延遲時(shí)間——transition-delay屬性 217
12．2．4 設(shè)置過渡效果——transition-timing-function屬性 218
12．3 CSS動(dòng)畫——animation屬性 220
12．4 綜合實(shí)例——模擬進(jìn)度條效果 223
知識點(diǎn)提煉 224
習(xí)題 225

第13章 JavaScript概述 226
13．1 JavaScript概貌 226
13．1．1 JavaScript的歷史起源 226
13．1．2 JavaScript的主要特點(diǎn) 227
13．1．3 JavaScript成功案例 227
13．2 搭建JavaScript開發(fā)環(huán)境 229
13．2．1 硬件要求 229
13．2．2 軟件要求 229
13．2．3 瀏覽器對JavaScript的支持 230
13．3 編寫JavaScript的工具 231
13．3．1 Adobe Dreamweaver 231
13．3．2 Microsoft FrontPage 232
13．4 JavaScript在HTML中的使用 232
13．4．1 在頁面中直接嵌入JavaScript 232
13．4．2 鏈接外部JavaScript 233
13．5 綜合實(shí)例——用JS輸出中文字符串 233
知識點(diǎn)提煉 234
習(xí)題 234

第14章 JavaScript語言基礎(chǔ) 235
14．1 JavaScript數(shù)據(jù)結(jié)構(gòu) 235
14．1．1 標(biāo)識符 235
14．1．2 關(guān)鍵字 236
14．1．3 常量 236
14．1．4 變量 236
14．2 數(shù)據(jù)類型 238
14．2．1 數(shù)字型數(shù)據(jù) 238
14．2．2 字符串型數(shù)據(jù) 239
14．2．3 布爾型數(shù)據(jù) 240
14．2．4 特殊數(shù)據(jù)類型 240
14．2．5 數(shù)據(jù)類型的轉(zhuǎn)換規(guī)則 241
14．3 運(yùn)算符與表達(dá)式 242
14．3．1 算術(shù)運(yùn)算符 243
14．3．2 比較運(yùn)算符 243
14．3．3 賦值運(yùn)算符 244
14．3．4 字符串運(yùn)算符 245
14．3．5 布爾運(yùn)算符 245
14．3．6 條件運(yùn)算符 245
14．3．7 其他運(yùn)算符 246
14．3．8 運(yùn)算符優(yōu)先級 247
14．3．9 表達(dá)式 248
14．4 流程控制語句 248
14．4．1 條件控制語句 248
14．4．2 循環(huán)控制語句 255
14．4．3 跳轉(zhuǎn)語句 257
14．5 函數(shù) 259
14．5．1 函數(shù)的定義 259
14．5．2 函數(shù)的調(diào)用 260
14．5．3 幾種特殊的函數(shù) 263
14．6 綜合實(shí)例——將長數(shù)字分位顯示 268
知識點(diǎn)提煉 269
習(xí)題 269

第15章 JavaScript內(nèi)置對象 271
15．1 字符串對象String 271
15．1．1 search方法 271
15．1．2 match方法 272
15．1．3 split方法 272
15．1．4 replace方法 273
15．2 常用的數(shù)值處理對象 273
15．2．1 Math對象 273
15．2．2 Number對象 275
15．2．3 Boolean對象 279
15．2．4 Date對象 280
15．3 數(shù)組對象 283
15．3．1 數(shù)組對象Array 283
15．3．2 常用的數(shù)組操作方法 286
15．3．3 獲取數(shù)組中的某段數(shù)組元素 289
15．3．4 將數(shù)組轉(zhuǎn)換成字符串 290
15．4 綜合實(shí)例——使用數(shù)組存儲(chǔ)商品信息 291
知識點(diǎn)提煉 291
習(xí)題 292

第16章 JavaScript對象編程與事件處理 293
16．1 文檔(document)對象 293
16．1．1 文檔對象的常用屬性、方法與事件 294
16．1．2 Document對象的應(yīng)用 296
16．2 窗口(window)對象 302
16．2．1 窗口對象的常用屬性與方法 302
16．2．2 控制窗口 304
16．2．3 窗口事件 311
16．3 DOM對象 312
16．3．1 DOM概述 312
16．3．2 DOM對象節(jié)點(diǎn)屬性 313
16．3．3 操作節(jié)點(diǎn) 318
16．3．4 獲取文檔中的指定元素 324
16．4 事件處理 325
16．4．1 事件與事件處理概述 325
16．4．2 DOM事件模型 328
16．4．3 表單相關(guān)事件 331
16．4．4 鼠標(biāo)鍵盤事件 335
16．4．5 頁面事件 339
16．5 綜合實(shí)例——?jiǎng)討B(tài)設(shè)置網(wǎng)頁的標(biāo)題欄 341
知識點(diǎn)提煉 342
習(xí)題 343

第17章 HTML5、CSS3與JavaScript綜合應(yīng)用 344
17．1 綜合實(shí)例 1——文字升降特效 344
17．2 綜合實(shí)例 2——閃爍的圖片 345
17．3 綜合實(shí)例 3——左右移動(dòng)的圖片 346
17．4 綜合實(shí)例 4——自動(dòng)隱藏菜單 348
17．5 綜合實(shí)例 5——樹狀導(dǎo)航菜單 351
17．6 綜合實(shí)例 6——顏色選擇器 353

第18章 課程設(shè)計(jì)——旅游信息網(wǎng)前臺(tái) 357
18．1 需求分析 357
18．2 系統(tǒng)設(shè)計(jì) 357
18．2．1 系統(tǒng)目標(biāo) 357
18．2．2 網(wǎng)站預(yù)覽 357
18．3 開發(fā)及運(yùn)行環(huán)境 359
18．4 關(guān)鍵技術(shù) 360
18．4．1 網(wǎng)站主題結(jié)構(gòu)設(shè)計(jì) 360
18．4．2 HTML5結(jié)構(gòu)元素的使用 360
18．5 網(wǎng)站公共部分設(shè)計(jì) 361
18．5．1 設(shè)計(jì)網(wǎng)站公共header 361
18．5．2 設(shè)計(jì)網(wǎng)站公共footer 367
18．6 網(wǎng)站主頁設(shè)計(jì) 367
18．6．1 顯示網(wǎng)站介紹及相關(guān)圖片 368
18．6．2 主頁左側(cè)導(dǎo)航的實(shí)現(xiàn) 369
18．7 “留下足跡”頁面設(shè)計(jì) 371
18．7．1 播放音樂 372
18．7．2 添加留言功能的實(shí)現(xiàn) 372
18．8 課程設(shè)計(jì)總結(jié) 374