本书共 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
书单推荐
