HTML5在Web前端開發中的應用探析

◆李昊哲

HTML5在Web前端開發中的應用探析

◆李昊哲

（太原理工大學 山西 030600）

隨著智能移動設備的全面普及，信息資源的獲取以及推送能夠在任何時間、地點進行，用戶對移動前端提出了更多的要求。在此背景下，HTML5技術應運而生，其出現推動了Web開發標準的提高，在HTML5平臺之中，動畫、圖片以及視頻等與移動終端的交互過程，均被標準化。憑借其強大、全面的功能，HTML5能夠為移動互聯網用戶帶來全新的運用方式和體驗。

HTML5；Web；應用

現階段，互聯網技術實現了迅速的發展，進而推動了Web運用模式的改革。在此背景下，社會生產對Web頁面提出了更高的要求，除了需要對PC端相關系統功能進行滿足之外，還應積極適應未來5G移動網絡在APP運用方面的要求。就現存技術體系而言，HTML5屬于Web前端開發之中的重要技術，此技術的不斷成熟，使得Web功能得到了提升，并產生了深遠的影響。同時，對于現階段技術發展情況來講，HTML5在谷歌、微軟瀏覽器等中得到了廣泛運用，值得我們深入的研究。

1 HTML5技術介紹

就HTML而言，其指的是Hyper Text Markup Language的縮寫，中文翻譯為超文本標記語言，屬于互聯網發展過程中形成的對象描述語言[1]。現階段，網絡之中的網頁大多屬于HTML制作的，而HTML5是指第5次修訂版本，也是最新版本。

就HTML5技術來說，其是在HTML技術基礎上所發展起來的，也融合了包括css設計與Java Script技術等在內的諸多新技術。針對各種瀏覽器來說，通過采用HTML5技術能夠使之整體豐富度得到顯著提升，且檔次也大幅提高，降低整體依賴性，尤其是能夠很好降低各種較為復雜的插件依賴性質。此種技術相較于以往的諸多版本來說，其有很多吸引人的新特質。能夠幫助實際使用終端的人在短時間內響應各類需求，不用將任何個人軟件下載下來就能夠閱讀文字、聽音樂和看視頻，而這些在過去都是無法實現的。除此之外，這一技術也可很好的兼容其他各類軟硬件，如個人插入麥克風、攝像拍照設施的時間不受限制，通過與技術結合來讓自己的實際需求得到滿足；或者在軟件上隨時根據自己覺得需求對APP數據予以調用、轉換、傳遞，進而促進自身工作業務效率的提高。

HTML5技術的應用對開發者的意義同樣比較重要。除了前文所說的諸多優勢，其還對語法方面的內容進行了重新梳理，才很大程度上規范了PC、手機、平板移動端，隨著諸多開源庫的加入，開發工作也變得更加規范。Web應用設計也不會很復雜，降低了實際的封裝業務難度，大幅提升bug測試和解決效率，顯著提高工作的效率。

2 HTML5的關鍵技術

2.1 HTML5 中的 Canvas 技術

對于Canvas而言，其屬于HTML5技術之中的主要構成部分之一，指的是運用Java Script繪制以及處理2D圖像。在具體繪制的過程中，在HTML5頁面之中融入和canvas 相關的元素，同時對元素ID、高度以及寬度予以明確[2]。實際上，canvas 本身不存在繪圖能力，全部繪制工作需要通過Java Script canvas繪圖 API 完成，即Canvas只是HTML5頁面之中涉及的元素之一，在制圖的過程中需通過Canvas的API對圖像予以操作。

2.2 HTML5 中的 Device API 技術

就HTML5之中的Device API 技術而言，指的是對本地設備進行訪問，進而形成多媒體流數據，同時也采取 Java Script對媒體流數據進行控制、處理，進而定義出了一套標準。此項技術涉及訪問設備攝像頭、麥克風Media Capture API以及地理位置定位Geolocation API 。地理位置定位Geolocation API 屬于HTML頁面之中的主要構成部分，HTML5能夠提供地理位置定位的API，并且此API在運用方面十分的便捷，網絡用戶當前所處的位置，采取調試Web中地理位置定位API的方式，就能夠即時獲取到。

2.3 HTML5 中的表單技術

就Web運用而言，一般屬于通過HTML以及 Java Script滿足用戶對信息的輸入。表1指的是IE瀏覽器之中所顯示的HTML5表單元數和對應鍵盤，如輸入 ，并可以對不同樣式的鍵盤進行調用，操作十分簡單便捷。

表1 HTML5 表單元素與對應鍵盤

3 基于 HTML5 技術下移動 Web 前端設計

3.1 設計流程

（1）“視用戶為中心，原型構建為基本”的構建思想

