HTML5 在WEB 前端開發中的應用研究

◆焦新偉

（河南科技大學信息工程學院計算機系 河南 471000）

目前現代互聯網技術快速發展，帶動了WEB 應用程序模式變革，社會生產對WEB 頁面要求越來越高，不僅要滿足PC 端的系統功能，更能適應未來5G 移動網絡的APP 應用要求。從現有技術體系來看，HTML5 是WEB 前端開發的關鍵技術，該技術日益成熟，進一步增強WEB 功能，產生深遠影響。從目前技術發展來看，HTML5 已經被應用在微軟瀏覽器（IE）、谷歌瀏覽器（Chrome）等相對成熟的系統中，值得關注。

1 對HTML5 技術的研究

HTML 中文名稱為超文本標記語言，是WEB 的描述語言，人們日常生活中所使用的網頁都是通過 HTML 制作的，而HTML5 是基于HTML 語言技術體系的第五次修訂，是2014 年由萬維網聯盟制定完成的最新HTML 版本。

從技術角度來看，HTML5 并非僅包含了HTML 技術，其中還囊括Java 腳本語言以及CSS 樣式，在瀏覽器研發階段，通過HTML5 技術能夠提供更加完整的客戶端應用模式，在經過這種處理后能夠顯著消除瀏覽器對插件的依賴，并增強瀏覽器運行能力。從技術先進性來看，HTML5 中還包含很多吸引人的功能，例如對于終端使用者而言，HTML5 能夠從多個角度識別用戶的使用需求，通過該技術能夠讓用戶在不下載插件的情況下就欣賞視頻或者獲得游戲體驗等，因此能夠可以得到更多用戶的認可[1]。除此之外，HTML5 中還包含了多種應用功能，且具有強大的系統兼容性，該技術能夠直接實現麥克風、攝像頭等外部設備與用戶交互，并為視頻、影音等提供無縫隙連接。最后，HTML5 技術還滿足手機APP 的使用切換要求，用戶在多個APP 切換期間不需要返回桌面，能夠直接在APP 之間相互跳轉，簡化了用戶的操作流程。

從WEB 開發的角度來看，HTML5 的出現更具有跨時代意義。這是因為HTML5 重新定義了語法，并實現了手機端與PC端設備標準的統一，能夠提供更強大的開源庫，這種技術的蛻變能夠讓WEB 應用程序開發變得更加輕松、簡單；同時該技術能夠讓開發的WEB 程序直接封裝到不同平臺上，不僅降低了開發成本，也提高了運行效率。最后HTML5 具有實時更新的優勢，可以讓研發人員更快發現WEB 的漏洞，最終完善功能。

而根據現有的技術應用情況來看，按照我國HTML5 行業的發展報告可知，現階段HTML5 正依靠自身的優良特性以及對各類規模的網站識別能力，能夠提供各類強大的屬性最終實現素材免插件播放，這種技術優勢實現了文件直接拖拽在網頁上傳的要求[2]。從國內市場來看，當前HTML5 技術已經在市場上獲得了批準并取得成功，例如移動終端對HTML5 的技術優先性要顯著高于計算機桌面瀏覽器，并且隨著智能手機技術的進一步完善以及移動網絡技術發展，基于移動端的HTML5 技術展現出了廣闊的發展前景。并且隨著我國網民數量增多，大量的信息將會通過軟件的模式直接傳遞給用戶，此時HTML5 作為新一代網頁制作技術，將會在網頁制作中發揮重要作用，有學者正在積極研發HTML5 與CSS3 技術的整合，通過發揮兩種技術的優勢，最終推動網頁制作技術的發展。

2 HTML5 在WEB 前端開發中的應用

2.1 設計總體需求分析

本文所介紹的WEB 前端開發設計是基于HTML5 技術實現的，其主要功能是在網頁級即時通信期間能夠應用嵌入式互聯網。從技術需求來看，大部分的網站都需要利用網頁級即時工具，而在技術應用環節使用單獨開發模式顯然是行不通的，所以在技術層面需要在現有技術體系下通過即時通信插件滿足未來功能需求。

該應用的主要目的，是讓用戶可以在任意地點（任意一臺）連接網絡的計算機，在瀏覽網站時不需要任何安裝其他插件就能獲得相應功能。

2.2 模塊應用的前端整體框架設計

