基于HTML5和CSS3的網頁前端設計研究

摘要：為實現對網頁前端設計的優化，提高網頁前端規范化權值，開展基于HTML5和CSS3的網頁前端設計研究。根據設計前端的需求與效果呈現預期，進行版本的迭代，利用此版本特定的語言，對前端中語義進行常規化處理，以此實現基于HTML5技術的網頁前端標簽設計;調整界面中色彩數據，通過對網頁布局的動態化展示，在界面中直接進行圖片的移動、縮小、放大、變形、選裝、扭曲等處理，實現基于CSS3網頁內容元素適配化處理;從頁面規格、導航、圖片方面，進行布局的優化設計，完成響應式網頁前端布局優化。通過對比實驗證明，此次設計成果設計出的網頁前端規范化權值更高，在用戶提取信息的過程中，準確性更高，網頁整體運行效率更快。

關鍵詞：HTML5;CSS3;網頁標簽;前端設計;網頁布局

中圖分類號：G354.46? ?文獻標識碼：A

文章編號：1009-3044（2022）07-0061-02

隨著現代化科學技術在社會不同領域中的廣泛應用，行業的規范化建設與發展都在此過程中受到了潛移默化的影響，為了做到對線上交互平臺前端的高度開發，滿足更多受眾群體線上檢索的功能需求。本次設計研究引進了HTML5技術與CSS3技術。其中HTML5技術是早期HTML的衍生技術，可以將其作為開放性Web平臺建設的基石，開發網頁前端時，應用HTML5可以實現在多個移動設備上支持多媒體[1]。例如，早期的Video標簽、Canvas標簽在網絡中是不被支持的，但在引進新技術后，此類標簽在網頁前端可處于良好集成與對接狀態。總結HTML5技術在應用中的優勢，具體包括：提升了網頁在運行中的移植性、增強了前端用戶檢索網頁的交互性能、對SEO的對待態度較為友好、可以靈活地定義標簽內容、能夠提供終端用戶更加豐富的音頻與視頻檢索界面。其中CSS3技術是CSS技術的全新升級版本，此項技術又被稱為層疊樣式技術，此項技術在演進過程中，可以W3C劃分成多個系列功能模塊。相比其他技術，此項技術在進行網頁前端布局設計時，可以實現將頁面設計成多元化布局，包括網頁前端的圓角效果、界面邊緣圖形模糊化、文字印象效果、透明效果、漸變效果等[2]。利用此項技術中的Font-Face技術，可以實現對網頁前端字體的定制與多種操作處理包括移動、旋轉、平移、放大、縮小等，從而實現功能欄布局的多元化。

1 基于HTML5技術的網頁前端標簽設計

HTML5技術是一項強大的頁面開發技術，在當前網頁設計中得到了廣泛的應用。該技術可以實現語義標記功能，能夠在移動客戶端上實現頁面開發，不僅可以提升用戶瀏覽頁面時的體驗感，加快頁面的響應速度，還可以節省網頁瀏覽消耗的流量。

為了實現對網頁前端的優化設計與開發，在本章的研究中，引進HTML5技術，對網頁前端標簽進行設計。例如，根據設計前端的需求與效果呈現預期，進行版本的迭代，利用此版本特定的語言，對前端中語義進行常規化處理。并在此基礎上，建立Form表單，在表單中定義Video與Audio兩個標簽，確保前端在無固定插件支持的條件下，可實現對網頁前端流媒體內容的有序播放。同時，根據HTML5技術具有的Preload屬性，進行前端現有資源的預加載[3]。在此過程中，用戶只需要在移動終端設備上操作鼠標，或滑動窗口界面，進行選項卡或功能卡的設定，即可直接實現操作功能。

在上述提出內容的基礎上，可使用HTML5已優化的DOM接口，設定多個屬性標簽，可以將對應的標簽信息用于表示網頁前端通信、網頁中不同單元模塊圖形展示、終端用戶IP地址描述、網頁前端資源在線或離線存儲、信息的后臺處理、文檔信息的便捷化應用、數據記錄與管理等，通過此種方式，實現對設定標簽與前端通信接口的對應，確保開發的網頁前端可以滿足更多用戶群體在操作中的需求[4]。此外，HTML5技術自帶一個表單驗證功能，可以實現對網頁前端標簽設計工作中，Type屬性的優化，因此，可直接選擇Date標簽，進行標簽主動創建工具的開發，實現對多種前端標簽的設計。

