HTML5和CSS3.0在網(wǎng)頁(yè)設(shè)計(jì)中的優(yōu)勢(shì)特性與應(yīng)用

許曉峰

摘要：隨著電子技術(shù)等計(jì)算機(jī)信息技術(shù)發(fā)展速度的迅猛提高，人們?cè)絹?lái)越依賴互聯(lián)網(wǎng)，從各大網(wǎng)站中獲取有用信息成為眾多網(wǎng)民的日常。在不同類型顯示設(shè)備的應(yīng)用背景下，超文本標(biāo)記語(yǔ)言（HTML）與樣式層疊表（css）迎來(lái)了創(chuàng)新發(fā)展的新時(shí)期，經(jīng)過(guò)不斷的探索實(shí)踐，逐漸成熟的HTML5和CSS3.0使得網(wǎng)頁(yè)設(shè)計(jì)可以更好地滿足網(wǎng)民提出的網(wǎng)頁(yè)無(wú)縫銜接的新需求。基于此，該文簡(jiǎn)要闡述了HTML5和CSS3.0在網(wǎng)頁(yè)設(shè)計(jì)中的優(yōu)勢(shì)特性，并結(jié)合實(shí)際對(duì)兩者在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用進(jìn)行了探討，以供相關(guān)專業(yè)人士參考與借鑒。

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

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2020）13-0275-02

在互聯(lián)網(wǎng)發(fā)生翻天覆地的變化的新形勢(shì)下，網(wǎng)頁(yè)制作技術(shù)日新月異，實(shí)現(xiàn)了從靜態(tài)頁(yè)面到動(dòng)態(tài)頁(yè)面的轉(zhuǎn)變，由原來(lái)的表格布局發(fā)展為現(xiàn)在的DIV+CSS布局，除此之外，還有全屏布局、瀑布流布局以及滾動(dòng)視差布局等等。為了讓網(wǎng)頁(yè)設(shè)計(jì)帶給用戶更好的視覺(jué)、聽(tīng)覺(jué)感官體驗(yàn)，設(shè)計(jì)人員需要更強(qiáng)大的技術(shù)加以支持，比如HTML5和CSS3.0技術(shù)。其中，HTML5是超文本標(biāo)記語(yǔ)言的第五次重大修改，與以前的版本相比，CSS3.0在圖像背景、布局樣式、視覺(jué)元素等方面具有顯著的特點(diǎn)。在網(wǎng)頁(yè)設(shè)計(jì)中靈活應(yīng)用HTML5和CSS3.0，將制作出友好和諧的交互界面，以便更加符合用戶的使用習(xí)慣。

1HTML$在網(wǎng)頁(yè)設(shè)計(jì)中的優(yōu)勢(shì)特性

1.1新的語(yǔ)義標(biāo)簽與屬性

對(duì)網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)，HTML5標(biāo)準(zhǔn)賦予其更加現(xiàn)實(shí)的意義與結(jié)構(gòu)，尤其對(duì)語(yǔ)義進(jìn)行了統(tǒng)一規(guī)范處理，為Web靜態(tài)語(yǔ)言創(chuàng)建了新的標(biāo)簽和屬性，根本目的是使這些編程語(yǔ)言為網(wǎng)頁(yè)設(shè)計(jì)提供強(qiáng)有力的保障，而不是絆腳石。HTML5新增了

等新的語(yǔ)義化標(biāo)簽，并為一些標(biāo)簽新增了更加實(shí)用的屬性，比如和下的media屬性，、和下的autofocus屬性，另外還有autocomplete、min、max、multiple等新屙陛。這些標(biāo)簽不僅使得網(wǎng)頁(yè)設(shè)計(jì)更加高效，也提升了搜索引擎抓取網(wǎng)站內(nèi)容的效率與質(zhì)量。由于HTMIA中的內(nèi)容標(biāo)簽具有相同等級(jí)，在網(wǎng)頁(yè)設(shè)計(jì)時(shí)難以對(duì)頁(yè)面各部分進(jìn)行明確的區(qū)分。但是，在HTML5標(biāo)準(zhǔn)中，各部分的內(nèi)容標(biāo)簽彼此獨(dú)立并且具有不同的等級(jí)，便于搜索引擎、統(tǒng)計(jì)軟件對(duì)其進(jìn)行快速識(shí)別。當(dāng)然，關(guān)鍵一點(diǎn)還是HTML5只需要用<！DOCTYPE html>這一簡(jiǎn)潔的形式，為程序員使用type來(lái)聲明文檔解析標(biāo)準(zhǔn)減輕了工作負(fù)擔(dān)，并且該標(biāo)準(zhǔn)還有利于緩解新語(yǔ)義識(shí)別不出來(lái)的尷尬局面。

1.2豐富的應(yīng)用程序接口

在HTML4設(shè)置了單一DOM接口的基礎(chǔ)上，HTML5標(biāo)準(zhǔn)新增了網(wǎng)絡(luò)監(jiān)聽(tīng)接口、全屏接口、拖拽接口、地理接口、應(yīng)用緩存接口、離線存儲(chǔ)接口等等，為一些功能復(fù)雜多變的網(wǎng)頁(yè)設(shè)計(jì)工作提供了強(qiáng)大、全面的API。比如，HTML5中有window.Lo-calStorage和window.sessionStorage這兩種本地存儲(chǔ)屬性，其中，LocalStorage特性是對(duì)cookie存儲(chǔ)空間不足的有效解決。兩者的存儲(chǔ)對(duì)象都是客戶端臨時(shí)信息，但是前者將一直保存在本地，而后者這種會(huì)話信息將存儲(chǔ)在web服務(wù)器上。如果關(guān)閉了網(wǎng)站，那么意味著本次會(huì)話結(jié)束，相應(yīng)的數(shù)據(jù)也將消失。

