HTML5和CSS3.0在網頁設計中的新特性分析探討

熊 慧

（武漢交通職業學院電子與信息工程學院 湖北 武漢 430060）

1 引言

在前一階段，網頁行業普遍會遵循HTML4.0.1標準，因為這個標準制定的非常詳細，基本上涉及了網頁設計每個方面的細節，但是由于該標準在長時間內沒有做出更新，而現階段網頁包含的信息量越來越大，所以HTML4.0.1標準不但在許多場合不能適應最新網頁設計的要求，還會在制作時間非常緊急的情況下出現拖后腿情況。所以HTML5標準就被網頁制作領域寄予厚望，希望能夠給網絡發展帶來新的活力。

2 HTML5的新特性與優勢分析

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

2.1 新型的多媒體方式

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

2.2 應用程序接口豐富

HTML4.0.1標準帶有一個數據傳輸接口：DOM接口。這個接口傳輸數據快，同時還具有短暫的保存功能，是網頁制作不可或缺的技術之一。但是HTML5在DOM接口的基礎上添加了更多具有現代意義的應用程序接口。這些接口在網絡實時通訊、2D、3D圖形圖像設計、自動定位等方面具有非常強大的功能，用戶只需要打開這個網頁就可以使用這些功能，具有跨時代意義。

2.3 新增畫布

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

2.4 嶄新的語義屬性與標簽

HTML5 是Web公司自創始以來的最具有影響力的標準，該標準自從準備階段開始就備受人們關注。HTML5 標準將在語言語義設計方面進行統一化處理，為最新的網絡用語設計屬于他們自己屬性和標簽，其目的在于讓這些語言成為網頁設計的得力幫手而不是絆腳石。

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

3 GSS3.0的新特性與優勢分析

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

3.1 CSS3.O漸變（Gradient）

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

3.2 CSS3.O動畫（Animation）

GSS3.0已經擺脫了flash的控制，開發出屬于自己的動畫制作技術--Animation技術，該技術在動畫處理方面不僅擁有flash所有技術，還開發出自己獨有的3D動畫處理技術。由于我們文化欣賞水平的提高，3D動畫所占的市場越來越大，而能夠直接制作3D動畫的網頁少之又少，Animation技術的出現讓我們為之感嘆，它能夠很好的制作3D動畫，其制作的精度可以達到秒頻，設計出的動畫非常逼真。

3.3 CSS3.0邊框（border）

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

3.4 RGBA

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

4 結語

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

[1] 張州，李存永.HTML5和CSS3.0在網頁設計中的新特性和優勢探討[J].無線互聯科技，2015(8)：98-99.

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

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