應用框架的前端部分是服務器與用戶信息交互的核心，在系統設計中一方面要為用戶提供一個友好的、方便理解的界面，讓用戶能夠在交互期間獲得預期的功能；另一方面，系統能夠接收用戶發布的各種命令，并根據相應的數據處理要求使其成為系統能理解的數據并發送至服務器，或者解析服務器所反饋的數據，單獨剝離用戶的數據并轉變為對用戶友好的模式呈現出來，這個數據處理過程的優點就是能夠避免大量數據冗余情況，降低信息混淆的可能。

基于上述要求，本文對該過程的描述為：用戶在登錄網站的同時也登錄了通訊模塊，通訊模塊能夠像服務發送請求并獲得用戶的在線數據（同時顯示在指定位置）；當用戶產生通信的需求時，系統能夠快速匹配目標。在這個過程中，假設用戶想要與自己的在線好友交流，系統可以從好友列表中選取目標好友、數據信息之后，由瀏覽器按照約定的數據將資料發送到服務器上，在服務器接收信息后根據目標好友ID 完成數據推送；而在好友端接收到服務器所發送的數據后，通過協議將目標資料解析出來。

按照上述信息傳遞流程可以發現，這個通信過程是互通的，這個互通特性體現在信息的發送方與接收方，而兩者之間的角色也能對調。所以為了滿足這個信息傳遞要求，可以按照圖1 所介紹的數據流程進行處理。

2.3 頁面結構的實現

按照圖1 所介紹的通信數據流架構圖，為了保證用戶界面的友好性，人們往往會考慮一個問題：如何讓這個信息傳輸過程的網頁更加人性化，甚至能夠使用不同設備的分辨率、寬度，其中的重點內容就是HTML 編碼工作，本文將該插件的定位是通用性插件，這樣才能滿足更多用戶的使用要求，并方便后期的維護與修改。其中的關鍵技術路徑包括：

（1）設置meta 標簽

Meta 標簽是放在HTML 文檔中的一個標簽，在meta 標簽中設置“name”屬性值屬于viewport，而viewport 在實際上是手機瀏覽器中顯示網頁的區域，在移動設備中viewport 默認的情況下可能會大于瀏覽器的正常可視區域，這是因為正常情況下臺式電腦分辨率要高于移動設備，當然臺式電腦中的瀏覽器也能在移動端上使用，但是由于手機瀏覽器的可視區域要明顯小于臺式電腦，這種設計的結果會造成手機瀏覽器的頁面出現滑動條，影響了用戶的正常體驗。所以在設計階段，可以將viewport 的寬度調整轉變為設備寬度調整模式，在代碼設置中，將maximum-scale、initial-scale 的屬性設置為1，使用戶在通過網頁與好友進行交流時能夠手動縮放界面，提高使用的實用性。

（2）頁面寬度與字體的相對值設置

在正常的設計中，需要按照屏幕大小來自動調整頁面布局情況，所以在頁面寬度以及字體的設置上，不能將其設置為絕對值，而是要設置為相對數值，這樣才能保證系統具有更強的適應能力。其中在頁面寬度的設置上，不能采用固定像素值，而是要使用相對數值的自動值或者百分比模式，在代碼的選擇上采用“wadth；auto”模式等。

圖1 應用通信數據流架構圖

在字體的設計上不能選擇絕對大小的像素值，也不建議使用相對值em，這是因為em 在字體的設定中采用了“繼承父級元素”的模式，所以若采用這種模式將會導致代碼的嵌套層次很多，用戶也難以把握字體大小。所以為了滿足用戶信息交流的要求，在字體設置上可以采用相對值rem 模式，rem 是CSS3 中新增的一個相對單元，在單元功能的設計上充分參照了HTML 根元素，所以在設計期間只需要設置HTML 根元素大小，這樣就能讓整個頁面中的所有字體大小都發生變化，本文所設置的頁面默認字體大小為16px，用戶可以根據頁面的字體調整功能靈活調整字體的大小。

2.3 整體功能的兼容性處理

在WEB 前端開發階段，系統的整體功能兼容性問題影響系統功能，這也是前端功能開發中最為頭痛的問題，這是因為對于系統開發者而言，他無法決定用戶使用何種瀏覽器，這也決定了在WEB 前端設計期間必須要充分認識到各種應用場景以及應用環境的約束問題[4]。

從前文的研究結果可知，HTML 部分具有良好的兼容性，因此在兼容性處理上，需要重點考慮WEB 前端平臺的數據處理要求，其中的主要技術內容就是要將瀏覽器的差異處理過程封裝在系統內部；而在對整個系統功能兼容性的完善中，需要根據HTML5 的優勢來進一步增強WEB 的信息通信功能。

