1.4　基于HTML5的移动Web开发

作为新一代的Web技术标准，HTML5标准定义的规范非常广泛，以下标准在目前的移动Web浏览器中已得到很好的支持。

1.多媒体

在现在的网站中，音频和视频早已成为网站重要的组成部分。但是，长久以来音频和视频一直依赖于第三方插件，插件会给网站带来一些性能和稳定性的问题。HTML5的多媒体中，<audio>与<video>标签的出现让音频与视频网站开发有了新的选择。<audio>与<video>标签用于播放音频和视频，并且HTML5规范为其提供了可脚本化控制的API。图1-4所示为使用<video>标签后的界面，图1-5所示为使用<audio>标签后的界面。

2.canvas

过去很长一段时间，网页显示图像是用jpg、png等嵌入式图像格式。动画通常是由Flash实现的。现在出现了一种新的图形格式如canvas，它是HTML5的新增元素。

canvas意为画布，现实生活中的画布是用来作画的，HTML5中的canvas与之类似，可以称其为“网页中的画布”。有了这个画布便可以轻松地在网页中绘制图形、文字、图片等。HTML5中提供了<canvas>标签，使用<canvas>标签可以在网页中创建一个矩形区域的画布，它本身不具有绘制功能，可以通过脚本语言（JavaScript）操作绘制图形的API进行绘制操作。

用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框架，本书将着重讲解该框架的使用方法。