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