基于HTML5和CSS3的網(wǎng)頁前端設(shè)計研究

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

關(guān)鍵詞：HTML5;CSS3;網(wǎng)頁標(biāo)簽;前端設(shè)計;網(wǎng)頁布局

中圖分類號：G354.46? ?文獻(xiàn)標(biāo)識碼：A

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

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

1 基于HTML5技術(shù)的網(wǎng)頁前端標(biāo)簽設(shè)計

HTML5技術(shù)是一項強(qiáng)大的頁面開發(fā)技術(shù)，在當(dāng)前網(wǎng)頁設(shè)計中得到了廣泛的應(yīng)用。該技術(shù)可以實現(xiàn)語義標(biāo)記功能，能夠在移動客戶端上實現(xiàn)頁面開發(fā)，不僅可以提升用戶瀏覽頁面時的體驗感，加快頁面的響應(yīng)速度，還可以節(jié)省網(wǎng)頁瀏覽消耗的流量。

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

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

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

2 基于CSS3網(wǎng)頁內(nèi)容元素適配化處理

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

在進(jìn)行網(wǎng)頁前端邊框設(shè)計時，CSS3進(jìn)行了邊框?qū)傩缘募?xì)化，可以直接根據(jù)設(shè)計需求，進(jìn)行前端邊框陰影、半徑、色彩等細(xì)節(jié)性屬性的調(diào)整，確保設(shè)計后的邊框可在界面中呈現(xiàn)一種更加立體化的效果。

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

3 響應(yīng)式網(wǎng)頁前端布局優(yōu)化

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

在進(jìn)行網(wǎng)頁前端圖片主動響應(yīng)設(shè)計時，可在網(wǎng)頁前端插入或引進(jìn)圖片前，引進(jìn)<img>標(biāo)簽，使圖片在傳輸或?qū)脒^程中主動切換成不同分辨率的版本，以此種方式，實現(xiàn)頁面前端在設(shè)計中的適配性。綜上所述，實現(xiàn)對響應(yīng)式網(wǎng)頁前端布局的優(yōu)化設(shè)計，完成基于HTML5和CSS3網(wǎng)頁前端開發(fā)。

在網(wǎng)頁前端設(shè)計中，將使用者作為目標(biāo)群體，保持以人為服務(wù)中心的設(shè)計理念，考慮適用人群的使用心理和行為特征，從使用需求和感受出發(fā)，設(shè)計出以人為本、貼合人們實際需要的網(wǎng)頁前端產(chǎn)品。

4 對比實驗

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

公式（1）中，[Pa]表示為網(wǎng)頁前端信息提取的規(guī)范化權(quán)值;[ea]表示為屬性值;[a]表示為在網(wǎng)頁前端中的某一節(jié)點。根據(jù)上述公式，計算得出兩種網(wǎng)頁前端的信息提取規(guī)范化權(quán)值，再進(jìn)一步根據(jù)下述公式（2），對兩種網(wǎng)頁前端信息提取規(guī)范化權(quán)值出現(xiàn)概率的計算：

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

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

5 結(jié)束語

本文從基于HTML5技術(shù)的網(wǎng)頁前端標(biāo)簽設(shè)計、基于CSS3網(wǎng)頁內(nèi)容元素適配化處理、響應(yīng)式網(wǎng)頁前端布局優(yōu)化三個方面，對基于HTML5和CSS3網(wǎng)頁前端設(shè)計方法展開研究。完成設(shè)計后，將基于模塊化的網(wǎng)頁前端作為傳統(tǒng)方法，將其與本文方法進(jìn)行比對，通過對比實驗結(jié)果的分析可知，本文提出的基于HTML5和CSS3的設(shè)計方法設(shè)計出的網(wǎng)頁前端規(guī)范化權(quán)值更高，這一取值出現(xiàn)的概率也更高，在用戶提取信息的過程中，準(zhǔn)確性更高，網(wǎng)頁整體運行效率更快。在未來，HTML5+CSS3將成為一項組合技術(shù)，廣泛應(yīng)用到市場，為網(wǎng)頁前端的規(guī)范化、優(yōu)化設(shè)計提供更加堅實的技術(shù)作為支撐。

參考文獻(xiàn)：

[1] 于平.基于模塊化的網(wǎng)頁前端開發(fā)技術(shù)優(yōu)化策略研究[J].電子元器件與信息技術(shù)，2020，4（12）：128-129.

[2] 吳嶸.基于Web前端開發(fā)的化工企業(yè)網(wǎng)站設(shè)計——評《HTML5移動Web開發(fā)》[J].材料保護(hù)，2021，54（2）：172.

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

[4] 姜博，李昆，鄒志超，等.基于HTML5+CSS3+jQuery Mobile的臺站智能管理系統(tǒng)開發(fā)與實現(xiàn)[J].防災(zāi)減災(zāi)學(xué)報，2019，35（1）：62-65.

[5] 艾夢.HTML5+CSS3在網(wǎng)頁前端打造工作中的優(yōu)勢分析[J].信息系統(tǒng)工程，2019（6）：120.

【通聯(lián)編輯：朱寶貴】

收稿日期：2021-11-25

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