本书详细讲解了HTML5 在移动Web 开发中的应用，包括移动端常用布局、多媒体、Canvas、拖放、
文件操作等。除了这些相对独立的技术点讲解，本书还讲解了当下使用最为广泛的移动Web 框架Bootstrap，
并且详细介绍了一个综合项目的开发，将所学应用到实际开发中。
本书附有配套视频、源代码、习题等数字化学习资源，与本书配套的在线开放课程在中国大学慕课
上线，读者可以登录网站进行在线开放课程的学习。
本书既可作为高等院校本、专科相关专业的HTML5 课程、移动Web 开发课程的教材，也可作为前端
与移动开发的培训教材，对于广大网站开发人员来说，更是一本不可多得的阅读与参考的优秀读物。

1.双高校B档，常信出品
2.配套慕课视频
3.项目任务式写法
本书可作为高等院校软件技术相关专业的教材，可以作为前端与移动端开发的学习资料，还可作为网页设计、美工设计、网页编程、网站开发等行业人员阅读与参考的优秀读物。

叶品菊
在常州信息职业技术学院从事多年移动Web开发相关教学和科研工作；主持创新创业类教育理论研究课题5项，江苏省大学生创新训练项目2项；参与Web前端1 X证书开发，指导学生获得2019年江苏省职业技能大赛HTML5融媒体赛项二等奖；获得第三届全国高校微课教学大赛国赛三等奖，江苏赛区微课教学大赛一等奖1项，二等奖1项。

