本书详细讲解了HTML5移动Web 开发的相关技术。全书共8章，第1章是初识移动Web开发;第2章是HTML5新特性;第3章是移动端页面布局和常用事件;第4章是跨平台移动Web技术;第5~7章是 Bootstrap 相关内容，主要包括栅格系统、常用组件和常用样式;第8章是综合项目——黑马财富。？本书附有配套视频、教学PPT、教学设计、测试题等资源，同时，为了帮助初学者更好地学习本书中的内容，还提供了在线答疑，欢迎读者关注。
本书适合作为高等院校计算机相关专业程序设计类课程或者Web 开发的专用教材，也可作为广大计算机编程爱好者的参考用书。

如今，移动互联网已经逐渐渗透到人们生活、工作的各个领域，移动智能设备也已相当普及，人们可以随时随地通过手机、iPad等设备获取信息和服务，微信、支付宝、百度地图等丰富多彩的移动互联网应用正在深刻改变信息时代的社会生活。随着移动互联网业务不断发展壮大，海量的平台开发工作形成了巨大的人才缺口， 尤其是移动端HTML5开发人才尤为紧缺，Web开发人员的地位在业内也开始迅速提高。
为什么要学习本书
本书讲解了HTML5移动Web开发相关的技术，包括HTML5新特性、移动端页面布局和常用事件、跨平台移动Web技术，以及一款市面上非常流行的前端框架Bootstrap 的使用。
本书对第一版内容进行了整体优化和调整。从技术上，本书将 Bootstrap 版本从3.x 升级到4.x。在内容结构上，本书增加了 Bootstrap 框架技术在全书中的比重。在章节构思上，本书对案例和知识点的连接进行了优化。使二者之间的联系更加紧密。在案例的讲解上，本书对案例实现步骤进行了拆分，以更加细致、更加适合读者的思维方式来呈现案例实现过程。
如何使用本书
本书共分8章，各章内容简要介绍如下。
● 第1章是初识移动 Web开发，讲解了移动Web开发的相关概念以及 Visual Studio Code编辑器的使用，为后面的学习奠定基础。
● 第2章讲解了HTML5新特性，包括Web Storage、音频与视频、地理定位、拖曳操作、文件操作和 Canvas。通过本章的学习，读者可以使用 HTML5提供的新特性开发交互性强的Web页面。
● 第3章讲解了移动端页面的布局方式和常用事件，包括流式布局的概念、视口、移动端 touch事件的使用方法以及阶段项目——移动商城。通过本章的学习，读者可以具备编写基本的移动Web页面的能力。·第4章讲解了跨平台Web技术，包括响应式Web设计、媒体查询、栅格系统、弹性盒布局以及阶段项目——旅游网。通过本章学习，读者可以具备跨平台网页开发
的能力，能够使一个页面根据不同设备的屏幕大小进行自适应。
●第 5 ～ 7 章讲解了 Bootstrap 技术，包括 Bootstrap 的响应式 Web 开发以及Bootstrap 常用的组件和样式。通过这一阶段的学习，读者可以利用 Bootstrap 实现各类网页交互效果的开发，同时掌握 Bootstrap 的综合运用。
●第 8 章是综合项目——黑马财富，本章展示了基于 Bootstrap 开发的黑马财富项目的页面效果并进行了项目分析。由于项目代码量大、开发步骤多，考虑本书篇幅有限，所以代码讲解的部分以电子文档的形式提供，读者可通过本书配套资源获取项目的开发文档和完整源码。通过本项目的学习，读者可以具备将 Bootstrap 应用到项目开发中的能力。
在学习过程中，读者一定要亲自动手实践本书中的案例。如果不能完全理解书中所讲知识，读者可以登录“高校学习平台”，通过平台中的教学视频进行深入学习。读者学习完一个知识点后，要及时在“高校学习平台”进行测试，以巩固学习内容。
另外，如果读者在理解知识点的过程中遇到困难，建议不要纠结于某个地方，可以先往后学习。通常来讲，通过逐渐地学习，前面不懂和疑惑的知识一般也就能够理解了。在学习的过程中，读者一定要多动手实践，如果在实践的过程中遇到问题，建议多思考，厘清思路，认真分析问题发生的原因，并在问题解决后总结经验。
致谢
本书的编写和整理工作由江苏传智播客教育科技股份有限公司完成，主要参与人员有高美云、韩冬、张瑞丹、朱杰等，全体人员在近一年的编写过程中付出了很多辛勤的汗水，在此一并表示衷心的感谢。
意见反馈
尽管我们付出了最大的努力，但书中难免会有疏漏和不妥之处，欢迎读者朋友提出宝贵意见，我们将不胜感激。在阅读本书时，如发现任何问题，可以通过电子邮件与我们取得联系。来信请发送电子邮件至：itcast_book@vip.sina.com。
 黑马程序员
