HTML5+CSS3 Web前端開(kāi)發(fā)與實(shí)例教程

第1章  Web前端開(kāi)發(fā)概述 1
1.1  Web前端開(kāi)發(fā)職責(zé) 1
1.2  Web前端開(kāi)發(fā)相關(guān)概念 2
1.3  Web前端開(kāi)發(fā)相關(guān)技術(shù) 3
1.3.1  Web標(biāo)準(zhǔn) 3
1.3.2  HTML 4
1.3.3  CSS 4
1.3.4  JavaScript 5
1.4  Web前端開(kāi)發(fā)工具 5
1.4.1  代碼編輯工具：VSCode 6
1.4.2  代碼運(yùn)行工具：瀏覽器 8
1.4.3  開(kāi)發(fā)者工具 9
1.4.4  人工智能輔助編程工具 10
1.5  網(wǎng)站設(shè)計(jì)與開(kāi)發(fā)流程 11
1.6  實(shí)戰(zhàn)案例：網(wǎng)頁(yè)顯示“社會(huì)主義核心價(jià)值觀” 12
1.7  本章小結(jié) 13
第2章  HTML5基礎(chǔ) 14
2.1  HTML5語(yǔ)法基礎(chǔ) 14
2.1.1  HTML文檔結(jié)構(gòu) 14
2.1.2  HTML標(biāo)簽語(yǔ)法 17
2.1.3  HTML注釋 18
2.2  文本控制標(biāo)簽 19
2.2.1  標(biāo)題標(biāo)簽 19
2.2.2  段落標(biāo)簽 20
2.2.3  換行標(biāo)簽 20
2.2.4  文本格式化標(biāo)簽 21
2.2.5  特殊字符 22
2.3  圖像標(biāo)簽 23
2.3.1  網(wǎng)頁(yè)常用圖像格式 23
2.3.2  圖像標(biāo)簽的使用 24
2.3.3  相對(duì)路徑與絕對(duì)路徑 26
2.4  超鏈接標(biāo)簽 27
2.4.1  文本鏈接 27
2.4.2  圖像鏈接 28
2.4.3  書(shū)簽（錨點(diǎn)）鏈接 28
2.4.4  其他鏈接 30
2.5  列表 30
2.5.1  有序列表 31
2.5.2  無(wú)序列表 32
2.5.3  定義列表 34
2.5.4  嵌套列表 35
2.6  表格 36
2.6.1  表格結(jié)構(gòu) 36
2.6.2  表格標(biāo)簽 37
2.7  視頻和音頻標(biāo)簽 41
2.7.1  視頻標(biāo)簽 41
2.7.2  音頻標(biāo)簽 42
2.8  其他標(biāo)簽 42
2.8.1  預(yù)格式化標(biāo)簽 42
2.8.2  水平線標(biāo)簽 43
2.8.3  行內(nèi)容器標(biāo)簽 43
2.9  實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”兵役登記頁(yè)面 44
2.10  本章小結(jié) 46
第3章  HTML5頁(yè)面元素和屬性 47
3.1  文檔結(jié)構(gòu)標(biāo)簽 47
3.1.1  標(biāo)簽 47
3.1.2  標(biāo)簽 49
3.1.3  標(biāo)簽 50
3.1.4  標(biāo)簽 51
3.1.5  標(biāo)簽 53
3.1.6  標(biāo)簽 53
3.1.7  和標(biāo)簽 54
3.1.8  標(biāo)簽 55
3.2  交互元素 55
3.2.1  標(biāo)簽 55
3.2.2  標(biāo)簽 56
3.2.3  標(biāo)簽 57
3.3  文本層次語(yǔ)義標(biāo)簽 58
3.3.1  標(biāo)簽 58
3.3.2  標(biāo)簽 59
3.3.3  標(biāo)簽 60
3.4  全局屬性 61
3.5  實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”頁(yè)面結(jié)構(gòu) 62
3.6  本章小結(jié) 64
第4章  表單 65
4.1  表單概述 65
4.2  標(biāo)簽 67
4.3  標(biāo)簽 68
4.3.1  單行文本框 69
4.3.2  密碼框 69
4.3.3  文件域 70
4.3.4  單選按鈕和復(fù)選框 71
4.3.5  隱藏域 73
4.3.6  按鈕 73
4.3.7  HTML5新增輸入元素 76
4.4  標(biāo)簽 78
4.5  標(biāo)簽 79
4.6  選擇列表標(biāo)簽 80
4.7  多行文本框標(biāo)簽 83
4.8  表單常用屬性 84
4.9  實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”網(wǎng)上咨詢(xún)表單 86
4.10  本章小結(jié) 88
第5章  CSS3基礎(chǔ) 89
5.1  CSS概述 89
5.2  CSS語(yǔ)法規(guī)則 90
5.3  CSS樣式的引入方法 91
5.3.1  行內(nèi)樣式表 91
5.3.2  內(nèi)部樣式表 92
5.3.3  外部樣式表 93
5.4  CSS基本選擇器 94
5.4.1  標(biāo)簽選擇器 94
5.4.2  ID選擇器 95
5.4.3  類(lèi)選擇器 95
5.4.4  通用選擇器 97
5.5  實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”公共樣式表制作 97
5.6  本章小結(jié) 98
第6章  CSS3修飾頁(yè)面元素 99
6.1  CSS字體樣式 99
6.1.1  字體粗細(xì)屬性 99
6.1.2  字體風(fēng)格屬性 100
6.1.3  字體大小屬性 101
6.1.4  字體族屬性 103
6.1.5  字體屬性 106
6.2  CSS文本樣式 107
6.2.1  行高屬性 107
6.2.2  顏色屬性 109
6.2.3  文本水平對(duì)齊屬性 110
6.2.4  首行縮進(jìn)屬性 111
6.2.5  文本修飾屬性 111
6.2.6  字符間距屬性 112
6.2.7  字間距屬性 113
6.2.8  字母大小寫(xiě)屬性 114
6.2.9  文本陰影效果屬性 115
6.3  CSS表格樣式 116
6.4  CSS表單樣式 118
6.4.1  單行文本框美化 119
6.4.2  按鈕美化 120
6.4.3  下拉列表美化 120
6.5  CSS列表樣式 122
6.6  實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”在線咨詢(xún)頁(yè)面 123
6.7  本章小結(jié) 126
第7章  CSS3高級(jí)選擇器 127
7.1  組合選擇器 127
7.1.1  交集選擇器 127
7.1.2  并集選擇器 128
7.1.3  后代選擇器 129
7.1.4  子元素選擇器 130
7.1.5  相鄰兄弟選擇器 131
7.1.6  通用兄弟選擇器 132
7.2  屬性選擇器 133
7.3  偽類(lèi)選擇器 134
7.4  偽元素選擇器 136
7.5  CSS三大特性 138
7.6  本章小結(jié) 141
第8章  CSS3盒子模型 142
8.1  盒子模型概述 142
8.1.1  認(rèn)識(shí)盒子模型 142
8.1.2  標(biāo)簽 144
8.2  盒子模型的相關(guān)屬性 144
8.2.1  內(nèi)容區(qū)域的寬度和高度 144
8.2.2  邊框 145
8.2.3  內(nèi)邊距 152
8.2.4  外邊距 153
8.3  陰影 155
8.4  box-sizing 156
8.5  背景屬性 158
8.5.1  背景顏色 158
8.5.2  背景圖像 158
8.5.3  圖像平鋪方式 158
8.5.4  背景圖像位置 160
8.5.5  背景圖像固定 161
8.5.6  背景圖像大小 161
8.5.7  背景裁剪 163
8.5.8  背景復(fù)合屬性 164
8.5.9  CSS精靈圖 165
8.6  實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”登錄頁(yè)面 166
8.7  本章小結(jié) 169
第9章  浮動(dòng)與定位 170
9.1  標(biāo)準(zhǔn)文檔流 170
9.2  元素的分類(lèi) 171
9.2.1  塊級(jí)元素、行內(nèi)元素與行內(nèi)塊元素 171
9.2.2  元素的類(lèi)型轉(zhuǎn)換 172
9.3  元素的浮動(dòng) 173
9.3.1  設(shè)置浮動(dòng) 174
9.3.2  清除浮動(dòng) 176
9.4  元素的定位 180
9.4.1  定位的概念 180
9.4.2  定位屬性 181
9.4.3  靜態(tài)定位 181
9.4.4  相對(duì)定位 182
9.4.5  絕對(duì)定位 183
9.4.6  固定定位 186
9.4.7  粘性定位 187
9.4.8  層疊等級(jí)屬性 188
9.5  實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”輪播圖效果 190
9.6  本章小結(jié) 192
第10章  CSS3高級(jí)應(yīng)用 193
10.1  變換 193
10.1.1  旋轉(zhuǎn) 194
10.1.2  傾斜 195
10.1.3  縮放 196
10.1.4  平移 197
10.1.5  變換原點(diǎn) 198
10.2  過(guò)渡 200
10.3  動(dòng)畫(huà) 202
10.4  實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”CSS3高級(jí)應(yīng)用 205
10.5  本章小結(jié) 208
第11章  網(wǎng)頁(yè)布局 209
11.1  網(wǎng)頁(yè)布局概述 209
11.1.1  網(wǎng)頁(yè)布局的概念 209
11.1.2  網(wǎng)頁(yè)布局的流程 210
11.1.3  常見(jiàn)的網(wǎng)頁(yè)布局方法 211
11.2  網(wǎng)頁(yè)布局命名規(guī)范 211
11.3  常見(jiàn)布局的實(shí)現(xiàn) 212
11.3.1  單列布局 212
11.3.2  兩列常規(guī)布局 214
11.3.3  三列常規(guī)布局 216
11.3.4  兩列自適應(yīng)等高布局 217
11.3.5  三列自適應(yīng)布局 219
11.4  實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”首頁(yè)主體部分 223
11.5  本章小結(jié) 225
第12章  Flex布局 226
12.1  Flex布局概述 226
12.2  Flex布局相關(guān)概念 227
12.3  容器屬性 227
12.3.1  display屬性 228
12.3.2  flex-direction屬性 228
12.3.3  flex-wrap屬性 230
12.3.4  justify-content屬性 232
12.3.5  align-items屬性 233
12.3.6  align-content屬性 235
12.4  項(xiàng)目屬性 236
12.4.1  order屬性 236
12.4.2  flex-grow屬性 237
12.4.3  flex-shrink屬性 239
12.4.4  flex-basis屬性 240
12.4.5  flex屬性 241
12.5  實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”導(dǎo)航條 242
12.6  本章小結(jié) 244
第13章  Grid布局 245
13.1  Grid布局概述 245
13.2  Grid布局相關(guān)概念 246
13.3  容器屬性 246
13.3.1  display屬性 247
13.3.2  劃分網(wǎng)格 248
13.3.3  行間隔和列間隔 252
13.3.4  項(xiàng)目對(duì)齊方式 253
13.4  項(xiàng)目屬性 255
13.4.1  grid-column和grid-row屬性 255
13.4.2  grid-area屬性 257
13.5  實(shí)戰(zhàn)案例：“大學(xué)生參軍網(wǎng)站”視頻展播列表 258
13.6  本章小結(jié) 260
第14章  Web前端項(xiàng)目綜合實(shí)踐——文創(chuàng)商城 261
14.1  項(xiàng)目概述 261
14.2  需求分析 262
14.3  原型設(shè)計(jì) 262
14.4  公共部分的設(shè)計(jì)與實(shí)現(xiàn) 265
14.4.1  重置樣式 265
14.4.2  頁(yè)面頭部 265
14.4.3  頁(yè)面底部 268
14.4.4  懸浮側(cè)邊欄 270
14.5  首頁(yè)的設(shè)計(jì)與實(shí)現(xiàn) 271
14.5.1  甄選好物版塊 271
14.5.2  國(guó)博文房版塊 274
14.6  商品列表頁(yè)的設(shè)計(jì)與實(shí)現(xiàn) 277
14.6.1  商品類(lèi)型篩選 277
14.6.2  分頁(yè)導(dǎo)航 278
14.7  商品詳情頁(yè)的設(shè)計(jì)與實(shí)現(xiàn) 279
14.8  本章小結(jié) 283