HTML+CSS+JavaScript+Bootstrap漸進(jìn)式Web開發(fā)入門與實(shí)踐

第一部分   HTML 5 CSS
第1章  網(wǎng)站開發(fā)的概念與技術(shù) 2
1.1  網(wǎng)站開發(fā)的基礎(chǔ)概念 2
1.1.1  網(wǎng)站和網(wǎng)頁(yè) 2
1.1.2  網(wǎng)頁(yè)開發(fā)的前端與后端 4
1.1.3  網(wǎng)址的組成 5
1.2  構(gòu)建網(wǎng)站的流程與技術(shù) 8
1.2.1  擬定網(wǎng)站主題 8
1.2.2  規(guī)劃網(wǎng)站架構(gòu)與內(nèi)容 10
1.2.3  制作網(wǎng)頁(yè)工具 11
1.2.4  上傳云端 12
1.3  網(wǎng)站界面的原型構(gòu)建工具 14
1.3.1  網(wǎng)站原型架構(gòu) 14
1.3.2  界面線框與原型工具 15
1.3.3  實(shí)現(xiàn)網(wǎng)站的界面原型 19
第2章  HTML與CSS基礎(chǔ) 31
2.1  學(xué)習(xí)HTML前的準(zhǔn)備工作 31
2.1.1  建立HTML文件 31
2.1.2  自動(dòng)生成HTML 5結(jié)構(gòu)的程序代碼 32
2.2  HTML語(yǔ)法概念與結(jié)構(gòu) 35
2.2.1  HTML的標(biāo)簽類型 35
2.2.2  HTML的組成 36
2.2.3  標(biāo)簽屬性的應(yīng)用 36
2.3  HTML 5文件結(jié)構(gòu)與語(yǔ)義標(biāo)簽 37
2.3.1  語(yǔ)義化的HTML標(biāo)簽 37
2.3.2  HTML 5聲明與編碼設(shè)置 40
2.4  認(rèn)識(shí)CSS基本結(jié)構(gòu) 42
2.4.1  應(yīng)用CSS樣式表 42
2.4.2  CSS基本格式 45
2.4.3  認(rèn)識(shí)CSS選擇器 46
2.4.4  CSS的度量單位 53
2.4.5  CSS的顏色表示法 54
第3章  HTML常用標(biāo)簽 56
3.1  排版相關(guān)的標(biāo)簽 56
3.1.1  瀏覽器呈現(xiàn)網(wǎng)頁(yè)的過程 56
3.1.2  標(biāo)題標(biāo)簽 58
3.1.3  段落和換行標(biāo)簽 59
3.2  項(xiàng)目列表 63
3.2.1  有序列表 63
3.2.2  無序列表 66
3.2.3  定義列表 67
3.3  表格與表單 69
3.3.1  表格 69
3.3.2  表單 71
3.3.3  表單組件 73
3.4  插入圖片與超鏈接 77
3.4.1  插入圖片 77
3.4.2  超鏈接 79
3.4.3  內(nèi)置框架 81
3.5  標(biāo)簽與標(biāo)簽 84 3.5.1  認(rèn)識(shí)標(biāo)簽 84 3.5.2  認(rèn)識(shí)標(biāo)簽 87 3.5.3  給程序代碼加上注釋 88
3.5.4  使用特殊符號(hào)及Emoji字符集 89
第4章  CSS常用語(yǔ)法 92
4.1  文字與段落樣式 92
4.1.1  文字樣式 92
4.1.2  文字段落樣式 94
4.1.3  邊框 97
4.1.4  圖片和文字環(huán)繞 98
4.2  掌握CSS定位 100
4.2.1  網(wǎng)頁(yè)組件的定位 100
4.2.2  立體網(wǎng)頁(yè)的定位 104
4.2.3  好用的calc()函數(shù) 106
第5章  CSS flexbox響應(yīng)式排版 108
5.1  flexbox模型概念 108
5.1.1  認(rèn)識(shí)CSS盒模型 108
5.1.2  認(rèn)識(shí)flexbox 112
5.2  flexbox屬性 114
5.2.1  flex container屬性 114
5.2.2  flex items屬性 122
第6章  善用網(wǎng)絡(luò)資源 133
6.1  圖庫(kù)素材分享平臺(tái) 133
6.1.1  認(rèn)識(shí)CC授權(quán) 133
6.1.2  搜索CC授權(quán)素材 135
6.1.3  Iconfinder-icon圖庫(kù) 137
6.1.4  替網(wǎng)站加入Logo圖標(biāo) 139
6.2  實(shí)用的網(wǎng)頁(yè)應(yīng)用生成器 141
6.2.1  CSS Layout生成器 141
6.2.2  按鈕生成器 146
6.2.3  網(wǎng)站配色 153
第7章  整合練習(xí)——詩(shī)詞展示網(wǎng)頁(yè)的設(shè)計(jì)與實(shí)現(xiàn) 159
7.1  網(wǎng)頁(yè)結(jié)構(gòu)說明 159
7.1.1  網(wǎng)頁(yè)結(jié)構(gòu)圖 159
7.1.2  選擇合適的HTML標(biāo)簽 161
7.2  編寫HTML與CSS程序代碼 162
7.2.1  編寫網(wǎng)頁(yè)結(jié)構(gòu)的HTML語(yǔ)句 162
7.2.2  加入超鏈接 164
7.2.3  加入CSS語(yǔ)法 165
7.2.4  添加偽元素 172
7.2.5  使用圖標(biāo)字體生成社交媒體的圖標(biāo) 173
第二部分   JavaScript語(yǔ)言
第8章  JavaScript基礎(chǔ) 182
8.1  認(rèn)識(shí)JavaScript 182
8.1.1  JavaScript基本概念 182
8.1.2  JavaScript運(yùn)行環(huán)境 184
8.1.3  瀏覽器控制臺(tái) 184
8.1.4  JavaScript程序結(jié)構(gòu) 189
8.2  JavaScript基礎(chǔ)語(yǔ)法 192
8.2.1  JavaScript語(yǔ)法架構(gòu) 192
8.2.2  JavaScript注釋符號(hào) 195
8.2.3  數(shù)據(jù)類型 196
8.3  變量聲明與作用域 201
8.3.1  全局變量與局部變量 201
8.3.2  使用var關(guān)鍵字聲明變量 202
8.3.3  使用var聲明的變量的作用域 203
8.3.4  使用let關(guān)鍵字聲明變量 205
8.3.5  使用const關(guān)鍵字聲明常數(shù) 206
8.3.6  變量名稱的限制 206
第9章  函數(shù)與作用域 210
9.1  自定義函數(shù) 210
9.1.1  函數(shù)的定義與調(diào)用 210
9.1.2  函數(shù)參數(shù) 211
9.1.3  函數(shù)返回值 213
9.2  函數(shù)的多種用法 214
9.2.1  函數(shù)聲明 215
9.2.2  函數(shù)表達(dá)式 216
9.2.3  對(duì)象與this關(guān)鍵字 218
9.2.4  即調(diào)函數(shù) 222
 
