基于HTML5的Web前端開發(fā)技術(shù)研究

張志敏

（池州職業(yè)技術(shù)學(xué)院 安徽 池州 247000）

0.引言

自21 世紀(jì)以來， 互聯(lián)網(wǎng)技術(shù)的高速發(fā)展， 使人們?cè)谑褂没ヂ?lián)網(wǎng)時(shí)，對(duì)Web頁面有著越來越高的要求，這在很大程度上促進(jìn)了Web 前端開發(fā)技術(shù)的發(fā)展，Web 前端開發(fā)技術(shù)不僅需要在PC 端中適用，還能在各種移動(dòng)終端中適用，而在Web 前端開發(fā)技術(shù)的發(fā)展中，HTML5已經(jīng)成為該技術(shù)的主流形式，通過HTML5 技術(shù)的應(yīng)用，能夠支持Web前端開發(fā)技術(shù)在各種瀏覽器中應(yīng)用，并且能夠有效降低開發(fā)與維護(hù)成本，使瀏覽器具備更加豐富的HTML5 特性。

1.HTML5技術(shù)概述

HTML 技術(shù)又被稱之為超文本標(biāo)記語言技術(shù)，其作為萬維網(wǎng)中的重要描述語言之一，人們?cè)谑褂没ヂ?lián)網(wǎng)時(shí)，其經(jīng)常使用的網(wǎng)頁便是由HTML 技術(shù)所制作的。 HTML 語言經(jīng)過不斷的發(fā)展，如今已經(jīng)完成了第五次修訂，從而形成了HTML5 技術(shù)。對(duì)于HTML5 技術(shù)來說，其所包含的范圍并不僅僅是HTML 技術(shù)， 其同樣還包含有JavaScript 腳本語言以及CSS 樣式。 而在瀏覽器中，通過HTML5 技術(shù)的應(yīng)用，能夠使瀏覽器具備更多的應(yīng)用功能， 并且能夠有效降低瀏覽器對(duì)插件的依賴。相比于以往的HTML 版本，HTML5 的新特性更多，能夠?yàn)橛脩魩砀?、更炫、更好的體驗(yàn)，用戶不需要在瀏覽器中安裝任何插件，即可在瀏覽器中流暢的欣賞音樂和觀看視頻等，同時(shí)，HTML5 還具備良好的兼容性能，用戶在使用視頻、影音等應(yīng)用程序時(shí)，可將麥克風(fēng)、攝像頭等設(shè)備直接與應(yīng)用程序進(jìn)行連接。 除此之外，HTML5 技術(shù)還能實(shí)現(xiàn)多個(gè)APP 之間的應(yīng)用切換， 并且在應(yīng)用切換過程中不需要重新返回到界面，可直接在APP 中進(jìn)行跳轉(zhuǎn)，從而使用戶對(duì)應(yīng)用程序的使用變得更加方便。 在Web 前端開發(fā)中，開發(fā)人員可利用HTML5 技術(shù)對(duì)語法進(jìn)行重新定義，以便于統(tǒng)一各種不同設(shè)備的使用標(biāo)準(zhǔn)，同時(shí)還能為開發(fā)人員提供豐富資源的開源庫(kù)， 進(jìn)而使Web 應(yīng)用程序的開發(fā)變得更加方便、快捷。 通過HTML5 技術(shù)能夠在不同平臺(tái)中將開發(fā)的Web 應(yīng)用程序進(jìn)行封裝， 這樣能夠使開發(fā)成本得以降低的同時(shí)， 還能利用HTML5 技術(shù)的實(shí)時(shí)更新來對(duì)Bug 進(jìn)行便捷的調(diào)試。

2.基于HTML5的Web前端開發(fā)技術(shù)研究

2.1 Web前端頁面的自適應(yīng)開發(fā)技術(shù)