而在實際上，通過了解目前主流的WEB 兼容性技術問題，可以參照火狐、谷歌瀏覽器的新版本，在經過多方面對比后，為了確保WEB 前端具有良好的通用性，一般在長輪詢與長連接的模式中需要在服務端做多個數據處理，而本文所研究的內容主要是前端部分，所以確定的替換方案應該考慮服務器前端相對簡單的輪詢模型，在改模型的數據處理期間，應該確保每間隔一定的時間就能了解服務器是否有新的信息。所以在系統功能設計階段本文所給出的對策為：在創建WEBsocket 之前，先判斷瀏覽器是否能支持WEBsocket，若支持則可以按照現有的方法，直接創建WIMP 對象；若不支持，則采用“平穩退化”的工作模式，采用端輪詢南通新模式，再添加WIMP 對象。在WIMP 中最為重要的參數就是poll，該變量數值顯示了段輪詢的觸發時間間隔，其中的默認值為3000ms，若產品為線上產品，則可以在系統設計上結合運營報告資料來綜合判斷數據的延遲頻率與發送頻率等。

2.4 視頻與音頻的嵌入

在HTML5 技術開發之前，工作人員想要直接在網頁中嵌入視頻與音頻資料需要通過標簽來插入大量復雜的代碼，且用戶為了獲得音頻與視頻資料也需要安裝Adobe Flash Player 等第三方插播軟件。而在當前HTML5 技術的支持下，這個系統數據處理過程得到了進一步完善，用戶不需要安裝任何插件就能欣賞頁面的視頻與音頻，這也為強化好友的信息互動能力奠定了必要基礎。所以在系統功能的完善上，可以借用HTML5 技術中新增的audio音頻標簽與video 視頻標簽來進行圖像視頻編輯，通過這兩個標簽可以快速地在網頁中嵌入視頻與音頻資料。

2.5 form 表單

在HTML5 技術之前的版本中，form 表單元素需要在以＜from＞標簽開頭以及＜/form＞標簽結尾的表單中提交。但是HTML5 技術進一步完善了這個數據處理過程，人員在系統設計中可以采用聲明式表達模式，將表單元素放在頁面的任意位置，并能根據具體的使用要求實現id 關聯即可。所以在技術設計階段，可以通過HTML5 技術中的form 表單來進一步完善其中的主要功能，包括調整控件類型、明確表單屬性等，不需要編寫大量的java 語言代碼就能夠實現很多功能，因此這種設計方法有助于減少工作人員的工作量，最終簡化制作表單的流程。例如在設計期間，可以采用新增的required 屬性來驗證輸入域的資料，或者通過placeboilder 屬性來顯示提示內容等。在上述數據處理環節，可以通過HTML5 技術選擇number 類型，在右側彈出一個帶有微調的功能，可以通過該功能讓用戶輸入參數或者選擇對話文本等。

3 運行模擬研究

上文所介紹的一種WEB 前端是作為插件使用的，本身不具有獨立應用的功能，所以在操作期間需要依托外界環境來完成相應的數據處理過程，包括用戶信息、好友列表等，因此在本次研究中，直接搭建了一個模擬的運行環境。

在服務器的選擇上選擇了PC 端與移動端的兩種服務器，為了簡化服務器測試環境，在服務器端代碼的設計上，以滿足WEBsocket 通信功能為主，采用直接的廣播機制，具體的接受以及額外添加等都采用Java 代碼過濾，這樣可以滿足模擬服務器端的定向轉發需求。

在完成上述的準備工作后，對于應用的另兩個外部數據獲取接口——好友列表信息與用戶信息，直接采用靜態文件代替，此時只需要保證文件的內容符合之間約定即可；在信息調用階段，將css 文件與js 文件放在服務器相應位置后，在原有頁面底部引入js 文件；對文件的樣式主體做自定義修改。在按照上述處理后，該系統的運行模擬結構如圖2 所示。

圖2 運行結構模擬圖

4 結束語

基于HTML5 技術的WEB 前端開發設計具有可行性，本文詳細給分析HTML5 技術的應用路徑，從該系統的最終應用結果來看，這種設計方法具有可行性，滿足網頁對話信息交流要求，并體現出良好的兼容性，能夠滿足PC 端與移動端的處理要求，尤其是在移動端的WEB 應用程序開發中，HTML5 技術展現出了無與倫比的優勢，具有推廣價值。