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

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