◆李昊哲

HTML5在Web前端開發(fā)中的應用探析

◆李昊哲

（太原理工大學 山西 030600）

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

HTML5；Web；應用

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

1 HTML5技術介紹

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

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

HTML5技術的應用對開發(fā)者的意義同樣比較重要。除了前文所說的諸多優(yōu)勢，其還對語法方面的內容進行了重新梳理，才很大程度上規(guī)范了PC、手機、平板移動端，隨著諸多開源庫的加入，開發(fā)工作也變得更加規(guī)范。Web應用設計也不會很復雜，降低了實際的封裝業(yè)務難度，大幅提升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 技術而言，指的是對本地設備進行訪問，進而形成多媒體流數(shù)據(jù)，同時也采取 Java Script對媒體流數(shù)據(jù)進行控制、處理，進而定義出了一套標準。此項技術涉及訪問設備攝像頭、麥克風Media Capture API以及地理位置定位Geolocation API 。地理位置定位Geolocation API 屬于HTML頁面之中的主要構成部分，HTML5能夠提供地理位置定位的API，并且此API在運用方面十分的便捷，網(wǎng)絡用戶當前所處的位置，采取調試Web中地理位置定位API的方式，就能夠即時獲取到。

2.3 HTML5 中的表單技術

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

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

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

3.1 設計流程

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

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

（2）構建 Web 前端流程

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

3.2 原型設計

（1）低保真原型

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

（2）高保真原型

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

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

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

5 結語

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

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

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

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

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