《 HTML5 Web開發(全案例微課版)》是2021年清華大學出版社出版的圖書,作者是劉輝。
基本介紹
- 書名:HTML5 Web開發(全案例微課版)
- 作者:劉輝
- 出版社:清華大學出版社
- 出版時間:2021年
- 定價:89 元
- ISBN: 9787302568933
內容簡介,圖書目錄,
內容簡介
《HTML5 Web開發(全案例微課版)》是針對零基礎讀者編寫的Web入門教材。該書側重案例實訓,並提供掃碼微課來講解當前熱門的案例。《HTML5 Web開發(全案例微課版)》分為22章,內容包括認識HTML 5、設計網頁的文本、設計網頁列表與段落、網頁中的圖 像和超連結、表格與div標籤、網頁中的表單、網頁中的多媒體、HTML5的新特徵、使用CSS層疊樣式表、JavaScript和jQuery、繪製圖形、檔案與拖放、地理定位技術、離線Web應用程式、處理執行緒 和伺服器傳送事件、數據存儲和通信技術、回響式網頁設計、流行的回響式開發框架Bootstrap,最後通過4個熱門綜合項目,讓讀者進一步掌握項目開發經驗。《HTML5 Web開發(全案例微課版)》通過精選熱門案例,讓初學者快速掌握HTML5 Web開發技術。通過微信掃碼看視頻,可以隨時在移動端學習技能對應的視頻操作。本書適合讀者自學,也可作為相關院校的參考教材。
圖書目錄
第1章 認識HTML 5 001
1.1 HTML的基本概念和版本002
1.1.1 什麼是HTML 002
1.1.2 HTML的版本 002
1.2 HTML檔案的基本結構 003
1.3 HTML 5的基本標記 003
1.3.1 文檔類型說明 003
1.3.2 html標記 004
1.3.3 頭標記 004
1.3.4 主體標記 006
1.3.5 注釋標記 007
1.4 HTML 5網頁的開發環境 007
1.4.1 使用記事本手工編寫HTML檔案 008
1.4.2 使用WebStorm編寫HTML檔案 008
1.5 新手常見疑難問題 012
1.6 實戰技能訓練營 013
第2章 設計網頁的文本 014
2.1 標題015
2.1.1 標題文字標籤 015
2.1.2 標題的對齊方式016
2.2 設定文字格式 017
2.2.1 文字的字型、字號和顏色 017
2.2.2 文字的粗體、斜體和下劃線 018
2.2.3 文字的上標和下標 019
2.3 設定段落格式 019
2.3.1 段落標籤 020
2.3.2 段落的換行標籤020
2.3.3 段落的原格式標籤 021
2.4 網頁的水平線 021
2.4.1 添加水平線 021
2.4.2 設定水平線的寬度與高度 022
2.5 新手常見疑難問題 023
2.6 實戰技能訓練營 023
第3章 設計網頁列表與段落 024
3.1 無序列表 025
3.1.1 無序列表的標籤 025
3.1.2 無序列表的屬性 025
3.2 有序列表 026
3.2.1 有序列表的標籤 026
3.2.2 有序列表的屬性 027
3.3 自定義列表 028
3.4 列表的嵌套 029
3.5 新手常見疑難問題 029
3.6 實戰技能訓練營 030
第4章 網頁中的圖像和超連結 031
4.1 網頁中的圖像 032
4.1.1 網頁中支持的圖片格式 032
4.1.2 圖像中的路徑 032
4.2 在網頁中插入圖像 034
4.3 編輯網頁中的圖像 035
4.3.1 設定圖像的大小和框線 035
4.3.2 設定圖像的間距和對齊方式 036
4.3.3 設定圖像的替換文字和提示文字 037
4.4 認識網頁超連結 038
4.4.1 什麼是網頁超連結 038
4.4.2 超連結中的URL038
4.4.3 超連結的URL類型 039
4.5 建立網頁超級連結 039
4.5.1 創建超文本連結 039
4.5.2 創建圖片連結 040
4.5.3 創建下載連結 041
4.5.4 使用相對路徑和絕對路徑 041
4.5.5 設定以新視窗顯示超連結頁面 042
4.5.6 設定電子郵件連結 043
4.6 使用浮動框架 044
4.7 使用書籤連結製作電子書閱讀網頁045
4.8 圖像熱點連結 046
4.9 新手常見疑難問題 048
4.10 實戰技能訓練營049
第5 章 表格與<div> 標籤 051
5.1 表格的基本結構 052
5.2 創建表格 053
5.2.1 創建普通表格 053
5.2.2 創建一個帶有標題的表格 054
5.3 編輯表格 054
5.3.1 定義表格的框線類型 054
5.3.2 定義表格的表頭055
5.3.3 設定表格背景 056
5.3.4 設定單元格的背景 057
5.3.5 合併單元格058
5.3.6 表格的分組060
5.3.7 設定單元格的行高與列寬 061
5.4 完整的表格標籤 062
5.5 設定懸浮變色的表格 063
5.6 <div> 標籤 065
5.7 <span> 標籤066
5.8 新手常見疑難問題 067
5.9 實戰技能訓練營 067
第6 章 網頁中的表單069
6.1 表單概述 070
6.2 輸入標籤 070
6.2.1 文本框070
6.2.2 單選按鈕和複選框 073
6.2.3 按鈕 074
6.3 圖像域和檔案域 076
6.4 列表077
6.5 表單的高級元素 078
6.5.1 url 屬性078
6.5.2 email 屬性 079
6.5.3 date 和time 屬性 080
6.5.4 number 屬性 080
6.5.5 range 屬性 081
6.5.6 required 屬性082
6.6 新手常見疑難問題 082
6.7 實戰技能訓練營 083
第7 章 網頁中的多媒體 084
7.1 audio 標籤概述 085
7.1.1 認識audio 標籤 085
7.1.2 audio 標籤的屬性085
7.1.3 audio 標籤對瀏覽器的支持情況 086
7.2 在網頁中添加音頻檔案 086
7.3 video 標籤 087
7.3.1 認識video 標籤 087
7.3.2 video 標籤的屬性088
7.3.3 瀏覽器對video 標籤的支持情況 089
7.4 在網頁中添加視頻檔案 089
7.5 新手常見疑難問題 091
7.6 實戰技能訓練營 091
第8 章 HTML 5 的新特徵 092
8.1 新增的主體結構元素 093
8.1.1 section 元素 093
8.1.2 article 元素 093
8.1.3 aside 元素 096
8.1.4 nav 元素 097
8.1.5 time 元素 099
8.2 新增的非主體結構元素 100
8.2.1 header 元素 100
8.2.2 hgroup 元素101
8.2.3 footer 元素 102
8.2.4 figure 元素 103
8.2.5 address 元素 104
8.3 新增其他常用元素 105
8.3.1 mark 元素 106
8.3.2 rp 元素、rt 元素與ruby 元素106
8.3.3 progress 元素107
8.3.4 command 元素 108
8.3.5 embed 元素 108
8.3.6 details 元素和summary 元素109
8.3.7 datalist 元素 110
8.3.8 meter 元素 111
8.4 新增全局屬性 112
8.4.1 contentEditable 屬性 112
8.4.2 spellcheck 屬性 112
8.4.3 tabIndex 屬性113
8.5 新增的其他屬性 114
8.5.1 表單相關屬性 114
8.5.2 連結相關屬性 119
8.5.3 其他新增屬性 119
8.6 HTML 5 廢除的屬性 120
8.7 新手常見疑難問題 121
8.8 實戰技能訓練營 121
第9 章 使用CSS 層疊樣式表123
9.1 CSS 概述 124
9.1.1 CSS 的功能 124
9.1.2 瀏覽器與CSS 124
9.1.3 CSS 的基礎語法 125
9.2 在HTML 中使用CSS 的方法 125
9.2.1 行內樣式 125
9.2.2 內嵌樣式 126
9.2.3 連結樣式 127
9.3 CSS 中的常用樣式 128
9.3.1 使用字型樣式 128
9.3.2 使用文本樣式 131
9.3.3 使用背景樣式 135
9.3.4 設計框線樣式 138
9.3.5 設定列表樣式 141
9.4 新手常見疑難問題 144
9.5 實戰技能訓練營 144
第10 章 JavaScript 和jQuery 146
10.1 認識JavaScript147
10.1.1 什麼是JavaScript147
10.1.2 在HTML 網頁頭中嵌入JavaScript代碼 147
10.2 JavaScript 對象與函式 148
10.2.1 認識對象 148
10.2.2 認識函式 149
10.3 JavaScript 事件150
10.3.1 事件與事件處理概述 150
10.3.2 JavaScript 的常用事件151
10.4 認識jQuery152
10.4.1 jQuery 能做什麼152
10.4.2 jQuery 的配置 153
10.5 jQuery 選擇器 153
10.5.1 jQuery 的工廠函式 153
10.5.2 常見選擇器154
10.6 新手常見疑難問題 155
10.7 實戰技能訓練營156
第11 章 繪製圖形 157
11.1 添加canvas 的步驟158
11.2 繪製基本形狀 158
11.2.1 繪製矩形 159
11.2.2 繪製圓形 159
11.2.3 使用moveTo 與lineTo 繪製直線160
11.2.4 使用bezierCurveTo 繪製貝濟埃曲線 161
11.3 繪製漸變圖形 162
11.3.1 繪製線性漸變 162
11.3.2 繪製徑向漸變 164
11.4 繪製變形圖形 164
11.4.1 繪製平移效果的圖形 164
11.4.2 繪製縮放效果的圖形 165
11.4.3 繪製旋轉效果的圖形 166
11.4.4 繪製組合效果的圖形 167
11.4.5 繪製帶陰影的圖形 168
11.5 使用圖像 169
11.5.1 繪製圖像 169
11.5.2 平鋪圖像 170
11.5.3 裁剪圖像 171
11.6 繪製文字 173
11.7 圖形的保存與恢復 174
11.7.1 保存與恢復狀態174
11.7.2 保存檔案 175
11.8 新手常見疑難問題 176
11.9 實戰技能訓練營176
第12 章 檔案與拖放 177
12.1 選擇檔案 178
12.1.1 選擇單個檔案 178
12.1.2 選擇多個檔案 178
12.2 使用FileReader 接口讀取檔案 179
12.2.1 檢測瀏覽器是否支持FileReader接口 179
12.2.2 FileReader 接口的方法180
12.2.3 使用readAsDataURL 方法預覽圖片 180
12.2.4 使用readAsText 方法讀取文本檔案 181
12.3 使用HTML5 實現檔案的拖放 183
12.3.1 認識檔案拖放的過程 183
12.3.2 瀏覽器支持情況183
12.3.3 在網頁中拖放圖片 184
12.4 在網頁中來回拖放圖片 185
12.5 在網頁中拖放文字 185
12.6 新手常見疑難問題 187
12.7 實戰技能訓練營188
第13 章 地理定位技術 189
13.1 Geolocation API 獲取地理位置 190
13.1.1 地理地位的原理190
13.1.2 獲取定位信息的方法 190
13.1.3 常用地理定位方法 190
13.1.4 判斷瀏覽器是否支持HTML 5 獲取地理位置信息 191
13.1.5 指定緯度和經度坐標 192
13.1.6 獲取當前位置的緯度與經度 193
13.1.7 處理錯誤和拒絕194
13.2 目前瀏覽器對地理定位的支持情況 195
13.3 在網頁中調用Google 地圖 195
13.4 新手常見疑難問題 198
13.5 實戰技能訓練營198
第14 章 離線Web 應用程式 199
14.1 HTML 5 離線Web 套用概述 200
14.2 使用HTML5 離線Web 套用API 200
14.2.1 檢查瀏覽器的支持情況 200
14.2.2 搭建簡單的離線應用程式 200
14.2.3 支持離線行為 201
14.2.4 Manifest 檔案 201
14.2.5 ApplicationCache API 202
14.3 使用HTML 5 離線Web 套用構建套用 204
14.3.1 創建記錄資源的manifest 檔案 204
14.3.2 創建構成界面的HTML 和CSS 204
14.3.3 創建離線的JavaScript204
14.3.4 檢查applicationCache 的支持情況 205
14.3.5 為Update 按鈕添加處理函式 206
14.3.6 添加Storage 功能代碼206
14.3.7 添加離線事件處理程式 206
14.4 新手常見疑難問題 207
14.5 實戰技能訓練營207
第15 章 處理執行緒和伺服器傳送事件 208
15.1 Web Worker 209
15.1.1 Web Worker 概述209
15.1.2 執行緒中常用的變數、函式與類 209
15.1.3 與執行緒進行數據的互動 210
15.2 執行緒嵌套 212
15.2.1 單執行緒嵌套212
15.2.2 多個子執行緒中的數據互動 214
15.3 伺服器傳送事件概述215
15.4 伺服器傳送事件的實現過程 215
15.4.1 檢測瀏覽器是否支持Server-Sent事件 215
15.4.2 使用EventSource 對象216
15.4.3 編寫伺服器端代碼 216
15.5 創建Web Worker 計數器 217
15.6 伺服器傳送事件實戰套用 218
15.7 新手常見疑難問題 219
15.8 實戰技能訓練營220
第16 章 數據存儲和通信技術 221
16.1 認識Web 存儲 222
16.1.1 本地存儲和Cookies 的區別222
16.1.2 Web 存儲方法 222
16.2 使用HTML 5 Web Storage API 222
16.2.1 測試瀏覽器的支持情況 222
16.2.2 使用sessionStorage 方法創建對象 223
16.2.3 使用localStorage 方法創建對象224
16.2.4 Web Storage API 的其他操作 225
16.2.5 使用JSON 對象存取數據 226
16.3 瀏覽器對Web 存儲的支持情況 228
16.4 跨文檔訊息傳輸228
16.4.1 跨文檔訊息傳輸的基本知識 228
16.4.2 跨文檔通信套用測試 229
16.5 WebSockets API 231
16.5.1 什麼是WebSocket API231
16.5.2 WebSockets 通信基礎231
16.5.3 伺服器端使用WebSockets API 232
16.5.4 客戶機端使用WebSockets API 235
16.6 製作簡單的Web 留言本236
16.7 編寫簡單的WebSocket 伺服器 238
16.8 新手常見疑難問題 241
16.9 實戰技能訓練營242
第17 章 回響式網頁設計 243
17.1 回響式網頁設計概述244
17.2 像素和螢幕解析度 245
17.3 視口 245
17.3.1 視口的分類和常用屬性 245
17.3.2 媒體查詢 246
17.4 回響式網頁的布局設計 247
17.4.1 常用布局類型 247
17.4.2 布局的實現方式247
17.4.3 回響式布局的設計與實現 248
17.5 回響式圖片248
17.5.1 使用<picture> 標籤 248
17.5.2 使用CSS 圖片 249
17.6 回響式視頻251
17.7 回響式導航選單251
17.8 回響式表格253
17.8.1 隱藏表格中的列253
17.8.2 滾動表格中的列254
17.8.3 轉換表格中的列256
17.9 新手常見疑難問題 258
17.10 實戰技能訓練營 259
第18 章 回響式開發框架Bootstrap 260
18.1 Bootstrap 概述261
18.1.1 Bootstrap 的特色261
18.1.2 Bootstrap 4 的重大更新 261
18.2 下載Bootstrap 262
18.3 安裝和使用Bootstrap 264
18.3.1 本地安裝Bootstrap 264
18.3.2 初次使用Bootstrap 264
18.4 使用常用組件 265
18.4.1 使用下拉選單 265
18.4.2 使用按鈕組266
18.4.3 使用導航組件 267
18.4.4 綁定導航和下拉選單 269
18.4.5 使用麵包屑導航270
18.4.6 使用廣告屏271
18.4.7 使用card(卡片) 272
18.4.8 使用進度條274
18.4.9 使用模態框277
18.4.10 使用滾動監聽279
18.5 膠囊導航選項卡(Tab 欄) 281
18.6 新手常見疑難問題 283
18.7 實戰技能訓練營284
第19 章 綜合項目1——開發連鎖咖啡回響式網站 285
19.1 網站概述 286
19.1.1 網站結構 286
19.1.2 設計效果 286
19.1.3 設計準備 287
19.2 設計首頁布局 288
19.3 設計可切換導航289
19.4 主體內容 293
19.4.1 設計輪播廣告區293
19.4.2 設計產品推薦區295
19.4.3 設計登錄、註冊按鈕和Logo 296
19.4.4 設計特色展示區296
19.4.5 設計產品生產流程區 298
19.5 設計底部隱藏導航 300
第20 章 綜合項目2——開發房產企業回響式網站 301
20.1 網站概述 302
20.1.1 網站結構 302
20.1.2 設計效果 302
20.1.3 設計準備 303
20.2 設計主頁 303
20.2.1 主頁布局 303
20.2.2 設計導航條304
20.2.3 設計輪播廣告 306
20.2.4 設計功能區308
20.2.5 設計特色展示 309
20.2.6 設計腳註 312
20.3 設計側邊導航欄314
20.4 設計登錄頁316
第21 章 綜合項目3——開發線上視頻娛樂網站 318
21.1 整體布局 319
21.1.1 設計分析 319
21.1.2 排版架構 320
21.2 模組組成 320
21.3 製作步驟 321
21.3.1 製作樣式表321
21.3.2 Logo 與導航選單325
21.3.3 搜尋條326
21.3.4 左側視頻模組 326
21.3.5 評論模組 327
21.3.6 右側熱門推薦 328
21.3.7 底部模組 330
第22 章 綜合項目4——開發企業門戶類網站331
22.1 整體布局 332
22.1.1 設計分析 332
22.1.2 排版架構 333
22.2 模組組成 333
22.3 製作步驟 333
22.3.1 樣式表333
22.3.2 網頁頭部 334
22.3.3 導航選單欄335
22.3.4 中間主體第一欄336
22.3.5 中間主體第二欄339
22.3.6 中間主體第三欄341
22.3.7 中間主體第四欄346
22.3.8 中間主體第五欄350
22.3.9 網頁底部 354