自互聯(lián)網(wǎng)誕生以來，科學(xué)技術(shù)的進(jìn)步，使各種移動(dòng)設(shè)備在人們的生活中變得越來越普及，人們可以通過移動(dòng)設(shè)備來利用互聯(lián)網(wǎng)進(jìn)行工作、娛樂和學(xué)習(xí)，這也使開發(fā)人員在對(duì)Web 前端頁面進(jìn)行開發(fā)時(shí)，需要充分考慮相同網(wǎng)頁如何才能在不同設(shè)備中進(jìn)行顯示，以便于使網(wǎng)頁能夠與設(shè)備的屏幕大小相匹配， 從而使網(wǎng)頁的效果得以最佳呈現(xiàn)出來。對(duì)于部分網(wǎng)站，其在解決該問題時(shí)，需要根據(jù)設(shè)備類型的不同來對(duì)不同版本的網(wǎng)頁進(jìn)行制作，這無疑加大了網(wǎng)頁的維護(hù)難度。 而HTML5技術(shù)的出現(xiàn)，使其能夠?qū)eb 前端頁面進(jìn)行自適應(yīng)設(shè)計(jì)，以此來解決網(wǎng)頁對(duì)不同類型設(shè)備屏幕大小的自適應(yīng)調(diào)整問題。 利用HTML5 技術(shù)對(duì)Web 前端頁面進(jìn)行自適應(yīng)開發(fā)時(shí)，主要是通過以下方法來實(shí)現(xiàn)的，首先是在HTML 文檔的meta 標(biāo)簽name 屬性值中輸入viewport 指令，并將viewport 指令的寬度設(shè)置為與設(shè)備屏幕的寬度相同，并禁止用戶對(duì)網(wǎng)頁進(jìn)行手動(dòng)縮放。 其次，對(duì)web 前端頁面的寬度及字體進(jìn)行數(shù)值調(diào)整，在數(shù)值調(diào)整時(shí)，不能將其進(jìn)行絕對(duì)數(shù)值的設(shè)置，而是應(yīng)按照相對(duì)數(shù)值的百分比或是自動(dòng)值來進(jìn)行設(shè)置，字體則應(yīng)采用相對(duì)值rem 來進(jìn)行設(shè)置，這樣便可對(duì)字體的比例進(jìn)行大小調(diào)整。最后，通過媒體查詢來對(duì)CSS 樣式進(jìn)行執(zhí)行，在CSS3 中，媒體查詢作為一種新的方法，其能夠根據(jù)設(shè)備類型的不同而執(zhí)行與之相匹配的CSS 樣式。

2.2 Web離線程序開發(fā)技術(shù)

在HTML5 中，離線緩存是其重要特性之一，該特性并不會(huì)對(duì)PC端程序的開發(fā)造成較大影響，不過其卻會(huì)對(duì)移動(dòng)終端設(shè)備應(yīng)用程序的開發(fā)產(chǎn)生很大影響，例如，在地鐵中，用戶往往無法利用手機(jī)對(duì)網(wǎng)頁進(jìn)行訪問與瀏覽，而要想解決這個(gè)問題，就需要應(yīng)用到Web 離線程序開發(fā)技術(shù)， 該技術(shù)是通過HTML5 來實(shí)現(xiàn)的，HTML5 利用cachemanifest文件來進(jìn)行網(wǎng)絡(luò)資源的離線緩存，這樣當(dāng)用戶進(jìn)入到信號(hào)不好的區(qū)域時(shí)，這些網(wǎng)絡(luò)資源便可通過cachemanifest 文件來進(jìn)行自動(dòng)加載，從而確保用戶在離線狀態(tài)時(shí)也能對(duì)應(yīng)用程序進(jìn)行訪問。 在對(duì)cachemanifest文件進(jìn)行創(chuàng)建之前，需要開發(fā)人員在Web頁面的htaccess 文件中設(shè)置相應(yīng)的代碼，然后創(chuàng)建一個(gè)manifest 文件，在manifst 文件中的CACHE中標(biāo)明需要進(jìn)行離線緩存的文件， 在NETWORK 標(biāo)明不需緩存的文件，在FALLBACK 中標(biāo)明訪問失敗后的跳轉(zhuǎn)頁面，這樣便可實(shí)現(xiàn)對(duì)靜態(tài)網(wǎng)頁的離線訪問。 如果需要離線緩存的Web頁面為動(dòng)態(tài)網(wǎng)頁，則需要采用HTML5 技術(shù)來對(duì)navigator.online 屬性進(jìn)行檢測(cè)， 以此確認(rèn)其是否能夠在線使用， 并通過HTML5 中的online/offline 事件來對(duì)網(wǎng)絡(luò)狀態(tài)進(jìn)行實(shí)時(shí)監(jiān)測(cè)。 在對(duì)Web頁面中的應(yīng)用程序進(jìn)行離線開發(fā)過程中，還要對(duì)數(shù)據(jù)進(jìn)行本地存儲(chǔ)，由于cookie 的容量存在很大的局限性，因此可通過HTML5 技術(shù)所提供的DOMStorage 機(jī)制來對(duì)數(shù)據(jù)進(jìn)行存儲(chǔ)，如果要對(duì)大量數(shù)據(jù)進(jìn)行處理與存儲(chǔ)時(shí)，還可通過WebSQLDatabase這一關(guān)系數(shù)據(jù)庫(kù)來對(duì)數(shù)據(jù)進(jìn)行存儲(chǔ)。

2.3 Web前端的音視頻嵌入技術(shù)

在基于HTML5 的Web 前端開發(fā)技術(shù)中， 開發(fā)人員能夠通過HTML5 技術(shù)在網(wǎng)頁中進(jìn)行音頻與視頻的嵌入， 而且用戶在利用Web網(wǎng)頁播放音頻與視頻時(shí)不需要安裝任何的插件，開發(fā)人員只需要利用HTML5 技術(shù)在Web 網(wǎng)頁中新增一個(gè)audio 與video 的音頻與視頻標(biāo)簽，即可實(shí)現(xiàn)網(wǎng)頁對(duì)音頻與視頻文件的嵌入與播放。

