《HTML5+CSS3+JavaScript網頁設計入門與套用》是2019年清華大學出版社出版的圖書,作者是劉愛江、靳智良。
基本介紹
- 書名:HTML5+CSS3+JavaScript網頁設計入門與套用
- 作者:劉愛江、靳智良
- 出版社:清華大學出版社
- 出版時間:2019年4月1日
- 定價:68 元
- ISBN:9787302515630
- 印次:1-1
- 印刷日期:2019.03.21
內容簡介,目錄,
內容簡介
《HTML5+CSS3+JavaScript 網頁設計入門與套用》從網站基礎開始,結合大量案例,全面、翔實地介紹了使用HTML5+CSS3+JavaScript開發Web前端頁面的具體方法與步驟,引導讀者從零開始,一步步掌握Web開發的全過程。本書通過一個個鮮活、典型的實例來講解每個語法,力求達到理論知識與實踐操作完美結合的效果。 《HTML5+CSS3+JavaScript 網頁設計入門與套用》共分為15章,主要包括HTML入門、HTML5新增布局元素、HTML5表單驗證、檔案上傳、繪圖和多媒體、數據存儲、CSS3新增選擇器、CSS3布局屬性和動畫效果、JavaScript基礎語法、事件處理和DOM操作等內容。最後一章通過打地鼠、貪吃蛇、小貓笑臉和圖片輪播4個綜合案例,介紹了Web前端設計的完整過程。
目錄
第1章 初步認識HTML5和CSS3
1.1 認識網頁和網站 2
1.1.1 網頁 2
1.1.2 網站 3
1.1.3 網站製作流程 3
1.1.4 網頁設計流程 4
1.1.5 發布站點 4
1.2 Web標準布局介紹 5
1.2.1 當前的Web開發標準 5
1.2.2 為什麼使用Web標準 5
1.2.3 CSS布局標準 6
1.3 HTML與HTML5 7
1.3.1 HTML的發展歷史 7
1.3.2 HTML 4.01和XHTML 8
1.3.3 HTML和XHTML文檔類型定義 9
1.3.4 從XHTML到HTML5 11
1.3.5 HTML5的優勢 11
1.4 HTML5語法的變化 13
1.4.1 DOCTYPE聲明 13
1.4.2 命名空間聲明 13
1.4.3 編碼類型 14
1.4.4 文檔媒體類型 15
1.4.5 HTML5兼容HTML 15
1.5 實踐案例:瀏覽器HTML5性能測試 18
1.6 CSS3簡介 19
1.6.1 什麼是CSS3 20
1.6.2 CSS3的優缺點 20
1.6.3 CSS3的新增特性 21
1.7 實踐案例:瀏覽器CSS3性能測試 24
1.8 練習題 25
第2章 HTML5網頁結構
2.1 認識html根元素 28
2.2 文檔頭部元素 28
2.3 結構元素 31
2.3.1 header元素 31
2.3.2 article元素 33
2.3.3 section元素 34
2.3.4 aside元素 35
2.3.5 footer元素 36
2.4 節點元素 36
2.4.1 nav元素 36
2.4.2 hgroup元素 37
2.4.3 address元素 38
2.5 語義元素 39
2.5.1 mark元素 39
2.5.2 cite元素 40
2.5.3 time元素 40
2.5.4 wbr元素 41
2.5.5 ruby、rt和rp元素 41
2.6 互動元素 41
2.6.1 meter元素 41
2.6.2 progress元素 43
2.6.3 details元素 44
2.6.4 summary元素 45
2.7 全局屬性 45
2.7.1 hidden屬性 46
2.7.2 contenteditable屬性 46
2.7.3 spellcheck屬性 47
2.8 實踐案例:設計旅遊網站首頁 48
2.9 練習題 53
第3章 HTML5表單套用
3.1 重新認識HTML表單 56
3.1.1 表單簡介 56
3.1.2 表單標記 56
3.1.3 基本表單元素 57
3.2 新增輸入類型 58
3.2.1 url類型 58
3.2.2 number類型 59
3.2.3 email類型 60
3.2.4 range類型 61
3.2.5 datepickers類型 62
3.2.6 color類型 64
3.2.7 tel類型 64
3.2.8 search類型 65
3.3 新增屬性 65
3.3.1 表單類屬性 65
3.3.2 輸入類屬性 67
3.4 表單元素 73
3.4.1 datalist元素 73
3.4.2 keygen元素 74
3.4.3 output元素 75
3.4.4 optgroup元素 76
3.5 表單驗證 77
3.5.1 自動驗證 77
3.5.2 顯式驗證 79
3.5.3 自定義驗證 80
3.5.4 取消驗證 81
3.6 實踐案例:設計用戶錄入表單 81
3.7 練習題 87
第4章 HTML5多媒體套用
4.1 多媒體簡介 90
4.1.1 多媒體編解碼器 90
4.1.2 視頻格式 90
4.1.3 音頻格式 91
4.2 播放視頻 91
4.2.1 video元素的基礎用法 92
4.2.2 video元素方法 94
4.2.3 video元素事件 95
4.3 播放音頻 97
4.3.1 audio元素的基礎用法 97
4.3.2 audio元素事件 98
4.4 實踐案例:實現HTML5網頁視頻播放器 99
4.5 練習題 105
第5章 HTML5繪圖套用
5.1 認識canvas元素 108
5.1.1 canvas簡介 108
5.1.2 創建canvas元素 108
5.1.3 實踐案例:判斷瀏覽器是否支持canvas元素 109
5.2 繪製簡單圖形 110
5.2.1 繪製矩形 110
5.2.2 繪製直線 113
5.2.3 繪製圓形 116
5.2.4 實踐案例:繪製三角形 119
5.2.5 保存和恢復圖形 121
5.2.6 輸出圖形 123
5.3 繪製文本 124
5.3.1 繪製普通文本 124
5.3.2 繪製陰影文本 126
5.4 繪製曲線 128
5.4.1 二次方貝塞爾曲線 128
5.4.2 三次方貝塞爾曲線 128
5.5 變換圖形 129
5.5.1 坐標變換 129
5.5.2 矩陣變換 133
5.5.3 組合圖形 135
5.5.4 線性漸變 138
5.5.5 徑向漸變 139
5.6 使用圖像 141
5.6.1 繪製圖像 141
5.6.2 平鋪圖像 143
5.6.3 裁剪和複製圖像 145
5.7 實踐案例:製作圖像黑白和反轉效果 146
5.8 練習題 148
第6章 HTML5數據存儲
6.1 Web存儲簡介 152
6.1.1 Web存儲和Cookie存儲 152
6.1.2 sessionStorage對象 152
6.1.3 localStorage對象 154
6.2 操作本地數據 155
6.2.1 保存數據 156
6.2.2 讀取數據 157
6.2.3 清空數據 159
6.2.4 遍歷數據 159
6.3 實踐案例:實現工程管理模組 162
6.4 操作本地資料庫數據 167
6.4.1 創建資料庫 167
6.4.2 執行SQL語句 168
6.5 實踐案例:查看學生列表 170
6.6 練習題 171
第7章 檔案和離線套用
7.1 操作檔案 174
7.1.1 獲取檔案信息 174
7.1.2 限制檔案類型 175
7.2 實踐案例:檔案上傳 177
7.3 FileReader接口 178
7.3.1 FileReader接口簡介 179
7.3.2 讀取文本檔案內容 179
7.3.3 監聽讀取事件 181
7.3.4 處理讀取異常 183
7.4 實踐案例:預覽圖片 184
7.5 離線套用 186
7.5.1 離線Web應用程式概述 186
7.5.2 manifest檔案 186
7.5.3 applicationCache對象 190
7.6 練習題 195
第8章 HTML5高級開發
8.1 拖放功能 198
8.1.1 拖放API簡介 198
8.1.2 dataTransfer對象 199
8.2 實踐案例:拖放式選擇員工 202
8.3 跨文檔訊息通信 205
8.4 本地多執行緒 207
8.4.1 Worker對象簡介 207
8.4.2 執行緒和JavaScript互動 210
8.4.3 執行緒嵌套 210
8.4.4 實踐案例:執行緒和JSON互動 212
8.5 獲取地理位置 214
8.5.1 地圖API簡介 215
8.5.2 Position對象 216
8.6 練習題 218
第9章 CSS3選擇器
9.1 CSS選擇器的分類 222
9.2 屬性選擇器 226
9.2.1 E[att^=“val”] 226
9.2.2 E[att$=“val”] 227
9.2.3 E[att*=“val”] 227
9.2.4 實踐案例:設計顏色選擇器 227
9.3 偽類選擇器 229
9.3.1 E:last-child選擇器 229
9.3.2 E:only-child選擇器 230
9.3.3 E:nth-child(n)選擇器 231
9.3.4 E:nth-last-child(n)選擇器 233
9.3.5 E:root選擇器 233
9.3.6 E:not(s)選擇器 234
9.3.7 E:empty選擇器 235
9.3.8 E:target選擇器 236
9.3.9 實踐案例:單擊連結顯示具體內容 237
9.4 偽對象選擇器 238
9.4.1 E::selection選擇器 238
9.4.2 E::placeholder選擇器 239
9.4.3 已修改的選擇器 239
9.4.4 實踐案例:選擇器和content屬性結合插入內容 240
9.5 兄弟選擇器 243
9.6 練習題 244
第10章 CSS3新增的基本屬性
10.1 新增基本屬性 248
10.1.1 文本屬性 248
10.1.2 字型屬性 249
10.1.3 顏色屬性 250
10.1.4 框線屬性 251
10.1.5 背景屬性 251
10.1.6 實踐案例:用JS判斷瀏覽器是否支持某屬性 251
10.2 設定文本樣式 252
10.2.1 文本換行設定 252
10.2.2 文本對齊方式 256
10.2.3 文本的單個陰影 256
10.2.4 文本的多個陰影 259
10.2.5 實踐案例:製作火焰字 260
10.3 設定框線樣式 261
10.3.1 框線圓角屬性 261
10.3.2 圖形填充框線 264
10.3.3 框線陰影效果 267
10.4 設定背景樣式 269
10.4.1 background-size屬性 270
10.4.2 background-origin屬性 271
10.4.3 background-clip屬性 272
10.5 實踐案例:製作太極圖 273
10.6 練習題 274
第11章 變形、過渡和動畫
11.1 CSS3的變形屬性 278
11.1.1 基本變形之平移 278
11.1.2 基本變形之縮放 280
11.1.3 基本變形之旋轉 280
11.1.4 基本變形之傾斜 281
11.1.5 實踐案例:製作個性圖片牆 283
11.1.6 指定變形中心點 284
11.2 CSS3的過渡屬性 286
11.2.1 過渡屬性概述 286
11.2.2 單個屬性實現過渡 287
11.2.3 多個屬性同時過渡 287
11.2.4 實踐案例:滑鼠懸浮特效的過渡功能 289
11.3 CSS3的動畫屬性 291
11.3.1 了解animation屬性 291
11.3.2 @keyframes動畫幀 293
11.3.3 同時改變多個屬性的動畫 295
11.3.4 實踐案例:繪製旋轉的太極圖案 295
11.4 實踐案例:動態復古時鐘 296
11.5 練習題 299
第12章 CSS3新增的高級屬性
12.1 多列布局屬性 302
12.1.1 多列布局屬性列表 302
12.1.2 設定顯示列的寬度 302
12.1.3 設定顯示的固定列 303
12.1.4 設定顯示列的樣式 304
12.1.5 設定各列間的間距 305
12.2 彈性盒模型屬性 305
12.2.1 flex布局屬性 306
12.2.2 flex-direction屬性 307
12.2.3 flex-wrap屬性 308
12.2.4 justify-content屬性 309
12.2.5 其他屬性簡述 311
12.2.6 實踐案例:用flex盒模型實現三欄布局 314
12.3 漸變屬性 315
12.3.1 線性漸變 316
12.3.2 徑向漸變 319
12.3.3 重複漸變 323
12.3.4 實踐案例:用線性漸變實現圖片閃光划過的效果 324
12.3.5 實踐案例:用徑向漸變製作一張優惠券 325
12.3.6 實踐案例:用重複漸變製作記事本紙張效果 326
12.4 練習題 327
第13章 JavaScript腳本編程快速入門
13.1 JavaScript語言簡介 330
13.1.1 JavaScript簡介 330
13.1.2 JavaScript與Java的關係 330
13.1.3 JavaScript語法規則 331
13.2 編寫JavaScript程式 332
13.2.1 集成JavaScript程式 332
13.2.2 使用外部JavaScript檔案 333
13.2.3 注意事項 334
13.3 JavaScript腳本語法 335
13.3.1 數據類型 335
13.3.2 變數與常量 336
13.3.3 運算符 337
13.4 腳本控制語句 340
13.4.1 if條件語句 340
13.4.2 switch條件語句 342
13.4.3 while循環語句 343
13.4.4 dowhile循環語句 344
13.4.5 for循環語句 344
13.4.6 forin循環語句 345
13.4.7 對話框語句 345
13.5 函式 348
13.5.1 系統函式 348
13.5.2 自定義函式 350
13.6 常用對象 351
13.6.1 Array對象 351
13.6.2 Document對象 352
13.6.3 Window對象 353
13.7 實踐案例:長方體幾何計算 354
13.8 練習題 355
第14章 JavaScript事件和DOM
14.1 事件概述 358
14.1.1 事件簡介 358
14.1.2 指定事件 358
14.2 原始事件模型 359
14.2.1 事件類型 360
14.2.2 事件處理 361
14.2.3 使用事件返回值 362
14.3 標準事件模型 364
14.3.1 事件傳播 364
14.3.2 註冊事件處理程式 365
14.4 常用事件 366
14.4.1 鍵盤事件 366
14.4.2 滑鼠事件 367
14.4.3 頁面事件 368
14.5 DOM簡介 370
14.5.1 HTMLDOM中的節點樹 370
14.5.2 DOM核心接口 370
14.6 實踐案例:使用DOM操作節點 373
14.6.1 訪問節點 373
14.6.2 遍歷節點 376
14.6.3 操作屬性節點 379
14.6.4 創建和插入節點 382
14.6.5 複製節點 385
14.6.6 替換節點 385
14.6.7 刪除節點 387
14.7 練習題 387
第15章 綜合案例
15.1 打地鼠遊戲 390
15.1.1 打地鼠遊戲簡介 390
15.1.2 界面設計 391
15.1.3 實現腳本 392
15.2 經典貪吃蛇遊戲 395
15.2.1 貪吃蛇遊戲簡介 395
15.2.2 頁面設計 395
15.2.3 腳本實現 397
15.3 繪製呆萌的小貓笑臉 401
15.3.1 效果展示 402
15.3.2 靜態頁面 402
15.3.3 樣式代碼 403
15.4 圖片輪播效果展示 407
15.4.1 效果展示 407
15.4.2 靜態頁面 408
15.4.3 樣式代碼 408
練習題答案