李居蘭

摘要：在電子技術(shù)、計(jì)算機(jī)信息技術(shù)高速發(fā)展的環(huán)境背景下，運(yùn)用的顯示設(shè)備也種類(lèi)繁多，超文本標(biāo)記語(yǔ)言（HTML）、樣式層疊表（CSS）走進(jìn)創(chuàng)新發(fā)展的新時(shí)期，并且在積極探索的情況下，HTML5和CSS3.0愈加成熟，讓網(wǎng)頁(yè)設(shè)計(jì)可以更好的滿足網(wǎng)民提出的多樣化需求。本文進(jìn)行分析HTML5和CSS3.0在網(wǎng)頁(yè)設(shè)計(jì)中的新特性以及優(yōu)勢(shì)。

關(guān)鍵詞：HTML5;CSS3.0;網(wǎng)頁(yè)設(shè)計(jì);新特性;優(yōu)勢(shì)

互聯(lián)網(wǎng)的發(fā)展日新月異，網(wǎng)頁(yè)制作技術(shù)呈現(xiàn)出不斷革新的趨勢(shì)。為了讓所提供的網(wǎng)頁(yè)設(shè)計(jì)具備更佳的視覺(jué)、聽(tīng)覺(jué)感官體驗(yàn)，設(shè)計(jì)人員就要運(yùn)用更加先進(jìn)的技術(shù)手段，其中HTML5和CSS3.0技術(shù)應(yīng)用甚廣。

一、HTML5在網(wǎng)頁(yè)設(shè)計(jì)中的新特性和優(yōu)勢(shì)分析

（一）嶄新的語(yǔ)義屬性與標(biāo)簽

針對(duì)網(wǎng)頁(yè)設(shè)計(jì)而言，HTML5標(biāo)準(zhǔn)賦予的結(jié)構(gòu)、意義呈現(xiàn)出更加明顯的現(xiàn)實(shí)性，特別是統(tǒng)一的處理語(yǔ)義，更加規(guī)范，對(duì)于Web靜態(tài)語(yǔ)言，建立起新的標(biāo)簽、屬性，主要的目標(biāo)就是讓相應(yīng)的編程語(yǔ)言，提供給網(wǎng)頁(yè)設(shè)計(jì)更可靠的保障。HTML5中，新的語(yǔ)義化標(biāo)簽包括<header><article>等，同時(shí)部分標(biāo)簽中，加入實(shí)用性較高的屬性，比如<area><a>下的media屬性等。這些標(biāo)簽一方面將網(wǎng)頁(yè)設(shè)計(jì)的效率明顯提升，另一方面將搜索引擎抓取網(wǎng)站內(nèi)容質(zhì)量提升，產(chǎn)生的意義不言而喻。HTML5標(biāo)準(zhǔn)中各部分內(nèi)容標(biāo)簽，具有不同等級(jí)的同時(shí)，屬于相互獨(dú)立性的存在，所以可以讓搜索引擎、統(tǒng)計(jì)軟件更及時(shí)有效的識(shí)別。同時(shí)HTML5僅需此形式，就能讓程序員采取type對(duì)于文檔解析標(biāo)準(zhǔn)進(jìn)行聲明，將工作負(fù)擔(dān)顯著的降低，使得新語(yǔ)義識(shí)別更準(zhǔn)確可靠。

（二）新增多媒體呈現(xiàn)方式

HTML5標(biāo)準(zhǔn)中，可以將相應(yīng)的制作工具進(jìn)行替代，比如Flash等，并且是通過(guò)視頻標(biāo)簽、音頻標(biāo)簽實(shí)現(xiàn)。設(shè)計(jì)人員進(jìn)行制作網(wǎng)頁(yè)過(guò)程中，預(yù)先準(zhǔn)備好音頻、視頻等素材，采取URL，即“src”屬性聲明音視頻，經(jīng)相關(guān)的標(biāo)簽和屬性、方法等，就能夠針對(duì)性的調(diào)整這些素材，此環(huán)節(jié)不用運(yùn)用特定插件得到音視頻文件即可。

（三）應(yīng)用程序接口豐富

