HTML5和CSS3.0在網(wǎng)頁設(shè)計中的新特性分析探討

熊 慧

（武漢交通職業(yè)學(xué)院電子與信息工程學(xué)院 湖北 武漢 430060）

1 引言

在前一階段，網(wǎng)頁行業(yè)普遍會遵循HTML4.0.1標(biāo)準(zhǔn)，因?yàn)檫@個標(biāo)準(zhǔn)制定的非常詳細(xì)，基本上涉及了網(wǎng)頁設(shè)計每個方面的細(xì)節(jié)，但是由于該標(biāo)準(zhǔn)在長時間內(nèi)沒有做出更新，而現(xiàn)階段網(wǎng)頁包含的信息量越來越大，所以HTML4.0.1標(biāo)準(zhǔn)不但在許多場合不能適應(yīng)最新網(wǎng)頁設(shè)計的要求，還會在制作時間非常緊急的情況下出現(xiàn)拖后腿情況。所以HTML5標(biāo)準(zhǔn)就被網(wǎng)頁制作領(lǐng)域寄予厚望，希望能夠給網(wǎng)絡(luò)發(fā)展帶來新的活力。

2 HTML5的新特性與優(yōu)勢分析

HTML5在設(shè)計方面新生了許多HTML4.0.1所不具備的技術(shù)。它在視頻、音頻和圖片的處理上面更加方便快捷。同時在網(wǎng)頁的糾錯和修改bug方面也具有得天獨(dú)厚的優(yōu)勢。

2.1 新型的多媒體方式

由于HTML5標(biāo)準(zhǔn)中自帶視頻設(shè)計和音頻設(shè)計，這兩個是網(wǎng)頁設(shè)計中非常重要的兩個部分，所以我們設(shè)計者在設(shè)計網(wǎng)頁的時候可以直接跳過視頻編輯軟件和音頻標(biāo)記軟件。設(shè)計者只需要把網(wǎng)頁制作所需要的素材準(zhǔn)備好，就可以在該標(biāo)準(zhǔn)中直接進(jìn)行對視頻和音頻進(jìn)行修改，而不必再用Flash等視頻制作工具。同時在用戶進(jìn)行播放的過程中，由于視頻和音頻這兩個大文件已經(jīng)進(jìn)行了預(yù)標(biāo)記，所以不會出現(xiàn)卡頓現(xiàn)象，對于用戶來說是質(zhì)的飛躍和改變。

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

HTML4.0.1標(biāo)準(zhǔn)帶有一個數(shù)據(jù)傳輸接口：DOM接口。這個接口傳輸數(shù)據(jù)快，同時還具有短暫的保存功能，是網(wǎng)頁制作不可或缺的技術(shù)之一。但是HTML5在DOM接口的基礎(chǔ)上添加了更多具有現(xiàn)代意義的應(yīng)用程序接口。這些接口在網(wǎng)絡(luò)實(shí)時通訊、2D、3D圖形圖像設(shè)計、自動定位等方面具有非常強(qiáng)大的功能，用戶只需要打開這個網(wǎng)頁就可以使用這些功能，具有跨時代意義。

2.3 新增畫布

HTML5帶有網(wǎng)頁作畫的特定框架，這個框架和office帶有的模板是一樣的概念。網(wǎng)頁制作者在制作網(wǎng)頁的時候不必再為格式和模板困擾，只需要在HTML5標(biāo)準(zhǔn)總找出一個自己喜歡的框架，然后將自己準(zhǔn)備的素材填充到框架內(nèi)即可。這種框架也分為許多類別，比如游戲框架、動畫框架、代碼框架等。制作者只需點(diǎn)擊新增畫布就可以對這些框架進(jìn)行詳細(xì)的更改，這是HTML5最偉大的改進(jìn)。

2.4 嶄新的語義屬性與標(biāo)簽

HTML5 是Web公司自創(chuàng)始以來的最具有影響力的標(biāo)準(zhǔn)，該標(biāo)準(zhǔn)自從準(zhǔn)備階段開始就備受人們關(guān)注。HTML5 標(biāo)準(zhǔn)將在語言語義設(shè)計方面進(jìn)行統(tǒng)一化處理，為最新的網(wǎng)絡(luò)用語設(shè)計屬于他們自己屬性和標(biāo)簽，其目的在于讓這些語言成為網(wǎng)頁設(shè)計的得力幫手而不是絆腳石。

正是由于HTML5致力于網(wǎng)絡(luò)語義的修訂和標(biāo)簽化，才使得該標(biāo)準(zhǔn)成為當(dāng)今世界上最具有競爭力的網(wǎng)頁實(shí)際標(biāo)準(zhǔn)之一。當(dāng)我們采用該標(biāo)準(zhǔn)進(jìn)行網(wǎng)頁設(shè)計的時候，我們不再需要借助type來進(jìn)行文字的編輯，同時該標(biāo)準(zhǔn)也解決了嶄新語義識別不出來的尷尬境地。因?yàn)樗鼘λ袓湫碌恼Z義進(jìn)行劃分，為他們建立了一個小隔間，并對這個隔間進(jìn)行定義與命名，所以我在設(shè)計的時候就能夠通過其屬性很快的將其調(diào)用出來，更重要的一點(diǎn)是HTML5的語法是向后兼容的，這樣的兼容模式可以智能的分析后面文字的含義，來判斷自己所處的位置是否合理，是語義向前兼容模式的升級版，這樣就可以提高我們的設(shè)計效率。

3 GSS3.0的新特性與優(yōu)勢分析

