HTML5 Web 開發 (全案例微課版)

劉輝，主要負責網頁設計、網站開發和Android開發課程，擅長HTML5、CSS3、JavaScript、jQuery技術，一直負責畢業班的實訓工作，在移動終端軟件開發方面有多年的開發經驗，具有很強的實戰經驗。

目 錄
第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　超鏈接中的URL     038
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　認識JavaScript     147
10.1.1　什麽是JavaScript     147
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　認識jQuery     152
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　創建離線的JavaScript     204
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 API     231
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