李國華

（中國科技開發(fā)院廣西分院，廣西 南寧 530022）

HTML5-下一代Web開發(fā)技術(shù)

李國華

（中國科技開發(fā)院廣西分院，廣西 南寧 530022）

HTML5被認(rèn)為是互聯(lián)網(wǎng)行業(yè)冉冉升起的新星，它受到了各大瀏覽器廠商的支持。文章簡要的描述了HTML5的相關(guān)概念，并闡述了HTML5在繪制圖形、多媒體播放、本地存儲、離線Web應(yīng)用程序、獲取地理信息等方面的應(yīng)用。

HTML5；移動應(yīng)用

1 背景

1.1HTML5的相關(guān)概念

（1）World Wide Web

World Wide Web（下文簡稱Web），中文名稱萬維網(wǎng)，是信息資源的網(wǎng)絡(luò)。Web的廣泛應(yīng)用，依賴于三個核心機制。

①URI：一個統(tǒng)一的命名規(guī)范，用于定位Web中的資源；

②HTTP：用于訪問Web資源的網(wǎng)絡(luò)協(xié)議；

③HTML：用于描述資源和應(yīng)用，以及在資源直接導(dǎo)航的超文本標(biāo)記語言。

（2）URI

Web中每一個可用的資源，都可以使用 Universal Resource Identifier（統(tǒng)一資源標(biāo)識符，簡稱URI）來標(biāo)識。通常，URI由以下三部分構(gòu)成：

①用于訪問資源的機制；

②存放資源的主機；

③資源在主機中的路徑名。

例如，以下的URI

http://www.w3.org/TR

所標(biāo)識的資源，訪問機制是 http協(xié)議，主機為www.w3.org，資源的訪問路徑是/TR。

（3）HTML5

2014年 10月 28日，萬維網(wǎng)聯(lián)盟（World Wide Web Consortium，W3C）發(fā)布了 HTML5的正式推薦標(biāo)準(zhǔn)（W3C Recommendation）。HTML5是超文本標(biāo)記語言第5版，在這個版本中，增加了很多的新特性和新元素，而且重新定義了清晰的規(guī)則，使得Web應(yīng)用開發(fā)更加規(guī)范和友好，大大擴(kuò)展了Web開發(fā)者的能力，減輕了他們的負(fù)擔(dān)。

HTML5帶來了許多新的用戶體驗。使用HTML5開發(fā)的網(wǎng)頁可以自然的支持音頻和視頻，不需要安裝額外的插件。支持畫布功能，可以在其上進(jìn)行圖像繪制。可以使用數(shù)學(xué)標(biāo)記語言描述數(shù)學(xué)公式，可以使用輕量級的矢量圖，可以定位用戶的地理位置，支持服務(wù)端推送消息，等等。

1.2HTML5出現(xiàn)的背景

（1）WEB標(biāo)準(zhǔn)的瓶頸

以前的改進(jìn)都是基于現(xiàn)有的Web頁面標(biāo)記模型，偏重于技術(shù)上的變革，本質(zhì)上卻對應(yīng)用本身貢獻(xiàn)甚微。HTML不僅僅是一個文檔，HTML需要關(guān)注應(yīng)用本身，需要實用化的技術(shù)。

（2）云計算的趨勢

過去，瀏覽器只負(fù)責(zé)網(wǎng)頁基本內(nèi)容、格式的渲染和基礎(chǔ)腳本的執(zhí)行，其他應(yīng)用由第三方插件或者專門的軟件來完成。網(wǎng)絡(luò)技術(shù)發(fā)展的大勢所趨是瘦客戶端與云計算的組合，瀏覽器能力要更強大。

1.3HTML5出現(xiàn)的意義

（1）更加關(guān)注web應(yīng)用

新元素的引入都是基于編寫實踐，并且“改善交互能力”成為了重點關(guān)注的領(lǐng)域。

（2）設(shè)備無關(guān)性

HTML并不假定一定會是一個 PC上的瀏覽器來展現(xiàn)頁面，開發(fā)的應(yīng)用不需要考慮不同操作系統(tǒng)的差別，設(shè)備無關(guān)的交互體驗特性可以讓移動終端獲得更好的可用性。

（3）更低的成本

使得頁面變得更小，減少了用戶不必要的支出。而且，性能更好使耗電量更低。

（4）WEB文檔的結(jié)構(gòu)

借助HTML5的語義標(biāo)簽，可以實現(xiàn)更具結(jié)構(gòu)化，語義化的 Web 文檔。

