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

張志敏

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

0.引言

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

1.HTML5技術(shù)概述

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.結(jié)語

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