臺　雯

(天津市和平區(qū)新華職工大學(xué)，天津　300070)

?

HTML5在WEB前端開發(fā)中的應(yīng)用研究

臺雯

(天津市和平區(qū)新華職工大學(xué)，天津300070)

HTML5已成為目前主流的Web前端開發(fā)技術(shù)，與以往版本相比它具有許多新特性。本文主要介紹了HTML5技術(shù)的概念，以及基于HTML5 進行響應(yīng)式Web設(shè)計、Web離線程序開發(fā)、音頻視頻嵌入、繪圖和動畫實現(xiàn)的一些常用方法和技巧。

HTMl5；Web前端；網(wǎng)頁

1　引言

伴隨著互聯(lián)網(wǎng)技術(shù)的迅速發(fā)展，Web應(yīng)用程序開發(fā)技術(shù)也得到了迅猛發(fā)展，對于Web頁面的要求越來越高，不僅要適用在PC端，而且要適用在手機等各種不同的移動設(shè)備上。作為Web前端開發(fā)技術(shù)，HTML5日趨成熟,已成為Web前端開發(fā)的主流技術(shù)。目前，HTML5技術(shù)得到了所有類型瀏覽器的支持，如：我們常用的五大主流瀏覽器IE(微軟瀏覽器)、Firefox(火狐瀏覽器)、Chrome(谷歌瀏覽器)、Safari(蘋果瀏覽器)、Opera(歐朋瀏覽器)。

2　HTML5技術(shù)介紹

HTML(Hyper Text Mark-up Language ),中文名為超文本標(biāo)記語言，它是萬維網(wǎng)(World Wide Web)的描述語言。我們平常見到的網(wǎng)頁就是使用HTML制作的。HTML5是基于HTML語言的第五次修訂，它是2014年10月由萬維網(wǎng)聯(lián)盟(又稱W3C理事會)制定完成的最新修訂版的HTML。

HTML5實際上不僅僅是指HTML技術(shù)，它還包括CSS樣式和JavaScript腳本語言。對于瀏覽器，HTML5可以提供富客戶端應(yīng)用，這樣可以很好的減少瀏覽器對插件的依賴。與以前的版本相比，HTML5具有許多新特性非常吸引人。對于終端用戶而言，HTML5可以更加方便的滿足用戶的需求，用戶無需下載和安裝任何插件就可以欣賞視頻、聆聽音樂、體驗游戲、瀏覽美圖、收聽電臺等；HTML5提供了更好的設(shè)備兼容性，攝像頭、麥克風(fēng)等外部設(shè)備可以直接與用戶使用的影音、視頻等應(yīng)用程序相聯(lián)；HTML5技術(shù)支持手機端的跨應(yīng)用切換，用戶在多個APP間進行切換時，無需返回桌面，可以在APP間直接跳轉(zhuǎn)，這樣可以大大提高用戶的使用效率。

對于開發(fā)者而言，HTML5重新定義了語法，統(tǒng)一了PC和手機等移動設(shè)備的標(biāo)準，并提供了大量的開源庫，使Web應(yīng)用程序開發(fā)更加簡單、輕松；開發(fā)的Web應(yīng)用程序可以封裝到不同的平臺上，大大降低了開發(fā)成本；HTML5支持實時更新，使得調(diào)試 Bug更加容易。

3　HTML5在Web前端開發(fā)中的應(yīng)用

3.1響應(yīng)式(自適應(yīng))Web頁面設(shè)計

伴隨著移動互聯(lián)網(wǎng)技術(shù)的發(fā)展，移動設(shè)備已經(jīng)非常普及，人們經(jīng)常使用移動設(shè)備連接網(wǎng)絡(luò)進行工作、學(xué)習(xí)和娛樂。因此，網(wǎng)頁設(shè)計人員在開發(fā)Web應(yīng)用程序時必須要考慮一個問題：同一網(wǎng)頁如何能夠根據(jù)不同設(shè)備的屏幕寬度、分辨率，自動調(diào)整布局以適應(yīng)屏幕大小，最終呈現(xiàn)出網(wǎng)頁的最佳效果？有的網(wǎng)站在解決這個問題時采用的是針對不同的設(shè)備制作不同版本的網(wǎng)頁，這樣頁面可以保證比較好的效果，但是維護起來非常麻煩。在這里，我們解決這個問題可以采用“響應(yīng)式(自適應(yīng))網(wǎng)頁設(shè)計”，它實際上是利用一些已有的開發(fā)技巧的整合來解決布局問題。在HTML5中進行響應(yīng)式設(shè)計可以采用如下方法：

(1)設(shè)置meta標(biāo)簽中的viewport指令

