HTML5+CSS3+JavaScript網站開發（全案例微課版）

劉春茂在鄭州輕工業大學主要負責計算機系的畢業生實訓，善於引導學生學習，讓學校所學的知識和社會的需求很好地銜接，同時具有豐富的教學經驗和開發經驗。
曾做項目：電子貨幣交易系統、 B2C 電子商務平台、網上書店和評教系統等，具有很強的實戰經驗。

第1章　認識HTML 5   001
1.1　HTML的基本概念    002
1.2　HTML文件的基本結構   002
1.3　認識HTML 5的基本標記  003
1.4　HTML 5網頁的開發環境  007
1.4.1　使用記事本手工編寫HTML文件   007
1.4.2　使用WebStorm編寫HTML文件   008
1.5　新手常見疑難問題    012
1.6　實戰技能訓練營   013

第2章　設計網頁的文本與段落     014
2.1　標題     015
2.2　設置文字格式    017
2.2.1 文字的字體、字號和顏色  017
2.2.2　文字的粗體、斜體和下劃線   018
2.2.3　文字的上標和下標  019
2.3　設置段落格式    020
2.4　網頁的列表   022
2.4.1　無序列表  022
2.4.2　有序列表  023
2.4.3　自定義列表   024
2.5　新手常見疑難問題    025
2.6　實戰技能訓練營   026

第3章　網頁中的圖像和超鏈接     027
3.1　網頁中的圖像    028
3.1.1　網頁中支持的圖片格式   028
3.1.2　圖像中的路徑  028
3.2　在網頁中插入圖像    030
3.3　編輯網頁中的圖像    031
3.4　認識網頁超鏈接   034
3.5　建立網頁超級鏈接    035
3.5.1　創建超文本鏈接   036
3.5.2　創建圖片鏈接  037
3.5.3　創建下載鏈接  038
3.5.4　使用相對路徑和絕對路徑  038
3.5.5　設置以新窗口顯示超鏈接頁面  039
3.5.6　設置電子郵件鏈接  040
3.6　使用浮動框架iframe    041
3.7　使用書簽鏈接製作電子書閱讀網頁   042
3.8　圖像熱點鏈接    044
3.9　新手常見疑難問題    045
3.10　實戰技能訓練營    046

第4章　表格與<div>標簽     048
4.1　表格的基本結構   049
4.2　創建表格   050
4.3　編輯表格   051
4.3.1　定義表格的邊框類型  051
4.3.2　定義表格的表頭   051
4.3.3　設置表格背景  052
4.3.4　設置單元格的背景  053
4.3.5　合並單元格   054
4.3.6　表格的分組   056
4.3.7　設置單元格的行高與列寬  057
4.4　完整的表格標簽   058
4.5　設置懸浮變色的表格    058
4.6　<div>標簽   061
4.7　<span>標簽    062
4.8　新手常見疑難問題    063
4.9　實戰技能訓練營   063

第5 章　網頁中的表單    065
5.1　表單概述   066
5.2　輸入標簽   067
5.2.1　文本框    067
5.2.2　單選按鈕和復選框   069
5.2.3　按鈕   070
5.3　圖像域和文件域   072
5.4　列表框     073
5.5　表單的高級元素   074
5.6　新手常見疑難問題    078
5.7　實戰技能訓練營   078

第6 章　網頁中的多媒體    079
6.1　audio 標簽概述   080
6.2　在網頁中添加音頻文件   081
6.3　video 標簽   082
6.3.1　認識video 標簽     082
6.3.2　video 標簽的屬性    083
6.3.3　瀏覽器支持video 標簽的情況    084
6.4　在網頁中添加視頻文件   084
6.5　新手常見疑難問題    086
6.6　實戰技能訓練營   086

第7 章　數據存儲Web Storage    088
7.1　認識Web 存儲   089
7.2　使用HTML 5 Web Storage API   089
7.2.1　測試瀏覽器的支持情況    089
7.2.2　使用sessionStorage 方法創建對象    090
7.2.3　使用localStorage 方法創建對象   091
7.2.4　Web Storage API 的其他操作    093
7.2.5　使用JSON 對象存取數據    093
7.3　目前瀏覽器對Web 存儲的支持情況   096
7.4　製作簡單的Web 留言本   096
7.5　新手常見疑難問題    099
7.6　實戰技能訓練營   099

第8 章　認識CSS 樣式表   100
8.1　CSS 概述    101
8.2　創建和鏈接CSS 文件    102
8.3　CSS 中的選擇器    103
8.3.1　標簽選擇器    103
8.3.2　類選擇器   104
8.3.3　ID 選擇器    105
8.3.4　偽類選擇器    106
8.3.5　屬性選擇器    107
8.4　CSS 中的常用樣式   109
8.4.1　使用字體樣式   109
8.4.2　使用文本樣式   112
8.4.3　使用背景樣式   116
8.4.4　設計邊框樣式   119
8.4.5　設置列表樣式   122
8.5　新手常見疑難問題    124
8.6　實戰技能訓練營   125

