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

第一部分   HTML 5 CSS
第1章  網(wǎng)站開發(fā)的概念與技術(shù) 2
1.1  網(wǎng)站開發(fā)的基礎(chǔ)概念 2
1.1.1  網(wǎng)站和網(wǎng)頁 2
1.1.2  網(wǎng)頁開發(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)頁工具 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  實現(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  自動生成HTML 5結(jié)構(gòu)的程序代碼 32
2.2  HTML語法概念與結(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)與語義標(biāo)簽 37
2.3.1  語義化的HTML標(biāo)簽 37
2.3.2  HTML 5聲明與編碼設(shè)置 40
2.4  認(rèn)識CSS基本結(jié)構(gòu) 42
2.4.1  應(yīng)用CSS樣式表 42
2.4.2  CSS基本格式 45
2.4.3  認(rèn)識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)頁的過程 56
3.1.2  標(biāo)題標(biāo)簽 58
3.1.3  段落和換行標(biāo)簽 59
3.2  項目列表 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)識標(biāo)簽 84 3.5.2  認(rèn)識標(biāo)簽 87 3.5.3  給程序代碼加上注釋 88
3.5.4  使用特殊符號及Emoji字符集 89
第4章  CSS常用語法 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)頁組件的定位 100
4.2.2  立體網(wǎng)頁的定位 104
4.2.3  好用的calc()函數(shù) 106
第5章  CSS flexbox響應(yīng)式排版 108
5.1  flexbox模型概念 108
5.1.1  認(rèn)識CSS盒模型 108
5.1.2  認(rèn)識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  圖庫素材分享平臺 133
6.1.1  認(rèn)識CC授權(quán) 133
6.1.2  搜索CC授權(quán)素材 135
6.1.3  Iconfinder-icon圖庫 137
6.1.4  替網(wǎng)站加入Logo圖標(biāo) 139
6.2  實用的網(wǎng)頁應(yīng)用生成器 141
6.2.1  CSS Layout生成器 141
6.2.2  按鈕生成器 146
6.2.3  網(wǎng)站配色 153
第7章  整合練習(xí)——詩詞展示網(wǎng)頁的設(shè)計與實現(xiàn) 159
7.1  網(wǎng)頁結(jié)構(gòu)說明 159
7.1.1  網(wǎng)頁結(jié)構(gòu)圖 159
7.1.2  選擇合適的HTML標(biāo)簽 161
7.2  編寫HTML與CSS程序代碼 162
7.2.1  編寫網(wǎng)頁結(jié)構(gòu)的HTML語句 162
7.2.2  加入超鏈接 164
7.2.3  加入CSS語法 165
7.2.4  添加偽元素 172
7.2.5  使用圖標(biāo)字體生成社交媒體的圖標(biāo) 173
第二部分   JavaScript語言
第8章  JavaScript基礎(chǔ) 182
8.1  認(rèn)識JavaScript 182
8.1.1  JavaScript基本概念 182
8.1.2  JavaScript運行環(huán)境 184
8.1.3  瀏覽器控制臺 184
8.1.4  JavaScript程序結(jié)構(gòu) 189
8.2  JavaScript基礎(chǔ)語法 192
8.2.1  JavaScript語法架構(gòu) 192
8.2.2  JavaScript注釋符號 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ù)表達式 216
9.2.3  對象與this關(guān)鍵字 218
9.2.4  即調(diào)函數(shù) 222
 
第10章  JavaScript操控DOM元素 225
10.1  DOM對象的方法與屬性 225
10.1.1  獲取對象信息 225
10.1.2  處理對象節(jié)點 227
10.1.3  屬性的讀取與設(shè)置 229
10.2  DOM對象的操作 230
10.2.1  window對象 230
10.2.2  DOM集合 231
10.3  DOM風(fēng)格樣式 233
10.3.1  查詢元素樣式 233
10.3.2  設(shè)置組件樣式 235
第11章  前端數(shù)據(jù)存儲 237
11.1  認(rèn)識Web Storage 237
11.1.1  Web Storage的概念 237
11.1.2  檢測瀏覽器是否支持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ù)庫 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í)——個人通訊錄的實現(xiàn) 257
12.1  網(wǎng)頁架構(gòu)說明 257
12.1.1  網(wǎng)頁功能架構(gòu)圖及線框圖 257
12.1.2  CSS Sprites 258
12.2  IndexedDB的CURD 263
12.2.1  創(chuàng)建數(shù)據(jù)庫、存儲對象以及啟動事務(wù)處理 263
12.2.2  設(shè)置事件的處理函數(shù) 265
12.2.3  添加聯(lián)絡(luò)人與添加完成 265
12.2.4  動態(tài)產(chǎn)生數(shù)據(jù)列表 268
12.2.5  修改與刪除聯(lián)絡(luò)人 270
12.2.6  清空數(shù)據(jù)與刪除數(shù)據(jù)庫 273
12.2.7  阻止事件傳遞與默認(rèn)行為 275
第三部分   善用前端框架
第13章  響應(yīng)式網(wǎng)頁框架——Bootstrap 280
13.1  認(rèn)識Bootstrap 280
13.1.1  為什么要使用Bootstrap 280
13.1.2  下載Bootstrap 281
13.1.3  RWD的設(shè)計理念 283
13.2  Bootstrap排版 284
13.2.1  斷點與容器 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擴展組件庫 310
14.1  導(dǎo)航與菜單 310
14.1.1  導(dǎo)航欄 310
14.1.2  折疊組件 311
14.1.3  項目列表 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實現(xiàn)——“我的記賬本”Web APP 329
15.1  實現(xiàn)“我的記賬本”網(wǎng)頁 329
15.1.1  “我的記賬本”網(wǎng)頁功能與界面 329
15.1.2  下拉菜單 331
15.1.3  按鈕組 334
15.1.4  互動窗口 334
15.1.5  indexedDB關(guān)鍵字查詢 336
15.1.6  善用Bootstrap Icons制作小圖標(biāo) 337
15.2  將網(wǎng)頁轉(zhuǎn)換成PWA 341
15.2.1  什么是PWA 342
15.2.2  制作各種尺寸的APP圖標(biāo) 343
15.2.3  將網(wǎng)頁變成PWA 344