meta標(biāo)簽是放在HTML文檔中head部分的一個標(biāo)簽，在meta標(biāo)簽中設(shè)置name屬性值為viewport。viewport實際上是手機瀏覽器中顯示網(wǎng)頁的區(qū)域，在移動設(shè)備中viewport默認情況下會大于瀏覽器的可視區(qū)域，這時因為考慮到臺式電腦的分辨率往往會比移動設(shè)備的分辨率要大，專為臺式電腦瀏覽器設(shè)計的網(wǎng)頁也可以在移動設(shè)備上正常顯示，但實際上因為手機瀏覽器可視區(qū)域的寬度要比viewport的小，帶來的結(jié)果是手機瀏覽器顯示網(wǎng)頁時會出現(xiàn)橫向滾動條。因此，在進行網(wǎng)頁設(shè)計時，為了適應(yīng)手機瀏覽器的屏幕顯示，我們會將viewport寬度調(diào)整為設(shè)備的寬度(代碼中可設(shè)置width屬性為device-width，initial-scale和maximum-scale屬性為1)，同時不允許用戶手動縮放(可設(shè)置user-scalable屬性為no)。

(2)設(shè)置頁面寬度和字體為相對數(shù)值

網(wǎng)頁需要根據(jù)屏幕的大小自動調(diào)整頁面布局，在設(shè)置頁面寬度和顯示字體時，我們不能將它們設(shè)置為絕對數(shù)值，而應(yīng)設(shè)置為相對數(shù)值。

頁面寬度不能設(shè)置為固定的px(像素)值，而應(yīng)設(shè)置為相對數(shù)值百分比或自動值。代碼可寫為“width: xx%;”或“width:auto;”。

字體也不能設(shè)置為絕對大小px值，也不建議使用相對值em ，因為em允許繼承父級元素的字體大小，所以如果代碼嵌套的層次太多時我們就很難把握字體的大小了。在頁面設(shè)計中，字體設(shè)置建議使用相對值rem，rem是CSS3中新增的一個相對單位，它的參照對象是HTML根元素，我們只要設(shè)置HTML根元素的大小，所有字體大小就可以成比例的調(diào)整了。網(wǎng)頁中默認的字體大小是16px,即1rem=16px。例如：可以通過代碼“html{ font-size: 62.5%；}”調(diào)整HTML根元素的字體大小為10px，代碼“body { font-size: 1.4rem; }”可以將網(wǎng)頁主體部分的字體大小設(shè)置為14px。

(3)使用媒體查詢功能，選擇執(zhí)行相應(yīng)的CSS

媒體查詢(Media Query)是CSS3中引入的一個新方法，它可以根據(jù)不同的媒體設(shè)備選擇不同的CSS樣式進行執(zhí)行。在HTML5中，我們希望根據(jù)不同的屏幕寬度，執(zhí)行不同的CSS文件，可以使用Link標(biāo)簽、@import方式或@media方式引入。

3.2離線Web應(yīng)用程序開發(fā)

HTML5中一個重要的特性就是離線緩存，這個特性對PC端應(yīng)用程序開發(fā)的影響并不大，但對于移動設(shè)備應(yīng)用程序的開發(fā)就不同了。比如，我們在乘坐地鐵或經(jīng)過一些移動信號不好的地方使用手機瀏覽網(wǎng)頁時，可能就會出現(xiàn)無法訪問網(wǎng)站的現(xiàn)象，這時我們就可以使用離線緩存技術(shù)來解決這個問題。

在HTML5中,實現(xiàn)離線資源緩存功能可以通過cache manifest文件。當(dāng)Web應(yīng)用程序在線狀態(tài)時,會將cache manifest文件緩存到本地，當(dāng)用戶離線狀態(tài)時，這些文件會被自動加載，保證用戶正常訪問應(yīng)用程序。

在創(chuàng)建緩存頁面manifest文件前，需要在網(wǎng)站的.htaccess文件中添加下面的代碼：

AddType text/cache-manifest .manifest

然后，我們要為網(wǎng)頁創(chuàng)建一個擴展名為.manifest的文件，比如：out.manifest。文件代碼中開頭標(biāo)注CACHE MANIFEST，CACHE后列出的我們需要離線緩存的文件列表，NETWORK后列出不需要緩存的文件，F(xiàn)ALLBACK后指出當(dāng)資源文件無法訪問時，瀏覽器將跳轉(zhuǎn)到的頁面。

下面需要將manifest文件鏈接到相應(yīng)的html文檔中，代碼如下：

離線緩存頁面就制作好了。當(dāng)這個頁面的緩存資源更新時，我們可以通過編寫一段JavaScript代碼來完成，代碼中需調(diào)用window.applicationCache接口更新緩存。

