基于HTML5的Web前端開發技術研究

張志敏

（池州職業技術學院 安徽 池州 247000）

0.引言

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

1.HTML5技術概述

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

2.基于HTML5的Web前端開發技術研究

2.1 Web前端頁面的自適應開發技術

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

2.2 Web離線程序開發技術

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

2.3 Web前端的音視頻嵌入技術

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

2.4 Web前端圖形動畫制作技術

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

2.5 Web前端的地理定位技術

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

2.6 Web前端的Form表單技術

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

3.結語

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