HTML4中進(jìn)行建立單一DOM接口，HTML5標(biāo)準(zhǔn)中增添很多借口，主要的就是網(wǎng)絡(luò)監(jiān)聽(tīng)接口、離線存儲(chǔ)接口、全屏接口以及應(yīng)用緩存接口等等，產(chǎn)生的功效就是，帶給復(fù)雜性較高的、功能較強(qiáng)的、變化較多的網(wǎng)頁(yè)設(shè)計(jì)工作更多方面的API。例如，HTML5中的本地存儲(chǔ)屬性中，包括window.LocalStorage、window.sessionStorage。二者均將客戶端臨時(shí)信息當(dāng)作存儲(chǔ)對(duì)象，不同的就是，前者會(huì)在本地進(jìn)行保存，后者在web服務(wù)器上進(jìn)行存儲(chǔ)。在將網(wǎng)站關(guān)閉以后，即為結(jié)束了此次的會(huì)話，就會(huì)消失數(shù)據(jù)信息。

（四）新增畫(huà)布

canvas元素在HTML5中，屬于在繪制圖形中應(yīng)用的一種關(guān)鍵標(biāo)簽，其屬于矩形區(qū)域的畫(huà)布。但是canvas元素?zé)o繪圖能力，其實(shí)是繪制的工作，應(yīng)該是基于JavaScript腳本語(yǔ)言的輔助下，進(jìn)行繪制各種圖形、圖像以及形象等。例如，document.getElementById（“myCanvas”）表示通過(guò)采取id為“my? Canvas”，進(jìn)行尋找頁(yè)面中的canvas元素。

二、CSS3.0網(wǎng)頁(yè)設(shè)計(jì)中的新特性與優(yōu)勢(shì)分析

（一）邊框border

設(shè)計(jì)者制作網(wǎng)頁(yè)期間，在實(shí)施設(shè)計(jì)具體內(nèi)容的過(guò)程中，也應(yīng)該高度的重視邊框?qū)傩?，就可以防范?yè)面混亂的現(xiàn)象，比如內(nèi)容錯(cuò)位、偏移等。CSS3.0標(biāo)準(zhǔn)優(yōu)化定義了邊框和相應(yīng)的屬性，運(yùn)用CSS3.0技術(shù)，設(shè)計(jì)人員可以有效的加載有關(guān)邊框控件，按照實(shí)際情況對(duì)于參數(shù)針對(duì)性的設(shè)置。例如，邊框的顏色采取border-color表示，設(shè)計(jì)科學(xué)的參數(shù)，能夠達(dá)到漸變效果;邊框圖像，運(yùn)用border-image 進(jìn)行設(shè)置;圓角邊框，實(shí)施border-radius這一元素。所以，CSS3.0 標(biāo)準(zhǔn)下的border 控件，明顯的優(yōu)化并且提升了3D效果以及形狀、顏色等等方面。

（二）背景background

CSS3.0中背景屬性進(jìn)行擴(kuò)充，對(duì)于相關(guān)的瀏覽器，諸如IE、Chrome 等，支持的屬性就是background-size、background-origin。其中，第一種屬性可以通過(guò)像素或百分比模式，予以背景圖片尺寸進(jìn)行自定義，對(duì)此圖片多次的應(yīng)用。

（三）尺寸調(diào)整與顏色設(shè)置

CSS3.0標(biāo)準(zhǔn)中的元素尺寸調(diào)整，先展開(kāi)科學(xué)的設(shè)置resize 屬性，“none”屬于其默認(rèn)值，“both”是代表調(diào)整元素高度、寬度，高度、寬度分別采取“vertical”、“horizontal”表示。設(shè)置顏色中，CSS3.0技術(shù)對(duì)于采取紅綠藍(lán)顏色值對(duì)不同顏色定義，同時(shí)也實(shí)施HSL顏色值，設(shè)置色調(diào)、飽和度等參數(shù)，精細(xì)化的設(shè)計(jì)不同的顏色模塊。

（四）漸變功能

制作網(wǎng)頁(yè)期間，運(yùn)用line-gradient、radial-gradient、repeating-linear-gradient，設(shè)計(jì)線性漸變、徑向漸變、重復(fù)漸變等，均屬于CSS3.0技術(shù)中重要構(gòu)成。設(shè)置的參數(shù)具有明顯的不同，例如線性漸變中，方向取值包括了角度deg和關(guān)鍵字，顏色參數(shù)后面，應(yīng)該采取長(zhǎng)度單位，對(duì)于漸變色的始末部位進(jìn)行科學(xué)的定義，促使最終的網(wǎng)頁(yè)更加豐富多彩。

（五）動(dòng)畫(huà)animation