上面我們使用cache manifest文件緩存資源,實現(xiàn)了離線訪問,但這僅限于靜態(tài)網(wǎng)頁。對于與用戶有動態(tài)交互需求的頁面，我們還要考慮用戶在離線狀態(tài)時如何操作數(shù)據(jù)？當(dāng)在線狀態(tài)后如何將數(shù)據(jù)與服務(wù)器同步？解決這些問題我們需要檢測瀏覽器是否在線。

HTML5檢測是否在線可以使用navigator.online屬性，該屬性值為true表示在線狀態(tài)，值為false表示離線狀態(tài)。在實際應(yīng)用中，我們還應(yīng)及時掌握網(wǎng)絡(luò)的變化狀態(tài)，可以使用HTML5提供的online/offline事件(在線/離線狀態(tài)切換)來實時監(jiān)視網(wǎng)絡(luò)狀態(tài)，該事件可以在body元素上觸發(fā)。

在開發(fā)離線Web應(yīng)用程序時，我們還需要在本地存儲數(shù)據(jù)。HTML5之前我們使用cookie存儲本地數(shù)據(jù),但cookie的局限是容量太小(大概4k)。在HTML5中我們可以使用DOM Storage存儲方式，DOM Storage包括sessionStorage(會話存儲)和localStorage(本地存儲)兩類。sessionStorage是基于當(dāng)前會話瀏覽器窗口的，當(dāng)窗口關(guān)閉或轉(zhuǎn)到其它網(wǎng)站時，存儲的數(shù)據(jù)就被銷毀不能再使用。而localStorage可以長時間存儲數(shù)據(jù)，數(shù)據(jù)當(dāng)瀏覽器窗口被關(guān)閉后仍然可以被使用。DOM Storage機制適合存儲簡單的數(shù)據(jù)，當(dāng)我們需要存儲、處理大量的數(shù)據(jù)時還應(yīng)選用Web SQL Database存儲方式，它是通過關(guān)系數(shù)據(jù)庫來存儲數(shù)據(jù)的。

3.3音頻、視頻的輕松嵌入

在HTML5 之前,開發(fā)人員要在網(wǎng)頁中嵌入音頻、視頻文件需要使用object 和embed 標(biāo)簽插入大段復(fù)雜的代碼，用戶在播放音頻、視頻時也必須先安裝Adobe Flash Player、Apple QuickTime等第三方播放插件。現(xiàn)在使用HTML5技術(shù)，用戶無需安裝任何插件便可即時欣賞頁面中的音頻、視頻。在HTML5中新增了音頻標(biāo)簽audio和視頻標(biāo)簽video，開發(fā)人員可以使用這兩個標(biāo)簽輕松向網(wǎng)頁中嵌入音頻和視頻文件。例如,在網(wǎng)頁中播放視頻文件代碼如下,與以前的實現(xiàn)方法相比非常簡單:

3.4圖形和動畫的輕松實現(xiàn)

在HTML5中繪制圖形圖表、制作動畫可以使用其自帶的canvas標(biāo)簽。canvas實際上就像一個畫布，在繪制圖形之前，我們先要在頁面上放置一個畫布。canvas自身并不能繪制圖形，但是它提供了大量繪制路徑、矩形、圖表、字符等的方法，我們通過編寫JavaScript代碼來實現(xiàn)各種圖形效果的設(shè)計制作。

動畫是借助人眼的視覺殘留效應(yīng)實現(xiàn)的，也就是影像會在人們的視網(wǎng)膜中停留0.1-0.4秒的時間，我們可以通過快速連續(xù)的播放多幅靜態(tài)圖片來實現(xiàn)動畫效果。因此，在HTML5中實現(xiàn)瀏覽器動畫我們可以使用setInterval、setTimeOut或requestAnimationFrame函數(shù)來設(shè)置一個定時器每隔幾秒變化一次對象。實現(xiàn)3D動畫，我們可以使用HTML5中提供的webGL規(guī)范，該規(guī)范可以不借助任何插件在Canvas中渲染3D內(nèi)容。

3.5地理定位的實現(xiàn)

地理定位是HTML5中一個非常重要的特性，在許多 Web 應(yīng)用程序中我們都需要先了解用戶的地理位置再進行相應(yīng)的操作，提供用戶特定性的服務(wù)。比如：天氣預(yù)報、地圖、網(wǎng)上購物等。在HTML5中，瀏覽器端獲取用戶的當(dāng)前位置可以通過Geolocation API應(yīng)用接口，Web應(yīng)用程序開發(fā)時可調(diào)用window.navigator.geolocation對象實現(xiàn)。

