作者：黑马程序员
出版社：中国铁道出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
HTML5移动Web开发试读：
前言
为什么要学习《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月第1章移动互联中的Web应用
移动互联网即移动通信和互联网的结合体。用户可以通过手机、平板计算机等可移动数据终端与互联网连接，从而获得互联网中的海量资讯。【学习导航】1.1移动互联网的发展
移动互联网已经和人们的生活紧密地联系在一起，例如图1-1中展示的多种移动应用。下面了解一下移动互联网的发展历史。
在互联网发展的同时，移动互联网也呈现出爆发式的增长，CNNIC（中国互联网络信息中心）发布的《第38次中国互联网络发展状况统计报告》中，截至2016年6月，我国手机网民规模达6.56亿，网民中使用手机上网的人群占比由2015年底的90.1％提升至92.5％，仅通过手机上网的网民占比达到24.5％，网民上网设备进一步向移动端集中。随着移动通信网络环境的不断完善，以及智能手机的进一步普及，移动互联网应用向用户各类生活需求深入渗透，促进手机上网使用率增长，增长势头强劲。
图1-1 移动应用
移动互联网的发展分如下4个重要阶段：
1.第一阶段（2000—2002年）
中国移动互联网的初级阶段。2000年11月10日，中国移动推出“移动梦网计划”，打造开放、合作、共赢的产业价值链。2002年5月17日，中国电信在广州启动“互联星空”计划，标志着ISP（Internet Service Provider，Internet服务供应商）和ICP（Internet Content Provider，Internet内容服务商）开始联合打造宽带互联网产业。2002年5月17日，中国移动率先在全国范围内正式推出GPRS业务。这个阶段的主要产品有文字信息、图案及铃声。
2.第二阶段（2003—2005年）
WAP（Wireless Application Protocol，无线应用协议）时期，用户主要在移动互联网上看新闻、读小说、听音乐，开始进入以内容为主的移动互联网时代。
3.第三阶段（2006—2008年）
这时的中国移动互联网除了内容之外，开始有了一些功能性的应用，比如：手机QQ、手机搜索、手机流媒体等，手机单机游戏和手机网游起步，移动互联网开始作为传统互联网的补充，占据了用户大量的碎片时间，这是一个互动娱乐的移动互联网时代。
4.第四阶段（2009年至今）
随着3G、4G的应用，新浪微博等社交网络、基于LBS（Location Based Service）的应用、iPhone的移动APP、互联网电子商务在手机上的广泛应用，以及互联网上的应用移植，开始出现了一些新的名词：SoLoMoCo——Social（社交的）、Local（本地的）、Mobile（移动的）、Commerce（商务化）。这个阶段，移动互联网产品得到进一步发展，更加受到重视，基本上所有的互联网公司都会设立专门的移动终端部门，负责公司产品在移动终端的战略布局和发展。
在“互联网+”理念蓬勃发展的今天，移动互联网的发展给人们的生活带来了翻天覆地的变化。在移动应用开发中，开始还是以APP的开发作为其发展的主流，但是，随着HTML5技术的不断发展，将来的移动互联网应用开发将会变得更加简洁，从而给用户带来更好的体验。HTML5的发展将会引领移动互联网开发达到一个新的高度。1.2移动Web开发概述1.2.1 移动开发的几种方式
当前，针对移动端的开发方式可以分为以下3种：（1）移动Web（移动网页）：在移动Web浏览器中运行的Web应用。（2）Native APP（原生应用）：用Android和Object-C等原生语言开发的移动应用。（3）Hybrid APP（混合应用）：将移动Web页面封装在原生外壳中，以APP的形式与用户交互。
由此可以看出，移动Web开发是Hybrid APP开发的基础。表1-1列出了这3种开发方式的特点和区别。
表1-1 移动端开发方式比较
从表1-1可以看出，移动Web这种开发方式具有开发成本低，维护更新简单，无须安装、跨平台等优点，但是在用户体验和性能上稍差。随着手机硬件设备的完善、移动Web浏览器对新技术的支持日益加大，移动Web开发的用户体验和网站性能也会逐步得到提高。1.2.2 移动Web开发与PC端Web开发的区别
移动Web开发即针对移动端的Web页面的开发，它与PC端Web开发的区别如下：
1.PC端Web开发
PC端Web开发主要由HTML、CSS和JavaScript技术来实现。PC端Web开发的内容包括网站页面内容、样式的呈现、用户的交互、数据的呈现等。它需要PC端浏览器对HTML、CSS和JavaScript及其他技术的支持。在开发时，需要注意不同厂家浏览器对前端技术支持的差异化，需要考虑浏览器的兼容性。
2.移动Web开发
移动Web开发与PC端Web开发所用的技术类似，开发项目的呈现依赖于移动端Web浏览器。在移动Web开发中，需要注意以下两点：（1）由于屏幕大小的限制，在移动Web开发中，要注意页面的结构不能过于烦琐；要提炼出该网站最核心的功能，并简洁清晰地呈现出来。（2）页面的一切交互活动由鼠标控制变成了手指触屏控制，所以在移动Web开发时，会增加一些触屏事件。1.3移动端的Web浏览器
随着Android系统手机、iOS系统手机、Windows Phone系统手机的不断推出，手机中都会用到移动Web浏览器。例如：（1）Android中的Android Browser。（2）iOS中的Mobile Safari。（3）UC浏览器、QQ浏览器、百度浏览器等。
这些移动Web浏览器不同于过去的WAP浏览器，它们可以识别和翻释HTML、CSS、JavaScript代码，并且大多数移动端Web浏览器都是基于Webkit的。在PC端浏览器中，谷歌的Chrome浏览器、Apple的Safari浏览器都内置了Webkit引擎，并对HTML5提供了很好的支持。在移动端方面，Mobile Safari和Android Browser作为大用户平台内置的移动Web浏览器，更是继承各自PC端浏览器的特点，采用Webkit引擎并对HTML5提供良好的支持。
移动Web浏览器可以直接访问任何通过HTML等语言构建的网站或应用程序。例如，通过iPhone手机上的Safari浏览器访问了黑马程序员网站的首页，如图1-2所示。
图1-2 移动Web浏览器
下面作为对比，在PC端访问黑马程序员网站的首页，如图1-3所示。
图1-3 PC端网站首页
通过同一个网站针对不同端的设计对比，反映了移动Web浏览器的一些特点。
1.屏幕尺寸限制
移动Web浏览器受到屏幕尺寸的限制，所以移动端网站的设计会将本站最核心的产品进行展示，菜单栏会缩进在菜单中。
2.加入手势操作
移动端会支持触屏、滑动、缩放等手势操作。
3.硬件设备局限性
PC端硬件配置相对强大，各种浏览器对硬件的要求已经无须太多的限定。而手机的性能相对于PC端要低得多，内置的浏览器需要考虑硬件因素。所以，移动Web浏览器功能相对有限。但是，随着手机硬件设备的不断加强，移动Web浏览器支持的功能也越来越多。
4.可支持HTML5规范
现在的移动Web浏览器都可以支持HTML5，这包括HTML5规范、CSS3规范和JavaScript脚本代码。1.4基于HTML5的移动Web开发
作为新一代的Web技术标准，HTML5标准定义的规范非常广泛，以下标准在目前的移动Web浏览器中已得到很好的支持。
1.多媒体
在现在的网站中，音频和视频早已成为网站重要的组成部分。但是，长久以来音频和视频一直依赖于第三方插件，插件会给网站带来一些性能和稳定性的问题。HTML5的多媒体中，
图1-4 使用
图1-5 使用
2.canvas
过去很长一段时间，网页显示图像是用jpg、png等嵌入式图像格式。动画通常是由Flash实现的。现在出现了一种新的图形格式如canvas，它是HTML5的新增元素。
canvas意为画布，现实生活中的画布是用来作画的，HTML5中的canvas与之类似，可以称其为“网页中的画布”。有了这个画布便可以轻松地在网页中绘制图形、文字、图片等。HTML5中提供了
用canvas可以绘制绚丽的页面，很适合做一些图表、动画、小游戏等。图1-6所示为用canvas制作的小游戏画面。
图1-6 canvas小游戏画面
3.本地存储
为了满足本地存储数据的需求，HTML5规范中提出了Web Storage存储机制。Web Storage速度更快，而且安全，只会存储在浏览器中而不会随HTTP请求发送到服务器端。它可以存储大量数据而不会影响到网站的性能。
4.离线应用
当移动应用遇到无网络状态时就会瘫痪，为了解决这个问题，HTML5规范中提供了一种离线应用功能。当支持离线应用的浏览器检测到清单文件（Manifest File）中的任何资源文件时，便会下载对应的资源文件，将它们缓存到本地，同时离线应用也保证本地资源文件的版本和服务器上保持一致。对于移动设备来说，当遇到无网络状态时，Web浏览器便会自动切换到离线状态，并读取本地资源以保证Web应用程序继续可用。
5.地理定位
获取定位信息的方式有很多种，精度最高的是GPS技术，除此之外，还可以通过基站和Wi-Fi热点等方式来获取位置。在Web上，Geolocation API（地理位置应用程序接口）提供了准确获取浏览器用户当前位置的功能，而且封装了获取位置的技术细节，开发者不用关心位置信息究竟从何而来，极大简化了应用的开发难度。
6.移动Web框架
因为有了HTML5和移动Web浏览器的支持，越来越多的开发者开始研究基于移动平台的Web应用框架，例如基于jQuery页面驱动的jQuery Mobile，基于Ext JS架构的Sencha Touch，加入强大Less混入的Bootstrap，等等。这些移动Web框架让移动Web开发更加快捷，并且能适应现在市场上的各种屏幕尺寸，大大减少了移动Web开发人员的工作成本。
目前，使用最广泛的就是Bootstrap框架，本书将着重讲解该框架的使用方法。小结
本章主要讲解了移动Web开发，以及基于HTML5的移动Web开发所应用的相关技术。通过本章学习，读者可以了解什么是移动Web开发，以及本书重点讲解的内容，如HTML5的本地存储、离线应用、地理定位，以及移动Web开发的实用框架。【思考题】
1.列举移动开发的几种方式。
2.列举基于HTML5的移动Web开发支持哪些新功能。第2章基于HTML5的移动Web应用（上）
HTML5是HTML当前最新的版本，是新一代Web相关技术的总称。在HTML5中提供了很多新的特性，针对移动Web开发方面，除了基本的语义化标签，还提供了一些移动应用的功能，如本地存储、离线应用、画布、多媒体、拖曳、文件操作、地理定位等。本章将针对HTML5的网络存储、离线应用和画布进行详细讲解。【学习导航】2.1HTML5的网络存储
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足日益更新的需求，会经常性地在本地设备上存储大量的数据，例如记录历史活动信息。传统方式使用document.cookie来进行存储，但由于其存储的空间只有4KB左右，并且需要复杂的操作来解析，给发开者带来很多不便，为此，HTML5规范提出了网络存储的解决方案。2.1.1 Web Storage简介
HTML5的本地存储解决方案中定义了两个重要的API：Web Storage和本地数据库Web SQL Database。本书将重点讲述Web Storage的基本用法。
在Web Storage API中包含两个关键的对象：window.localStorage对象和window.ses-sionStorage对象。前者用于本地存储，后者用于区域存储。
Web Storage具有以下特点：（1）设置数据和读取数据比较方便。（2）容量较大，sessionStorage约5MB，localStorage约20MB。（3）只能存储字符串，如果要存储JSON对象，可以使用window.JSON的stringify（）方法和parse（）方法进行序列化和反序列化。
目前，主流的Web浏览器都在一定程度上支持HTML5的Web Storage，如表2-1所示。
表2-1 主流浏览器对Web Storage的支持情况
从表2-1可以看出，IE 8版本以上的主流浏览器基本上都支持Web Storage，移动设备的浏览器支持情况，如表2-2所示。
表2-2 移动浏览器对Web Storage的支持情况
从表2-2可以看出，iOS平台和Android平台对Web Storage都有很好的支持，目前市面上的主流手机和平板计算机都依赖这两个平台，所以在实际开发中，基本不需要考虑Web Storage的浏览器兼容情况。但是考虑代码的严谨性，可以使用如下语句进行检查：
除了在移动平台上具有良好的兼容性，使用Web Storage还有以下优势：（1）减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。（2）快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此如果整个页面和数据都在本地，可以立即显示。（3）临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃，这种情况使用sessionStorage非常方便。2.1.2 localStorage
localStorage作为HTML5 Web Storage的API之一，主要作用是本地存储。本地存储是指将数据按照键值对的方式保存在客户端计算机中，直到用户或者脚本主动清除数据，否则该数据会一直存在。也就是说，使用了本地存储的数据将被持久化。
localStorage的优势在于拓展了cookie的4KB限制，并且可以将第一次请求的数据直接存储到本地，这相当于一个5MB大小的针对于前端页面的数据库。相比于cookie，localStorage可以节约带宽，但是这项功能需要高版本的浏览器来支持。
localStorage在使用中也有一些局限：（1）浏览器的大小不统一，并且在IE 8以上的IE版本才支持localStorage这个属性。（2）目前所有的浏览器中都会把localStorage的值类型限定为String类型，对于日常比较常见的JSON对象类型需要做一些转换。（3）localStorage在浏览器的隐私模式下是不可读取的。（4）localStorage本质上是对字符串的读取，如果存储的内容多会消耗内存空间，导致页面下载变慢。（5）localStorage不能被网络爬虫抓取到。
localStorage是Storage的实例，Storage接口中提供了以下方法和属性，如表2-3所示。
表2-3 Storage接口的方法和属性
了解了localStorage的方法和属性后，下面通过一个案例来演示localStroage的具体使用方法，如demo2-1.html所示。
demo2-1.html
在上述代码中，第8行的输入框用于输入数据，然后分别为第9、10、11行按钮绑定事件，在单击按钮时会触发相应的事件，第16、20、26行分别使用了localStorage的seItem（）、getItem（）和removeItem（）方法，用于设置数据、获取数据和删除数据。
打开浏览器，访问demo2-1.html，页面效果如图2-1所示。
图2-1 demo2-1.html页面效果
在图2-1的文本框中输入“黑马程序员”，并且单击第1个按钮“localStorage设置数据”，这时数据将被存储到localStorage中，如图2-2所示。
图2-2 设置数据
单击第2个按钮“localStorage获取数据”来查看数据是否设置成功，如果成功会显示在弹出框中，如图2-3所示。
单击第3个按钮“localStorage删除数据”，可以删除该数据，删除后单击获取数据的按钮，弹出框中显示null，表示删除成功，如图2-4所示。
图2-3 获取数据
图2-4 删除数据成功2.1.3 sessionStorage
sessionStorage主要用于区域存储，区域存储是指数据只在单个页面的会话期内有效。下面首先介绍一下什么是会话。
session翻译成中文就是会话的意思，比如现实生活中，打电话时从拿起话筒拨号到挂断电话之间的一系列过程可以称为一次会话。在Web开发中，一次会话是指从一个浏览器窗口打开到关闭的期间，关闭浏览器，会话就将结束。
由于sessionStroage也是Storage的实例，sessionStroage与localStorage中的方法基本一致，唯一的区别就是存储数据的生命周期不同。locaStorage是永久性存储，而sessionStorage的生命周期与会话保持一致，会话结束时数据消失。从硬件方面理解，localStorage的数据是存储在硬盘中的，关闭浏览器时数据仍然在硬盘上，再次打开浏览器仍然可以获取，而sessionStorage的数据保存在浏览器的内存中，当浏览器关闭后，内存将被自动清除。需要注意的是，sessionStorage中存储的数据只在当前浏览器窗口有效。
下面通过一个案例来演示sessionStorage如何存储JSON对象，如demo2-2.html所示。
demo2-2.html
在上述代码中，第8、9行代码定义了两个文本框，用于输入姓名和年龄的信息；然后在第18、19行代码使用JavaScript获取这些信息，并且存放在第21行定义的user对象中；在第26行使用JSON.stringify（）方法将user对象序列号成字符串，存入到sessionStorage中，在第31行进行获取，这样单击“获取数据”按钮时，便会触发事件，将数据显示到弹出框中。需要注意的是，这里的删除数据使用的是clear（）方法，该方法可以清除所有数据，而本案例只存了一条数据，所以只删除了一条数据。
打开浏览器，访问demo2-2.html，页面效果如图2-5所示。
图2-5 demo2-2.html页面效果
在图2-5的中输入信息，姓名lucy，年龄21，并且单击第1个按钮“sessionStorage设置数据”，这时数据将被存储到sessionStorage中，如图2-6所示。
图2-6 设置数据
单击第2个按钮“sessionStorage获取数据”来查看数据是否设置成功，如果成功会显示在弹出框中，如图2-7所示。
单击第3个按钮“sessionStorage清除所有数据”，可以删除该数据，删除后单击获取数据的按钮，弹出框中显示null，表示删除成功，如图2-8所示。
图2-7 获取数据
图2-8 删除数据成功2.1.4 Storage事件监听
在使用Web Storage API存储数据时，当存储的数据发生变化时，会触发window对象的storage事件，通过监听该事件并指定其事件处理函数，可以定义在其他页面中修改sessionStorage或localStorage中的值时所要执行的处理。监听storage事件的示例代码如下：
在上述代码中，回调函数接收一个event对象作为参数。这个event对象的key属性保存发生变化的键名。
试读结束[说明：试读内容隐藏了图片]