網(wǎng)頁設(shè)計中除了HTML5標(biāo)準(zhǔn)之外，還有一項(xiàng)應(yīng)用的比較多的要數(shù)GSS3.0標(biāo)準(zhǔn)了，這個標(biāo)準(zhǔn)和HTML5一樣都是當(dāng)前互聯(lián)網(wǎng)最前衛(wèi)的兩個標(biāo)準(zhǔn)。GSS3.0名字的由來就是其在網(wǎng)頁設(shè)計當(dāng)中采用了層疊樣式表（CSS），設(shè)計者通過對該表格參數(shù)的更改就可以控制整個網(wǎng)頁的背景，布局方式等。同時GSS3.0標(biāo)準(zhǔn)將自己的模塊進(jìn)行更加詳細(xì)的劃分，如：藝術(shù)字模塊，圖像疊加模塊，語言處理模塊，同時其可視化模塊設(shè)計也為設(shè)計者提供了巨大的便利。

3.1 CSS3.O漸變（Gradient）

現(xiàn)在不管是公司、學(xué)校還是家庭，便攜式投影儀的使用越來越多，但是根據(jù)當(dāng)前標(biāo)準(zhǔn)所做的網(wǎng)頁如果作用于投影，網(wǎng)頁的保真度就會遭到損害，而GSS3.0標(biāo)準(zhǔn)中Gradient技術(shù)可以為網(wǎng)頁提供許多豐富的漸變模式，同時也為網(wǎng)頁設(shè)置了兩種漸變方向--縱向漸變和橫向漸變，這兩種模式都可以作為投影使用，能夠很好的適應(yīng)便攜式投影儀的要求。

3.2 CSS3.O動畫（Animation）

GSS3.0已經(jīng)擺脫了flash的控制，開發(fā)出屬于自己的動畫制作技術(shù)--Animation技術(shù)，該技術(shù)在動畫處理方面不僅擁有flash所有技術(shù)，還開發(fā)出自己獨(dú)有的3D動畫處理技術(shù)。由于我們文化欣賞水平的提高，3D動畫所占的市場越來越大，而能夠直接制作3D動畫的網(wǎng)頁少之又少，Animation技術(shù)的出現(xiàn)讓我們?yōu)橹袊@，它能夠很好的制作3D動畫，其制作的精度可以達(dá)到秒頻，設(shè)計出的動畫非常逼真。

3.3 CSS3.0邊框（border）

網(wǎng)頁設(shè)計只對內(nèi)容進(jìn)行設(shè)計是遠(yuǎn)遠(yuǎn)不夠的，如果不改變邊框的屬性，內(nèi)容往往會出現(xiàn)錯位和偏移現(xiàn)象，導(dǎo)致整個網(wǎng)頁出現(xiàn)混亂。CSS3.0標(biāo)準(zhǔn)在邊框設(shè)計方面也做出了很大的改進(jìn)，以往邊框設(shè)計所采用的CSS2.0技術(shù)，需要兩次操作才能將邊框制作完成。采用CSS3.0技術(shù)，設(shè)計者只需要將邊框控件進(jìn)行加載，然后再將這個控件進(jìn)行參數(shù)設(shè)計，這些參數(shù)映射的范圍十分強(qiáng)大，包括邊框的形狀、大小、顏色，還能夠設(shè)計邊框的陰影和3D效果，能夠快速制作出精美的邊框。

3.4 RGBA

RGBA是依據(jù)三基色算法所開發(fā)出的一項(xiàng)顏色設(shè)計。該技術(shù)不僅有特定的模板可以供設(shè)計者選擇，還可以讓設(shè)計者根據(jù)自己的想法自行設(shè)置網(wǎng)頁上每個圖片和動畫的色彩與透明度，同時能夠保證文字、邊框等基礎(chǔ)子元素的色彩屬性不會改變。由于該技術(shù)的強(qiáng)大功能，使其在網(wǎng)頁設(shè)計元素的透明度以及色彩方面站穩(wěn)了腳跟。

4 結(jié)語

總的來說，HTML5是Web網(wǎng)頁設(shè)計標(biāo)準(zhǔn)自創(chuàng)始以來最重要，應(yīng)用最廣泛的一項(xiàng)標(biāo)準(zhǔn)，通過彌補(bǔ)以前標(biāo)準(zhǔn)的漏洞，創(chuàng)建大量實(shí)用的新型元素和控件使網(wǎng)頁設(shè)計更加標(biāo)準(zhǔn)化、簡單化。這些新型控件節(jié)約了大量的儲存空間，讓網(wǎng)頁在傳輸和瀏覽上面得到了質(zhì)的提升，Web從此進(jìn)入到一個更為成熟而完善的開發(fā)應(yīng)用平臺。此外，CSS3.0標(biāo)準(zhǔn)的誕生在網(wǎng)頁頁面布局和基礎(chǔ)設(shè)置方面進(jìn)行了更深層次的優(yōu)化，只需一個控件就能夠解決網(wǎng)頁頁面的設(shè)計問題，同時該技術(shù)在圖片和3D動畫技術(shù)方面也取得了長足的進(jìn)步，大大提高了用戶對瀏覽網(wǎng)頁的興趣，確保網(wǎng)頁內(nèi)容安全可靠。

[1] 張州，李存永.HTML5和CSS3.0在網(wǎng)頁設(shè)計中的新特性和優(yōu)勢探討[J].無線互聯(lián)科技，2015(8)：98-99.

[2] 高春燕.HTML5和CSS3.0在網(wǎng)頁設(shè)計中的新特性和優(yōu)勢[J].旅游縱覽月刊，2014(5)：22-25.

[3] 劉薇，龔海華.HTML5&CSS3在網(wǎng)頁設(shè)計中的優(yōu)勢[J].金田：勵志，2012(12)：65-68.