《HTML CSS網頁設計實踐教程》是2016年6月1日清華大學出版社出版的圖書，作者是田中雨、郭磊。
基本介紹
- 書名：HTML CSS網頁設計實踐教程
- 作者：田中雨、郭磊
- ISBN：9787302418696
- 定價：59元
- 出版社：清華大學出版社
- 出版時間：2016年6月1日
內容簡介,目錄,
內容簡介
本書詳細介紹了如何使用HTML 5和CSS 3技術製作漂亮美觀的網頁。全書共分為14章，包括HTML 5的基礎知識，新增的結構元素、塊級語義元素、行內語義元素、互動元素；新增的表單元素、表單類型、表單屬性和表單驗證，以及檔案操作、用Web Storage和Web SQL資料庫進行數據存儲、Canvas API實現圖形和圖像繪製、多媒體元素的播放、離線快取、Web Sockets通信、跨文檔訊息傳輸、執行緒、Geolocation API等內容，還介紹了CSS 3的概念和新增特性、顏色和文本樣式、@font-face規則、新增的選擇器、彈性盒模型、多列類布局，用戶界面布局、以及框線、背景、漸變等知識。
目錄
第1章 HTML 5概述 1
1.1 了解HTML 5 1
1.1.1 HTML 5簡介 1
1.1.2 HTML 5的組織 2
1.1.3 HTML 5的特性 2
1.1.4 HTML 5的優點 4
1.1.5 HTML 5的發展趨勢 4
1.2 HTML 5與其他技術的區別 4
1.2.1 與XHTML的區別 5
1.2.2 與Silverlight和Flash的區別 6
1.3 HTML 5與HTML 4的區別 7
1.3.1 語法的改變 7
1.3.2 新增元素和廢除元素 10
1.3.3 新增屬性和廢除屬性 14
1.3.4 全局屬性 17
1.4 HTML 5的瀏覽器支持情況 19
1.4.1 支持HTML 5的瀏覽器
說明 20
1.4.2 線上測試當前瀏覽器的
支持情況 21
1.5 實驗指導1-1：簡單安裝傲遊
瀏覽器 24
1.6 常用的瀏覽器核心 25
思考與練習 26
第2章 HTML 5中的新增元素 28
2.1 新增的結構元素 28
2.1.1 header元素 28
2.1.2 article元素 29
2.1.3 section元素 30
2.1.4 nav元素 33
2.1.5 footer元素 35
2.1.6 address元素 36
2.1.7 hgroup元素 37
2.2 新增的塊級語義元素 38
2.2.1 aside元素 38
2.2.2 figure元素 40
2.2.3 dialog元素 41
2.3 新增的行內語義元素 42
2.3.1 mark元素 42
2.3.2 cite元素 43
2.3.3 time元素 44
2.3.4 meter元素 45
2.3.5 progress元素 47
2.4 新增的互動元素 48
2.4.1 details元素 48
2.4.2 menu元素 50
2.4.3 command元素 52
2.4.4 datagrid元素 53
2.5 改良HTML 4元素的功能 54
2.5.1 ul元素 54
2.5.2 ol元素 55
2.5.3 嵌套列表 57
2.6 實驗指導2-1：使用新增元素構建
網頁 58
思考與練習 64
第3章 HTML 5中的表單套用 66
3.1 認識和創建HTML表單 66
3.1.1 認識HTML表單 66
3.1.2 input元素的基本類型 67
3.1.3 其他輸入元素 70
3.2 新增的表單元素 70
3.2.1 datalist元素 71
3.2.2 output元素 72
3.2.3 keygen元素 73
3.2.4 optgroup元素 74
3.3 新增的表單類型 76
3.3.1 email類型 76
3.3.2 url類型 78
3.3.3 number類型 78
3.3.4 range類型 79
3.3.5 tel類型 80
3.3.6 color類型 81
3.3.7 search類型 82
3.3.8 日期和時間類型 82
3.4 新增的表單屬性 86
3.4.1 form屬性 86
3.4.2 表單重寫屬性 88
3.4.3 placeholder屬性 89
3.4.4 required屬性 90
3.4.5 pattern屬性 91
3.4.6 autocomplete屬性 92
3.4.7 autofocus屬性 93
3.5 表單驗證 93
3.5.1 自動驗證 93
3.5.2 顯式驗證 94
3.5.3 自定義驗證 96
3.5.4 驗證事件 97
3.5.5 取消驗證 98
3.6 實驗指導3-1：會員資料註冊 99
思考與練習 102
第4章 HTML 5中的檔案套用 103
4.1 選擇檔案 103
4.1.1 選擇單個檔案 103
4.1.2 選擇多個檔案 105
4.1.3 限制選擇檔案類型 107
4.2 實驗指導4-1：將檔案上傳到
伺服器端 109
4.3 讀取檔案 111
4.3.1 認識FileReader接口 112
4.3.2 讀取二進制檔案 115
4.3.3 顯示預覽圖像 116
4.3.4 讀取文本檔案 118
4.4 錯誤處理方案 120
4.4.1 產生錯誤的原因 120
4.4.2 FileError接口 121
4.4.3 錯誤處理練習 121
4.5 檔案拖放API和常用對象 123
4.5.1 拖放API 123
4.5.2 認識DataTransfer對象 125
4.5.3 DataTransfer對象的方法 126
4.5.4 DataTransfer對象的屬性 127
4.6 實驗指導4-2：拖動文字到網頁的
指定區域 129
4.7 實驗指導4-3：拖放實現帶進度條
的檔案上傳 130
思考與練習 138
第5章 HTML 5中的多媒體元素 140
5.1 HTML 5多媒體概述 140
5.1.1 HTML 4中的多媒體套用 140
5.1.2 HTML 5中的多媒體 141
5.2 多媒體元素的屬性 144
5.2.1 audio和video的共同屬性 144
5.2.2 audio元素顯示音頻檔案 146
5.2.3 video元素顯示視頻檔案 149
5.3 向多媒體元素中添加source元素 152
5.3.1 認識source元素 152
5.3.2 source元素常用的支持
格式 152
5.3.3 多媒體元素添加source
元素 153
5.3.4 視頻檔案添加source元素 154
5.4 多媒體元素的方法 155
5.5 多媒體元素的事件 157
5.5.1 audio和video的共同事件 157
5.5.2 video元素添加事件 159
5.6 認識embed元素 162
5.7 實驗指導5-1：製作絢麗的音樂
播放器 164
思考與練習 172
第6章 數據存儲 174
6.1 認識Web Storage 174
6.1.1 Web Storage介紹 174
6.1.2 Web Storage的優缺點 175
6.2 localStorage對象 175
6.2.1 判斷瀏覽器是否支持 176
6.2.2 localStorage的常用方法 176
6.2.3 統計訪問人數 177
6.2.4 及時更新訪問人數 179
6.3 sessionStorage對象 182
6.3.1 與localStorage對象的
不同 182
6.3.2 判斷瀏覽器是否支持 183
6.3.3 方法和事件 183
6.4 JSON對象運算元據 185
6.5 認識Web SQL 191
6.5.1 Web SQL介紹 191
6.5.2 Web SQL API操作 191
6.5.3 數據的簡單操作 193
6.6 實驗指導6-1：基於Web SQL
的留言簿 196
思考與練習 202
第7章 Canvas API動態繪圖 204
7.1 認識canvas元素 204
7.1.1 canvas基礎知識 204
7.1.2 canvas API的基本使用 206
7.1.3 與SVG的簡單區別 208
7.2 通過路徑繪圖 209
7.2.1 基本方法 209
7.2.2 繪製直線 210
7.2.3 繪製圓形 212
7.2.4 繪製三角形 215
7.3 實驗指導7-1：繪製複雜圖形 215
7.4 貝塞爾曲線 217
7.4.1 二次方曲線 217
7.4.2 三次方曲線 219
7.5 繪製漸變圖形 221
7.5.1 了解漸變 221
7.5.2 線性漸變 221
7.5.3 徑向漸變 224
7.6 高級繪圖操作 225
7.6.1 繪圖狀態 225
7.6.2 坐標變換 226
7.6.3 矩陣變換 233
7.6.4 合成圖形 235
7.7 實驗指導7-2：實現時鐘的動畫
效果 237
7.8 圖像操作 240
7.8.1 創建圖像 240
7.8.2 繪製圖像 241
7.8.3 縮放圖像 242
7.8.4 裁剪圖像 244
7.8.5 輸出圖像 245
7.9 文字和陰影效果 246
7.9.1 繪製文字 247
7.9.2 陰影特效 247
思考與練習 248
第8章 離線快取 250
8.1 離線應用程式概述 250
8.1.1 認識離線應用程式 250
8.1.2 離線快取與瀏覽器快取 251
8.1.3 創建離線快取套用 252
8.2 Cache Manifest檔案 255
8.2.1 認識Cache Manifest檔案 255
8.2.2 Cache Manifest的組成 255
8.2.3 向manifest檔案添加注釋 257
8.2.4 Cache Mainifest的遵循
原則 258
8.2.5 配置IIS伺服器 258
8.3 離線訪問系統當前時間 260
8.4 瀏覽器與伺服器的互動過程 263
8.4.1 首次載入頁面 263
8.4.2 再次載入頁面 263
8.5 離線存儲對象：applicationCache 264
8.5.1 認識applicationCache 264
8.5.2 檢測本地快取狀態 265
8.5.3 檢測線上狀態 266
8.5.4 本地快取更新 269
8.5.5 事件執行順序 270
8.6 實驗指導8-1：製作離線使用的
日程備忘錄 273
思考與練習 277
第9章 通信API和地理位置獲取 279
9.1 跨文檔訊息傳輸 279
9.1.1 Message API概述 279
9.1.2 跨域獲取傳遞訊息 280
9.2 Web Sockets通信 283
9.2.1 Web Sockets API概述 284
9.2.2 使用Web Sockets API 284
9.2.3 向.NET端傳送數據 286
9.3 Web Workers執行緒 290
9.3.1 執行緒概述 290
9.3.2 Worker對象 291
9.3.3 計算數字結果 293
9.3.4 執行緒嵌套處理 297
9.4 Geolocatin API概述 299
9.4.1 getCurrentPosition()方法 300
9.4.2 watchCurrentPosition()方法 301
9.4.3 clearWatch()方法 302
9.5 Position對象顯示當前位置 302
9.6 實驗指導9-1：Google地圖鎖定
當前位置 305
思考與練習 308
第10章 CSS 3和新增顏色及
文本樣式 310
10.1 了解CSS 3 310
10.1.1 什麼是CSS 3 310
10.1.2 CSS 3的支持情況 311
10.1.3 CSS 3的新增特性 312
10.2 新增顏色 316
10.2.1 RGBA 316
10.2.2 HSL 318
10.2.3 HSLA 320
10.2.4 opaticy 321
10.3 文本樣式 322
10.3.1 text-overflow屬性 322
10.3.2 text-shadow屬性 326
10.3.3 word-wrap屬性 329
10.4 字型樣式規則：@font-face 331
10.4.1 語法規則 331
10.4.2 基本練習 332
10.4.3 字型與字型樣式 334
10.4.4 注意事項 336
10.5 實驗指導10-1：定義文章的標題
和內容樣式 336
思考與練習 339
第11章 CSS 3中的新增選擇器 340
11.1 屬性選擇器 340
11.1.1 E[att^="val"]選擇器 340
11.1.2 E[att$="val"]選擇器 342
11.1.3 E[att*="val"]選擇器 343
11.2 結構化偽類選擇器 345
11.2.1 E:root選擇器 345
11.2.2 E:nth-child(n)選擇器 347
11.2.3 E:nth-last-child(n)選擇器 348
11.2.4 E:nth-of-type(n)和E:nth-
last-of-type(n)選擇器 351
11.2.5 E:last-child選擇器 354
11.2.6 E:first-of-type和E:last-of-
type選擇器 355
11.2.7 E:only-child選擇器 357
11.2.8 E:only-of-type選擇器 357
11.2.9 E:empty選擇器 358
11.3 UI元素狀態偽類選擇器 360
11.3.1 E:enabled選擇器 360
11.3.2 E:disabled選擇器 362
11.3.3 E:checked選擇器 363
11.3.4 E::selection選擇器 364
11.4 其他新增選擇器 366
11.4.1 否定偽類選擇器：
E:not(s) 366
11.4.2 目標偽類選擇器：
E:target 367
11.4.3 通用兄弟元素選擇器：
E~F 368
11.5 新增內容屬性：content 370
11.5.1 基本語法 370
11.5.2 插入圖像 371
11.5.3 插入項目編碼 372
11.5.4 插入嵌套符號 374
11.5.5 編號嵌套 375
11.6 實驗指導11-1：結構化的數據
表格設計 376
思考與練習 379
第12章 彈性盒模型與樣式布局 381
12.1 新增的盒模型屬性 381
12.1.1 box-orient屬性 381
12.1.2 box-direction屬性 384
12.1.3 box-ordinal-group屬性 385
12.1.4 box-flex屬性 387
12.1.5 box-flex-group屬性 389
12.1.6 box-pack屬性 390
12.1.7 box-align屬性 392
12.1.8 box-lines屬性 393
12.2 多列類布局屬性 394
12.2.1 columns屬性 394
12.2.2 column-width屬性 396
12.2.3 column-count屬性 397
12.2.4 column-gap屬性 397
12.2.5 column-rule屬性 399
12.2.6 column-span屬性 400
12.2.7 column-fill屬性 401
12.2.8 分列列印屬性 401
12.3 用戶界面布局 402
12.3.1 box-sizing屬性 402
12.3.2 resize屬性 404
12.3.3 zoom屬性 406
12.3.4 outline-offset屬性 407
12.3.5 nav-index屬性 408
12.3.6 定義方向鍵控制順序 410
12.4 實驗指導12-1：簡單設計
部落格網頁 411
思考與練習 413
第13章 框線、背景和漸變 415
13.1 框線設計 415
13.1.1 border-radius屬性 415
13.1.2 border-image屬性 417
13.1.3 box-shadow屬性 421
13.1.4 border-colors屬性 423
13.2 背景樣式 424
13.2.1 變更屬性 424
13.2.2 background-origin屬性 427
13.2.3 background-clip屬性 428
13.2.4 background-size屬性 430
13.3 漸變特效 431
13.3.1 WebKit引擎實現漸變 431
13.3.2 Gecko引擎實現漸變 433
13.3.3 重複漸變 435
13.4 實驗指導13-1：製作下拉
導航選單 436
思考與練習 439
第14章 HTML 5+CSS 3製作
旅遊網頁 440
14.1 旅遊網站分析 440
14.1.1 產生背景 440
14.1.2 發展趨勢 441
14.1.3 基本結構 441
14.2 設計首頁 442
14.2.1 網頁效果 442
14.2.2 添加頭部 443
14.2.3 添加底部 446
14.2.4 添加內容 446
14.3 設計關於我們網頁 448
14.3.1 網頁效果 448
14.3.2 關於我們 448
14.3.3 最新公告 449
14.4 設計國內旅遊網頁 450
14.4.1 網頁效果 450
14.4.2 國內旅遊 451
14.4.3 其他內容 451
14.5 設計出境旅遊網頁 452
14.6 設計留言諮詢網頁 453
14.6.1 網頁效果 453
14.6.2 清空留言 453
14.6.3 提交留言 454
14.6.4 查看位置 455
附錄 思考與練習答案 459
