《HTML 5+CSS 3+JavaScript網頁設計教程》是2021年清華大學出版社出版的圖書。
基本介紹
- 中文名:HTML 5+CSS 3+JavaScript網頁設計教程
- 作者:張潤花,趙培植,王尚瀛
- 類別:教材類圖書
- 出版社:清華大學出版社
- 出版時間:2021年8月
- 開本:16 開
- 裝幀:平裝-膠訂
- ISBN:9787302581932
內容簡介,圖書目錄,作者簡介,
內容簡介
《HTML5 CSS3 JavaScript網頁設計教程(微課版)》以基礎知識、實例、綜合案例相結合的方式詳細講解了使用HTML 5、CSS 3和JavaScript開發Web前端頁面所需掌握的知識。 全書共12章,主要內容包括初步認識HTML 5簡介、HTML 5網頁結構、HTML 5表單套用、HTML 5多媒體套用、HTML 5繪圖套用、HTML 5數據存儲、HTML 5檔案和拖放、CSS 3新增選擇器、CSS 3修飾文本和背景、CSS 3變形/過渡和動畫及JavaScript腳本編程快速入門。《HTML5 CSS3 JavaScript網頁設計教程(微課版)》不僅僅將筆墨局限於語法講解上,還通過一個個鮮活、典型的實例來達到學以致用的目的。每個語法都有相應的實例,每章又配有綜合實例,力求達到理論知識與實踐操作完美結合的效果;同時本書配套有各實例的操作微視頻、電子課件、習題答案等數字教學資源。 《HTML5 CSS3 JavaScript網頁設計教程(微課版)》可作為普通高校、高職高專計算機及相關專業的教材,也可供從事網頁設計與製作、網站開發、網頁編程等行業人員參考閱讀。
圖書目錄
第1章 初步認識HTML 5 1
1.1 認識網頁和網站 2
1.1.1 網頁 2
1.1.2 網站 3
1.2 Web標準布局介紹 4
1.2.1 為什麼使用Web標準 4
1.2.2 CSS布局標準 5
1.3 HTML與HTML 5 6
1.3.1 HTML發展歷史 6
1.3.2 HTML 4.01和XHTML 7
1.3.3 HTML和XHTML的文檔
類型定義 8
1.3.4 從XHTML到HTML 5 10
1.3.5 HTML 5的優勢 10
1.4 HTML 5語法變化 12
1.4.1 DOCTYPE聲明 12
1.4.2 命名空間聲明 13
1.4.3 編碼類型 13
1.4.4 文檔媒體類型 14
1.4.5 HTML 5兼容HTML 15
1.5 綜合套用實例:瀏覽器HTML 5
性能測試 18
本章小結 20
習題 20
第2章 HTML 5網頁結構 21
2.1 認識html根元素 22
2.2 文檔頭部元素 22
2.3 結構元素 25
2.3.1 header元素 26
2.3.2 article元素 27
2.3.3 section元素 28
2.3.4 aside元素 29
2.3.5 footer元素 31
2.4 節點元素 31
2.4.1 nav元素 31
2.4.2 hgroup元素 32
2.4.3 address元素 33
2.5 語義元素 33
2.5.1 mark元素 34
2.5.2 cite元素 35
2.5.3 time元素 35
2.5.4 wbr元素 35
2.5.5 ruby、rt和rp元素 36
2.6 互動元素 36
2.6.1 meter元素 36
2.6.2 progress元素 38
2.6.3 details元素 39
2.6.4 summary元素 40
2.7 全局屬性 41
2.7.1 hidden屬性 41
2.7.2 contenteditable屬性 42
2.7.3 spellcheck屬性 43
2.8 綜合套用實例:設計旅遊網站
首頁 44
本章小結 50
習題 50
第3章 HTML 5表單套用 53
3.1 重新認識HTML表單 54
3.1.1 表單簡介 54
3.1.2 表單標記 54
3.2 新增輸入類型 55
3.2.1 url類型 56
3.2.2 number類型 57
3.2.3 email類型 58
3.2.4 range類型 58
3.2.5 datepickers類型 59
3.2.6 color類型 61
3.2.7 tel類型 61
3.2.8 search類型 62
3.3 新增屬性 62
3.3.1 表單類屬性 62
3.3.2 輸入類屬性 64
3.4 表單元素 69
3.4.1 datalist元素 69
3.4.2 keygen元素 70
3.4.3 output元素 71
3.4.4 optgroup元素 72
3.5 表單驗證 73
3.5.1 自動驗證 73
3.5.2 顯式驗證 74
3.5.3 自定義驗證 76
3.5.4 取消驗證 76
3.6 綜合套用實例:設計用戶錄入表單 77
本章小結 81
習題 81
第4章 HTML 5多媒體套用 83
4.1 多媒體簡介 84
4.2 播放視頻 85
4.2.1 video元素基礎用法 85
4.2.2 video元素方法 87
4.2.3 video元素事件 88
4.3 播放音頻 90
4.3.1 audio元素基礎用法 90
4.3.2 audio元素事件 91
4.4 綜合套用實例:網頁視頻播放器 92
本章小結 97
習題 98
第5章 HTML 5繪圖套用 99
5.1 認識canvas元素 100
5.1.1 canvas簡介 100
5.1.2 創建canvas元素 100
5.1.3 綜合套用實例:判斷瀏覽器
是否支持canvas元素 101
5.2 繪製簡單圖形 101
5.2.1 繪製矩形 102
5.2.2 繪製直線 104
5.2.3 繪製圓形 107
5.2.4 綜合套用實例:
繪製三角形 109
5.2.5 保存和恢復圖形 111
5.2.6 輸出圖形 112
5.3 繪製文本 113
5.3.1 繪製普通文本 113
5.3.2 繪製陰影文本 115
5.4 變換圖形 116
5.4.1 坐標變換 117
5.4.2 矩陣變換 120
5.4.3 組合圖形 122
5.4.4 線性漸變 124
5.4.5 徑向漸變 126
5.5 使用圖像 127
5.5.1 繪製圖像 128
5.5.2 平鋪圖像 129
5.5.3 裁剪和複製圖像 131
5.6 綜合套用實例:製作圖片黑白和
反轉效果 132
本章小結 134
習題 134
第6章 HTML 5數據存儲 137
6.1 認識Web存儲和Cookie存儲 138
6.2 兩大Web存儲對象 138
6.2.1 sessionStorage對象 139
6.2.2 localStorage對象 140
6.3 操作本地數據 142
6.3.1 保存數據 142
6.3.2 讀取數據 143
6.3.3 清空數據 145
6.3.4 遍歷數據 145
6.4 綜合套用實例:實現工程管理
模組 147
6.5 操作本地資料庫數據 152
6.5.1 創建資料庫 152
6.5.2 執行SQL語句 153
6.6 綜合套用實例:查看學生列表 154
本章小結 156
習題 156
第7章 HTML 5檔案和拖放 159
7.1 操作檔案 160
7.1.1 獲取檔案信息 160
7.1.2 限制檔案類型 161
7.2 綜合套用實例:檔案上傳 163
7.3 FileReader接口 164
7.3.1 FileReader接口簡介 165
7.3.2 讀取文本檔案內容 165
7.3.3 監聽讀取事件 167
7.3.4 處理讀取異常 169
7.4 綜合套用實例:預覽圖片 170
7.5 拖放功能 171
7.5.1 拖放API簡介 171
7.5.2 dataTransfer對象 173
本章小結 176
習題 176
第8章 CSS 3新增選擇器 179
8.1 CSS 3簡介 180
8.2 綜合套用實例:瀏覽器CSS 3性能
測試 183
8.3 CSS選擇器分類 185
8.4 屬性選擇器 188
8.4.1 E[att^="val"] 188
8.4.2 E[att$="val"] 189
8.4.3 E[att*="val"] 189
8.4.4 綜合套用實例:設計顏色
選擇器 190
8.5 偽類選擇器 191
8.5.1 E:last-child選擇器 191
8.5.2 E:only-child選擇器 193
8.5.3 E:nth-child(n)選擇器 193
8.5.4 E:nth-last-child(n)選擇器 194
8.5.5 E:root選擇器 195
8.5.6 E:not(s)選擇器 196
8.5.7 E:empty選擇器 197
8.5.8 E:target選擇器 197
8.5.9 綜合套用實例:單擊超連結
顯示具體內容 199
8.6 偽對象選擇器 200
8.6.1 E::selection選擇器 200
8.6.2 E::placeholder選擇器 201
8.6.3 已修改的選擇器 201
8.6.4 綜合套用實例:練習content
屬性 202
8.7 兄弟選擇器 205
本章小結 206
習題 207
第9章 CSS 3修飾文本和背景 209
9.1 新增基本屬性 210
9.1.1 文本屬性 210
9.1.2 字型屬性 211
9.1.3 顏色屬性 212
9.1.4 框線屬性 212
9.1.5 背景屬性 213
9.2 設定文本樣式 213
9.2.1 文本換行設定 213
9.2.2 文本對齊方式 216
9.2.3 文本單個陰影 217
9.2.4 文本多個陰影 219
9.2.5 綜合套用實例:製作
火焰字 220
9.3 設定框線樣式 221
9.3.1 框線圓角屬性 221
9.3.2 圖形填充框線 224
9.3.3 框線陰影效果 227
9.4 設定背景樣式 229
9.4.1 background-size屬性 229
9.4.2 background-origin屬性 231
9.4.3 background-clip屬性 232
9.5 綜合套用實例:製作太極圖 232
9.6 漸變屬性 233
9.6.1 線性漸變 234
9.6.2 綜合套用實例:實現圖片
閃光划過效果 235
9.6.3 徑向漸變 236
9.6.4 綜合套用實例:製作一張
優惠券 239
9.6.5 重複漸變 240
9.6.6 綜合套用實例:製作記事本
紙張效果 240
本章小結 241
習題 241
第10章 CSS 3變形、過渡和動畫 245
10.1 變形屬性 246
10.1.1 平移 246
10.1.2 縮放 247
10.1.3 旋轉 248
10.1.4 傾斜 249
10.1.5 綜合套用實例:製作個性
圖片牆 250
10.1.6 指定變形中心原點 252
10.2 過渡屬性 253
10.2.1 過渡屬性概述 253
10.2.2 單個屬性實現過渡 254
10.2.3 多個屬性同時過渡 255
10.2.4 綜合套用實例:游標懸浮
特效的過渡功能 257
10.3 動畫屬性 258
10.3.1 了解animation屬性 258
10.3.2 @keyframes動畫幀 260
10.3.3 綜合套用實例:繪製旋轉的
太極圖案 262
10.4 綜合套用實例:動態復古時鐘 262
本章小結 265
習題 265
第11章 CSS 3布局屬性 267
11.1 多列布局屬性 268
11.1.1 多列布局屬性列表 268
11.1.2 設定顯示列的寬度 268
11.1.3 設定顯示的固定列 270
11.1.4 設定顯示列的樣式 270
11.1.5 設定各列間的間距 271
11.2 彈性盒模型布局屬性 272
11.2.1 Flex布局屬性 272
11.2.2 flex-direction屬性 273
11.2.3 flex-wrap屬性 275
11.2.4 justify-content屬性 276
11.2.5 其他屬性簡述 277
11.2.6 綜合套用實例:實現三欄
布局 280
本章小結 281
習題 282
第12章 JavaScript腳本編程
快速入門 285
12.1 JavaScript語言簡介 286
12.2 編寫JavaScript程式 287
12.2.1 集成JavaScript程式 287
12.2.2 使用外部JavaScript檔案 289
12.3 JavaScript腳本語法 290
12.3.1 數據類型 290
12.3.2 變數與常量 290
12.3.3 運算符 291
12.4 腳本控制語句 294
12.4.1 if條件語句 294
12.4.2 switch條件語句 297
12.4.3 while循環語句 298
12.4.4 do while循環語句 298
12.4.5 for循環語句 299
12.4.6 for in循環語句 299
12.5 函式 300
12.5.1 系統函式 300
12.5.2 自定義函式 301
12.6 常用對象 302
12.6.1 Array對象 302
12.6.2 Document對象 303
12.6.3 Window對象 304
12.7 常用事件 305
12.7.1 鍵盤事件 305
12.7.2 滑鼠事件 306
12.7.3 頁面事件 307
本章小結 308
習題 308
參考文獻 310
作者簡介
張潤花,某網路開發套用中心技術總監、曾經參與開發“凡科建站”網頁平台,並與2015年參與最佳化了“58同城”網站的前台結構。精通ASP.NET、CSS樣式設計、JavaScript腳本語言、C#程式設計,熟練掌握Photoshop、coreldraw設計軟體。