1.4　基于HTML5的移動Web開發(fā)

作為新一代的Web技術標準，HTML5標準定義的規(guī)范非常廣泛，以下標準在目前的移動Web瀏覽器中已得到很好的支持。

1.多媒體

在現在的網站中，音頻和視頻早已成為網站重要的組成部分。但是，長久以來音頻和視頻一直依賴于第三方插件，插件會給網站帶來一些性能和穩(wěn)定性的問題。HTML5的多媒體中，<audio>與<video>標簽的出現讓音頻與視頻網站開發(fā)有了新的選擇。<audio>與<video>標簽用于播放音頻和視頻，并且HTML5規(guī)范為其提供了可腳本化控制的API。圖1-4所示為使用<video>標簽后的界面，圖1-5所示為使用<audio>標簽后的界面。

2.canvas

過去很長一段時間，網頁顯示圖像是用jpg、png等嵌入式圖像格式。動畫通常是由Flash實現的。現在出現了一種新的圖形格式如canvas，它是HTML5的新增元素。

canvas意為畫布，現實生活中的畫布是用來作畫的，HTML5中的canvas與之類似，可以稱其為“網頁中的畫布”。有了這個畫布便可以輕松地在網頁中繪制圖形、文字、圖片等。HTML5中提供了<canvas>標簽，使用<canvas>標簽可以在網頁中創(chuàng)建一個矩形區(qū)域的畫布，它本身不具有繪制功能，可以通過腳本語言（JavaScript）操作繪制圖形的API進行繪制操作。

用canvas可以繪制絢麗的頁面，很適合做一些圖表、動畫、小游戲等。圖1-6所示為用canvas制作的小游戲畫面。

3.本地存儲

為了滿足本地存儲數據的需求，HTML5規(guī)范中提出了Web Storage存儲機制。Web Storage速度更快，而且安全，只會存儲在瀏覽器中而不會隨HTTP請求發(fā)送到服務器端。它可以存儲大量數據而不會影響到網站的性能。

4.離線應用

當移動應用遇到無網絡狀態(tài)時就會癱瘓，為了解決這個問題，HTML5規(guī)范中提供了一種離線應用功能。當支持離線應用的瀏覽器檢測到清單文件（Manifest File）中的任何資源文件時，便會下載對應的資源文件，將它們緩存到本地，同時離線應用也保證本地資源文件的版本和服務器上保持一致。對于移動設備來說，當遇到無網絡狀態(tài)時，Web瀏覽器便會自動切換到離線狀態(tài)，并讀取本地資源以保證Web應用程序繼續(xù)可用。

5.地理定位

獲取定位信息的方式有很多種，精度最高的是GPS技術，除此之外，還可以通過基站和Wi-Fi熱點等方式來獲取位置。在Web上，Geolocation API（地理位置應用程序接口）提供了準確獲取瀏覽器用戶當前位置的功能，而且封裝了獲取位置的技術細節(jié)，開發(fā)者不用關心位置信息究竟從何而來，極大簡化了應用的開發(fā)難度。

6.移動Web框架

因為有了HTML5和移動Web瀏覽器的支持，越來越多的開發(fā)者開始研究基于移動平臺的Web應用框架，例如基于jQuery頁面驅動的jQuery Mobile，基于Ext JS架構的Sencha Touch，加入強大Less混入的Bootstrap，等等。這些移動Web框架讓移動Web開發(fā)更加快捷，并且能適應現在市場上的各種屏幕尺寸，大大減少了移動Web開發(fā)人員的工作成本。

目前，使用最廣泛的就是Bootstrap框架，本書將著重講解該框架的使用方法。