1.3新增多媒體呈現(xiàn)方式

HTML5標(biāo)準(zhǔn)中通過(guò)視頻標(biāo)簽

1.4新增canvas畫布元素

HTML5中的canvas元素是一個(gè)用于繪制圖形的關(guān)鍵標(biāo)簽，可以將其簡(jiǎn)單理解為矩形區(qū)域的畫布。值得格外注意的是canvas元素不具備繪圖能力，需要在JavaScript腳本語(yǔ)言的幫助下來(lái)完成不同形狀、圖形圖像以及動(dòng)畫等繪制工作。譬如，document.getElementById（“myCanvas”）表示通過(guò)使用id為“my-Canvas”來(lái)尋找頁(yè)面中的canvas元素。

2 CSS3.0在網(wǎng)頁(yè)設(shè)計(jì)中的優(yōu)勢(shì)特性

2.1邊框border

設(shè)計(jì)者進(jìn)行網(wǎng)頁(yè)制作時(shí)，不能僅僅對(duì)具體內(nèi)容進(jìn)行設(shè)計(jì)，更需要注重邊框?qū)傩?，這樣才不至于因?yàn)閮?nèi)容錯(cuò)位或者偏移等問(wèn)題造成頁(yè)面混亂?？梢哉f(shuō)，CSS3.0標(biāo)準(zhǔn)對(duì)邊框及其屬性進(jìn)行了優(yōu)化定義，有效避免了采用CSS2.0技術(shù)而多次重復(fù)操作以便完成邊框設(shè)計(jì)。通過(guò)CSS3.0技術(shù)，設(shè)計(jì)者對(duì)有關(guān)邊框控件進(jìn)行加載，然后根據(jù)實(shí)際情況設(shè)置參數(shù)，比如border-color代表邊框顏色，通過(guò)合理的參數(shù)設(shè)計(jì)還可以實(shí)現(xiàn)漸變效果，border-image用來(lái)設(shè)置邊框圖像，border-radius可以為元素添加一個(gè)圓角邊框?？偟膩?lái)說(shuō)，CSS3.0標(biāo)準(zhǔn)下的border控件在大小、顏色、形狀、陰影以及3D效果等方面有所提升。

2.2背景background

CSS3.0新增了很多背景屬性，譬如支持IE、Firefox、Chrome等瀏覽器的background-size屬性和background-origin屬性，其中background-size屬性允許設(shè)計(jì)者通過(guò)像素或百分比的形式來(lái)自定義背景圖片的尺寸大小，以便重復(fù)使用該圖片。同時(shí)，background-image可以滿足設(shè)計(jì)者設(shè)置多重背景圖片的需求。

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

就CSS3.0標(biāo)準(zhǔn)中的元素尺寸調(diào)整來(lái)說(shuō)，首先需要對(duì)resize屬性進(jìn)行設(shè)置，該屬性的默認(rèn)值是“none”，“both”表示對(duì)元素的高度與寬度進(jìn)行調(diào)整，“horizontal”和“vertical”分別表示元素寬度與高度。在顏色設(shè)置方面，CSS3.0技術(shù)除了支持使用紅綠藍(lán)顏色值（RGB）來(lái)定義不同顏色之外，還可以利用HSL顏色值對(duì)色調(diào)、飽和度以及亮度進(jìn)行參數(shù)設(shè)置，從而實(shí)現(xiàn)多種顏色模塊下不同顏色的精細(xì)化設(shè)計(jì)。

2.4漸變功能

在網(wǎng)頁(yè)制作過(guò)程中，利用CSS3.0技術(shù)中的line-gradient、ra-dial-gradient與repeating-linear-gradient可以完成線性漸變、徑向漸變、重復(fù)漸變等設(shè)計(jì)。不同情況下，所需要設(shè)置的參數(shù)有所差異，比如，線性漸變中方向取值有角度deg與關(guān)鍵字，在顏色參數(shù)后面還可以設(shè)置長(zhǎng)度單位來(lái)定義漸變色的開(kāi)始位置與結(jié)束位置，如此一來(lái)，便能夠設(shè)計(jì)出絢麗多變的網(wǎng)頁(yè)。

2.5動(dòng)畫animation

為了避免受到Flash控件的影響，CSS3.0標(biāo)準(zhǔn)中開(kāi)發(fā)出來(lái)了一個(gè)新的動(dòng)畫制作技術(shù)，即animation技術(shù)。它不僅繼承了flash中的大部分功能，也就是對(duì)動(dòng)畫名稱、速度曲線、播放次數(shù)、周期時(shí)間等內(nèi)容進(jìn)行規(guī)定，還具有一定的3D動(dòng)畫處理能力。在anim～ion技術(shù)的支持下，設(shè)計(jì)者能夠制作出精度較高的3D動(dòng)畫，整個(gè)畫面也十分逼真。

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

在頁(yè)面布局中，HTML5結(jié)合CSS3.0技術(shù)為設(shè)計(jì)者帶來(lái)了新的啟發(fā)，通過(guò)對(duì)頁(yè)面進(jìn)行處理，使得整個(gè)布局更加靈活多變。其中標(biāo)簽是對(duì)頁(yè)面中的頁(yè)眉部分進(jìn)行設(shè)計(jì)，