HTML5+CSS3 Web前端開發與實例教程

目    錄

第1章  Web前端開發概述 1

1.1  Web前端開發職責 1

1.2  Web前端開發相關概念 2

1.3  Web前端開發相關技術 3

1.3.1  Web標準 3

1.3.2  HTML 4

1.3.3  CSS 4

1.3.4  JavaScript 5

1.4  Web前端開發工具 5

1.4.1  代碼編輯工具：VSCode 6

1.4.2  代碼運行工具：瀏覽器 8

1.4.3  開發者工具 9

1.4.4  人工智能輔助編程工具 10

1.5  網站設計與開發流程 11

1.6  實戰案例：網頁顯示“社會主義核心價值觀” 12

1.7  本章小結 13

第2章  HTML5基礎 14

2.1  HTML5語法基礎 14

2.1.1  HTML文檔結構 14

2.1.2  HTML標簽語法 17

2.1.3  HTML註釋 18

2.2  文本控制標簽 19

2.2.1  標題標簽 19

2.2.2  段落標簽 20

2.2.3  換行標簽 20

2.2.4  文本格式化標簽 21

2.2.5  特殊字符 22

2.3  圖像標簽 23

2.3.1  網頁常用圖像格式 23

2.3.2  圖像標簽的使用 24

2.3.3  相對路徑與絕對路徑 26

2.4  超鏈接標簽 27

2.4.1  文本鏈接 27

2.4.2  圖像鏈接 28

2.4.3  書簽（錨點）鏈接 28

2.4.4  其他鏈接 30

2.5  列表 30

2.5.1  有序列表 31

2.5.2  無序列表 32

2.5.3  定義列表 34

2.5.4  嵌套列表 35

2.6  表格 36

2.6.1  表格結構 36

2.6.2  表格標簽 37

2.7  視頻和音頻標簽 41

2.7.1  視頻標簽 41

2.7.2  音頻標簽 42

2.8  其他標簽 42

2.8.1  預格式化標簽 42

2.8.2  水平線標簽 43

2.8.3  行內容器標簽 43

2.9  實戰案例：“大學生參軍網站”兵役登記頁面 44

2.10  本章小結 46

第3章  HTML5頁面元素和屬性 47

3.1  文檔結構標簽 47

3.1.1  <header>標簽 47

3.1.2  <footer>標簽 49

3.1.3  <article>標簽 50

3.1.4  <section>標簽 51

3.1.5  <aside>標簽 53

3.1.6  <nav>標簽 53

3.1.7  <figure>和<figcaption>標簽 54

3.1.8  <main>標簽 55

3.2  交互元素 55

3.2.1  <progress>標簽 55

3.2.2  <meter>標簽 56

3.2.3  <details>標簽 57

3.3  文本層次語義標簽 58

3.3.1  <cite>標簽 58

3.3.2  <mark>標簽 59

3.3.3  <time>標簽 60

3.4  全局屬性 61

3.5  實戰案例：“大學生參軍網站”頁面結構 62

3.6  本章小結 64

第4章  表單 65

4.1  表單概述 65

4.2  <form>標簽 67

4.3  <input>標簽 68

4.3.1  單行文本框 69

4.3.2  密碼框 69

4.3.3  文件域 70

4.3.4  單選按鈕和復選框 71

4.3.5  隱藏域 73

4.3.6  按鈕 73

4.3.7  HTML5新增輸入元素 76

4.4  <datalist>標簽 78

4.5  <label>標簽 79

4.6  選擇列表標簽 80

4.7  多行文本框標簽 83

4.8  表單常用屬性 84

4.9  實戰案例：“大學生參軍網站”網上咨詢表單 86

4.10  本章小結 88

第5章  CSS3基礎 89

5.1  CSS概述 89

5.2  CSS語法規則 90

5.3  CSS樣式的引入方法 91

5.3.1  行內樣式表 91

5.3.2  內部樣式表 92

5.3.3  外部樣式表 93

5.4  CSS基本選擇器 94

5.4.1  標簽選擇器 94

5.4.2  ID選擇器 95

5.4.3  類選擇器 95

5.4.4  通用選擇器 97

5.5  實戰案例：“大學生參軍網站”公共樣式表製作 97

5.6  本章小結 98