CSS3.0標(biāo)準(zhǔn)中，研發(fā)出animation 技術(shù)這種新型動(dòng)畫(huà)制作技術(shù)，其對(duì)于flash 中很多功能進(jìn)行延用，比如明確的規(guī)定了動(dòng)畫(huà)名稱(chēng)、速度曲線、周期時(shí)間等等，另外施展重要的3D 動(dòng)畫(huà)處理能力。此技術(shù)的應(yīng)用中，可以讓制作的3D動(dòng)畫(huà)更加逼真、生動(dòng)形象。

二、HTML5和CSS3.0在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用分析

頁(yè)面布局中，HTML5跟CSS3.0 技術(shù)的結(jié)合，產(chǎn)生更好的應(yīng)用成效，經(jīng)科學(xué)的處理頁(yè)面，讓其布局更鮮明、靈活，各種元素應(yīng)有盡有，齊全且豐富。其中，“標(biāo)簽”屬于設(shè)計(jì)頁(yè)面中的頁(yè)眉部分，“標(biāo)簽”跟Word文檔中的頁(yè)腳功能比較接近，其可以定義設(shè)置背景圖片、音視頻等等，邏輯性較強(qiáng)，同時(shí)具備良好的規(guī)范性、清晰性特點(diǎn)，有簡(jiǎn)單的代碼。為帶給移動(dòng)互聯(lián)網(wǎng)瀏覽器更好的界面，采取HTML5和CSS3.0，構(gòu)建起合理的響應(yīng)式頁(yè)面局部，基于不同終端設(shè)備中，獲取多樣體驗(yàn)。比如彈性盒模型的提出，是建立在CSS3.0 標(biāo)準(zhǔn)基礎(chǔ)上，屬于高質(zhì)量布局方式，可予以容器中的條目，科學(xué)的分配空間，讓布局更加靈活等。另外，采取HTML5以及CSS3.0 技術(shù)期間，經(jīng)JavaScript腳本語(yǔ)言，能夠達(dá)到科學(xué)的設(shè)計(jì)頁(yè)面跨瀏覽器的目標(biāo)。設(shè)計(jì)人員合理的修改應(yīng)用代碼，無(wú)需重新構(gòu)建網(wǎng)站。采取HTML5和CSS3.0技術(shù)的優(yōu)勢(shì)特性，同時(shí)在各種腳本語(yǔ)言（jsp、php、asp等）的支撐下，明顯提升網(wǎng)頁(yè)設(shè)計(jì)質(zhì)量。

結(jié)語(yǔ)：

HTML5和CSS3技術(shù)的升級(jí)，屬于計(jì)算機(jī)和互聯(lián)網(wǎng)技術(shù)向前發(fā)展的重要結(jié)果。二者新特性的融合，會(huì)促使更加健全完善網(wǎng)頁(yè)設(shè)計(jì)方法以及增加網(wǎng)頁(yè)性能和加載速度。兩項(xiàng)技術(shù)性能未來(lái)會(huì)更加完善，并且作為企業(yè)網(wǎng)絡(luò)搭建的主流技術(shù)，具有廣闊的發(fā)展空間。

參考文獻(xiàn)：

[1]許曉峰. HTML5和CSS3.0在網(wǎng)頁(yè)設(shè)計(jì)中的優(yōu)勢(shì)特性與應(yīng)用[J]. 電腦知識(shí)與技術(shù)，2020，16（13）：275-276.

[2]張麗. 以HTML 5+CSS3+jQuery為基礎(chǔ)的響應(yīng)式布局網(wǎng)頁(yè)設(shè)計(jì)探討[J]. 計(jì)算機(jī)產(chǎn)品與流通，2019，5（11）：195-198.

[3]李微. HTML5+CSS3在網(wǎng)頁(yè)設(shè)計(jì)中的特性及優(yōu)勢(shì)[J]. 信息與電腦（理論版），2018，9（22）：13-15.

[4]熊慧. HTML5和CSS3.0在網(wǎng)頁(yè)設(shè)計(jì)中的新特性分析探討[J]. 信息記錄材料，2018，19（06）：106-107.

[5]危華明，陳積常，汪小威. 基于HTML5+CSS3.0的響應(yīng)式網(wǎng)站前端設(shè)計(jì)與實(shí)現(xiàn)[J]. 福建電腦，2018，34（05）：15.

[6]張琳. 淺析HTML5+CSS3在網(wǎng)頁(yè)設(shè)計(jì)中的新特性及優(yōu)勢(shì)[J]. 西安文理學(xué)院學(xué)報(bào)（自然科學(xué)版），2017，20（06）：82-84.