第9 章　設計圖片、鏈接和菜單的樣式   126
9.1　設計圖片的樣式   127
9.1.1　設置圖片的大小    127
9.1.2　圖片對齊   128
9.1.3　文字環繞圖片   130
9.1.4　圖片與文字的間距   132
9.2　為圖片添加圓角邊框樣式  133
9.3　設計鏈接的樣式   134
9.3.1　設置鏈接樣式   134
9.3.2　定義下劃線樣式    135
9.3.3　定義鏈接背景圖    137
9.3.4　定義鏈接提示信息   137
9.3.5　定義鏈接按鈕樣式   138
9.4　設計菜單的樣式   139
9.4.1　製作動態導航菜單   139
9.4.2　製作多級菜單列表   141
9.5　新手常見疑難問題    143
9.6　實戰技能訓練營   144

第10 章　設計表格和表單的樣式     146
10.1　設計表格的樣式    147
10.1.1　設置表格的顏色    147
10.1.2　設置表格的邊框    148
10.1.3　設置表格邊框的寬度     149
10.1.4　設置表格邊框的顏色     150
10.1.5　設置表格標題的位置     150
10.1.6　隱藏空單元格     151
10.1.7　設置單元格的邊距    152
10.2　設計表單的樣式    153
10.2.1　設置表單字體樣式    153
10.2.2　設置表單邊框樣式    155
10.2.3　設置表單背景樣式    157
10.2.4　設置表單按鈕樣式    158
10.2.5 設置下拉菜單樣式    160
10.3　新手常見疑難問題   160
10.4　實戰技能訓練營    161

第11 章　使用CSS3 佈局網頁版式    163
11.1　認識CSS3 佈局版式   164
11.1.1　將頁面用div 分塊    164
11.1.2　設置各塊位置     164
11.1.3　用CSS 定位版式    165
11.2　固定寬度網頁佈局模式   167
11.2.1　網頁單列佈局模式    167
11.2.2　網頁1-2-1 型佈局模式    170
11.3　自動縮放網頁佈局模式   172
11.3.1　1-2-1 等比例變寬佈局    172
11.3.2　1-2-1 單列變寬佈局   173
11.3.3　1-3-1 單側列寬度固定佈局    174
11.3.4　1-3-1 中間列寬度固定佈局    176
11.4　新手常見疑難問題   178
11.5　實戰技能訓練營    178

第12 章　JavaScript 基礎      180
12.1　JavaScript 入門    181
12.1.1　JavaScript 能做什麽   181
12.1.2　在網頁中嵌入JavaScript 代碼   183
12.1.3　調用外部JavaScript 文件   184
12.1.4　JavaScript 的語法基礎    185
12.1.5　數據類型     186
12.2　JavaScript 中的常量和變量   187
12.3　運算符與表達式    189
12.3.1　運算符     189
12.3.2　表達式     191
12.4　新手常見疑難問題   193
12.5　實戰技能訓練營    194

第13 章　程序控制語句     195
13.1　條件判斷語句   196
13.1.1　簡單if 語句     196
13.1.2　if else 語句    197
13.1.3　if else if 語句     198
13.1.4 if 語句的嵌套     199
13.1.5　switch 語句     200
13.2　循環語句   201
13.2.1　while 循環語句     202
13.2.2　do while 循環語句   203
13.2.3　for 循環語句    204
13.2.4 循環語句的嵌套    206
13.3　跳轉語句   208
13.3.1　break 語句     208
13.3.2　continue 語句    209
13.4　新手常見疑難問題   210
13.5 實戰技能訓練營    211

第14 章　函數的應用     212
14.1　函數的定義    213
14.1.1　聲明式函數定義    213
14.1.2　函數表達式定義    214
14.1.3　函數構造器定義    215
14.2　函數的調用    216
14.3　函數的參數與返回值    218
14.3.1　函數的參數     218
14.3.2　函數的返回值     219
14.4　內置常規函數   220
14.5　JavaScript 中的特殊函數    222
14.5.1　嵌套函數     222
14.5.2　遞歸函數     223
14.5.3　內嵌函數     225
14.6　新手常見疑難問題   225
14.7 實戰技能訓練營    226

第15 章　對象的應用     227
15.1　瞭解對象   228
15.2　創建自定義對象的方法   229
15.2.1 直接定義並創建自定義對象    229
15.2.2　使用Object 對象創建自定義對象   231
15.2.3　使用自定義構造函數創建對象   232
15.3　對象訪問語句   237
15.3.1　for   in 循環語句    237
15.3.2　with 語句     238
15.4　數組對象   239
15.4.1　什麽是數組對象    239
15.4.2　定義數組     239
15.4.3　數組的屬性     241
15.4.4 操作數組元素     242
15.4.5 數組方法     243
15.5　String 對象    246
15.5.1　創建String 對象    246
15.5.2　String 對象的屬性    248
15.5.3　字符串對象的方法    249
15.6　新手常見疑難問題   253
15.7　實戰技能訓練營    253