第6章  CSS3修飾頁面元素 99

6.1  CSS字體樣式 99

6.1.1  字體粗細屬性 99

6.1.2  字體風格屬性 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  文本水平對齊屬性 110

6.2.4  首行縮進屬性 111

6.2.5  文本修飾屬性 111

6.2.6  字符間距屬性 112

6.2.7  字間距屬性 113

6.2.8  字母大小寫屬性 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  實戰案例：“大學生參軍網站”在線咨詢頁面 123

6.7  本章小結 126

第7章  CSS3高級選擇器 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  偽類選擇器 134

7.4  偽元素選擇器 136

7.5  CSS三大特性 138

7.6  本章小結 141

第8章  CSS3盒子模型 142

8.1  盒子模型概述 142

8.1.1  認識盒子模型 142

8.1.2  <div>標簽 144

8.2  盒子模型的相關屬性 144

8.2.1  內容區域的寬度和高度 144

8.2.2  邊框 145

8.2.3  內邊距 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  背景復合屬性 164

8.5.9  CSS精靈圖 165

8.6  實戰案例：“大學生參軍網站”登錄頁面 166

8.7  本章小結 169

第9章  浮動與定位 170

9.1  標準文檔流 170

9.2  元素的分類 171

9.2.1  塊級元素、行內元素與行內塊元素 171

9.2.2  元素的類型轉換 172

9.3  元素的浮動 173

9.3.1  設置浮動 174

9.3.2  清除浮動 176

9.4  元素的定位 180

9.4.1  定位的概念 180

9.4.2  定位屬性 181

9.4.3  靜態定位 181

9.4.4  相對定位 182

9.4.5  絕對定位 183

9.4.6  固定定位 186

9.4.7  粘性定位 187

9.4.8  層疊等級屬性 188

9.5  實戰案例：“大學生參軍網站”輪播圖效果 190

9.6  本章小結 192

第10章  CSS3高級應用 193

10.1  變換 193

10.1.1  旋轉 194

10.1.2  傾斜 195

10.1.3  縮放 196

10.1.4  平移 197

10.1.5  變換原點 198

10.2  過渡 200

10.3  動畫 202

10.4  實戰案例：“大學生參軍網站”CSS3高級應用 205

10.5  本章小結 208

第11章  網頁佈局 209

11.1  網頁佈局概述 209

11.1.1  網頁佈局的概念 209

11.1.2  網頁佈局的流程 210

11.1.3  常見的網頁佈局方法 211

11.2  網頁佈局命名規範 211

11.3  常見佈局的實現 212

11.3.1  單列佈局 212

11.3.2  兩列常規佈局 214

11.3.3  三列常規佈局 216

11.3.4  兩列自適應等高佈局 217

11.3.5  三列自適應佈局 219

11.4  實戰案例：“大學生參軍網站”首頁主體部分 223

11.5  本章小結 225

第12章  Flex佈局 226

12.1  Flex佈局概述 226

12.2  Flex佈局相關概念 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  項目屬性 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  實戰案例：“大學生參軍網站”導航條 242

12.6  本章小結 244

第13章  Grid佈局 245

13.1  Grid佈局概述 245

13.2  Grid佈局相關概念 246

13.3  容器屬性 246

13.3.1  display屬性 247

13.3.2  劃分網格 248

13.3.3  行間隔和列間隔 252

13.3.4  項目對齊方式 253

13.4  項目屬性 255

13.4.1  grid-column和grid-row屬性 255

13.4.2  grid-area屬性 257

13.5  實戰案例：“大學生參軍網站”視頻展播列表 258

13.6  本章小結 260

第14章  Web前端項目綜合實踐——文創商城 261

14.1  項目概述 261

14.2  需求分析 262

14.3  原型設計 262

14.4  公共部分的設計與實現 265

14.4.1  重置樣式 265

14.4.2  頁面頭部 265

14.4.3  頁面底部 268

14.4.4  懸浮側邊欄 270

14.5  首頁的設計與實現 271

14.5.1  甄選好物版塊 271

14.5.2  國博文房版塊 274

14.6  商品列表頁的設計與實現 277

14.6.1  商品類型篩選 277

14.6.2  分頁導航 278

14.7  商品詳情頁的設計與實現 279

14.8  本章小結 283