本書以《Web前端開發(fā)職業(yè)技能等級標準》為指導進行編寫，滿足了高等職業(yè)教育軟件技術專業(yè)網頁設計與制作、Web前端開發(fā)等課程教學需要。全書分為制作HTML5頁面、制作表單頁面、制作列表頁面、制作詳情頁面、制作網站首頁、知識擴展（在微信小程序中應用HTML5）6個單元。本書結合真實的企業(yè)案例，內容涵蓋了HTML5和CSS3常用標簽及樣式的應用，各單元以具體的網頁任務為驅動，按學習情境描述、學習目標、任務書、獲取信息、工作計劃、進行決策、知識準備、相關案例、工作實施、評價反饋、拓展思考的順序組織內容，引導讀者逐步進行學習。本書主要面向軟件技術專業(yè)Web前端開發(fā)方向的學生，同時也可作為軟件技術專業(yè)其他方向或計算機相關專業(yè)的教材，也可作為IT行業(yè)軟件開發(fā)從業(yè)人員能力提升的自學參考用書。
徐晨，女，講師，多媒體應用設計師，碩士研究生，畢業(yè)于北京大學軟件與微電子學院，軟件工程專業(yè)（交互媒體藝術方向），就職于重慶工商職業(yè)學院，從事軟件技術專業(yè)Web前端開發(fā)方向課程教學7年。公開發(fā)表論文5篇，主編、參編教材3本，出版專著1本。主研省廳級教改項目2項，參與重慶市教學成果獎二等獎1項。主持和參與建設網絡課程5門，其中重慶市一流課程1門。多次在教學技能大賽中獲得獎項，并多次指導學生在專業(yè)競賽中獲獎。
導言 1
課程性質描述 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基本結構 9
1.1.4 HTML5標簽 10
相關案例 10
工作實施 14
評價反饋 14
拓展思考 16
單元2 制作表單頁面 17
學習情境2 制作招聘網站賬號登錄頁面 18
學習情境描述 18
學習目標 19
任務書 19
獲取信息 19
工作計劃 19
進行決策 20
知識準備 21
2.1.1 區(qū)塊元素 23
2.1.2 語義結構元素 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 制作招聘網站求職申請頁面 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 制作招聘網站用戶注冊頁面 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 制作招聘網站職位列表頁面 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 制作招聘網站職位詳情頁面 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 制作網站首頁 131
5.1 學習情境7 制作招聘網站首頁 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è)網站首頁 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 小程序的調試方式 228
相關案例 229
工作實施 234
評價反饋 235
拓展思考 236
6.2 學習情境10 開發(fā)網上店鋪微信小程序 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
書單推薦
