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

李國(guó)華

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

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

李國(guó)華

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

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

HTML5；移動(dòng)應(yīng)用

1 背景

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

（1）World Wide Web

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

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

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

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

（2）URI

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

①用于訪問(wèn)資源的機(jī)制；

②存放資源的主機(jī)；

③資源在主機(jī)中的路徑名。

例如，以下的URI

http://www.w3.org/TR

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

（3）HTML5

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

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

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

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

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

（2）云計(jì)算的趨勢(shì)

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

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

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

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

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

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

（3）更低的成本

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

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

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

（5）更好的安全性

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

2 html5的主要特性分析

2.1視頻

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

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

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

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

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

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

2.2音頻

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

HTML5提供

（1）Ogg Vorbis；

（2）MP3；

（3）Wav。

2.3拖放

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

2.4畫(huà)布

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

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

2.5SVG

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

2.6地理定位

HTML5 定義了Geolocation（地理定位）的API，可以編程獲取用戶的地理位置，從而可以調(diào)用第三方的地圖服務(wù)在地圖中展示?？梢韵胂?，這項(xiàng)技術(shù)能夠催生許多有價(jià)值的應(yīng)用，例如，顯示用戶周?chē)纳碳一蚱渌脩絷P(guān)注的信息，GPS導(dǎo)航，等等。

2.7客戶端存儲(chǔ)

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

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

（1）localStorage–這種存儲(chǔ)沒(méi)有時(shí)間的限制；

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

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

2.8Web Worker

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

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

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

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

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

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

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

3.1移動(dòng)應(yīng)用

HTML5適用于移動(dòng)APP/SITE的開(kāi)發(fā)，有如下特點(diǎn)：

（1）渲染更快速；

（2）離線程序，適用于各種移動(dòng)使用場(chǎng)景；

（3）可以在多種平臺(tái)的設(shè)備上運(yùn)行；

（4）使用HTML5

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

3.2實(shí)例

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

特點(diǎn)：

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

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

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

（2）實(shí)例二：http://www.technetra.com/ipdc3/ countdown-2.0/ 不停走動(dòng)的倒計(jì)時(shí)器—會(huì)記住你的選擇。

圖1　不停走動(dòng)的倒計(jì)時(shí)器

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

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

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

圖3　吃豆游戲

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

（5）實(shí)例五：Gmail for iPad。

特點(diǎn)：

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

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

③支持附件的雙向拖拽；

④對(duì)速度的提升：“Chrome+HTML5實(shí)現(xiàn)一秒鐘啟動(dòng)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

李國(guó)華（1982－），女，廣西南寧人，中國(guó)科技開(kāi)發(fā)院廣西分院助理工程師，研究方向?yàn)橛?jì)算機(jī)軟件測(cè)試，電子商務(wù)交易系統(tǒng)。