HTML5技術在WEB前端設計中的應用

付宇舜 梁超 廖熠

摘要：隨著互聯網技術和移動設備的飛速發展，HTML5技術在網頁前端的設計上的應用將會成為連接PC端與移動終端的重要紐帶。對HTML5技術在WEB前端設計中的應用的研究，首先分別介紹了WEB網頁和HTML5技術的特點，其次介紹了HTML5技術的相關優勢，最后總結了HTML5技術在網頁前端的具體應用。

關鍵詞：互聯網技術;HTML5技術;WEB網頁前端。

引言

進入21實際，互聯網產品生產正逐步向快速交付、頻繁迭代方向發展，人們對互聯網進行使用的同時，在頁面上提出了更高的要求，同時，移動終端的迅猛發展，也使得網頁設計在移動端的應用成為了不可避免的趨勢。而HTML5做為HTML系列的最新產品，起到了一個非常好的承前啟后的作用。

1WEB前端與HTML5技術

1.1 WEB前端

WEB前端運用到了多種不同的技術，分別是交互設計，視覺設計和界面設計。交互設計的主要對象是用戶，最根本的目的就是為了用戶使用便利，最大限度的滿足用戶的需求，其貫穿了整個WEB前端的設計核心，保留用戶的使用習慣，精準及時的為用戶提供幫助和提示。交互設計始終以用戶為主體，及時把握使用者的心理需求，使產品更親民。視覺設計依賴于交互設計，針對不同的人群，呈現出不同的視覺感受，盡力滿足各個不同群體的使用需求。界面設計是給用戶的最直觀的感受，也是WEB前端最終呈現在用戶眼前的一幕，其主要是為用戶提供最終的結果，傳輸用戶所需求的關鍵信息和內容。

1.2 HTML5的相關技術

HTML最初是用于簡單的網頁架構，HTML5在此基礎上不斷發展更新，使得圖片和畫面等可以嵌入在網頁中，其不僅可以對圖像重新繪制，還能有效處理和分析圖像。其中HTML5 Device API 主要有設備訪問攝像頭、Gelocation API、 Media Capture API。Media Capture API 對 API 重新定義，其主要是訪問本地相關設備，從而把數據流量出現 在媒體之中，借助 Javascript 科學地處理媒體的流數據和數據流。Gelocation API 為 HTML5 可以形成相應的地理位置信息，這也是該技術重要的組成內容。

2 HTML5技術的相關優勢

2.1與 HTML1 相比，HTML5 具有以下幾個方面的創新：

①使用了 結構化的標簽語言，如 hgroud、footer、section、header 等， 使得代碼更簡單易懂，極大的增強了其思路的順暢性; ②可以利用 localStorage 技術支撐離線存儲技術，使得廣大移動端用戶即使在沒有網的情況下也能瀏覽相關網頁并及時緩存;③借助 HTML5 的 IndexedDE 技術可以實現復雜數據的存儲，使用緩存技術將文件資料等信息進行本地化下載，這便使得用戶可在離線狀態下使用移動應用;④HTML5 可以發揮其獨特 的多媒體優勢，實現移動應用音頻視頻、圖像功能的展示。 在開發移動應用過程中，借助網頁技術構建起組織形式。

2.2 canvas 技術 H1 界面中相比于傳統的前端技術，新增了標簽，實現對圖像的處理，此種標簽可以利用 2D Programmatic 標準接口程序，利用較低的存儲代價實現圖像的處理。此種 技術不僅可以繪制圖像，還可以實現對圖像的分析和處置。 此標簽僅僅可以完成 HTML 頁面中元素的定義，若要實現圖像處理，可以借助標準的 API 程序接口。

2.3 Device API 技術 Device API 是一種可以訪問攝像頭、麥克風和地理位置 的標準 API 接口。此種標準定義了一套可以實現對本地設備 產生的多媒體數據的在線傳輸，如進行視頻的錄制和保存。 Geolocation 定位 API 是 HTML5 的重要組件，通過調用此種 API 可以幫助用戶獲取當前位置。目前，市場上的瀏覽器種 類較多，但并非所有瀏覽器均支持 Geolocation 定位 API。

當然，H TM L5 技術也并非萬能的，在使用時也存在相 應的問題：（1）新技術的發展速度還沒有達到很高的水平， 在使用的受眾人群中也沒有達到普及化要求，其在性能和 功能上還夠健全，存在一定缺陷，在使用者群體中還有一 些人表示使用感不太好。（2）HIML5 技術在使用過程中， 還存在一定局限，這也是一個值得長期探討的問題。

3 ?HTML5在網頁前端的具體應用

3.1 基本流程

構建 Web 前端的基本流程分為需求調研分析、原型設計、前端代碼開發。其中原型設計及中分為低保真和高保真設計。用戶的需求分析包含分析用戶群分析和人物角色分析，用戶調研可以采用問卷調查、可用性測試兩種方式進行。低保真設計主要進行交互設計，高保真設計主要負責視覺設計、初期前端開發。

3.2 移動 Web 前端開發

首先對代碼進行分層，分為結構層、表現層和行為層三層。三層在代碼級別分別對應 HTML、CSS 和 JaveScript 三種不同的代碼文件。結構層要實現對頁頭、導航、內容和頁腳的定義，然后在其基礎上實現 HTML 標簽的定義，在標簽定義過程中，要注意幾點問題。首先要使用帶具體語意的標簽元素;第二，只把<table>使用在表格式數據;第三，降低無實際意義的標簽的使用頻率，如<div>和<span>。表現層CSS，要對樣式文件進行規劃，并且要對樣式進行必要注釋的添加，方便后期的維護。在開發過程中，需要注意，CSS 樣式并非必須在代碼中書寫，無 CSS 網頁也是可以訪問的。行為層主要依靠 JavaScript 代碼實現，其主要組件為jQuery Mobile。

結語

在新的發展潮流之中，科學技術的發展極大的方便了我們的生活，信息日益多樣化，全球化，因此，實現HTML5技術在WEB前端的應用有著非常大的作用，它更好的實現了移動終端和電腦端的互通，向萬物互聯近一步靠近，順應5G時代，HTML5的功能和應用將會不斷完善和提升。

參考文獻

[1]吳元杰，何毅平，朱曉慶，陳庚.基于HTML5技術的移動Web前端設計與開發[J].信息記錄材料，2021，22（08）：139-141.

[2]曹華山.基于HTML5技術的移動Web前端設計與開發[J].科技與創新，2021（18）：41-42.

[3]歐華杰.HTML5在Web前端開發中的應用研究[J].電腦編程技巧與維護，2021（06）：26-27+48.

[4]劉輝.HTML5的Web前端開發技術分析[J].無線互聯科技，2020，17（19）：163-164.

基金項目：四川輕化工大學大學生創新創業訓練計劃項目（Cx2019133）;四川輕化工大學教改項目：“課程思政”在工程類專業課中的融入研究——以水力學課程為例（JG2028）;地方高校給排水科學與工程專業 “工學結合”人才培養模式研究與實踐（JG1949）。