內容簡介
本書在HTML和CSS基礎上，系統地講述了HTML5和CSS3的Web前端開發技術，內容覆蓋HTML5新增的元素、屬性與API，以及CSS3使用廣泛、套用成熟的模組，力圖幫助讀者快速掌握最新的Web前端開發技術。
全書主要分為3部分。第1部分為HTML5及其套用，包括第1章至第12章，主要介紹HTML和HTML5，內容包括HTML基礎元素，HTML5新增的元素和canvas、SVG、WebWorkers、WebStorage等新增的API。第2部分為CSS3及其套用，包括第13章至第15章，主要介紹CSS和CSS3，內容包括基本選擇器，複合選擇器，用CSS設定元素樣式，也包括CSS3的盒模型、CSS3布局、圖像框線等內容。第3部分是第16章，為綜合案例，介紹一個網站示例。
本書知識全面，案例豐富，易學易用，將知識點融於200餘個案例之中，配有全部代碼和素材資源，方便讀者學習和掌握網站前端開發技術。
本書適合作為高等院校、高職高專院校網站設計課程的教學用書，也可作為信息技術類相關專業的讀者或從事網站前端開發人員的參考用書。
目錄
第1部分 HTML5及其套用
第1章 HTML5概述 2
1.1 HTML5簡介 2
1.1.1 HTML 2
1.1.2 HTML5 3
1.2 HTML5與HTML4的區別 4
1.2.1 HTML5文檔結構的變化 4
1.2.2 HTML5語法的變化 5
1.2.3 HTML5增加和刪除的元素 6
1.2.4 HTML5的全局屬性 8
1.3 HTML5的特性 10
1.4 HTML5的開發環境 11
1.4.1 HTML5的開發工具簡介 11
1.4.2 WebStorm集成開發環境 12
1.4.3 使用XAMPP搭建伺服器環境 13
1.4.4 支持HTML5的瀏覽器和幫助文檔 15
思考與練習 16
第2章 HTML5的文檔結構元素 17
2.1 HTML的元素和屬性 17
2.2 HTML文檔的基本結構元素 19
2.3 HTML5新增的結構元素 20
2.3.1 用DIV描述的網頁布局 20
2.3.2 HTML5增加的結構元素 21
思考與練習 29
第3章 HTML5的基本頁面元素 30
3.1 文本元素 30
3.1.1 段落標記p和換行標記br/ 30
3.1.2 標題標記hn 31
3.1.3 塊標記div和span 32
3.2 列表元素 32
3.2.1 有序列表標記ol 33
3.2.2 無序列表標記ul 34
3.2.3 自定義列表dl 35
3.3 超連結元素 36
3.3.1 超連結屬性 36
3.3.2 超連結類型 37
3.3.3 超連結路徑 38
3.4 圖像元素和多媒體元素 40
3.4.1 圖像標記img 40
3.4.2 多媒體檔案標記embed 43
3.5 表格元素 45
3.5.1 HTML的表格標記 46
3.5.2 HTML表格的屬性 47
3.5.3 表格嵌套 49
3.6 內嵌框架 52
3.7 頁面基本元素的套用 54
3.7.1 多層嵌套列表示例 54
3.7.2 旅遊網站首頁示例 55
3.7.3 內嵌框架示例 57
思考與練習 60
第4章 HTML5的表單元素 61
4.1 表單定義元素form 61
4.2 HTML表單輸入元素及屬性 62
4.2.1 表單輸入元素input 62
4.2.2 列表框元素select 65
4.2.3 文本域輸入元素textarea 66
4.3 HTML5新增的表單元素和屬性 67
4.3.1 HTML5新增input類型 67
4.3.2 HTML5表單新增屬性 70
4.4 一個會員註冊表單 73
思考與練習 77
第5章 HTML5的Video元素和Audio
元素 78
5.1 HTML5的Video元素 78
5.1.1 使用video標記插入視頻 79
5.1.2 video元素的訪問控制 80
5.2 HTML5的Audio元素 84
5.2.1 使用audio標記插入音頻 84
5.2.2 audio元素的訪問控制 86
5.3 使用track元素添加字幕 86
5.3.1 使用track標記插入字幕檔案 86
5.3.2 建立WebVTT檔案 88
思考與練習 90
第6章 HTML5的canvas繪圖 91
6.1 canvas概述 91
6.1.1 創建canvas元素 92
6.1.2 canvas繪圖的步驟 93
6.2 繪製矩形 93
6.2.1 繪製矩形的方法 94
6.2.2 繪圖時的顏色與透明度屬性 95
6.3 使用路徑繪製圖形 97
6.3.1 繪製圓形 97
6.3.2 繪製直線 99
6.3.3 繪製曲線 102
6.4 繪製顏色漸變的圖形 104
6.4.1 繪製線性漸變 104
6.4.2 繪製徑向漸變 105
6.5 使用坐標變換和矩陣變換繪圖 107
6.5.1 canvas的坐標系統 107
6.5.2 坐標變換 107
6.5.3 使用路徑繪製圖形的坐標變換 109
6.5.4 矩陣變換 110
6.6 在canvas中使用圖像 112
6.6.1 繪製圖像 113
6.6.2 圖像平鋪 114
6.6.3 圖像裁剪 116
6.7 繪製文字 117
6.8 使用canvas繪製動畫 118
6.8.1 繪製動畫的步驟 118
6.8.2 繪製動畫的示例 119
思考與練習 123
第7章 HTML5的SVG繪圖 125
7.1 SVG概述 125
7.1.1 SVG優缺點 125
7.1.2 SVG調用方式 126
7.2 繪製SVG基本圖形 128
7.2.1 繪製矩形和直線 128
7.2.2 繪製圓和橢圓 129
7.2.3 繪製折線和多邊形 130
7.2.4 繪製路徑 130
7.2.5 繪製文本和圖形 131
7.2.6 SVG繪圖的屬性 133
7.3 變換 134
7.3.1 平移 134
7.3.2 旋轉 134
7.3.3 縮放 134
7.3.4 傾斜 134
7.4 組合與重用 135
7.4.1 g元素 135
7.4.2 use元素 136
7.4.3 defs元素 137
7.5 漸變與透明度 138
7.5.1 漸變 138
7.5.2 透明度 143
7.6 濾鏡 144
7.6.1 濾鏡的定義 144
7.6.2 濾鏡的套用 144
思考與練習 147
第8章 獲取瀏覽器的地理位置
信息 148
8.1 地理位置信息概述 148
8.1.1 地理位置信息的內容 148
8.1.2 地理位置信息的來源 149
8.2 地理位置信息使用過程 149
8.3 地理位置API 150
8.3.1 getCurrentPosition()方法 150
8.3.2 watchPosition()方法 151
8.4 獲取地理位置信息的套用 151
思考與練習 157
第9章 離線Web套用與Web
存儲 158
9.1 離線Web套用 158
9.1.1 離線Web套用概述 158
9.1.2 實現離線Web套用的步驟 159
9.2 離線Web套用的實現 159
9.2.1 manifest檔案 160
9.2.2 更新快取 162
9.2.3 檢測線上狀態 164
9.3 WebStorage概述 165
9.3.1 WebStorage的概念 165
9.3.2 WebStorageAPI 166
9.4 WebStorage套用 167
9.4.1 使用localStorage和sessionStorage的
網頁計數器 167
9.4.2 使用localStorage保存、讀取和
清除數據 168
9.4.3 使用localStorage實現電話簿
管理 169
9.4.4 使用JSON對象改進電話簿的
功能 171
思考與練習 173
第10章 使用WebWorkers處理
執行緒 175
10.1 WebWorkers概述 175
10.1.1 WebWorkers的引入 175
10.1.2 使用WebWorkers創建執行緒 177
10.2 頁面與執行緒的數據互動 179
10.3 使用SharedWorker創建共享
執行緒 181
思考與練習 186
第11章 HTML5的IndexedDB
資料庫 187
11.1 IndexedDB資料庫概述 187
11.2 創建資料庫 188
11.3 資料庫的版本更新和事務處理 190
11.3.1 版本更新 191
11.3.2 事務處理 192
11.4 創建對象倉庫 193
11.5 創建索引 194
11.6 保存和刪除數據 196
11.6.1 保存數據 196
11.6.2 檢索數據 198
11.6.3 刪除數據 201
11.7 使用游標檢索批量數據 202
11.7.1 openCursor()方法及其參數 202
11.7.2 數據遍歷 203
思考與練習 206
第12章 HTML5的檔案操作與
拖放操作 207
12.1 file對象和FileList對象 207
12.1.1 file對象 208
12.1.2 FileList對象 209
12.2 ArrayBuffer對象與ArrayBufferView
對象 210
12.2.1 ArrayBuffer和ArrayBufferView
概念 210
12.2.2 ArrayBuffer對象 210
12.2.3 ArrayBufferView對象 210
12.2.4 DataView對象 213
12.3 Blob對象 214
12.3.1 使用Blob對象獲取檔案大小和
類型 214
12.3.2 通過slice()方法分割檔案 216
12.4 FileReader接口 218
12.4.1 FileReader接口的方法 218
12.4.2 FileReader接口的事件 218
12.4.3 FileReader接口的套用 219
12.5 拖放API 222
12.5.1 拖放API簡介 223
12.5.2 拖放的實現過程 223
12.6 DataTransfer對象的屬性與方法 225
12.6.1 DataTransfer對象的屬性及拖放
視覺效果 225
12.6.2 DataTransfer對象的方法 226
12.7 拖放的套用 228
12.7.1 拖動網頁元素 228
12.7.2 拖動上傳圖片 230
思考與練習 231
第2部分 CSS3及其套用
第13章 CSS3的選擇器 234
13.1 CSS3概述 234
13.1.1 CSS3簡介 234
13.1.2 CSS的一個示例 235
13.2 CSS的基本選擇器 238
13.2.1 標記選擇器 239
13.2.2 類選擇器 239
13.2.3 ID選擇器 241
13.3 在HTML中使用CSS的方法 242
13.3.1 行內樣式 242
13.3.2 嵌入樣式 243
13.3.3 連結樣式 243
13.3.4 導入樣式 245
13.3.5 樣式的優先權 246
13.4 CSS複合選擇器 248
13.4.1 交集選擇器 248
13.4.2 並集選擇器 249
13.4.3 後代選擇器 250
13.4.4 子選擇器 252
13.4.5 相鄰選擇器 253
13.5 CSS3新增的選擇器 254
13.5.1 屬性選擇器 254
13.5.2 偽類選擇器 256
13.5.3 偽元素選擇器 261
13.6 使用CSS設計網站頁面 263
思考與練習 267
第14章 使用CSS3設定元素
樣式 269
14.1 用CSS3設定文本樣式 269
14.1.1 字型屬性 269
14.1.2 文本屬性 272
14.2 用CSS3設定顏色與背景 277
14.2.1 顏色設定 278
14.2.2 背景設定 278
14.2.3 圓角框線和圖像框線 280
14.3 用CSS3設定圖像效果 282
14.3.1 為圖片添加框線 283
14.3.2 圖片縮放 285
14.3.3 圖文混排 286
14.4 用CSS3美化表單的套用 288
思考與練習 290
第15章 CSS3的盒模型及網頁
布局 292
15.1 CSS盒模型 292
15.1.1 盒模型的組成 293
15.1.2 盒的類型 298
15.1.3 CSS3新增的與盒相關的
屬性 299
15.2 CSS布局常用屬性 304
15.2.1 定位屬性 304
15.2.2 浮動屬性 309
15.3 CSS的網頁布局 311
15.3.1 單列布局 311
15.3.2 兩列布局 312
15.3.3 使用CSS3盒布局的三列
布局 316
15.4 DIV+CSS布局的套用 319
15.4.1 圖文混排的實現 320
15.4.2 製作二級導航選單 324
思考與練習 329
第3部分 綜合案例
第16章 綜合案例 332
16.1 使用HTML5結構元素組織網頁 332
16.1.1 網頁結構描述 332
16.1.2 用CSS3定義網站全局樣式 334
16.2 頁頭部分的設計 335
16.2.1 頁頭的結構描述 335
16.2.2 頁頭元素及CSS樣式代碼分析 336
16.3 側邊導航和焦點圖的設計 338
16.3.1 側邊導航和焦點圖板塊的
內容 338
16.3.2 側邊導航和焦點圖板塊的代碼
分析 339
16.4 快速搜尋、滑動Tab和線上諮詢板塊
設計 344
16.4.1 快速搜尋、滑動Tab和線上諮詢
板塊的內容 344
16.4.2 快速搜尋板塊的代碼分析 344
16.4.3 滑動Tab板塊的代碼分析 346
16.4.4 線上諮詢板塊的代碼分析 349
16.5 特色線路板塊的設計 350
16.5.1 特色線路板塊的內容 350
16.5.2 特色線路板塊的代碼分析 351
16.6 頁腳的設計 354
16.6.1 頁腳的結構描述 354
16.6.2 頁腳的代碼分析 355
思考與練習 357
附錄 HTML標記列表 359
參考文獻 362
