商品描述
基於工業和信息化部1+X職業技能等級證書《Web前端開發職業技能等級標準》（初級），本書以靜態網頁製作所需的HTML5及CSS3語法為主要內容，包括10個項目，分別為開發前的準備、HTML基礎、使用CSS 基本選擇器美化頁面、使用 CSS 高級選擇器美化頁面、盒子模型、表格和表單、浮動和定位、Flex 佈局、過渡和動畫、多媒體應用。通過學習本書，學生能夠掌握網頁製作開發工具的使用方法、開發流程和實用技能，為自己的職業發展打下堅實的基礎。
目錄大綱
項目1 開發前的準備 1
1.1 Web前端技術簡介 1
1.1.1 Web前端開發職業技能等級標準 2
1.1.2 什麽是全棧工程師 2
1.1.3 哪些人適合學Web前端 2
1.1.4 W3C組織與W3C標準 3
1.2 認識網頁 3
1.2.1 網頁與網站 3
1.2.2 網頁的構成要素 4
1.3 網站工作原理 4
任務1-1 使用瀏覽器訪問課程網站 5
任務1-2 使用域名訪問課程網站 6
1.4 常用開發工具簡介 7
任務1-3 安裝Dreamweaver 10
任務1-4 安裝HBuilderX 12
1.5 創建第一個HTML頁面 13
任務1-5 使用Dreamweaver創建第一個HTML頁面 13
任務1-6 使用HBuilderX創建第一個HTML頁面 17
1.6 小結 18
1.7 作業 18
項目2 HTML基礎 20
2.1 HTML簡介 21
2.2 HTML頁面的基本結構 21
2.3 HTML語法規則 24
2.4 認識更多語義化標簽 26
2.4.1 文檔結構標簽 26
2.4.2 ＜div＞標簽 29
任務2-1 使用語義化標簽構建HTML頁面 29
2.4.3 常用的文本標簽 30
2.4.4 鏈接和錨點 38
任務2-2 製作常用鏈接 42
任務2-3 使用錨點鏈接 44
2.5 小結 49
2.6 作業 49
項目3 使用CSS基本選擇器美化頁面 51
3.1 CSS簡介 51
3.1.1 CSS的來源 52
3.1.2 CSS的發展歷程 52
3.1.3 CSS的優點 52
3.2 CSS的基本語法 53
3.3 基本選擇器 54
3.3.1 標簽選擇器 54
任務3-1 使用標簽選擇器 56
3.3.2 id選擇器 57
3.3.3 類選擇器 59
任務3-2 使用多個類選擇器 60
3.3.4 字體屬性 61
任務3-3 單行文字的垂直居中 67
任務3-4 字體綜合練習 69
任務3-5 文字排版控制 72
3.3.5 自定義字體 75
任務3-6 使用自定義字體 75
3.3.6 偽類選擇器 77
任務3-7 使用偽類 77
3.3.7 偽元素選擇器 79
3.3.8 通用選擇器 81
3.4 小結 81
3.5 作業 82
項目4 使用CSS高級選擇器美化頁面 83
4.1 復合選擇器 84
4.1.1 交集選擇器 84
4.1.2 並集選擇器 85
4.1.3 後代選擇器 86
4.1.4 子元素選擇器 88
4.1.5 相鄰兄弟選擇器 91
4.1.6 屬性選擇器 93
4.2 應用樣式的常用方式 95
4.2.1 行內式 95
4.2.2 內嵌式 96
4.2.3 鏈接式 97
任務4-1 將內嵌式改為鏈接式 98
4.3 解決CSS沖突的問題 99
4.4 使用Emmet語法 105
4.4.1 Emmet基礎語法 105
4.4.2 多重性和項目編號 106
任務4-2 Emmet語法練習1：多重性和項目編號 107
4.4.3 分組 107
任務4-3 Emmet語法練習2：分組 108
4.5 使用LESS、SASS和SCSS 108
4.6 小結 110
4.7 作業 110
項目5 盒子模型 112
5.1 盒子模型 112
5.1.1 盒子模型的組成 113
任務5-1 使用開發者工具查看盒子模型 114
5.1.2 值復制原則 116
5.1.3 內邊距特性 117
任務5-2 設置支付寶小程序中的padding 117
5.2 邊框 119
5.2.1 邊框風格 119
任務5-3 編寫並查看邊框風格 121
5.2.2 邊框寬度 123
5.2.3 邊框顏色 123
5.2.4 邊框綜合樣式 124
任務5-4 邊框的神秘之旅 124
5.3 外邊距 129
5.3.1 設置外邊距 129
5.3.2 外邊距特性 130
任務5-5 相鄰元素外邊距合並 131
任務5-6 父子元素外邊距合並 133
5.4 背景 135
5.4.1 背景顏色 135
5.4.2 背景圖片 135
任務5-7 製作健康打卡功能的漸變背景 142
5.4.3 背景綜合樣式 150
任務5-8 製作圖標 150
任務5-9 使用精靈圖 152
5.5 小結 154
5.6 作業 154
項目6 表格和表單 156
6.1 表格 157
6.2 表格標簽 158
任務6-1 使用Emmet語法製作金牌榜表格 160
6.3 CSS表格相關樣式屬性 164
任務6-2 導入數據創建表格 164
6.4 表單 169
6.5 表單標簽 170
6.5.1 ＜input＞標簽 171
任務6-3 ＜input＞標簽的綜合示例 177
6.5.2 ＜button＞標簽 178
6.5.3 ＜select＞標簽 180
6.5.4 ＜textarea＞標簽 183
6.5.5 表單新屬性 184
6.5.6 表單美化 188
任務6-4 個性化表單控件美化 190
任務6-5 製作登錄表單 193
6.6 小結 197
6.7 作業 197
項目7 浮動和定位 200
7.1 網頁佈局簡介 201
7.1.1 標準流 201
7.1.2 浮動排版 201
任務7-1 浮動特性1：脫離標準流 202
任務7-2 浮動特性2：圖文環繞 204
任務7-3 浮動特性3：浮動對行內元素的影響 207
7.1.3 清除浮動 208
任務7-4 使用清除浮動解決父容器高度塌陷的問題 211
7.1.4 使用BFC解決高度塌陷的問題 213
任務7-5 觸發BFC的3種常用方式 213
7.2 定位簡介 218
7.2.1 定位屬性 218
7.2.2 靜態定位 218
7.2.3 固定定位 219
任務7-6 使用固定定位實現導航懸停 219
7.2.4 絕對定位 224
7.2.5 相對定位 226
任務7-7 精品課程封面的製作 228
7.3 綜合案例 231
任務7-8 聖杯佈局 231
任務7-9 雙飛翼佈局 237
任務7-10 絕對居中佈局 239
任務7-11 京東秒殺模塊的製作 244
7.4 小結 248
7.5 作業 248
項目8 Flex佈局 250
8.1 Flex佈局簡介 250
8.2 Flex佈局的相關術語 251
8.3 Flex容器 252
8.3.1 Flex容器的相關屬性 252
8.3.2 居中佈局 258
任務8-1 塊級元素居中佈局 258
任務8-2 不定項居中佈局 260
任務8-3 均分列佈局 262
任務8-4 組合嵌套佈局 263
8.4 Flex子項 266
任務8-5 Flex佈局案例：輪播圖的製作 269
8.5 小結 275
8.6 作業 275
項目9 過渡和動畫 278
9.1 變換 278
9.2 2D變換 279
9.3 3D變換 283
任務9-1 製作3D骰子 287
9.4 過渡 289
任務9-2 製作簡單過渡效果 290
9.5 動畫 293
任務9-3 製作旋轉骰子 294
9.6 綜合案例 297
任務9-4 製作呼吸燈動畫 297
任務9-5 製作卡片翻轉動畫 302
9.7 小結 303
9.8 作業 303
項目10 多媒體應用 305
10.1 常見的多媒體標簽 305
10.1.1 ＜object＞標簽 306
10.1.2 ＜embed＞標簽 307
任務10-1 嵌入PDF 308
10.1.3 ＜video＞標簽 309
任務10-2 嵌入視頻 310
10.1.4 ＜audio＞標簽 311
任務10-3 嵌入音頻 311
10.2 小結 312
10.3 作業 313