Geolocation API獲取用戶的位置信息可以通過IP地址、GPS全球定位系統(tǒng)、 Wi-Fi熱點、GSM/CDMS手機信號站等方式。手機等移動設(shè)備通常優(yōu)先使用 GPS 方式定位，GPS的定位精度最高，范圍可準確到10米左右，GPS使用衛(wèi)星通信，在室內(nèi)的效果較差。使用無線上網(wǎng)方式的電腦和手機移動設(shè)備通常使用Wi-Fi方式，或結(jié)合GSM/CDMS手機信號站方式進行定位。而使用網(wǎng)線上網(wǎng)的電腦就只能使用定位精度不高的IP地址方式了，這種方式定位一般精確到城市級。

在開發(fā)地理定位功能時，首先要判斷用戶的瀏覽器是否支持Geolocation功能，可以通過判斷navigator.geolocation返回值來實現(xiàn)，當(dāng)返回值為真時表示瀏覽器支持Geolocation功能。獲取用戶位置前會彈出對話框詢問用戶是否授權(quán)使用地理定位功能，當(dāng)用戶允許后就可以獲取用戶的位置信息了，可以通過getCurrentPosition方法來實現(xiàn)獲取，當(dāng)有些應(yīng)用程序需要高精度獲取用戶的地理位置時(比如：地圖定位)，這時可以通過設(shè)置enableHighAccruacy屬性為true來實現(xiàn)，它允許精確的讀取用戶的經(jīng)度和緯度位置。

首次獲取用戶的位置信息后，對于移動設(shè)備還需要監(jiān)視用戶的位置變化，可以通過watchPosition方法來實現(xiàn)；使用clearWatch方法可以取消watchPosition方法的監(jiān)控。

3.6Form表單

在HTML5之前的版本中，form表單元素必須放在以標(biāo)簽結(jié)尾的表單中才可以提交。在HTML5 中則變?yōu)槁暶魇奖韱?，表單元素可以放在頁面的任意位置，在需要使用的位置通過表單的id值進行關(guān)聯(lián)即可。

HTML5中的form表單增加了許多新的表單屬性和控件類型,我們無需再編寫大量的JavaScript代碼便可以實現(xiàn)許多功能，這大大減少了開發(fā)人員的工作量，使得制作表單更加簡單方便。比如：新增的required 屬性可以對輸入域進行必填項驗證；placeholder屬性可以在輸入為空時顯示提示內(nèi)容；新增的color類型可以彈出一個顏色選擇器，用戶選擇后顏色值可以直接賦值給value； range類型可以彈出一個指定數(shù)值范圍內(nèi)的橫向滑動數(shù)值選擇器；number類型可以出現(xiàn)一個右側(cè)帶有微調(diào)按鈕的數(shù)值文本框，并允許用戶直接輸入數(shù)值；date、time類型可以彈出一個日期、時間選擇器供用戶選擇 ；email、tel、url類型可以對文本框中的郵箱地址、電話號碼、網(wǎng)址的合法性進行驗證。

4　結(jié)論

使用HTML5開發(fā)的Web應(yīng)用程序在PC端和移動設(shè)備端都具有非常好的兼容性，尤其在移動設(shè)備端的Web應(yīng)用程序開發(fā)中，HTML5具有不可比擬的優(yōu)勢。

隨著移動互聯(lián)網(wǎng)時代的到來，HTML5必將具有非常好的發(fā)展前景，值得我們?nèi)?yīng)用并研究。

[1]唐俊開.HTML5移動Web開發(fā)指南[M].北京：電子工業(yè)出版社,2012.

[2]李東博.HTML5+CSS3從入門道精通[M].北京：清華大學(xué)出版社,2013.

[3]楊毅.WEB前端開發(fā)技術(shù)探討[J].軟件設(shè)計開發(fā),2014，(08).

[4]李國華.HTML5下一代Web開發(fā)技術(shù)[J].大眾科技,2015，(07).

[5]鄭子偉,陳奮.HTML5離線應(yīng)用開發(fā)技術(shù)研究[J].廈門城市職業(yè)學(xué)院學(xué)報,2015，(03).

Research on Application of HTML 5 in Web Front-end Development

TAI Wen

(TianjinXinhuaStaffUniversityofHepingDistrict,Tianjin, 300070)

HTML5 has become the mainstream of the Web front-end development technology, and it has many new features compared with the previous version. This paper introduces the concept of HTML5 technology, and some of the commonly used methods and techniques for responsive Web design based on HTML5, offline Web application development, embedded audio, video, graphics and animation.

HTMl5; Web front end; webpage

2016-01-19

臺雯(1980-)，女，天津市和平區(qū)新華職工大學(xué)講師，從事計算機應(yīng)用技術(shù)領(lǐng)域的教學(xué)與研究。

TP393

A

1673-582X(2016)08-0070-05