UCD把用戶作為設計方面的決策依據，產品設計宗旨在于對用戶需求予以有效滿足[3]。結合對用戶情況的掌握，后期設計與開發產品，并立足于用戶視覺體驗以及運用習慣等，設計產品信息組成與使用方式等。就前端原型而言，其屬于開發中發揮顯示作用的信息系統模型，主要涉及通過PS等相關制圖工具制作的效果圖，以及JS、HTML、CSS做的界面等。另外，制作原型的優勢為可以吸引用戶積極參與、對用戶其他需求進行全面掌握、簡化文檔編輯等，和文字描述相比之下，畫面展示可以更好獲取到用戶的關注。

（2）構建 Web 前端流程

將用戶作為中心的設計，要想避免盲目遵循用戶意見的狀況，需要在用戶使用前做用戶調研，進而對此模式予以補充。同時將“視用戶為中心、原型構建為基本”作為根本構建思路，需要在構建前端系統時滿足以下流程：需求調研分析、低保真設計、高保真設計、前端代碼開發。交互設計在低保真設計階段進行，視覺設計和初期前端開發在高保真設計階段進行。

3.2 原型設計

（1）低保真原型

低保真設計指的是運用軟件二次加工圖紙之中的草圖獲取到的需求設計稿，其不必滿足精準美觀的要求，但需要實現準確、高效的反饋與交互。對低保真模型進行構建的相關流程為：研究交互、選擇原型界面、整理界面元素、將界面元素分級并分組、制作紙原型、低保真原型、可行性評估。

（2）高保真原型

高保真原型主要涉及通過PS等軟件制作界面效果以及實現交互原型，建立高保真交互原型主要涉及以下方式：其一，將HTML融入頁面效果圖中，通過map與area對觸碰連接進行添加；其二，通過PS切片工具裁切頁面效果，進而制作靜態頁面；其三，運用代碼制作界面模型；其四，制作原型軟件構建原型。就高保真原型而言，需要結合項目內容對實現方法予以決定，并立足于產品外形對視覺效果進行設計，前端開發則負責對視覺元素間動態交互效果進行構建。

4 以HTML5 為基礎開發應用移動 Web App 的方式

就移動Web App而言，可以對頁面內容進行動態控制更新，并促進系統bug修復功能的提升[4]。對服務器進行修改之后，用戶能夠直接運用新頁面，在使用的過程中也會結合市場變化狀況與用戶具體需求予以持續更新，對此軟件工程師對移動Web App技術架構予以設計的時，需要確保其科學性、合理性，降低維修總成本與更新影響。移動Web App前端數據層處在后端和UI界面之中，能夠將用戶操作優化成HTTP請求，進而對數據進行及時的緩存，并在模塊更新的過程中降低對系統產生的影響。就安卓版本平臺的運用，首先能夠對Web View 組件進行拓寬，在HTML5技術之中運用插件形式的拓展功能以及直接在平臺中拓展功能。其次，拓展系統Webkit，Web Core 排版和 Java Script Core 屬于Webkit 的兩種搜索引擎，采取頁面優化的方式對HTML5運用技術予以突破，在傳統技術中，用戶每點擊一次鏈接，需刷新一次才可以完成，對此HTML5需要對頁面元素進行改變，提出OPOA解決方案，進而讓Java Script 腳本得到順利的執行。同時，移動Web在發展的過程中，能夠對用戶“云端”技術需求進行滿足，并運用手機直接獲取社交以及游戲等相關服務。并且，在實踐發展中，其會被各類內外因素所影響，諸如HTML5似乎并不成熟，對傳統技術進行完全取代的困難較大，在發展中需對HTML5有關標準予以完善，進而讓用戶體驗得到優化。

5 結語

總之，如今社會正朝著智能化、網絡化方向發展，人們對移動Web前端開發提出了越來越高的要求，由此就使得HTML5技術出現，其能夠將移動端原生開發取而代之。此項技術的功能強大，且擁有的發展優勢也獨一無二，其所具備的高效性、設備兼容性可對其在智能移動終端上的頁面開發提供有利幫助。現階段，已被廣泛應用于我國移動設備平臺中，將一種全新體驗帶給了眾多移動Web用戶。

[1]王建翠，陳育才. 基于HTML5技術的移動Web前端設計與開發分析[J]. 計算機產品與流通，2019（10）：74-75.

[2]張志敏. 基于HTML5的Web前端開發技術研究[J]. 山東農業工程學院學報，2019（12）：21-22.

[3]薛玉倩. 基于HTML5的Web前端設計與開發[J]. 內蒙古科技與經濟，2019（17）：62-63.

[4]于圣彬. 基于HTML5技術下移動Web前端設計與開發的研究[J]. 中國新通信，2018， 20（04）：52.