《HTML5+CSS3+JavaScript前端開發基礎》是2019年清華大學出版社出版的一本圖書。
基本介紹
- 中文名：HTML5+CSS3+JavaScript前端開發基礎
- 作者：王剛
- 出版時間：2019年4月1日
- 出版社：清華大學出版社
- ISBN：9787302522829
圖書簡介,圖書內容,圖書目錄,
圖書簡介
《HTML5+CSS3+JavaScript前端開發基礎》是清華大學出版社出版的一本圖書。
圖書內容
本書面向Web前端開發初學者，全面系統地講解了HTML5、CSS3、JavaScript基礎知識和編程技巧，為使用各種流行的前端框架打下牢固的基礎。 本書分為25章，腳本內容包括JavaScript與ECMAScript基礎；HTML5內容包括HTML基礎、視頻與音頻、canvas、SVG、From、File、拖放與桌面通知、本地存儲、Communication、Web Workers與Web SQL、WebSocket、地理位置、History等；CSS3內容包括CSS基礎、選擇器、插入內容、設定文本、設定圖片與背景、設定表格與表單、超連結與滑鼠樣式、濾鏡；最後一章為讀者提供了兩個實戰案例。 本書適合Web 前端開發初學者及HTML5、CSS3、JavaScript初學者，也適合高等院校和培訓學校相關專業的師生參考使用。
圖書目錄
第1章 HTML5 + CSS3學習準備 1
1.1 學習準備 1
1.1.1 選擇合適的瀏覽器 1
1.1.2 選擇合適的開發工具 2
1.2 認識HTML5 2
1.2.1 HTML5語法 2
1.2.2 新增與廢除的元素和屬性 3
1.2.3 全局屬性 8
1.2.4 HTML5中新增的API 11
1.3 本章小結 11
第2章 HTML元素、屬性與結構 12
2.1 HTML元素 12
2.1.1 HTML元素概述 12
2.1.2 HTML元素的語法 13
2.1.3 HTML元素的嵌套 13
2.2 HTML5屬性 14
2.2.1 屬性的基本使用方法 14
2.2.2 HTML5全局屬性 15
2.3 新增的主體結構元素 20
2.3.1 article元素 20
2.3.2 section元素 21
2.3.3 nav元素 22
2.3.4 aside元素 22
2.3.5 time元素 24
2.4 新增的非主體結構元素 25
2.4.1 header元素 25
2.4.2 hgroup元素 25
2.4.3 footer元素 26
2.4.4 address元素 26
2.5 HTML5結構 27
2.5.1 文檔結構大綱 27
2.5.2 內容區塊的編排方式 27
2.5.3 標題分級 28
2.6 本章小結 28
第3章 JavaScript基礎知識 29
3.1 JavaScript簡介 29
3.1.1 什麼是JavaScript 29
3.1.2 JavaScript的特點 29
3.1.3 JavaScript的組成 30
3.1.4 JavaScript基本結構 31
3.1.5 JavaScript執行原理 31
3.2 在網頁中引入JavaScript的方式 31
3.2.1 使用<script>標籤 31
3.2.2 使用外部JavaScript檔案 32
3.2.3 直接在HTML標籤中使用 33
3.3 數據類型和變數 33
3.3.1 變數 33
3.3.2 Number 33
3.3.3 字元串 35
3.3.4 布爾值 36
3.3.5 比較運算符 36
3.3.6 數組 36
3.3.7 對象 37
3.4 條件判斷 38
3.4.1 if語句 38
3.4.2 if...else語句 38
3.4.3 if...else if....else語句 39
3.4.4 switch語句 39
3.5 循環語句 40
3.5.1 for循環 40
3.5.2 for...in循環 41
3.5.3 while循環 41
3.5.4 do...while循環 42
3.6 函式定義和調用 43
3.6.1 定義函式 43
3.6.2 調用函式 43
3.7 本章小結 44
第4章 ES6基礎知識 45
4.1 準備測試環境 45
4.2 聲明變數let和const 48
4.2.1 let命令 48
4.2.2 塊級作用域 49
4.2.3 先聲明後使用 50
4.2.4 重複變數名 50
4.2.5 實例：面試題 51
4.3 模板字元串 52
4.3.1 字元串格式化 52
4.3.2 多行字元串 52
4.3.3 運算與函式調用 53
4.3.4 includes()、startsWith()和endsWith() 54
4.3.5 repeat() 55
4.4 箭頭函式 55
4.5 解構賦值 56
4.5.1 對象解構賦值 57
4.5.2 數組解構賦值 57
4.5.3 字元串解構賦值 58
4.6 Set和Map數據結構 58
4.6.1 Set數據結構 58
4.6.2 Set的基本操作 59
4.6.3 擴展運算符 61
4.6.4 Map數據結構 62
4.6.5 Map遍歷方法 63
4.7 Promise對象 64
4.7.1 Promise簡介 64
4.7.2 創建Promise對象 65
4.7.3 then() 65
4.7.4 catch() 66
4.7.5 Promise.all() 66
4.7.6 Promise.race() 67
4.7.7 Promise.resolve() 67
4.7.8 Promise.reject() 68
4.8 for...of循環 68
4.9 Generator函式 69
4.10 async函式 70
4.11 class 71
4.12 實例：下館子吃飯 72
4.13 本章小結 73
第5章 HTML5音頻和視頻 74
5.1 Web視頻的標準與格式 74
5.2 video/audio元素概述 75
5.3 檢測瀏覽器是否支持HTML5視頻 75
5.4 實例：在HTML5中顯示視頻/音頻 77
5.5 video元素與audio元素詳解 78
5.5.1 video/audio屬性 78
5.5.2 video/audio方法 79
5.5.3 video/audio事件 81
5.6 本章小結 83
第6章 HTML5 Canvas 84
6.1 canvas基礎入門 84
6.1.1 什麼是canvas 84
6.1.2 實例：在HTML5頁面中添加canvas元素 84
6.1.3 實例：繪製一個藍色矩形 85
6.2 繪製基本線條 86
6.2.1 實例：繪製直線 87
6.2.2 實例：繪製二次曲線 87
6.2.3 實例：繪製貝塞爾曲線 89
6.2.4 實例：繪製圓弧 89
6.3 繪製簡單形狀 90
6.3.1 實例：繪製圓形 90
6.3.2 實例：繪製三角形 91
6.3.3 實例：繪製圓角矩形 92
6.3.4 實例：繪製自定義圖形 94
6.4 繪製漸變 95
6.4.1 實例：繪製線性漸變 95
6.4.2 實例：繪製徑向漸變 96
6.5 圖形組合 97
6.5.1 實例：繪製陰影 97
6.5.2 實例：透明效果 99
6.6 使用圖像 100
6.6.1 實例：插入圖像 100
6.6.2 實例：平鋪圖像 101
6.6.3 實例：裁剪圖像 102
6.6.4 實例：像素級操作 103
6.7 繪製文字 104
6.7.1 實例：控制文本的字型、大小和樣式 104
6.7.2 實例：控制文本的顏色 106
6.7.3 實例：描繪文本的邊緣 107
6.7.4 實例：設定文本對齊方式 108
6.8 圖像數據與URL 109
6.8.1 存儲圖像數據 109
6.8.2 將彩色轉為灰度 110
6.8.3 圖像數據URL 111
6.8.4 將繪製的圖形保存為圖像檔案 111
6.9 用canvas實現動畫效果 112
6.9.1 實例：清除canvas的內容 113
6.9.2 實例：創建動畫 113
6.9.3 動畫的開始與停止 115
6.10 實戰演練 115
6.11 本章小結 120
第7章 HTML5 SVG 121
7.1 SVG簡介 121
7.1.1 什麼是SVG 121
7.1.2 SVG有哪些優勢 121
7.2 HTML5中的SVG 122
7.2.1 實例：將SVG直接嵌入HTML5頁面 122
7.2.2 實例：繪製簡單的形狀 123
7.2.3 實例：復用內容 124
7.2.4 實例：圖形陰影 125
7.2.5 實例：圖形漸變 126
7.2.6 實例：繪製自由路徑 127
7.3 畫布與SVG的比較 129
7.4 本章小結 129
第8章 Forms API 130
8.1 新增的Input輸入類型 130
8.1.1 email類型 130
8.1.2 url類型 131
8.1.3 number類型 132
8.1.4 range類型 132
8.1.5 date pickers類型 133
8.1.6 search類型 134
8.1.7 color類型 134
8.2 新增的表單元素 135
8.2.1 datalist元素 135
8.2.2 keygen元素 136
8.2.3 output元素 137
8.3 新增的form屬性 137
8.3.1 autocomplete屬性 138
8.3.2 novalidate屬性 138
8.4 新增的input屬性 139
8.4.1 autocomplete屬性 139
8.4.2 autofocus屬性 139
8.4.3 form屬性 139
8.4.4 form overrides屬性 139
8.4.5 height 和 width屬性 140
8.4.6 list屬性 140
8.4.7 min、max和step屬性 140
8.4.8 multiple屬性 141
8.4.9 pattern屬性 141
8.4.10 placeholder屬性 141
8.4.11 required屬性 141
8.5 本章小結 142
第9章 File API 143
9.1 Blob對象 143
9.2 File對象與Filelist對象 144
9.3 FileReader對象 145
9.3.1 FileReader對象的方法 145
9.3.2 FileReader對象的事件 146
9.3.3 實例：以二進制方式讀取檔案 146
9.3.4 實例：以文本方式讀取檔案 147
9.3.5 實例：以DataURL方式讀取檔案 148
9.4 FileSystem對象 149
9.4.1 FileSystem對象簡介 150
9.4.2 請求檔案系統 150
9.4.3 創建檔案 152
9.4.4 寫入檔案 153
9.4.5 向檔案中附加數據 154
9.4.6 複製選中的檔案 155
9.4.7 刪除檔案 155
9.4.8 創建目錄 156
9.4.9 讀取目錄內容 156
9.4.10 刪除目錄 157
9.4.11 複製檔案或目錄 158
9.4.12 移動檔案或目錄 159
9.4.13 filesystem:網址 159
9.5 本章小結 160
第10章 拖放API與桌面通知API 161
10.1 拖放API（Drag and Drop API） 161
10.1.1 實現拖放的步驟 161
10.1.2 使用DataTransfer對象 162
10.1.3 設定拖放時的視覺效果 162
10.1.4 自定義拖放圖示 163
10.1.5 實例：選擇圖形 163
10.2 桌面通知API（Notification API） 166
10.2.1 桌面通知API的必要性 166
10.2.2 桌面通知生成流程 166
10.2.3 實例：桌面通知的兩種實現方法 166
10.3 本章小結 168
第11章 本地存儲與離線套用 169
11.1 認識Web Storage 169
11.1.1 客戶端數據存儲的歷史與現狀 169
11.1.2 Web Storage概述 170
11.1.3 示例：一個Web Storage的簡單套用 170
11.2 使用Web Storage 172
11.2.1 檢測瀏覽器的支持 172
11.2.2 存入與讀取數據 173
11.2.3 清除數據 174
11.2.4 遍歷操作 174
11.2.5 storage事件 174
11.3 離線套用 175
11.3.1 離線套用概述 175
11.3.2 離線資源快取 175
11.3.3 Cache Mainfest基本用法 176
11.3.4 分析Cache Mainfest檔案 177
11.3.5 線上狀態監測 177
11.3.6 實例：創建離線套用 177
11.4 本章小結 181
第12章 Communication API 182
12.1 認識Communication API 182
12.1.1 Communication API簡介 182
12.1.2 Communication API運行流程 182
12.1.3 Communication API的基本用法 183
12.2 跨文檔訊息通信詳解 183
12.2.1 源安全簡介 183
12.2.2 postMessage API基本用法 184
12.2.3 實例：使用postMessage API創建套用 184
12.3 XMLHttpRequest Level 2 186
12.3.1 跨源XMLHttpRequest 186
12.3.2 HTTP請求時限 186
12.3.3 FormData對象 187
12.3.4 上傳檔案 187
12.3.5 接收二進制數據 188
12.3.6 進度信息 189
12.3.7 實例：創建XMLHttpRequest套用 189
12.4 本章小結 193
第13章 Web Workers API與Web SQL API 194
13.1 Web Workers 194
13.1.1 Web Workers簡介 194
13.1.2 實例：Web Workers簡單套用 195
13.1.3 Web Workers嵌套 197
13.2 Web SQL 199
13.2.1 Web SQL基本使用 200
13.2.2 資料庫的基本套用 200
13.2.3 實例：創建資料庫並創建數據表 203
13.2.4 實例：插入數據與獲取數據 204
13.3 本章小結 206
第14章 WebSocket API 207
14.1 WebSocket概述 207
14.2 WebSocket伺服器 208
14.3 使用WebSocket API 208
14.3.1 瀏覽器支持情況檢測 209
14.3.2 WebSocket API客戶端的基本用法 209
14.4 實例：創建HTML5 WebSocket應用程式 210
14.4.1 編寫客戶端HTML檔案 210
14.4.2 添加服務端WebSocket代碼 211
14.4.3 添加WebSocket客戶端代碼 211
14.4.4 最終效果 213
14.5 本章小結 213
第15章 地理位置API 214
15.1 地理位置的定位原理 214
15.1.1 地理位置定位的方式及流程 214
15.1.2 HTML5中如何實現地理位置定位 214
15.2 Geolocation API 215
15.2.1 檢測瀏覽器的支持 215
15.2.2 getCurrentPosition()方法 215
15.2.3 watchPosition()方法 218
15.2.4 clearPosition()方法 219
15.3 實例：在地圖中顯示地理位置 219
15.4 本章小結 221
第16章 History API 222
16.1 History API概述 222
16.2 為什麼要用History API 222
16.3 如何使用History API 223
16.4 實例：瀏覽歷史記錄 223
16.5 實例：添加與修改歷史記錄 225
16.6 本章小結 228
第17章 CSS基礎知識 229
17.1 CSS概述 229
17.1.1 CSS簡介 229
17.1.2 CSS歷史 229
17.1.3 CSS特點 230
17.1.4 CSS與瀏覽器的關係 230
17.1.5 CSS站點欣賞 230
17.2 基本CSS選擇器 231
17.2.1 標記選擇器 232
17.2.2 類別選擇器 232
17.2.3 ID選擇器 235
17.2.4 實例：套用基本選擇器 236
17.3 複合選擇器 238
17.3.1 “交集”選擇器 238
17.3.2 “並集”選擇器 239
17.3.3 後代選擇器 240
17.3.4 實例：套用複合選擇器 241
17.4 CSS繼承特性 242
17.4.1 什麼是繼承 243
17.4.2 CSS屬性繼承 243
17.4.3 實例：正確使用CSS繼承特性 243
17.5 CSS的層疊特性 244
17.6 CSS樣式 245
17.6.1 行內樣式 245
17.6.2 內部樣式 246
17.6.3 外部樣式 246
17.6.4 實例：CSS樣式的實現方式 247
17.7 CSS優先權 248
17.7.1 id優先權高於class 248
17.7.2 後面的樣式覆蓋前面的樣式 249
17.7.3 使用！important 250
17.7.4 指定的高於繼承 250
17.7.5 行內樣式高於內部或外部樣式 251
17.7.6 實例：靈活運用CSS優先權 252
17.8 CSS盒子模型 254
17.8.1 盒子模型結構 254
17.8.2 框線（border） 255
17.8.3 內邊距（padding） 258
17.8.4 外邊距（margin） 259
17.8.5 盒子的浮動 260
17.8.6 盒子的定位 262
17.8.7 z-index空間位置 264
17.8.8 盒子的display屬性 266
17.8.9 實例：用盒子模型創建網頁布局 267
17.9 本章小結 270
第18章 CSS3選擇器 271
18.1 屬性選擇器 271
18.1.1 E[att=“val”] 271
18.1.2 E[att^=“val”] 272
18.1.3 E[att$=“val”] 272
18.1.4 E[att*=“val”] 272
18.1.5 實例：文本效果 272
18.2 結構性偽類選擇器 273
18.2.1 偽類選擇器 274
18.2.2 偽元素選擇器 274
18.2.3 root選擇器 277
18.2.4 not選擇器 278
18.2.5 empty選擇器 279
18.2.6 target選擇器 279
18.2.7 first-child選擇器和last-child選擇器 280
18.2.8 first-of-type選擇器和last-of-type選擇器 282
18.2.9 nth-child選擇器和nth-last-child選擇器 284
18.2.10 nth-of-type選擇器和nth-last-of-type選擇器 286
18.2.11 循環使用樣式 287
18.2.12 only-child選擇器和only-of-type選擇器 289
18.2.13 實例：定位指定元素 289
18.3 UI元素狀態偽類選擇器 291
18.3.1 E:hover、E:active和E:focus選擇器 291
18.3.2 E:enabled和E:disabled偽類選擇器 292
18.3.3 E:read-only和E:read-write偽類選擇器 293
18.3.4 E:checked、E:default和E:indeterminate偽類選擇器 294
18.3.5 E::selection偽類選擇器 296
18.3.6 實例：用戶界面新體驗 297
18.4 通用兄弟元素選擇器 E ~ F 302
18.5 本章小結 303
第19章 使用CSS選擇器插入內容 304
19.1 插入文字 304
19.1.1 使用選擇器插入文本 304
19.1.2 插入篩選內容 305
19.1.3 實例：CSS製作目錄 306
19.2 插入圖像 309
19.2.1 插入圖像檔案的方法 309
19.2.2 插入圖像檔案的好處 310
19.2.3 實例：列表圖示與推薦標題 310
19.3 插入項目編號 311
19.3.1 插入連續項目編號 311
19.3.2 在項目編號中追加文字 312
19.3.3 設定編號種類 313
19.3.4 插入嵌套編號 314
19.3.5 在字元串兩邊添加嵌套文字編號 315
19.3.6 實例：導航選單 316
19.4 本章小結 321
第20章 使用CSS設定文本樣式 322
20.1 控制文本樣式 322
20.1.1 文本字型和大小 322
20.1.2 文本顏色和粗細 323
20.1.3 斜體文本 323
20.1.4 文本裝飾 324
20.1.5 英文字母大小寫轉換 324
20.1.6 實例：綜合套用文本樣式 325
20.2 控制段落樣式 326
20.2.1 段落水平對齊 326
20.2.2 段落垂直對齊 327
20.2.3 行間距和字間距 330
20.2.4 段落首字下沉 330
20.2.5 實例：段落排版 331
20.3 CSS3中為文本添加陰影——text-shadow屬性 332
20.3.1 text-shadow屬性的使用方法 332
20.3.2 位移距離 333
20.3.3 陰影的模糊半徑 334
20.3.4 陰影的顏色 334
20.3.5 指定多個陰影 335
20.4 CSS3中讓文本自動換行——text-break屬性 335
20.4.1 依靠瀏覽器讓文本自動換行 335
20.4.2 指定自動換行的處理方法 336
20.5 本章小結 338
第21章 使用CSS設定圖片與背景樣式 339
21.1 圖片樣式 339
21.1.1 圖片框線設定 339
21.1.2 設定圖片位置 341
21.1.3 設定圖片縮放 342
21.1.4 實例：圖片框線按鈕 344
21.2 圖片對齊 345
21.2.1 水平對齊設定 345
21.2.2 垂直對齊設定 345
21.2.3 實例：排列的相冊 346
21.3 圖文混排 347
21.3.1 設定圖文混排 348
21.3.2 設定混排間距 349
21.3.3 實例：看圖說話 350
21.4 背景顏色 351
21.4.1 設定頁面背景顏色 351
21.4.2 設定塊背景顏色 352
21.5 背景圖片 352
21.5.1 設定頁面背景圖片 352
21.5.2 重複的背景圖片 352
21.5.3 設定背景圖片的位置 353
21.5.4 設定背景滾動 353
21.5.5 背景樣式的縮寫方式 353
21.5.6 實例：創建背景皮膚 354
21.6 本章小結 355
第22章 使用CSS設定列表與表單樣式 356
22.1 列表控制 356
22.1.1 列表的類型及使用 356
22.1.2 創建垂直導航條 357
22.1.3 創建水平導航條 359
22.2 使用列表製作實用選單 359
22.2.1 實例：多級列表選單 359
22.2.2 實例：會伸縮的列表選單 363
22.3 表單設計概述 366
22.3.1 表單的設計原則 366
22.3.2 表單套用分類 367
22.3.3 實例：經典表單效果 369
22.4 表單的設計 369
22.4.1 form標籤 369
22.4.2 表單元素 370
22.4.3 對表單文本套用樣式 373
22.4.4 實例：滑塊複選框 374
22.4.5 實例：會員註冊頁面 375
22.5 本章小結 382
第23章 對超連結和滑鼠套用樣式 383
23.1 使用CSS設定超連結 383
23.1.1 什麼是超連結 383
23.1.2 關於超連結路徑 384
23.1.3 超連結屬性控制 384
23.1.4 圖像映射 385
23.1.5 實例：實現多頁面跳轉 386
23.2 超連結特效 387
23.2.1 實例：按鈕式超連結 387
23.2.2 實例：浮雕式超連結 388
23.3 滑鼠特效 389
23.3.1 CSS控制滑鼠箭頭 389
23.3.2 實例：滑鼠變化的超連結 390
23.4 本章小結 391
第24章 CSS中的濾鏡 392
24.1 了解CSS濾鏡 392
24.1.1 Alpha濾鏡 392
24.1.2 Blur濾鏡 394
24.1.3 Grayscale濾鏡 395
24.1.4 Sepia濾鏡 396
24.1.5 Brightness濾鏡 397
24.1.6 Hue-rotate濾鏡 398
24.1.7 Invert濾鏡 399
24.1.8 Saturate濾鏡 400
24.1.9 Contrast濾鏡 401
24.1.10 Drop-shadow濾鏡 402
24.2 本章小結 403
第25章 項目實戰案例 404
25.1 項目實戰案例一：企業入口網站 404
25.1.1 header元素中的內容 406
25.1.2 aside元素中的內容 409
25.1.3 section元素中的內容 409
25.1.4 footer元素中的內容 413
25.2 項目實戰案例二：用戶管理 415
