本書共8個(gè)項(xiàng)目，項(xiàng)目1～3主要講解HTML列表和表單、CSS美化網(wǎng)頁(yè)、JavaScript基礎(chǔ)知識(shí)和常用方法，項(xiàng)目4介紹HTML5新增語(yǔ)義化元素、增強(qiáng)元素和多媒體元素、CSS3移動(dòng)端適配、Ajax基礎(chǔ)知識(shí)，項(xiàng)目5介紹分享功能和常用API，項(xiàng)目6介紹模塊化開(kāi)發(fā)、地圖組件、版本管理工具、真機(jī)聯(lián)調(diào)、更新及數(shù)據(jù)分析，項(xiàng)目7介紹云開(kāi)發(fā)基礎(chǔ)知識(shí)，項(xiàng)目8介紹CSS動(dòng)畫的使用規(guī)則和媒體API的使用方法。部分項(xiàng)目細(xì)分為若干個(gè)任務(wù)。每個(gè)任務(wù)配有“實(shí)操視頻”和“知識(shí)點(diǎn)微課”，實(shí)現(xiàn)理實(shí)一體化。
騰訊云計(jì)算(北京)有限責(zé)任公司是一家長(zhǎng)期從事豐富互聯(lián)網(wǎng)用戶的生活、助力企業(yè)數(shù)字化升級(jí)的互聯(lián)網(wǎng)公司，公司在基礎(chǔ)軟件服務(wù)、應(yīng)用軟件服務(wù)、網(wǎng)絡(luò)通信等領(lǐng)域積累雄厚的優(yōu)勢(shì)。近年來(lái)，公司積極拓展和培育教育領(lǐng)域，依托自身的技術(shù)優(yōu)勢(shì)，聯(lián)合全國(guó)院校積極開(kāi)發(fā)教育類產(chǎn)品，提升院校相關(guān)專業(yè)的人才培養(yǎng)質(zhì)量，夯實(shí)學(xué)生的技術(shù)和技能基礎(chǔ)，拓展就業(yè)面向，形成良好的口碑。
項(xiàng)目1?制作課程信息管理系統(tǒng)
項(xiàng)目情景 002
項(xiàng)目分析 002
學(xué)習(xí)目標(biāo) 003
（一）知識(shí)目標(biāo) 003
（二）技能目標(biāo) 003
（三）素質(zhì)目標(biāo) 003
知識(shí)準(zhǔn)備 004
1. HTML列表元素 004
2. HTML表單元素 006
3. HTML框架元素 009
項(xiàng)目實(shí)踐 012
1. 搭建頁(yè)面主體結(jié)構(gòu)和內(nèi)容 012
2. 創(chuàng)建form表單和搜索框 014
3. 創(chuàng)建班級(jí)列表 014
4. 制作課程表子頁(yè)面 014
5. 使用＜iframe＞標(biāo)簽導(dǎo)入表格 016
6. 為課程添加超鏈接，進(jìn)入課程詳情頁(yè)面 017
項(xiàng)目拓展 018
項(xiàng)目2?設(shè)計(jì)Web博客（靜態(tài)）
項(xiàng)目情景 020
項(xiàng)目分析 020
學(xué)習(xí)目標(biāo) 021
（一）知識(shí)目標(biāo) 021
（二）技能目標(biāo) 021
（三）素質(zhì)目標(biāo) 021
知識(shí)準(zhǔn)備 021
1. flex彈性布局 021
2. 邊框?qū)傩?028
3. linear-gradient屬性 033
項(xiàng)目實(shí)踐 039
1. 搭建頁(yè)面主頁(yè)結(jié)構(gòu) 039
2. 搭建頁(yè)面主體內(nèi)容 039
3. 添加正文內(nèi)容 040
4. 美化微博話題 042
5. 對(duì)微博話題的字體進(jìn)行美化 043
6. 對(duì)微博話題的背景色進(jìn)行美化 043
項(xiàng)目拓展 044
項(xiàng)目3?制作網(wǎng)頁(yè)計(jì)算器
項(xiàng)目情景 046
項(xiàng)目分析 046
學(xué)習(xí)目標(biāo) 047
（一）知識(shí)目標(biāo) 047
（二）技能目標(biāo) 047
（三）素質(zhì)目標(biāo) 047
知識(shí)準(zhǔn)備 047
1. JavaScript文件引入方式 047
2. JS字符串常用方法 049
3. 數(shù)組常用方法 054
4. 獲取DOM 059
5. js單擊事件 061
項(xiàng)目實(shí)踐 063
1. HTML布局 063
2. CSS添加樣式 064
3. JavaScript計(jì)算 066
4. 擴(kuò)展功能（驗(yàn)證正則表達(dá)式） 070
項(xiàng)目拓展 072
項(xiàng)目4?制作天氣預(yù)報(bào)網(wǎng)
項(xiàng)目情景 074
項(xiàng)目分析 074
學(xué)習(xí)目標(biāo) 074
（一）知識(shí)目標(biāo) 074
（二）技能目標(biāo) 075
（三）素質(zhì)目標(biāo) 075
任務(wù)1?完成天氣預(yù)報(bào)頁(yè)面內(nèi)容 075
任務(wù)描述 075
知識(shí)準(zhǔn)備 075
1. HTML5新增語(yǔ)義化元素 075
2. HTML5頁(yè)面增強(qiáng)元素 083
3. HTML5多媒體元素 083
任務(wù)實(shí)施 085
1. 制作頁(yè)面結(jié)構(gòu) 085
2. 搭建主體內(nèi)容 085
任務(wù)拓展 088
任務(wù)2?為天氣預(yù)報(bào)頁(yè)面進(jìn)行移動(dòng)端適配 089
任務(wù)描述 089
知識(shí)準(zhǔn)備 089
1. 視口（viewport）應(yīng)用 089
2. 媒體查詢 091
3. CSS單位 093
任務(wù)實(shí)施 093
任務(wù)拓展 097
任務(wù)3?天氣預(yù)報(bào)網(wǎng)頁(yè)獲取后臺(tái)動(dòng)態(tài)數(shù)據(jù) 097
任務(wù)描述 097
知識(shí)準(zhǔn)備 098
1. Ajax簡(jiǎn)介 098
2. Ajax訪問(wèn)服務(wù)器的方法 098
3. JavaScript操作DOM的方法 099
任務(wù)實(shí)施 099
1. 準(zhǔn)備服務(wù)器端接口頁(yè)面 099
2. 修改客戶端index.html頁(yè)面 100
3. 查看瀏覽效果 101
任務(wù)拓展 102
項(xiàng)目5?制作分享小程序
項(xiàng)目情景 104
項(xiàng)目分析 104
學(xué)習(xí)目標(biāo) 104
（一）知識(shí)目標(biāo) 104
（二）技能目標(biāo) 105
（三）素質(zhì)目標(biāo) 105
知識(shí)準(zhǔn)備 105
1. 小程序分享功能基礎(chǔ) 105
2. chooseImage方法 107
3. uploadFile方法 108
4. request方法 110
5. 配置域名 111
項(xiàng)目實(shí)踐 113
1. 創(chuàng)建項(xiàng)目并開(kāi)發(fā)完整的ToDoList項(xiàng)目 113
2. 開(kāi)發(fā)分享功能 114
3. 用戶上傳圖片 116
4. 用戶自定義圖片分享 118
5. 完整JS代碼 118
任務(wù)拓展 119
項(xiàng)目6?制作進(jìn)階版分享小程序
項(xiàng)目情景 122
項(xiàng)目分析 122
學(xué)習(xí)目標(biāo) 122
（一）知識(shí)目標(biāo) 122
（二）技能目標(biāo) 122
（三）素質(zhì)目標(biāo) 123
任務(wù)1?制作進(jìn)階版分享小程序 123
任務(wù)描述 123
知識(shí)準(zhǔn)備 123
1. 注冊(cè)友盟賬戶 123
2. 開(kāi)通微信地圖 125
3. getLocation方法 126
4. showToast方法 128
5. navigateTo方法 129
6. map組件 130
任務(wù)實(shí)施 133
1. 友盟對(duì)接 133
2. 使用地圖擴(kuò)展功能開(kāi)發(fā) 137
3. 組件的封裝 142
任務(wù)2?朋友圈小程序的發(fā)布與運(yùn)維 144
任務(wù)描述 144
知識(shí)準(zhǔn)備 144
1. 版本管理工具 144
2. npm支持 150
3. 真機(jī)聯(lián)調(diào) 156
4. 小程序更新機(jī)制 162
任務(wù)實(shí)施 163
1. 發(fā)布小程序 163
2. 小程序數(shù)據(jù)統(tǒng)計(jì) 166
3. 友盟數(shù)據(jù)統(tǒng)計(jì) 167
任務(wù)拓展 168
項(xiàng)目7?制作云數(shù)據(jù)庫(kù)版和云函數(shù)版朋友圈小程序
項(xiàng)目情景 170
項(xiàng)目分析 170
學(xué)習(xí)目標(biāo) 170
（一）知識(shí)目標(biāo) 170
（二）技能目標(biāo) 170
（三）素質(zhì)目標(biāo) 170
任務(wù)1?制作云數(shù)據(jù)庫(kù)版朋友圈小程序 171
任務(wù)描述 171
知識(shí)準(zhǔn)備 171
1. 云開(kāi)發(fā)概述和開(kāi)通 171
2. 數(shù)據(jù)庫(kù)基礎(chǔ) 172
3. 操作數(shù)據(jù)庫(kù) 174
4. 文件存儲(chǔ) 184
5. 調(diào)試工具 186
任務(wù)實(shí)施 187
1. 上傳圖片至云存儲(chǔ) 187
2. 保存圖片地址 189
任務(wù)2?制作云函數(shù)版朋友圈小程序 215
任務(wù)描述 189
知識(shí)準(zhǔn)備 190
1. 云函數(shù)基礎(chǔ) 190
2. 云函數(shù)的配置 190
3. 云函數(shù)調(diào)試 193
4. 云函數(shù)常用SDK文檔 194
任務(wù)實(shí)施 201
1. 云函數(shù)創(chuàng)建 201
2. 云函數(shù)操作數(shù)據(jù)庫(kù) 203
3. 獲取用戶手機(jī)號(hào) 205
4. 云函數(shù)的調(diào)試 209
任務(wù)拓展 211
項(xiàng)目8?制作音樂(lè)播放器
項(xiàng)目情景 214
項(xiàng)目分析 214
學(xué)習(xí)目標(biāo) 215
（一）知識(shí)目標(biāo) 215
（二）技能目標(biāo) 215
（三）素質(zhì)目標(biāo) 215
知識(shí)準(zhǔn)備 215
1. 媒體組件——audio 215
2. slider組件 218
3. 音頻API——getBackgroundAudioManager 219
項(xiàng)目實(shí)踐 222
1. 創(chuàng)建項(xiàng)目和初始化項(xiàng)目 222
2. 音樂(lè)播放列表展示 224
3. 播放頁(yè)面的展示 227
4. 初始化播放器 231
5. 播放器銷毀 235
6. 播放器暫停和播放 235
7. 播放拖曳 236
8. 音樂(lè)播放切換控制 237
項(xiàng)目拓展 238
參考文獻(xiàn) 239
書單推薦
