本書共 8 個項目，項目 1 ～ 3 主要講解 HTML5、CSS3 和 JavaScript 的基礎知識和使用技巧， 項目 4 介紹移動端網頁開發，項目 5 ～ 7 介紹微信小程序文件結構、頁面邏輯、數據綁定和頁面 渲染、小程序發布流程、小程序云開發基礎，項目 8 介紹小程序常用組件和 API。部分項目又細 化為若個任務，每個任務配有“實操視頻”和“知識點微課”，實現理實一體化。
騰訊云計算(北京)有限責任公司是一家長期從事豐富互聯網用戶的生活、助力企業數字化升級的互聯網公司，公司在基礎軟件服務、應用軟件服務、網絡通信等領域積累雄厚的優勢。近年來，公司積極拓展和培育教育領域，依托自身的技術優勢，聯合全國院校積極開發教育類產品，提升院校相關專業的人才培養質量，夯實學生的技術和技能基礎，拓展就業面向，形成良好的口碑。
項目1 制作新聞網站
項目情景………………………………………………………………… 002
項目分析………………………………………………………………… 002
學習目標………………………………………………………………… 002
知識準備………………………………………………………………… 003
1. HTML簡介 ……………………………………………… 003
2. HTML元素 ……………………………………………… 004
項目實施………………………………………………………… 014
1. 創建新聞首頁和二級頁面 ……………………………… 014
2. 添加新聞頁面內容 ……………………………………… 014
3. 添加二級頁面內容 ……………………………………… 016
4. 實現頁面跳轉功能 ……………………………………… 018
項目拓展………………………………………………………………… 018
項目2 制作購物網站
項目情景………………………………………………………………… 020
項目分析………………………………………………………………… 020
學習目標………………………………………………………………… 021
知識準備………………………………………………………………… 021
1. CSS 簡介 ………………………………………………… 021
2. CSS 語法 ………………………………………………… 023
3. CSS 選擇器 ……………………………………………… 023
4. CSS 常用樣式 ………………………………………… 034
項目實施……………………………………………………………… 044
1. 創建文件 ………………………………………………… 044
2. 鏈接到外部樣式文件 …………………………………… 045
3. 導航欄樣式 ……………………………………………… 045
4. 左邊欄 …………………………………………………… 047
5. 右邊欄 …………………………………………………… 050
6. 底邊欄 …………………………………………………… 052
項目拓展………………………………………………………………… 053
項目3 制作項目提成計算器
項目情景………………………………………………………………… 056
項目分析………………………………………………………………… 056
學習目標………………………………………………………………… 057
知識準備………………………………………………………………… 057
1. JavaScript 簡介 …………………………………………… 057
2. JavaScript 基礎知識 ……………………………………… 058
3. HTML DOM …………………………………………… 069
項目實施……………………………………………………………… 074
1. 創建項目主體 …………………………………………… 074
2. CSS美化頁面 …………………………………………… 075
3. 業務邏輯功能實現 ……………………………………… 077
項目拓展………………………………………………………………… 080
項目4 制作房屋裝飾網站
項目情景………………………………………………………………… 082
項目分析………………………………………………………………… 082
學習目標………………………………………………………………… 083
知識準備………………………………………………………………… 083
1. HTML5簡介 ……………………………………………… 083
2. HTML5語義化標簽 ……………………………………… 083
3. HTML5表單 …………………………………………… 086
項目實施……………………………………………………………… 097
1. 創建項目主體 …………………………………………… 097
2. 頂部搜索欄 ……………………………………………… 098
3. 導航欄 …………………………………………………… 099
4. 創建房屋信息/音樂播放區塊…………………………… 100
項目拓展………………………………………………………………… 101
項目5 體驗小程序項目模板
項目情景……………………………………………………………… 104
項目分析……………………………………………………………… 104
學習目標………………………………………………………………… 104
知識準備………………………………………………………………… 104
1. 小程序簡介 ……………………………………………… 104
2. 小程序與普通頁面的開發區別 ………………………… 105
3. 小程序運行環境 ………………………………………… 105
4. 開發者工具 ……………………………………………… 105
5.工具類文件 …………………………………………… 113
項目實施……………………………………………………………… 113
1. 注冊微信公眾平臺賬號 ………………………………… 113
2. 安裝開發者工具 ………………………………………… 117
3. 創建小程序 ……………………………………………… 117
項目拓展………………………………………………………………… 118
項目6 制作ToDoList小程序
項目情景………………………………………………………………… 120
項目分析………………………………………………………………… 120
學習目標………………………………………………………………… 121
任務1 開發ToDoList小程序 ………………………………………… 122
任務描述………………………………………………………………… 122
知識準備………………………………………………………………… 122
1. 小程序視圖組件（view） ……………………………… 122
2. scroll-view組件 ………………………………………… 123
3. 小程序表單組件——輸入框input ……………………… 124
4. 小程序表單組件——按鈕button ……………………… 126
5. 小程序WXML——頁面傳參wx:for …………………… 130
6. 小程序WXSS …………………………………………… 132
7. JavaScript中的 Page ()函數 ……………………………… 132
8. JavaScript交互 …………………………………………… 134
9. 小程序API——setData函數 …………………………… 135
任務實施……………………………………………………………… 135
1.初始化 …………………………………………………… 135
2.添加輸入框 ……………………………………………… 136
3.添加保存按鈕 …………………………………………… 138
4.把list存儲的數據展示在頁面 …………………………… 139
5.完整代碼展示 ………………………………………… 141
任務2 發布ToDoList小程序 ………………………………… 143
任務描述…………………………………………………………… 143
知識準備…………………………………………………… 143
微信公眾平臺小程序發布流程 ………………… 143
任務實施………………………………………………………… 146
1.開發者工具使用 ………………………………………… 146
2.微信公眾平臺 …………………………………………… 147
項目拓展………………………………………………………………… 148
項目7 制作擴展版ToDoList小程序
項目情景………………………………………………………………… 150
項目分析………………………………………………………………… 150
1.列表的實現 ……………………………………………… 150
2.數據的添加 ………………………………………… 151
學習目標………………………………………………………… 152
3. 任務1 擴展ToDoList小程序功能 …………………… 152
任務描述………………………………………………………… 152
1. 列表頁面 ………………………………………………… 153
2. 添加內容頁面 …………………………………………… 153
3. 詳情頁面 ……………………………………………… 154
知識準備…………………………………………………………… 154
1. WXML語法 ……………………………………………… 154
2. WXML內容組件—— text（文本）標簽 ……………… 156
7.WXML內容組件——image（圖片）標簽 ……………156
8.WXML表單組件——多行輸入框textarea …………… 158
5. wx.navigateTo …………………………………………… 161
6. wx.navigateBack ………………………………………… 163
3.wx.setNavigationBarTitle ………………………………… 163
8. wx.setStorageSync ……………………………………… 164
9. wx.getStorageSync ……………………………………… 165 10. wx.showToast …………………………………………… 166
任務實施………………………………………………………………… 167
1. 初始化項目 ……………………………………………… 167
2.列表頁面列表展示 ……………………………………… 168
3.在列表頁面添加頁面入口 ……………………………… 171
4.從列表頁面data.list獲取存儲數據 ……………………… 172
5.列表頁面整體代碼 ……………………………………… 173
6.添加頁面實現添加數據功能和存儲 …………………… 175
7.添加頁面整體代碼展示 ………………………………… 180
8.詳情頁面 ………………………………………………… 183
9. details.js文件 ……………………………………………… 186
任務2 基于云開發制作ToDoList小程序 …………………… 187
任務描述…………………………………………………………… 187
知識準備………………………………………………………… 187
1.云開發 …………………………………………………… 187
2.數據庫 …………………………………………………… 190
3.項目創建和目錄 ………………………………………… 191
4.開發者工具——云開發使用 ………………………… 193
任務實施……………………………………………………………… 193
1.數據庫使用 ……………………………………………… 193
2.數據庫在頁面中的使用 ………………………………… 195
3.添加到數據庫 …………………………………………… 195
4.整體代碼展示 …………………………………………… 196
項目拓展………………………………………………………………… 197
項目8 指南針小程序
項目情景………………………………………………………………… 200
項目分析………………………………………………………………… 200
學習目標………………………………………………………………… 201
知識準備………………………………………………………………… 201
1. 羅盤API——stopCompass ……………………………… 201
2. 羅盤API——startCompass ……………………………… 201
?羅盤API——onCompassChange ………………………… 202
?羅盤API——offCompassChange ………………………… 203
5. CSS的 transition屬性 …………………………………… 203
6. CSS的 animation屬性 ……………………………… 204
項目實施………………………………………………………… 205
1.創建項目 ………………………………………………… 205
2.方位頁面布局 …………………………………………… 207
3.指南針布局 ……………………………………………… 209
4.指南針效果實現 ………………………………………… 211
5.羅盤銷毀 ………………………………………………… 212
項目拓展………………………………… …… 213
參考文獻………………………………………………………………… 215
新書資訊