目 錄

第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的標簽構(gòu)成 3
1．2．1 HTML標簽概述 3
1．2．2 開始標簽 4
1．2．3 頭部標簽 4
1．2．4 標題標簽
1．2．5 主體標簽 5
1．2．6 編寫時注意事項 5
1．3 HTML文件的編寫方法 6
1．3．1 手工編寫頁面 6
1．3．2 使用可視化軟件制作頁面 7
1．3．3 使用瀏覽器瀏覽HTML文件 10
1．4 綜合實例——在瀏覽器中輸出“你好” 11
知識點提煉 11
習題 11

第2章 HTML5的元素與屬性 12
2．1 HTML5的語法變化 12
2．1．1 HTML5中的標記方法 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 綜合實例——檢查單詞的拼寫情況 24
知識點提煉 24
習題 24

第3章 HTML5表單 25
3．1 表單概述 25
3．2 表單的基本元素 26
3．2．1 表單標記及其屬性 26
3．2．2 表單基本元素 29
3．3 表單新增元素 40
3．3．1 新增表單元素與屬性 40
3．3．2 驗證表單 46
3．3．3 新增和改良的頁面元素 48
3．4 綜合實例——search搜索類型的input元素 55
知識點提煉 56
習題 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 實現(xiàn)圖片的預覽 62
4．2．4 文本文件的讀取 64
4．2．5 FileReader對象中的事件 65
4．3 拖放API的使用 66
4．3．1 實現(xiàn)拖放的步驟 66
4．3．2 拖放實例 67
4．4 dataTransfer對象 69
4．4．1 設置拖放效果 69
4．4．2 設置拖放圖標 70
4．5 綜合實例——使用拖放API將商品拖入購物車 71
知識點提煉 73
習題 73

第5章 繪制圖形 74
5．1 canvas基礎 74
5．1．1 canvas元素簡介 74
5．1．2 插入canvas元素 74
5．1．3 繪制矩形實例 76
5．2 使用路徑繪制圓形 77
5．2．1 繪制圓形 77
5．2．2 繪制火柴人 78
5．2．3 繪制貝塞爾曲線 80
5．3 運用樣式與顏色 82
5．3．1 fillStyle 和 strokeStyle屬性 82
5．3．2 globalAlpha屬性 84
5．3．3 線型Line styles 85
5．4 實現(xiàn)圖形的變形 87
5．4．1 坐標的變換 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 應用圖像 97
5．8．1 繪制圖像 97
5．8．2 圖像的局部放大 99
5．8．3 圖像平鋪 100
5．8．4 圖像裁剪 102
5．8．5 處理像素 102
5．9 保存與恢復狀態(tài) 103
5．10 文件的保存 104
5．11 使用畫布繪制動畫 104
5．12 綜合實例——繪制桌面時鐘 105
知識點提煉 108
習題 108

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

第7章 HTML5的數(shù)據(jù)存儲 120
7．1 Web Storage 120
7．1．1 Web Storage簡介 120
7．1．2 WebStorage的API 121
7．1．3 兩種不同存儲類型的實例——計數(shù)器 122
7．1．4 JSON對象的存儲實例——用戶信息卡 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 綜合實例——簡單的Web留言本 130
知識點提煉 132
習題 132

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

第9章 CSS3基礎 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 綜合實例——生動的列表導航 167
知識點提煉 170
習題 171

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

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

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

第13章 JavaScript概述 226
13．1 JavaScript概貌 226
13．1．1 JavaScript的歷史起源 226
13．1．2 JavaScript的主要特點 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 綜合實例——用JS輸出中文字符串 233
知識點提煉 234
習題 234

第14章 JavaScript語言基礎 235
14．1 JavaScript數(shù)據(jù)結(jié)構(gòu) 235
14．1．1 標識符 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 運算符與表達式 242
14．3．1 算術(shù)運算符 243
14．3．2 比較運算符 243
14．3．3 賦值運算符 244
14．3．4 字符串運算符 245
14．3．5 布爾運算符 245
14．3．6 條件運算符 245
14．3．7 其他運算符 246
14．3．8 運算符優(yōu)先級 247
14．3．9 表達式 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ù)字分位顯示 268
知識點提煉 269
習題 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ù)組存儲商品信息 291
知識點提煉 291
習題 292

第16章 JavaScript對象編程與事件處理 293
16．1 文檔(document)對象 293
16．1．1 文檔對象的常用屬性、方法與事件 294
16．1．2 Document對象的應用 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é)點屬性 313
16．3．3 操作節(jié)點 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 鼠標鍵盤事件 335
16．4．5 頁面事件 339
16．5 綜合實例——動態(tài)設置網(wǎng)頁的標題欄 341
知識點提煉 342
習題 343

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

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