近些年，移动互联网迅速进入人们的生活、工作中。在移动互联网中起支撑作用的网页、APP等开发技术也已经成熟。除了原生的Android与iOS外，HTML5也是移动Web技术中不可忽视的一种开发模式。本书详细讲解了HTML5在移动Web开发中的应用，包括多媒体、canv
为什么要学习《HTML5移动Web开发》
随着互联网行业的持续发展，移动互联网新业务不断发展壮大。HTML5的发展打开了移动开发的新格局，日益成熟的HTML5移动开发技术在实现移动端页面呈现的基础上，性能方面也得到了很大的提升，这些发展都使得移动端HTML5开发人才更为紧缺。
虽然目前HTML5移动Web开发与原生开发还有一定差距，但是在开发成本上HTML5移动开发要比原生开发低得多，并且随着HTML5的不断发展，终将有一天HTML5移动开发可以达到与原生开发一样的效果。HTML5移动开发也一定会更趋向于主流开发。本书汇集了HTML5中移动端常用的技术，适合对HTML5移动开发感兴趣的读者。
如何使用本书
本书适合有HTML5、CSS3和JavaScript基础的学生使用。作为一门新技术教程，重要也是难的一件事情就是要将一些复杂的功能简单化，让读者能够轻松理解并快速掌握。本书对每个知识点都进行了深入的分析，并针对每个知识点精心设计了相关案例，然后在每个阶段模拟这些知识点在实际工作中的运用，真正做到了知识由浅入深、由易到难。
本书共分8章，第1~4章主要讲解了移动Web页面的常用技术；第5章是一个移动端的综合项目；第6~7章主要讲解了跨平台移动Web技术，即可适应各种尺寸屏幕的页面开发技术；第8章是一个跨平台的综合项目。下面分别对每个章节进行简单介绍，具体如下：
（1）第1章主要让读者对移动互联网有基础的理解，与HTML5中的移动技术第一次见面。
（2）第2章讲解了基于HTML5的移动Web应用中的网络存储、离线应用和画布技术。
（3）第3章讲解了基于HTML5的移动Web应用中的多媒体、Geolocation地理定位、拖曳和文件操作技术。
（4）第4章集中讲解了移动端常用的页面布局和移动端常用事件。
（5）第5章综合项目黑马掌上商城，是一章模拟网上商城的移动端实战
课程。
（6）第6章讲解了跨平台移动Web技术，包括响应式Web设计、媒体查询、栅格系统、弹性盒布局等。
（7）第7章讲解了在移动端开发使用非常广泛的Bootstrap框架。
（8）第8章综合项目黑马财富，详细讲解了理财公司网站首页响应式页面的制作方法。
如果读者在理解知识点的过程中遇到困难，建议不要纠结于某个地方，可以先将案例按教程编写出来。通常来讲，在熟悉代码过程后，前面看不懂的知识点一般就能理解了。如果读者在动手练习过程中遇到问题，建议多思考，理清思路，认真分析问题发生的原因，并在问题解决后多进行总结。
致谢
本书的编写和整理工作由传智播客教育科技股份有限公司完成，主要参与人员有吕春林、马丹、金鑫、马伦、刘晓强等，全体人员在这近一年的编写过程中付出了很多辛勤的汗水，在此一并表示衷心的感谢。
意见反馈
尽管我们尽了大的努力，但书中仍难免会有不妥之处，欢迎各界专家和读者朋友来信来函提出宝贵意见，我们将不胜感激。在阅读本书时，若发现任何问题或有不认同之处，可以通过电子邮件与我们取得联系。
请发送电子邮件至：itcast_book@vip.sina.com
黑马程序员
2017年4月
中关村黑马程序员训练营是由传智播客教育科技有限公司（简称传智播客）联合中关村软件园、CSDN，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。 目前，中关村黑马程序员训练营已成长为行业学员质量好、课程内容深、企业满意的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。
第1章
移动互联中的Web应用 .................1
1.1 移动互联网的发展
...............1
1.2 移动Web开发概述
...............3
1.2.1 移动开发的几种
方式 ............................3
1.2.2 移动Web开发与PC端Web开发的区别
.........4
1.3 移动端的Web浏览器
...........4
1.4 基于HTML5的移动Web
开发 .......................................5
小结 ................................................7
思考题 ............................................7
第2章
基于HTML5的移动Web应用（上） ...8
2.1 HTML5的网络存储 .............8
2.1.1 Web Storage简介 ........9
2.1.2 localStorage
..............10
2.1.3 sessionStorage
...........12
2.1.4 Storage 事件监听 .....14
2.2 移动Web离线应用
.............15
2.2.1 离线应用简介 ..........15
2.2.2 Application Cache
的基本应用 ..............16
2.2.3 applicationCache
对象 ..........................20
2.2.4 离线缓存更新 ..........21
2.3 HTML5画布
.......................22
2.3.1 初识canvas
...............22
2.3.2 利用canvas 绘制
矩形和清除矩形 ......25
2.3.3 利用canvas 绘制
圆形
..........................27
2.3.4 利用canvas 绘制
图片 ..........................28
2.3.5 利用canvas 其他
方法 ..........................30
小结 ..............................................31
思考题 ..........................................31
第3章
基于HTML5的移动Web应用（下） ...32
3.1 视频与音频
.........................32
3.1.1
使用 ..........................33
3.1.2 HTML DOM Video
对象 ..........................35
3.1.3
使用 ..........................38
3.1.4 HTML DOM Audio
对象 ..........................39
3.2 Geolocation地理定位
.........42
3.2.1 Geolocation简介 .......42
3.2.2 获取当前位置 ..........42
3.2.3 调用百度地图 ..........45
3.3 拖曳
.....................................49
3.4 文件操作
.............................52
3.4.1 选择文件
..................53
3.4.2 操作文件
..................55
小结 ..............................................59
思考题 ..........................................59
第4章
移动端页面布局和常用事件 ............60
4.1 流式布局
.............................60
4.2 视口
.....................................62
4.2.1 理解视口
..................62
4.2.2 移动端的3种视口 ....63
4.3 移动端常用事件
.................65
4.3.1 Touch事件简介
........65
4.3.2 Touch事件的应用 ....67
4.3.3 过渡和动画结束
事件 ..........................70
小结 ..............................................75
思考题 ..........................................75
第5章
综合项目黑马
掌上商城 ..........76
5.1 项目简介
.............................76
5.1.1 项目功能展示 ..........77
5.1.2 项目目录和文件
结构 ..........................77
5.1.3 项目开发流程 ..........78
5.2 商城首页
.............................80
5.2.1 【任务1】 项目
搭建 ..........................80
5.2.2 【任务2】 页面主体
和头部搜索 ..............83
5.2.3 【任务3】 轮播图 ...87
5.2.4 【任务4】 导航栏 ...92
5.2.5 【任务5】 商品 ......95
5.3 商品分类页
.......................102
5.3.1 【任务6】 顶部
通栏 ........................102
5.3.2 【任务7】 左侧栏 ...104
5.3.3 【任务8】 右侧栏 ...109
5.4 购物车页面
.......................114
5.4.1 【任务9】 购物
车页面 ....................114
5.4.2 【任务10】 弹出
框动画 ....................122
5.5 Zepto.js
..............................127
5.5.1 Zepto 模块
..............127
5.5.2 Zepto的使用
...........128
小结 ............................................129
思考题 ........................................130
第6章
跨平台移动Web
技术 ..............131
6.1 响应式Web设计
...............131
6.1.1 响应式Web设计
简介 ........................132
6.1.2 响应式Web设计
相关技术 ................133
6.2 媒体查询
...........................133
6.3 栅格系统
...........................136
6.4 弹性盒布局
.......................139
小结
...........................................146
思考题 ........................................146
第7章
使用Bootstrap进行
移动Web开发 ...147
7.1 初识Bootstrap
...................147
7.1.1 Bootstrap简介
.........147
7.1.2 Bootstrap下载
.........148
7.1.3 Bootstrap基本
模板 ........................150
7.2 Bootstrap常用布局 ...........151
7.2.1 布局容器
................151
7.2.2 栅格系统
................152
7.2.3 响应式工具
............154
7.3 Bootstrap常用样式 ...........157
7.3.1 导航栏
....................157
7.3.2 表单
........................161
7.3.3 按钮
........................166
7.3.4 标签页
....................168
7.3.5 轮播插件
................170
小结 ............................................174
思考题 ........................................174
第8章
综合项目黑马
财富 ..............175
8.1 项目简介
...........................176
8.1.1 项目功能展示 ........176
8.1.2 项目目录和文件
结构 ........................178
8.1.3 项目开发流程 ........179
8.2 【任务1】 index.html页面
结构搭建 ...........................180
8.3 【任务2】 顶部通栏
模块 ...................................182
8.4 【任务3】 导航栏模块 ...186
8.5 【任务4】 轮播图模块 ...191
8.6 【任务5】 信息和预约
模块 ...................................197
8.7 【任务6】 产品模块 .......203
8.8 【任务7】 新闻和合作
伙伴模块 ...........................213
小结 ............................................222
思考题 ........................................222
书单推荐