在利用HTML5技術進行網頁前端設計時，需要經過低保真設計和高保真設計，在此基礎上才可以進行交互式設計和視覺設計及初期前端開發。低保真設計是指在初始設計理念下，依據繪制的草圖，利用軟件進行二次加工，輸出需求設計稿，此時得到的初稿不夠精致美觀，但準確地表達出界面交互和功能等。低保真模型構建的步驟如下：1）交互性需求確定;2）初始界面框架構建;3）界面元素布局;4）界面元素分級及分組;5）制作界面初始圖紙;6）輸出低保真模型;7）召開組會并測試可行性。高保真設計是在低保真模型的基礎上，利用HTML5技術和PS等工具制作出界面的視覺效果并實現交互式功能。在構建高保真模型時，主要通過以下步驟：1）插入HTML5，在頁面效果圖上利用Map和Area設計觸碰連接;2）打開PS，利用切片工具裁剪頁面效果圖，制作出靜態的頁面;3）編制前端開發代碼，輸出界面效果模型;4）利用HTML5，結合CSS、JS等構建高保真模型。由此，根據網頁前端需求設計產品外形視覺效果，結合前端開發實現網頁中視覺元素的動態交互性。

2 基于CSS3網頁內容元素適配化處理

在完成網頁前端標簽的設計后，利用CSS3技術，進行網頁中內容元素的適配性處理。在此過程中，應明確CSS3作為一種市場內最新款元素版本處理工具，可以利用其模塊化特性，進行元素適配的圈點[5]。當前，CSS3技術新增了選擇器，包括兄弟選擇器、屬性選擇器、偽類選擇器和偽元素選擇器等。以屬性選擇器為例，E[attribute^=value]用于選擇含有某特定值為開頭的屬性元素，E[attribute$=value]用于選擇含有某特定值為結尾的屬性元素，E[attribute*=value]用于選擇含有某特定值的屬性元素，且不限特定值的具體位置。利用CSS3技術可以設置背景、字體文本、盒模型、變形動畫等屬性。例如，利用CSS3技術的網頁內容設計功能，進行網頁中動畫的設計、網頁界面邊框生成條件的設置、色彩空間與背景顏色匹配的調整等。并且，利用CSS3還能夠實現圖形的3D變形功能，滿足產品在3D空間顯示等需求，使頁面展示效果更為豐富。總之，CSS3是一個應用在網頁前端動畫設計領域內的Animation屬性工具。在完成對界面中色彩數據的調整后，可通過預生成等方式，進行設計成果的查看，并通過對網頁布局的動態化展示，在界面中直接進行圖片的移動、縮小、放大、轉移、變形、旋轉、扭曲等處理。

在進行網頁前端邊框設計時，CSS3進行了邊框屬性的細化，可以直接根據設計需求，進行前端邊框陰影、半徑、色彩等細節性屬性的調整，確保設計后的邊框可在界面中呈現一種更加立體化的效果。

在進行網頁前端空間色彩設計時，可利用CSS3中的RGBA指令，進行網頁元素屬性的設定，控制整體色彩的灰度、透明度、色彩飽和度等，以此種方式，避免子元素屬性在網頁設計過程中受到影響。在應用CSS3技術時需要注意避免在HTML標簽中寫Style，需要從CSS樹渲染中跳出。通過上述操作，實現對網頁內容中不同元素的合理化調配，以此種方式，實現對網頁前端在設計中元素的適配化處理。

3 響應式網頁前端布局優化

完成上述設計后，將響應式網頁前端作為設計目標。考慮到現代化網絡環境下，移動終端的類型越來越多，為了確保前端與不同移動應用終端呈現適配效果，需要前端及時對應用的變化給予響應。因此，本文將從網頁前端布局設計層面入手，對其進行優化設計。在此過程中，移動前端的屏幕規格是多元化的，不同于PC對于前端的應用需求是不同的，為此設計人員需要從響應需求層面入手，從頁面規格、導航、圖片三個方面，進行布局的優化設計。以頁面規格的響應適應性為例，在對其進行布局優化設計時，可以在前端標簽中增加一個“<[mate name]=["viewport"content]=["width=device-width"]>”指令，即確保頁面在前端的適應性。

在進行網頁前端圖片主動響應設計時，可在網頁前端插入或引進圖片前，引進<img>標簽，使圖片在傳輸或導入過程中主動切換成不同分辨率的版本，以此種方式，實現頁面前端在設計中的適配性。綜上所述，實現對響應式網頁前端布局的優化設計，完成基于HTML5和CSS3網頁前端開發。

在網頁前端設計中，將使用者作為目標群體，保持以人為服務中心的設計理念，考慮適用人群的使用心理和行為特征，從使用需求和感受出發，設計出以人為本、貼合人們實際需要的網頁前端產品。

4 對比實驗

