HTML5+CSS3 Web前端開發(fā)技術(shù)
定 價(jià)：49.5 元
- 作者：徐晨
- 出版時(shí)間：2022/6/1
- ISBN：9787121434082
- 出 版 社：電子工業(yè)出版社
- 中圖法分類：TP312.8；TP393.092.2
- 頁碼：264
- 紙張：
- 版次：01
- 開本：16開
本書以《Web前端開發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)》為指導(dǎo)進(jìn)行編寫，滿足了高等職業(yè)教育軟件技術(shù)專業(yè)網(wǎng)頁設(shè)計(jì)與制作、Web前端開發(fā)等課程教學(xué)需要。全書分為制作HTML5頁面、制作表單頁面、制作列表頁面、制作詳情頁面、制作網(wǎng)站首頁、知識(shí)擴(kuò)展（在微信小程序中應(yīng)用HTML5）6個(gè)單元。本書結(jié)合真實(shí)的企業(yè)案例，內(nèi)容涵蓋了HTML5和CSS3常用標(biāo)簽及樣式的應(yīng)用，各單元以具體的網(wǎng)頁任務(wù)為驅(qū)動(dòng)，按學(xué)習(xí)情境描述、學(xué)習(xí)目標(biāo)、任務(wù)書、獲取信息、工作計(jì)劃、進(jìn)行決策、知識(shí)準(zhǔn)備、相關(guān)案例、工作實(shí)施、評(píng)價(jià)反饋、拓展思考的順序組織內(nèi)容，引導(dǎo)讀者逐步進(jìn)行學(xué)習(xí)。本書主要面向軟件技術(shù)專業(yè)Web前端開發(fā)方向的學(xué)生，同時(shí)也可作為軟件技術(shù)專業(yè)其他方向或計(jì)算機(jī)相關(guān)專業(yè)的教材，也可作為IT行業(yè)軟件開發(fā)從業(yè)人員能力提升的自學(xué)參考用書。
徐晨，女，講師，多媒體應(yīng)用設(shè)計(jì)師，碩士研究生，畢業(yè)于北京大學(xué)軟件與微電子學(xué)院，軟件工程專業(yè)（交互媒體藝術(shù)方向），就職于重慶工商職業(yè)學(xué)院，從事軟件技術(shù)專業(yè)Web前端開發(fā)方向課程教學(xué)7年。公開發(fā)表論文5篇，主編、參編教材3本，出版專著1本。主研省廳級(jí)教改項(xiàng)目2項(xiàng)，參與重慶市教學(xué)成果獎(jiǎng)二等獎(jiǎng)1項(xiàng)。主持和參與建設(shè)網(wǎng)絡(luò)課程5門，其中重慶市一流課程1門。多次在教學(xué)技能大賽中獲得獎(jiǎng)項(xiàng)，并多次指導(dǎo)學(xué)生在專業(yè)競賽中獲獎(jiǎng)。
導(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頁面 5
學(xué)習(xí)情境1 制作HTML5歡迎頁面 5
學(xué)習(xí)情境描述 5
學(xué)習(xí)目標(biāo) 6
任務(wù)書 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 制作表單頁面 17
學(xué)習(xí)情境2 制作招聘網(wǎng)站賬號(hào)登錄頁面 18
學(xué)習(xí)情境描述 18
學(xué)習(xí)目標(biāo) 19
任務(wù)書 19
獲取信息 19
工作計(jì)劃 19
進(jìn)行決策 20
知識(shí)準(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文本對(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)頁面 43
學(xué)習(xí)情境描述 43
學(xué)習(xí)目標(biāo) 44
任務(wù)書 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è)頁面 66
學(xué)習(xí)情境描述 66
學(xué)習(xí)目標(biāo) 66
任務(wù)書 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 制作列表頁面 80
學(xué)習(xí)情境5 制作招聘網(wǎng)站職位列表頁面 80
學(xué)習(xí)情境描述 80
學(xué)習(xí)目標(biāo) 82
任務(wù)書 82
獲取信息 82
工作計(jì)劃 82
進(jìn)行決策 84
知識(shí)準(zhǔn)備 84
3.1.1 無序列表＜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 制作詳情頁面 110
學(xué)習(xí)情境6 制作招聘網(wǎng)站職位詳情頁面 110
學(xué)習(xí)情境描述 110
學(xué)習(xí)目標(biāo) 111
任務(wù)書 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)站首頁 131
5.1 學(xué)習(xí)情境7 制作招聘網(wǎng)站首頁 131
學(xué)習(xí)情境描述 131
學(xué)習(xí)目標(biāo) 133
任務(wù)書 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)畫規(guī)則@keyframes 136
5.1.4 CSS動(dòng)畫屬性animation 137
相關(guān)案例 138
工作實(shí)施 171
評(píng)價(jià)反饋 172
拓展思考 173
5.2 學(xué)習(xí)情境8 制作企業(yè)網(wǎng)站首頁 173
學(xué)習(xí)情境描述 173
學(xué)習(xí)目標(biāo) 175
任 務(wù) 書 175
獲取信息 175
工作計(jì)劃 175
進(jìn)行決策 176
知識(shí)準(zhǔn)備 177
5.2.1 CSS變換屬性transform 178
5.2.2 CSS過渡屬性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 開發(fā)微型播放器
微信小程序 222
學(xué)習(xí)情境描述 222
學(xué)習(xí)目標(biāo) 223
任務(wù)書 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 開發(fā)網(wǎng)上店鋪微信小程序 236
學(xué)習(xí)情境描述 236
學(xué)習(xí)目標(biāo) 237
任務(wù)書 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
書單推薦