单元1 移动Web 开发概述 1
1.1 移动Web 开发简介 1
1.1.1 什么是移动Web 开发 1
1.1.2 移动Web 开发与PC 端Web 开发的
区别 2
1.2 移动Web 开发技术入门 2
1.2.1 HTML5 简介 2
1.2.2 CSS3 简介 · 3
1.2.3 Bootstrap 简介 · 3
1.2.4 移动端的Web 浏览器 3
1.3 基于HTML5 的移动Web 开发 4
1.4 开发工具HBuilderX 的使用 6
1.5 单元案例我的个人主页 7
1.5.1 页面效果分析 · 8
1.5.2 页面实现 8
1.5.3 页面样式设计 · 9
1.6 单元小结 · 9
1.7 动手实践 · 9
单元2 初识HTML5 · 11
2.1 HTML5 的优势 11
2.2 HTML5 网页文档结构 · 12
2.3 HTML5 常用标签及其属性 13
2.3.1 标签的分类 13
2.3.2 标签属性 · 14
2.3.3 HTML5 文档头部相关标签 · 14
2.3.4 HTML5 常用的文本标签 16
2.4 HTML5 新增的语义化结构标签 19
2.5 HTML5 新增的属性 22
2.6 单元案例少壮不努力，
老大徒伤悲--古诗赏析 24
2.6.1 页面效果分析 24
2.6.2 页面实现 · 25
2.6.3 页面功能设计 29
2.6.4 页面样式设计 29
2.7 单元小结 30
2.8 动手实践 30
单元3 CSS3 基础 · 32
3.1 结构与表现分离 32
3.2 CSS3 发展史及性能预览 33
3.2.1 CSS3 发展史 · 33
3.2.2 CSS3 性能预览 34
3.3 CSS3 核心基础 · 38
3.3.1 CSS 样式规则 38
3.3.2 引入CSS 样式表 38
3.4 CSS3 选择器 42
3.4.1 CSS3 属性选择器 42
3.4.2 CSS3 结构伪类选择器 47
3.4.3 CSS3 UI 伪元素选择器 54
3.5 单元案例仿写软大学院首页 58
3.5.1 搭建项目 · 58
3.5.2 主要模块开发 60
3.6 单元小结 68
3.7 动手实践 69
单元4 CSS3 常用样式 70
4.1 盒子模型概述 70
4.1.1 认识盒子模型 70
4.1.2 盒子的宽与高 72
4.2 盒子模型的相关属性 73
4.2.1 边框属性 · 74
4.2.2 内边距属性 82
移动Web 开发实战HTML5 CSS3 Bootstrap（慕课版）
2
4.2.3 外边距属性 84
4.3 CSS3 弹性盒布局 86
4.3.1 定义弹性容器 86
4.3.2 弹性容器属性 88
4.3.3 弹性子元素属性 · 95
4.4 背景设置 102
4.4.1 背景图像的大小 102
4.4.2 背景的显示区域 104
4.4.3 背景图像的裁剪区域 105
4.4.4 多重背景图像 106
4.4.5 背景复合属性 107
4.5 CSS3 渐变属性 109
4.5.1 线型渐变 109
4.5.2 径向渐变 110
4.5.3 重复渐变 112
4.6 CSS3 盒子阴影与倒影 114
4.6.1 盒子阴影 114
4.6.2 盒子倒影 116
4.7 单元案例制作小信图书
展示框 · 117
4.7.1 页面效果分析 118
4.7.2 制作页面结构 118
4.7.3 定义页面CSS 样式 120
4.8 单元小结 121
4.9 动手实践 122
单元5 CSS3 高级应用 123
5.1 CSS3 过渡 · 123
5.1.1 transition 子属性设置 123
5.1.2 transition 属性复合设置 127
5.2 CSS3 变形 · 129
5.2.1 认识transform 属性 129
5.2.2 2D 转换 · 129
5.2.4 自定义转换 · 136
5.3 CSS3 动画 · 142
5.3.1 @keyframes 规则创建动画 143
5.3.2 animation 属性调用动画 · 144
5.4 单元案例爱我中华
动画制作 146
5.4.1 页面效果分析 147
5.4.2 页面动画定义 147
5.4.3 页面结构设计 148
5.4.4 页面样式设计 149
5.5 单元小结 150
5.6 动手实践 151
单元6 HTML5 智能表单 · 152
6.1 表单 · 152
6.1.1 表单的构成 · 152
6.1.2 创建表单 153
6.2 表单控件 154
6.2.1 input 控件 · 154
6.2.2 textarea 控件 157
6.2.3 select 控件 159
6.3 HTML5 表单新属性 161
6.3.1 HTML5 的Input 类型 162
6.3.2 HTML5 的表单元素 166
6.3.3 HTML5 的表单属性 168
6.4 单元案例志愿者注册页面 172
6.4.1 表单注册页面效果分析 173
6.4.2 搭建表单注册页面结构 173
6.4.3 定义表单注册页面CSS 样式 176
6.5 单元小结 178
6.6 动手实践 178
单元7 基于HTML5 的移动
Web 应用-上 179
7.1 HTML5 音频与视频 179
7.1.1 HTML5 多媒体技术概述 179
7.1.2 HTML5 音频 182
7.1.3 HTML5 视频 184
7.1.4 音频与视频相关属性、方法与事件 187
7.2 HTML5 拖放 190
7.2.1 拖放概述 190
7.2.2 拖放事件 191
7.2.3 dataTransfer 对象 · 194
目录
3
7.3 文件操作 196
7.3.1 选择文件 196
7.3.2 操作文件 197
7.4 单元案例DIY 视频播放器 200
7.4.1 页面功能分析 200
7.4.2 页面效果展示 200
7.4.2 页面设计与实现 200
7.5 单元小结 204
7.6 动手实践 204
单元8 基于HTML5 的移动
Web 应用-下 · 206
8.1 认识Canvas 元素 · 206
8.2 绘制简单图形 · 210
8.2.1 绘制直线 210
8.2.2 绘制三角形 · 211
8.2.3 绘制矩形 213
8.2.4 清空画布 215
8.3 绘制曲线 217
8.3.1 绘制圆 217
8.3.2 绘制其他曲线 218
8.4 图形的变换 221
8.4.1 移动坐标空间 221
8.4.2 旋转坐标空间 222
8.5 操作与使用图像 224
8.5.1 绘制图像 224
8.5.2 改变图像大小 225
8.5.2 创建图像切片 226
8.6 绘制文字 228
8.6.1 绘制填充文字 228
8.6.2 绘制轮廓文字 230
8.7 图形的组合与裁切 233
8.7.1 图形的组合 · 233
8.7.2 裁切路径 234
8.8 更多的颜色和样式选择 235
8.8.1 绘制线性渐变 235
8.8.2 绘制放射性渐变 238
8.8.3 绘制图案 239
8.9 SVG 创建2D 图形 240
8.9.1 在页面中添加SVG 241
8.9.2 应用SVG · 241
8.10 单元案例绘制桌面时钟 243
8.10.1 页面效果分析 · 244
8.10.2 页面实现 244
8.11 单元小结 · 247
8.12 动手实践 · 247
单元9 响应式Web 设计神器
Bootstrap 248
9.1 Bootstrap 环境安装 · 248
9.2 Bootstrap 常用CSS 样式 · 252
9.2.1 Bootstrap 栅格系统 · 252
9.2.2 Bootstrap 排版 254
9.2.3 Bootstrap 表格 257
9.2.4 Bootstrap 表单 258
9.2.5 Bootstrap 按钮 261
9.3 Bootstrap 布局组件 · 263
9.3.1 Bootstrap 字体图标 · 263
9.3.2 Bootstrap 下拉菜单与按钮组 264
9.3.3 Bootstrap 导航 266
9.3.4 Bootstrap 导航栏 267
9.3.5 Bootstrap 分页和列表组 268
9.4 Bootstrap 常用插件 · 270
9.4.1 Bootstrap 标签页 270
9.4.2 Bootstrap 轮播插件 · 271
9.4.3 Bootstrap 折叠 274
9.5 单元案例新冠疫苗预约
网页面 · 276
9.5.1 页面效果分析 276
9.5.2 页面实现 277
9.6 单元小结 279
9.7 动手实践 279
单元10 实战开发英语学习网站 · 281
10.1 Bootstrap 项目的搭建 · 281
10.2 首页效果预览与首页结构搭建 · 282
移动Web 开发实战HTML5 CSS3 Bootstrap（慕课版）
4
10.3 首页导航与轮播图实现 · 284
10.3.1 首页导航栏实现 284
10.3.2 首页轮播图 285
10.4 首页主体内容及底部菜单 288
10.4.1 主体内容 288
10.4.2 底部菜单 292
10.5 在线学习页面 295
10.5.1 导航栏与底部菜单 295
10.5.2 主体内容实现 · 297
10.6 英语新闻页面 300
10.6.1 导航栏与底部菜单 300
10.6.2 主体内容实现 · 302
10.7 单元小结 · 306
10.8 动手实践 · 306