通過本文上述論述，在實現對網頁前端的理論設計后，為了進一步驗證上述設計思路的應用可行性，以及按照設計思路具體完成開發的網頁前端是否能夠達到預期的應用效果，選擇以某企業官方網站作為依托，針對該網站當中包含的各項功能，對其網頁前端進行設計。為了方便對比，選擇將本文提出的基于HTML5和CSS3的網頁前端作為實驗組，將傳統基于模塊化的網頁前端作為對照組，針對兩種網頁前端的信息提取效果作為評價指標。為了確保兩種設計方法設計的網頁前端在運行過程中具備相同的運行條件，選擇將一臺8核32GB內存，1TB硬盤的計算機作為網頁運行的計算機，并將兩種網頁前端顯示在CentOS 7.4×86計算機顯示器上。為了實現對信息提取效果的量化對比，選擇將網頁前端信息提取的規范化權值出現概率作為評價量化指標。網頁前端信息提取的規范化權值出現概率是指在網頁前端，用戶對需要獲取的信息提取時，提取結果滿足預期規范化權值的概率，若概率越大，則說明在該網頁前端提取信息的準確性更高，也進一步說明了網頁前端的運行效率更快;反之，若概率越小，則說明在該網頁前端提取信息的準確性更低，也進一步說明了網頁前端的運行效率更慢。根據上述論述，對實驗組和對照組的前端信息提取的規范化權值出現概率進行計算，其中規范化權值的計算公式為：

公式（1）中，[Pa]表示為網頁前端信息提取的規范化權值;[ea]表示為屬性值;[a]表示為在網頁前端中的某一節點。根據上述公式，計算得出兩種網頁前端的信息提取規范化權值，再進一步根據下述公式（2），對兩種網頁前端信息提取規范化權值出現概率的計算：

公式（2）中，[Wa]表示為網頁前端信息提取規范化權值出現概率;[ka]表示為網頁前端上某一節點a的長度。上述公式（1）和公式（2）中，[Pa]的取值范圍在0～1之間，[Wa]的取值范圍也同樣在0～1之間。兩個計算結果的數值越接近1，則說明應用效果越理想;反之，兩個計算結果的數值越接近0，則說明應用效果越差。根據上述公式（1）和公式（2）計算得出實驗組與對照組對應的[Wa]值，并將五個不同用戶的實際操作結果記錄如表1所示。

從表1中記錄的實驗數據可以看出實驗組的[Pa]值均超過0.800，明顯大于對照組的[Pa]值，并且[Wa]值均超過0.90，明顯大于對照組的[Wa]值。同時，通過對用戶B和用戶D在對照組完成網頁前端信息提取得到結果進行分析得出，其對應的[Wa]值僅為0.26，[Pa]值僅為0.214，嚴重不符合網頁運行對前端提出的設計要求，而實驗組并沒有出現這一問題。因此，通過上述得出的實驗數據能夠證明，本文提出的基于HTML5和CSS3的設計方法設計出的網頁前端規范化權值更高，這一取值出現的概率也更高，在用戶提取信息的過程中，準確性更高，網頁整體運行效率更快。在實驗過程中發現，得出上述實驗結果的主要原因是本文設計的基于HTML5和CSS3的方法在網頁前端當中增加了對異常信息提取的過濾機制，充分利用了最大代替最小的過濾原則，提高了網頁前端信息在提取過程中的效率。

5 結束語

本文從基于HTML5技術的網頁前端標簽設計、基于CSS3網頁內容元素適配化處理、響應式網頁前端布局優化三個方面，對基于HTML5和CSS3網頁前端設計方法展開研究。完成設計后，將基于模塊化的網頁前端作為傳統方法，將其與本文方法進行比對，通過對比實驗結果的分析可知，本文提出的基于HTML5和CSS3的設計方法設計出的網頁前端規范化權值更高，這一取值出現的概率也更高，在用戶提取信息的過程中，準確性更高，網頁整體運行效率更快。在未來，HTML5+CSS3將成為一項組合技術，廣泛應用到市場，為網頁前端的規范化、優化設計提供更加堅實的技術作為支撐。

參考文獻：

[1] 于平.基于模塊化的網頁前端開發技術優化策略研究[J].電子元器件與信息技術，2020，4（12）：128-129.

[2] 吳嶸.基于Web前端開發的化工企業網站設計——評《HTML5移動Web開發》[J].材料保護，2021，54（2）：172.

[3] 馮秀玲，張楊娟.基于HTML5+Css3+Java Script的山西旅游平臺搭建[J].中國管理信息化，2021，24（19）：155-157.

[4] 姜博，李昆，鄒志超，等.基于HTML5+CSS3+jQuery Mobile的臺站智能管理系統開發與實現[J].防災減災學報，2019，35（1）：62-65.

[5] 艾夢.HTML5+CSS3在網頁前端打造工作中的優勢分析[J].信息系統工程，2019（6）：120.

【通聯編輯：朱寶貴】

收稿日期：2021-11-25

作者簡介：徐亞（1979—），女，云南宣威人，講師，學士，主要研究方向為數字媒體等。