2021 年 6 月于北京

第1章初识移动Ｗeb开发 １
1.1 移动互联网的发展1
1.2 移动端开发的常见方式3
1.3 移动Web开发概述4
1.4 移动端的Web浏览器4
1.5 Visual Studio Code编辑器5
1.5.1 Visual Studio Code概述5
1.5.2 下载和安装Visual StudioCode6
1.5.3 安装常用扩展10
1.5.4 使用Visual Studio Code 12
小结13
课后练习14
第2章HTML5新特性 15
2.1 Web Storage 15
2.1.1 什么是Web Storage 16
2.1.2 localStorage16
2.1.3 sessionStorage19
2.1.4 Web Storage事件监听21
2.2 视频与音频.25
2.2.1标签.25
2.2.2标签..26
2.2.3 video和audio对象28
2.3 地理定位.29
2.3.1 Geolocation地理定位30
2.3.2 百度地图地理定位 33
2.4 拖曳操作39
2.4.1什么是拖曳39
2.4.2 拖曳事件.39
2.5 文件操作43
2.5.1 选择文件44
2.5.2 FileReader对象45
2.5.3 读取文件内容.46
2.6 Canvas 47
2.6.1标签 47
2.6.2 绘制线条48
2.6.3 设置线条的样式..50
2.6.4 设置线条的路径.52
小结 .55
课后练习 55
第3章移动端页面布局和常用事件. .57
3.1 流式布局.57
3.2 视口.61
3.2.1 什么是视口 .61
3.2.2 使用标签设置视口63
3.3 移动端Touch事件.66
3.3.1 Touch事件简介66
3.3.2 解决移动端click事件的延时问题.69
3.4 阶段项目——移动商城71
3.4.1 项目分析.71
3.4.2 搭建首页整体布局 .72
3.4.3 搜索栏布局76
3.4.4 轮播图布局.80
3.4.5 导航栏布局83
3.4.6 商品区——整体布局.84
3.4.7 商品区一秒杀区块布局86
3.4.8 商品区一产品区块1布局90
3.4.9 商品区一产品区块2布局.92
3.4.10 实现首页搜索栏模块效果93
3.4.11 实现首页倒计时效果 .95
3.4.12 实现首页轮播图自动轮播效果.96
3.4.13 实现首页轮播图手动轮播效果99
小结104
课后练习104
第4章跨平台移动Web技术106
4.1 响应式Web设计106
4.1.1 响应式Web设计简介 107
4.1.2 响应式Web设计相关技术. 108
4.2 媒体查询108
4.2.1什么是媒体查询 .108
4.2.2 使用媒体查询实现
4.3 栅格系统112
4.3.1什么是栅格系统113
4.3.2 动手实现简单版栅格系统113
4.4 弹性盒布局115
4.4.1 弹性盒布局的概念. 115
4.4.2 弹性盒常用属性116
4.5 阶段项目——旅游网123
4.5.1 旅游网项目分析123
4.5.2 旅游网首页整体布局 125
4.5.3 搜索栏布局.127
4.5.4 焦点图布局130
4.5.5 快捷导航栏布局.131
4.5.6 主导航栏布局134
小结 .137
课后练习 .137
第5章Bootstrap响应式移动Web开发 139
5.1 Bootstrap简介139
5.1.1 什么是Bootstrap..139
5.1.2 Bootstrap的特点140
5.2 Bootstrap下载和使用141
5.2.1 下载Bootstrap预编译文件141
5.2.2 引入Bootstrap预编译文件. 143
5.2.3 创建Bootstrap初始模板 . 143
5.3 Bootstrap布局容器 144
响应式布局容器..109
5.3.1 初识布局容器145
5.3.2 响应式布局容器146
5.4 Bootstrap栅格系统 148
5.4.1 Bootstrap栅格系统概述148
5.4.2 Bootstrap栅格系统的基本使用149
5.4.3 利用Bootstrap栅格系统实现导航栏效果.151
5.5 Bootstrap响应式工具类 154
小结 159
课后练习 159
第6章Bootstrap常用组件.161
6.1 导航组件.161
6.1.1 普通导航组件161
6.1.2 标签式导航组件 163
6.1.3 胶囊式导航组件165
6.1.4 面包屑导航组件165
6.2 导航栏组件166
6.2.1 基础导航栏组件167
6.2.2 在导航栏中添加品牌标志168
6.2.3 实现可折叠的导航栏168
6.3 表单组件. 170
6.3.1 表单控件170
6.3.2 表单布局175
6.3.3 表单验证 177
6.4 按钮组件179
6.4.1 按钮样式.179
6.4.2 按钮组 180
6.4.3 按钮工具条.181
6.5 轮播图组件182
6.5.1 轮播图页面结构183
6.5.2 实现轮播图切换效果184
6.5.3 轮播图指示器功能185
6.5.4 实现轮播图左右手动切换效果 . 186
本章小结 188
课后练习188
第7章Bootstrap常用样式.190
7.1 标题样式 190
7.1.1 使用~标签设置标题..191
7.1.2 使用.hl~.h6标题类设置标题192
7.1.3 使用.display标题类设置标题. 193
7.1.4 使用标签设置副标题.195
7.2 文本样式195
7.2.1 使用内联标签强调文本.196
7.2.2 使用文本类强调文本198
7.2.3 使用.text-*类设置文本颜色 199
7.2.4 使用.text-*类设置文本格式202
7.3 列表样式204
7.3.1 使用.list-unstyled类设置列表初始化204
7.3.2 使用.list-inline类设置内联列表206
7.3.3 设置水平定义列表207
7.4 代码样式207
7.5 图文样式 209
7.5.1 使用.img-fluid类设置响应式图像 209
7.5.2 设置图文布局模式212
7.5.3 图文组合 214
7.6 表格样式215
7.7 辅助样式 217
7.7.1 使用.bg-*类设置背景颜色218
7.7.2 设置边框样式219
7.7.3 设置元素间距 220
小结221
课后练习222
第8章综合项目——黑马财富 .224
8.1 项目展示.224
8.2 项目分析228
8.3 项目开发说明 229
小结230

江苏传智播客教育科技股份有限公司（简称传智播客）与中国铁道出版社是战略合作关系。
传智播客是一家专门致力于高素质软件开发人才培养的高科技公司。传智播客致力于为企业优选一流的人才的培训理念，经过多年的教学探索及战略布局，已向着综合型职业教育集团发展。“黑马程序员”是传智播客旗下高端IT教育品牌。

本书是“十三五”职业教育国家规划教材，详细讲解了HTML5移动Web 开发的相关技术，最后一章通过一个综合项目——黑马财富介绍项目展示、项目分析和项目开发说明，方便学习者更好地学习本书中的内容。