2.4 Web前端圖形動(dòng)畫制作技術(shù)

HTML5 技術(shù)能夠在Web 前端開發(fā)過程中對(duì)圖形圖表及動(dòng)畫等進(jìn)行制作，在HTML5 技術(shù)中自帶有相應(yīng)的canvas 標(biāo)簽，該標(biāo)簽實(shí)質(zhì)上是一種畫布， 開發(fā)人員可通過畫布的設(shè)置來在其上繪制大量的路徑、字符、圖形等內(nèi)容，然后在標(biāo)簽中對(duì)JavaScript 代碼進(jìn)行編寫后，即可實(shí)現(xiàn)對(duì)相應(yīng)圖形效果的制作。在動(dòng)畫制作中，則可布置多幅靜態(tài)圖片，然后對(duì)這些圖片進(jìn)行連續(xù)而快速的播放， 然后在HTML5 中設(shè)置一個(gè)定時(shí)器，以便于對(duì)圖片切換的間隔時(shí)間進(jìn)行設(shè)置，從而實(shí)現(xiàn)對(duì)3D 動(dòng)畫的制作，并且，在HTML5 中，其還能夠通過WebGL 規(guī)范來對(duì)3D 內(nèi)容進(jìn)行渲染。

2.5 Web前端的地理定位技術(shù)

在基于HTML5 的Web 前端開發(fā)技術(shù)中，地理定位作為其重要特性之一，能夠幫助商家對(duì)用戶的地理位置進(jìn)行了解，從而為用戶提供針對(duì)性的服務(wù)。 在Web 前端的地理定位技術(shù)開發(fā)中，開發(fā)人員可通過HTML5 的GeolocationAPI 接口來對(duì)瀏覽器中用戶的地理位置進(jìn)行獲取， 在調(diào)用， 在開發(fā)Web 前端程序過程中， 需要對(duì)window.navigator.geolocation 對(duì)象進(jìn)行相應(yīng)的調(diào)用。GeolocationAPI 接口在對(duì)用戶地理位置信息進(jìn)行獲取時(shí)， 主要是借助于GPS 定位系統(tǒng)、GSM 信號(hào)站、WiFi熱點(diǎn)以及IP 地址等方式來實(shí)現(xiàn)的，對(duì)于移動(dòng)終端設(shè)備來說，其在獲取用戶位置信息時(shí)，GPS 定位系統(tǒng)是其首要的選用方式， 這是因?yàn)镚PS具備極高的定位精度， 不過如果僅僅采用GPS 定位系統(tǒng)是難以對(duì)室內(nèi)用戶的地理位置進(jìn)行定位的。因此需要結(jié)合無線上網(wǎng)、Wifi、GSM 信號(hào)站等多種方式的應(yīng)用來實(shí)現(xiàn)定位。 對(duì)于PC 端用戶來說，采用上述方法是無法獲取這類用戶的地理位置信息的， 因此只能采用IP 地址來進(jìn)行定位，不過IP 地址定位的精度不高，因此需要對(duì)Geolocation 的返回值進(jìn)行判斷，并利用GetCurrentPosition 方法來對(duì)PC 端用戶的地理位置信息進(jìn)行獲取。

2.6 Web前端的Form表單技術(shù)

在HTML 技術(shù)未進(jìn)行第五次修訂之前， 在Form 表單中需要將表單元素置于form 標(biāo)簽的開頭與結(jié)尾中， 而HTML5 技術(shù)的出現(xiàn)，使Form 表單成為一種聲明式表單， 有效打破了表單元素放置位置的局限性，開發(fā)人員只需將表單id 與放置位置關(guān)聯(lián)在一起，即可將表單元素放置到網(wǎng)頁的任意位置當(dāng)中。并且，HTML5 技術(shù)還能在form 表單在對(duì)多種表單屬性與控件類型進(jìn)行設(shè)置， 從而大大節(jié)約了Java 代碼的編寫時(shí)間，使form 表單的制作變得更加便捷輕松。

3.結(jié)語

總而言之，在基于HTML5 的Web 前端開發(fā)技術(shù)中，HTML5 在其中無疑發(fā)揮著至關(guān)重要的作用，利用HTML5 來開發(fā)Web 前端應(yīng)用程序，能夠使Web頁面很好的兼容PC 端與移動(dòng)終端設(shè)備，使Web 應(yīng)用程序能夠在不同類型的設(shè)備中得到有效應(yīng)用，從而大大推動(dòng)了互聯(lián)網(wǎng)在各個(gè)領(lǐng)域中的發(fā)展。