Web前端培訓：基于HTML5的移動Web開發(fā)

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

　　1.多媒體

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

　　2.canvas

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

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

　　用canvas可以繪制炫麗的頁面，很適合做一些圖表、動畫、小游戲等。

　　3.本地存儲

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

　　4.離線應用

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

　　5.地理定位

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

　　6.移動Web框架

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