（5）更好的安全性

不需要額外的插件支持，安全性可以統(tǒng)一給予保證。

2 html5的主要特性分析

2.1視頻

HTML5出現(xiàn)之前，如果需要在網(wǎng)頁上播放視頻，通常是安裝額外的瀏覽器插件，比如Flash。但是，這是各個瀏覽器廠商和播放器廠商的自發(fā)行為，并沒有一個標(biāo)準(zhǔn)來規(guī)范如何在網(wǎng)頁上使用視頻。因此，不同的瀏覽器存在各種各樣差異和兼容性問題，給開發(fā)者和用戶造成了很多的困擾。

HTML5改變了這種情形。HTML5提供了

（1）Ogg–一種強大的容器格式，HTML5支持Theora編碼的視頻；

（2）MPEG4-HTML5支持H.264編碼的視頻；

（3）WebM-HTML5支持VP8編碼的視頻。

就像操作網(wǎng)頁上的其他元素一樣，HTML5中的Javascript腳本能夠通過DOM（文檔對象模型）操作

2.2音頻

音頻和視頻類似，HTML5之前人們通過瀏覽器插件播放和控制音頻，不同廠商和版本的瀏覽器對音頻支持差異很大，導(dǎo)致播放音頻的網(wǎng)頁常常不能在各瀏覽器間通用，開發(fā)人員要針對不同瀏覽器開發(fā)不同的網(wǎng)頁版本，代價巨大。插件的安裝增加了用戶的困擾，加上操作系統(tǒng)和防護(hù)軟件的限制，常常導(dǎo)致用戶無法正常訪問播放音頻的網(wǎng)頁。

HTML5提供

（1）Ogg Vorbis；

（2）MP3；

（3）Wav。

2.3拖放

拖放是一種很常用的界面模式，使用鼠標(biāo)點擊并按住界面上的某個對象，移動鼠標(biāo)到另一個區(qū)域并松開，則界面對象被拖動到該區(qū)域。在HTML5未出現(xiàn)之前，使用Javascript也能夠?qū)崿F(xiàn)拖放的效果，但是實現(xiàn)起來非常繁瑣易出錯，而且存在瀏覽器兼容性問題。幸運的是，在HTML5中，已經(jīng)規(guī)定了拖放的標(biāo)準(zhǔn)API，可以適用于任何元素。只要簡單的處理拖放事件，開發(fā)人員就可以產(chǎn)生并控制拖放的效果。

2.4畫布

HTML5出現(xiàn)以前，如果想要開發(fā)動畫應(yīng)用，是一件很困難很復(fù)雜的事情，通常需要花費大量時間學(xué)習(xí)第三方的動畫制作框架。HTML5畫布(Canvas)功能解救了廣大的動畫開發(fā)人員，Web程序員可以使用畫布API，通過Javascript制作各種動畫效果。

HTML5定義了一個元素，在網(wǎng)頁中引入該元素，可以建立一張畫布，在上面隨意繪制各種各樣的形狀，插入自定義的圖片，還能夠制作復(fù)雜的2D/3D動畫。對于一般的動畫應(yīng)用，完全可以使用標(biāo)準(zhǔn)的HTML5畫布技術(shù)，替代第三方的動畫制作框架，例如Flash。

2.5SVG

SVG是可伸縮矢量圖形 (Scalable Vector Graphics)的縮寫，是一種矢量圖格式。HTML5提供對SVG的支持。使用SVG有很多優(yōu)勢。SVG格式使用XML定義，是文本格式，意味著可以使用普通的文本編輯器來創(chuàng)建和修改 SVG矢量圖。SVG矢量圖的體積小，可被搜索和索引，還可以進(jìn)一步壓縮。作為矢量圖，具備隨意放大圖形同時保持圖形質(zhì)量不會下降。HTML5提供了

2.6地理定位

HTML5 定義了Geolocation（地理定位）的API，可以編程獲取用戶的地理位置，從而可以調(diào)用第三方的地圖服務(wù)在地圖中展示?？梢韵胂螅@項技術(shù)能夠催生許多有價值的應(yīng)用，例如，顯示用戶周圍的商家或其他用戶關(guān)注的信息，GPS導(dǎo)航，等等。

2.7客戶端存儲

沒有HTML5的時代，一般情況下使用cookie來存儲客戶端的數(shù)據(jù)。然而cookie有許多限制，也不適合較大數(shù)據(jù)量的存儲。而且cookie在請求頁面的時候會傳回服務(wù)器，導(dǎo)致效率不高。

