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

導(dǎo)言 1
課程性質(zhì)描述 1
典型工作任務(wù)描述 1
課程學(xué)習(xí)目標(biāo) 1
學(xué)習(xí)組織形式與方法 2
學(xué)習(xí)情境設(shè)計(jì) 3
學(xué)業(yè)評(píng)價(jià) 4
單元1 制作HTML5頁(yè)面 5
學(xué)習(xí)情境1 制作HTML5歡迎頁(yè)面 5
學(xué)習(xí)情境描述 5
學(xué)習(xí)目標(biāo) 6
任務(wù)書(shū) 6
獲取信息 6
工作計(jì)劃 7
進(jìn)行決策 8
知識(shí)準(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
工作實(shí)施 14
評(píng)價(jià)反饋 14
拓展思考 16
單元2 制作表單頁(yè)面 17
學(xué)習(xí)情境2 制作招聘網(wǎng)站賬號(hào)登錄頁(yè)面 18
學(xué)習(xí)情境描述 18
學(xué)習(xí)目標(biāo) 19
任務(wù)書(shū) 19
獲取信息 19
工作計(jì)劃 19
進(jìn)行決策 20
知識(shí)準(zhǔn)備 21
2.1.1 區(qū)塊元素 23
2.1.2 語(yǔ)義結(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文本對(duì)齊 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
工作實(shí)施 41
評(píng)價(jià)反饋 42
拓展思考 43
2.2 學(xué)習(xí)情境3 制作招聘網(wǎng)站求職申請(qǐng)頁(yè)面 43
學(xué)習(xí)情境描述 43
學(xué)習(xí)目標(biāo) 44
任務(wù)書(shū) 44
獲取信息 44
工作計(jì)劃 44
進(jìn)行決策 45
知識(shí)準(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浮動(dòng)float 50
2.2.9 CSS浮動(dòng)float實(shí)現(xiàn)左右布局 52
相關(guān)案例 53
工作實(shí)施 64
評(píng)價(jià)反饋 64
拓展思考 65
2.3 學(xué)習(xí)情境4 制作招聘網(wǎng)站用戶注冊(cè)頁(yè)面 66
學(xué)習(xí)情境描述 66
學(xué)習(xí)目標(biāo) 66
任務(wù)書(shū) 67
獲取信息 67
工作計(jì)劃 67
進(jìn)行決策 68
知識(shí)準(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實(shí)現(xiàn)居中布局 70
相關(guān)案例 71
工作實(shí)施 77
評(píng)價(jià)反饋 77
拓展思考 79
單元3 制作列表頁(yè)面 80
學(xué)習(xí)情境5 制作招聘網(wǎng)站職位列表頁(yè)面 80
學(xué)習(xí)情境描述 80
學(xué)習(xí)目標(biāo) 82
任務(wù)書(shū) 82
獲取信息 82
工作計(jì)劃 82
進(jìn)行決策 84
知識(shí)準(zhǔn)備 84
3.1.1 無(wú)序列表＜ul＞ 84
3.1.2 列表項(xiàng)＜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
工作實(shí)施 107
評(píng)價(jià)反饋 108
拓展思考 109
單元4 制作詳情頁(yè)面 110
學(xué)習(xí)情境6 制作招聘網(wǎng)站職位詳情頁(yè)面 110
學(xué)習(xí)情境描述 110
學(xué)習(xí)目標(biāo) 111
任務(wù)書(shū) 112
獲取信息 112
工作計(jì)劃 112
進(jìn)行決策 113
知識(shí)準(zhǔn)備 113
4.1.1 彈性布局Flex 114
4.1.2 視口viewport 116
4.1.3 媒體查詢@media 117
相關(guān)案例 118
工作實(shí)施 128
評(píng)價(jià)反饋 129
拓展思考 130
單元5 制作網(wǎng)站首頁(yè) 131
5.1 學(xué)習(xí)情境7 制作招聘網(wǎng)站首頁(yè) 131
學(xué)習(xí)情境描述 131
學(xué)習(xí)目標(biāo) 133
任務(wù)書(shū) 133
獲取信息 133
工作計(jì)劃 133
進(jìn)行決策 134
知識(shí)準(zhǔn)備 135
5.1.1 視頻元素＜video＞ 135
5.1.2 音頻元素＜audio＞ 136
5.1.3 關(guān)鍵幀動(dòng)畫(huà)規(guī)則@keyframes 136
5.1.4 CSS動(dòng)畫(huà)屬性animation 137
相關(guān)案例 138
工作實(shí)施 171
評(píng)價(jià)反饋 172
拓展思考 173
5.2 學(xué)習(xí)情境8 制作企業(yè)網(wǎng)站首頁(yè) 173
學(xué)習(xí)情境描述 173
學(xué)習(xí)目標(biāo) 175
任 務(wù) 書(shū) 175
獲取信息 175
工作計(jì)劃 175
進(jìn)行決策 176
知識(shí)準(zhǔn)備 177
5.2.1 CSS變換屬性transform 178
5.2.2 CSS過(guò)渡屬性transition 179
5.2.3 CSS多列屬性Column 180
相關(guān)案例 180
工作實(shí)施 219
評(píng)價(jià)反饋 220
拓展思考 221
單元6 知識(shí)擴(kuò)展——在微信小 程序中應(yīng)用HTML5 222
6.1 學(xué)習(xí)情境9 開(kāi)發(fā)微型播放器
微信小程序 222
學(xué)習(xí)情境描述 222
學(xué)習(xí)目標(biāo) 223
任務(wù)書(shū) 223
獲取信息 224
工作計(jì)劃 224
進(jìn)行決策 225
知識(shí)準(zhǔn)備 225
6.1.1 video組件的使用方式 225
6.1.2 按鈕綁定事件 226
6.1.3 小程序的調(diào)試方式 228
相關(guān)案例 229
工作實(shí)施 234
評(píng)價(jià)反饋 235
拓展思考 236
6.2 學(xué)習(xí)情境10 開(kāi)發(fā)網(wǎng)上店鋪微信小程序 236
學(xué)習(xí)情境描述 236
學(xué)習(xí)目標(biāo) 237
任務(wù)書(shū) 237
獲取信息 238
工作計(jì)劃 238
進(jìn)行決策 239
知識(shí)準(zhǔn)備 239
6.2.1 view組件 239
6.2.2 rich-text組件 240
6.2.3 scroll-view組件 241
相關(guān)案例 242
工作實(shí)施 250
評(píng)價(jià)反饋 250
拓展思考 251
附錄1 1+X對(duì)照表 252
附錄2 HTML5常用標(biāo)簽字典 254
參考文獻(xiàn) 256