第10章  JavaScript操控DOM元素 225
10.1  DOM對(duì)象的方法與屬性 225
10.1.1  獲取對(duì)象信息 225
10.1.2  處理對(duì)象節(jié)點(diǎn) 227
10.1.3  屬性的讀取與設(shè)置 229
10.2  DOM對(duì)象的操作 230
10.2.1  window對(duì)象 230
10.2.2  DOM集合 231
10.3  DOM風(fēng)格樣式 233
10.3.1  查詢?cè)貥邮?233
10.3.2  設(shè)置組件樣式 235
第11章  前端數(shù)據(jù)存儲(chǔ) 237
11.1  認(rèn)識(shí)Web Storage 237
11.1.1  Web Storage的概念 237
11.1.2  檢測(cè)瀏覽器是否支持Web storage 238
11.2  localStorage和SessionStorage 238
11.2.1  存取localStorage 238
11.2.2  刪除localStorage 242
11.2.3  存取sessionStorage 244
11.3  IndexedDB數(shù)據(jù)庫(kù) 245
11.3.1  IndexedDB的重要概念 245
11.3.2  IndexedDB的基本操作 246
11.3.3  讀取數(shù)據(jù) 254
11.3.4  刪除數(shù)據(jù) 256
11.3.5  清空數(shù)據(jù) 256
第12章  整合練習(xí)——個(gè)人通訊錄的實(shí)現(xiàn) 257
12.1  網(wǎng)頁(yè)架構(gòu)說明 257
12.1.1  網(wǎng)頁(yè)功能架構(gòu)圖及線框圖 257
12.1.2  CSS Sprites 258
12.2  IndexedDB的CURD 263
12.2.1  創(chuàng)建數(shù)據(jù)庫(kù)、存儲(chǔ)對(duì)象以及啟動(dòng)事務(wù)處理 263
12.2.2  設(shè)置事件的處理函數(shù) 265
12.2.3  添加聯(lián)絡(luò)人與添加完成 265
12.2.4  動(dòng)態(tài)產(chǎn)生數(shù)據(jù)列表 268
12.2.5  修改與刪除聯(lián)絡(luò)人 270
12.2.6  清空數(shù)據(jù)與刪除數(shù)據(jù)庫(kù) 273
12.2.7  阻止事件傳遞與默認(rèn)行為 275
第三部分   善用前端框架
第13章  響應(yīng)式網(wǎng)頁(yè)框架——Bootstrap 280
13.1  認(rèn)識(shí)Bootstrap 280
13.1.1  為什么要使用Bootstrap 280
13.1.2  下載Bootstrap 281
13.1.3  RWD的設(shè)計(jì)理念 283
13.2  Bootstrap排版 284
13.2.1  斷點(diǎn)與容器 284
13.2.2  了解網(wǎng)格系統(tǒng) 287
13.2.3  視口與媒體查詢 291
13.3  Bootstrap的樣式 293
13.3.1  Bootstrap通用顏色 293
13.3.2  Bootstrap間距 294
13.3.3  Bootstrap寬度與高度 298
13.3.4  Bootstrap文字 299
13.4  圖片與表格 302
13.4.1  響應(yīng)式圖片 302
13.4.2  邊框圓角 304
13.4.3  建立Bootstrap表格 306
第14章  Bootstrap擴(kuò)展組件庫(kù) 310
14.1  導(dǎo)航與菜單 310
14.1.1  導(dǎo)航欄 310
14.1.2  折疊組件 311
14.1.3  項(xiàng)目列表 314
14.2  表單與按鈕 317
14.2.1  表單控制組件 317
14.2.2  表單布局 318
14.3  輪播組件Carousel 320
14.3.1  基本的輪播效果 321
14.3.2  利用JavaScript控制輪播 326
第15章  PWA實(shí)現(xiàn)——“我的記賬本”Web APP 329
15.1  實(shí)現(xiàn)“我的記賬本”網(wǎng)頁(yè) 329
15.1.1  “我的記賬本”網(wǎng)頁(yè)功能與界面 329
15.1.2  下拉菜單 331
15.1.3  按鈕組 334
15.1.4  互動(dòng)窗口 334
15.1.5  indexedDB關(guān)鍵字查詢 336
15.1.6  善用Bootstrap Icons制作小圖標(biāo) 337
15.2  將網(wǎng)頁(yè)轉(zhuǎn)換成PWA 341
15.2.1  什么是PWA 342
15.2.2  制作各種尺寸的APP圖標(biāo) 343
15.2.3  將網(wǎng)頁(yè)變成PWA 344