HTML5提供了另外兩種客戶端存儲技術(shù)：

（1）localStorage–這種存儲沒有時間的限制；

（2）sessionStorage–這是用于會話的數(shù)據(jù)存儲。

HTML5提供的客戶端存儲，并不會每次傳回服務(wù)器，僅在需要的時候使用，大大提高了效率，從而可以在客戶端存儲大量數(shù)據(jù)，并且不影響網(wǎng)站的性能。這些存儲是區(qū)分不同站點的，而且具有權(quán)限控制，不同的網(wǎng)站只能訪問自身的數(shù)據(jù)。

2.8Web Worker

Web worker提供了后臺運行JavaScript的能力。HTML5之前，javascript只能在UI線程運行，很容易阻塞UI線程，導(dǎo)致界面沒有響應(yīng)。使用Web worker，可以將耗時的任務(wù)放在后臺線程運行，不影響UI線程，從而保持頁面的及時響應(yīng)，帶給用戶更好更快的UI體驗。

2.9服務(wù)器推送事件

從前的Web是單向的，即只能由客戶端發(fā)起請求，才能獲取服務(wù)器的信息。如果希望及時獲取服務(wù)器的更新，只能夠頻繁不斷地輪詢服務(wù)器，消耗大量的CPU和網(wǎng)絡(luò)資源，導(dǎo)致性能的地下。

HTML5提供了 Server-Sent 事件，網(wǎng)頁自動獲取來自服務(wù)器的更新。這項技術(shù)的應(yīng)用也很廣泛，例如，微博更新即時推送、新的博文、新聞推送等。

2.10更豐富的、具有語義的標(biāo)簽

HTML5的標(biāo)簽更適合由瀏覽器提供最適合設(shè)備或平臺的展現(xiàn)，更便于搜索引擎理解文檔。

3 HTML5的移動應(yīng)用

3.1移動應(yīng)用

HTML5適用于移動APP/SITE的開發(fā)，有如下特點：

（1）渲染更快速；

（2）離線程序，適用于各種移動使用場景；

（3）可以在多種平臺的設(shè)備上運行；

（4）使用HTML5

（5）IPhone、iPad等對HTML5的支持很好，使用html5的網(wǎng)站能夠提供更佳體驗。

3.2實例

（1）實例一：http://everytimezone.com/ 一個ipad移動應(yīng)用的效果演示。

特點：

①未使用圖片、js，簡潔實現(xiàn)效果；

②gzip壓縮后大小僅有幾K；

③觸發(fā)條件不僅限于觸摸 event--這樣非觸摸的終端也可以使用了。

（2）實例二：http://www.technetra.com/ipdc3/ countdown-2.0/ 不停走動的倒計時器—會記住你的選擇。

圖1　不停走動的倒計時器

（3）實例三：http://mrdoob.com/projects/harmony/終端上實現(xiàn)素描效果。

圖2　終端上實現(xiàn)的素描效果

（4）實例四：http://www.kesiev.com/akihabara/ 吃豆游戲iPhone版。

圖3　吃豆游戲

完全把html5當(dāng)客戶端用，對未來手機應(yīng)用（游戲）的開發(fā)應(yīng)用有重要意義。

（5）實例五：Gmail for iPad。

特點：

①當(dāng)用戶通過iPad設(shè)備訪問Gmail郵箱的時候，該網(wǎng)站的一些優(yōu)化功能更將會自行啟動，其外觀呈兩列排布，視圖光滑。易用性較好，在應(yīng)用界面的左側(cè)是郵件的標(biāo)題清單，詳細(xì)的郵件內(nèi)容則位于界面的右側(cè)；

②離線預(yù)讀，方便移動場景下的使用；

③支持附件的雙向拖拽；

④對速度的提升：“Chrome+HTML5實現(xiàn)一秒鐘啟動Gmail”。

[1] Kevin Purdy.How HTML5 Will Change the Way You Use the Web[J].IEEE Journal,2009,56(3):113-114.

HTML5-the next generation of Web development technology

HTML5 is considered the rising star in the Internet industry. It was supported by many browser vendors. This article briefly describes the HTML5 related concepts, and describes the application in HTML5 rendering graphics, multimedia playback, local storage, offline Web applications, access to geographic information, etc.

Mobile;applications

TP393.092

A

1008-1151(2015)07-0020-03

2015-06-11

李國華（1982－），女，廣西南寧人，中國科技開發(fā)院廣西分院助理工程師，研究方向為計算機軟件測試，電子商務(wù)交易系統(tǒng)。