第16 章　JavaScript 的窗口對象     255
16.1　window 對象    256
16.1.1　window 對象的屬性   256
16.1.2　window 對象的方法   261
16.2　打開與關閉窗口    262
16.2.1　打開窗口     262
16.2.2　關閉窗口     263
16.3　控制窗口   264
16.3.1　移動窗口     265
16.3.2　改變窗口大小     265
16.3.3　獲取窗口歷史記錄    266
16.3.4　窗口定時器     267
16.4　對話框    268
16.4.1　警告對話框     269
16.4.2　確認對話框     270
16.4.3　提示對話框     272
16.5　新手常見疑難問題   273
16.6　實戰技能訓練營    274

第17 章　文檔對象模型（DOM）    275
17.1　DOM 及其技術簡介    276
17.1.1　DOM 簡介     276
17.1.2　基本的DOM 方法    276
17.1.3　網頁中的DOM 模型框架   279
17.2　DOM 模型中的節點    280
17.2.1　元素節點     280
17.2.2　文本節點     281
17.2.3　屬性節點     282
17.3　操作DOM 中的節點    283
17.3.1　訪問節點     283
17.3.2　創建節點     284
17.3.3　插入節點     285
17.3.4　刪除節點     286
17.3.5　復制節點     287
17.3.6　替換節點     288
17.4　innerHTML 屬性    289
17.5　DOM 與CSS    290
17.5.1　改變CSS 樣式     290
17.5.2　使用className 屬性  291
17.6　新手常見疑難問題   292
17.7　實戰技能訓練營    292

第18 章　JavaScript 的事件處理     293
18.1　認識事件與事件處理    294
18.2　事件的調用方式    295
18.3　鼠標相關事件   296
18.4　鍵盤相關事件   300
18.5　表單相關事件   303
18.5.1　獲得焦點與失去焦點事件   303
18.5.2　失去焦點修改事件    304
18.5.3　表單提交與重置事件     305
18.6　拖動相關事件   307
18.6.1　拖放對象事件     307
18.6.2　放置目標事件     307
18.7　新手常見疑難問題   310
18.8　實戰技能訓練營    310

第19 章　文件與拖放     312
19.1　選擇文件   313
19.2　使用FileReader 接口讀取文件   314
19.2.1　檢測瀏覽器是否支持FileReader接口     314
19.2.2　FileReader 接口的方法    314
19.2.3 使用readAsDataURL 方法預覽圖片   315
19.2.4　使用readAsText 方法讀取文本文件   316
19.3　使用HTML 5 實現文件的拖放   318
19.4　在網頁中來回拖放圖片   320
19.5　在網頁中拖放文字   321
19.6　新手常見疑難問題   323
19.7　實戰技能訓練營    324

第20 章　設計流行的響應式網頁     325
20.1　什麽是響應式網頁設計   326
20.2　像素和屏幕分辨率   327
20.3　視口    327
20.3.1　視口的分類和常用屬性    327
20.3.2　媒體查詢     328
20.4　響應式網頁的佈局設計   329
20.4.1　常用佈局類型     329
20.4.2　佈局的實現方式    330
20.4.3　響應式佈局的設計與實現   331
20.5　響應式圖片    332
20.5.1　使用<picture> 標簽   332
20.5.2　使用CSS 圖片     333
20.6　響應式視頻    334
20.7　響應式導航菜單    335
20.8　響應式表格    338
20.8.1　隱藏表格中的列    338
20.8.2　滾動表格中的列    340
20.8.3　轉換表格中的列    342
20.9　流行的響應式開發框架Bootstrap   345
20.10　新手常見疑難問題    346
20.11　實戰技能訓練營    347

第21 章　項目實訓1——開發在線購物網站       348
21.1　整體佈局   349
21.2　主要模塊設計   350
21.2.1　Logo 與導航區     350
21.2.2　banner 與資訊區    351
21.2.3　產品類別區     353
21.2.4　頁腳     354

第22 章　項目實訓2——開發廣告設計宣傳網站     355
22.1　系統分析   356
22.2　系統設計   356
22.3　網頁預覽   357
22.4　項目代碼實現   359
22.4.1　網站首頁頁面代碼    359
22.4.2　關於我們頁面代碼    363
22.4.3　作品欣賞頁面代碼    363
22.4.4　聯系我們頁面代碼    364
22.5　項目總結   365

第23 章　項目實訓3——開發連鎖咖啡響應式網站    366
23.1　網站概述   367
23.2　設計首頁佈局   369
23.3　設計可切換導航    370
23.4　主體內容   375
23.4.1　設計輪播廣告區    375
23.4.2　設計產品推薦區    377
23.4.3　設計登錄註冊和Logo    378
23.4.4　設計特色展示區    379
23.4.5　設計產品生產流程區     380
23.5　設計底部隱藏導航   382