HTML5+CSS3 Web前端開發(fā)技術(shù)

導(dǎo)言 1
課程性質(zhì)描述 1
典型工作任務(wù)描述 1
課程學(xué)習(xí)目標(biāo) 1
學(xué)習(xí)組織形式與方法 2
學(xué)習(xí)情境設(shè)計 3
學(xué)業(yè)評價 4
單元1 制作HTML5頁面 5
學(xué)習(xí)情境1 制作HTML5歡迎頁面 5
學(xué)習(xí)情境描述 5
學(xué)習(xí)目標(biāo) 6
任務(wù)書 6
獲取信息 6
工作計劃 7
進(jìn)行決策 8
知識準(zhǔn)備 8
1.1.1 HBuilder工具下載、安裝 9
1.1.2 HTML5 9
1.1.3 HTML5基本結(jié)構(gòu) 9
1.1.4 HTML5標(biāo)簽 10
相關(guān)案例 10
工作實施 14
評價反饋 14
拓展思考 16
單元2 制作表單頁面 17
學(xué)習(xí)情境2 制作招聘網(wǎng)站賬號登錄頁面 18
學(xué)習(xí)情境描述 18
學(xué)習(xí)目標(biāo) 19
任務(wù)書 19
獲取信息 19
工作計劃 19
進(jìn)行決策 20
知識準(zhǔn)備 21
2.1.1 區(qū)塊元素 23
2.1.2 語義結(jié)構(gòu)元素 23
2.1.3 文本標(biāo)簽 23
2.1.4 超鏈接元素＜a＞ 25
2.1.5 圖像元素＜img＞ 25
2.1.6 表單元素 25
2.1.7 CSS文件導(dǎo)入 27
2.1.8 CSS基本選擇器 27
2.1.9 CSS組合選擇器 29
2.1.10 CSS偽類選擇器 29
2.1.11 CSS盒模型 30
2.1.12 CSS文本對齊 31
2.1.13 CSS背景樣式background 31
2.1.14 CSS圓角邊框border-radius 33
2.1.15 CSS盒陰影box-shadow 33
2.1.16 CSS布局display 33
2.1.17 CSS定位position 34
相關(guān)案例 35
工作實施 41
評價反饋 42
拓展思考 43
2.2 學(xué)習(xí)情境3 制作招聘網(wǎng)站求職申請頁面 43
學(xué)習(xí)情境描述 43
學(xué)習(xí)目標(biāo) 44
任務(wù)書 44
獲取信息 44
工作計劃 44
進(jìn)行決策 45
知識準(zhǔn)備 46
2.2.1 HTML5新增類型輸入元素＜input＞ 46
2.2.2 輸入元素＜input＞的特殊狀態(tài)屬性 47
2.2.3 表格元素＜table＞ 48
2.2.4 CSS屬性選擇器 49
2.2.5 CSS偽元素選擇器 49
2.2.6 CSS不透明度opacity 50
2.2.7 CSS溢出overflow 50
2.2.8 CSS浮動float 50
2.2.9 CSS浮動float實現(xiàn)左右布局 52
相關(guān)案例 53
工作實施 64
評價反饋 64
拓展思考 65
2.3 學(xué)習(xí)情境4 制作招聘網(wǎng)站用戶注冊頁面 66
學(xué)習(xí)情境描述 66
學(xué)習(xí)目標(biāo) 66
任務(wù)書 67
獲取信息 67
工作計劃 67
進(jìn)行決策 68
知識準(zhǔn)備 68
2.3.1 標(biāo)簽元素＜label＞ 69
2.3.2 CSS行高屬性line-height 69
2.3.3 CSS文本陰影屬性text-shadow 69
2.3.4 CSS邊距margin實現(xiàn)居中布局 70
相關(guān)案例 71
工作實施 77
評價反饋 77
拓展思考 79
單元3 制作列表頁面 80
學(xué)習(xí)情境5 制作招聘網(wǎng)站職位列表頁面 80
學(xué)習(xí)情境描述 80
學(xué)習(xí)目標(biāo) 82
任務(wù)書 82
獲取信息 82
工作計劃 82
進(jìn)行決策 84
知識準(zhǔn)備 84
3.1.1 無序列表＜ul＞ 84
3.1.2 列表項＜li＞ 85
3.1.3 定義列表＜dl＞ 85
3.1.4 ＜datalist＞標(biāo)簽 85
3.1.5 @font-face規(guī)則 86
3.1.6 white-space屬性 87
3.1.7 overflow屬性 87
3.1.8 text-overflow屬性 88
3.1.9 cursor屬性 88
3.1.10 position屬性 88
相關(guān)案例 89
工作實施 107
評價反饋 108
拓展思考 109
單元4 制作詳情頁面 110
學(xué)習(xí)情境6 制作招聘網(wǎng)站職位詳情頁面 110
學(xué)習(xí)情境描述 110
學(xué)習(xí)目標(biāo) 111
任務(wù)書 112
獲取信息 112
工作計劃 112
進(jìn)行決策 113
知識準(zhǔn)備 113
4.1.1 彈性布局Flex 114
4.1.2 視口viewport 116
4.1.3 媒體查詢@media 117
相關(guān)案例 118
工作實施 128
評價反饋 129
拓展思考 130
單元5 制作網(wǎng)站首頁 131
5.1 學(xué)習(xí)情境7 制作招聘網(wǎng)站首頁 131
學(xué)習(xí)情境描述 131
學(xué)習(xí)目標(biāo) 133
任務(wù)書 133
獲取信息 133
工作計劃 133
進(jìn)行決策 134
知識準(zhǔn)備 135
5.1.1 視頻元素＜video＞ 135
5.1.2 音頻元素＜audio＞ 136
5.1.3 關(guān)鍵幀動畫規(guī)則@keyframes 136
5.1.4 CSS動畫屬性animation 137
相關(guān)案例 138
工作實施 171
評價反饋 172
拓展思考 173
5.2 學(xué)習(xí)情境8 制作企業(yè)網(wǎng)站首頁 173
學(xué)習(xí)情境描述 173
學(xué)習(xí)目標(biāo) 175
任 務(wù) 書 175
獲取信息 175
工作計劃 175
進(jìn)行決策 176
知識準(zhǔn)備 177
5.2.1 CSS變換屬性transform 178
5.2.2 CSS過渡屬性transition 179
5.2.3 CSS多列屬性Column 180
相關(guān)案例 180
工作實施 219
評價反饋 220
拓展思考 221
單元6 知識擴(kuò)展——在微信小 程序中應(yīng)用HTML5 222
6.1 學(xué)習(xí)情境9 開發(fā)微型播放器
微信小程序 222
學(xué)習(xí)情境描述 222
學(xué)習(xí)目標(biāo) 223
任務(wù)書 223
獲取信息 224
工作計劃 224
進(jìn)行決策 225
知識準(zhǔn)備 225
6.1.1 video組件的使用方式 225
6.1.2 按鈕綁定事件 226
6.1.3 小程序的調(diào)試方式 228
相關(guān)案例 229
工作實施 234
評價反饋 235
拓展思考 236
6.2 學(xué)習(xí)情境10 開發(fā)網(wǎng)上店鋪微信小程序 236
學(xué)習(xí)情境描述 236
學(xué)習(xí)目標(biāo) 237
任務(wù)書 237
獲取信息 238
工作計劃 238
進(jìn)行決策 239
知識準(zhǔn)備 239
6.2.1 view組件 239
6.2.2 rich-text組件 240
6.2.3 scroll-view組件 241
相關(guān)案例 242
工作實施 250
評價反饋 250
拓展思考 251
附錄1 1+X對照表 252
附錄2 HTML5常用標(biāo)簽字典 254
參考文獻(xiàn) 256