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

張州+李存永

摘要：HTML標記語言具備簡易、強大等特征，在互聯網的各個階段均發揮著不容忽視的重要作用。HTML標記語言的最初狀態僅是非常簡單的新聞列表，發展至今已經成為了復雜程度較高的在線表格應用，同時與CSS、Java等程序相結合，可通過簡易的標記語言設計并創造出各類實用的應用。

關鍵詞：HTML5；CSS3.0；網頁設計；新特性；優勢

現階段使用最為廣泛的是HTML4.0.1標準，但是其將近十年沒有做出過任何根本性的更新，再加上如今的網頁設計應用構建越來越復雜，HTML4.0.1顯然難以為繼。早在2004年，網頁超文本應用技術工作小組（WHATW）便提出了HTML5標準，經過多個瀏覽器陣營的反復磨合優化，目前各大瀏覽器制造商基本上實現了HTML5核心的目的，商業前景看好。

1 HTML5的新特性與優勢分析

HTML5的新特性與優勢集中體現在視頻、音頻、語義化標記、可編輯內容、畫布、數據存儲穩健、Form表單增強功能等方面。其在網頁設計當中的應用與表現，較之上一代的HTML4，支持功能更為強大而全面，具體如下：

1.1新型的多媒體方式

HTML5標準自帶有“video”以及“audio”兩種重要的標簽，通過上述的兩種標簽，HTML5在網頁設計的應用過程當中，不再需要采用特定的工具以及插件便可順利地實現視頻、音頻的直接播放。諸如Pandora、Youtube等全球性的著名網站視頻將會直接跨越Flash軟件，進而為用戶帶來截然不同的視頻以及音頻體驗，包括定時播放、定時關閉等具有高度人性化特性的應用功能，這均直接歸功于HTML5標準當中的視頻與音頻的標記。除此之外，通過preload還可實現視頻或是音頻的預加載，用戶需要做的僅僅是決定是否在頁面加載之時實行視頻或是音頻的預加載，操作非常簡便。

1.2應用程序接口豐富

HTML4.0.1標準帶有DOM接口，HTML5在其基礎上添加了更多的應用程序接口，這是其為構建越來越復雜的網頁設計提供強大而全面的支持功能的關鍵條件之一。HTML5的應用程序接口主要包括如下幾類：（1）網絡通訊應用程序接口。（2）2D圖形繪制應用程序接口。（3）用戶定位地理位置共享應用程序接口。（4）離線數據庫存儲應用程序接口。（5）基于Web應用后臺處理的應用程序接口。（6）文檔控制編輯應用程序接口。（7）瀏覽歷史紀錄管理應用程序接口等。

1.3新增畫布

HTML5帶有用以作畫的特定工具，即是“canvas”，這是上一代HTML4所不具備的優勢。canvas工具在網頁設計當中的圖像繪制操作均需要通過JavaScript加以實現。整體而言，新增畫布可視為特定的矩形區域，將canvas元素插入到網頁頁面當中的難度比較小，基本上等同于插入普通的屬性標記，隨后可直接實現游戲、圖表、形狀、動畫等內容的繪制，不必再通過Flash軟件或者是其余的插件工具便可實現網頁涂鴉，這是HTML5較之上一代HTML4的突出優勢之一。

1.4嶄新的語義屬性與標簽

（1）HTML5不再需要類型（type）屬性來實現鏈接以及腳本的撰寫，對其代碼進行深度的簡化。

（2）HTML5帶有表單驗證功能，這也是上一代HTML4所不具備的優勢，核心作用在于降低網頁設計人員與開發人員編寫表單驗證功能代碼的工作量，同時提高工作效率。

（3）HTML5的文檔類型（doctype）非常簡潔明了，不再需要任何的版本提示，所撰寫的全部文檔，不論類型如何，均可適用于一切版本的HTML。HTML5的語言標簽簡潔明了，容易記住，并且在寫法方面也比上一代的HTML4更加簡便，基于HTML5的全部空標簽，諸如input、img、br等均不再需要使用閉合標簽，新標簽不僅語義更加豐富，屬性也更加直白，有利于網頁設計doctype的編撰。

（4）HTML5將已經過時了的HTML標記全部取消，例如“center”“font”“align”“vspace”等，其在HTML5當中已經不再適用了，取而代之的將是CSS。HTML5同時將嶄新的屬性標簽提供給表單，例如“month”“email”“color”“datetime”“date”等，基于上述標簽，對網頁設計的開發復雜度實現最大程度的簡化處理，例如：采用date標簽，日期的選擇將不再需要采用外包的_js。

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

在網頁設計的過程當中采用層疊樣式表（CSS）可更加精確而有效地控制頁面的背景、字體、布局、顏色等內容。作為CSS技術的最新升級版本，CSS3.0的語言開發帶有模塊化的特征。以往的HTML4不具備模塊化的優勢，也不便于添加嶄新的小模塊，CSS3.0允許添加的新模塊比較多，主要包括文字特效模塊、語言模塊、列表模塊、背景邊框模塊等。

2.1 CSS3.O漸變（Gradient）

基于CSS3.0的Gradient可為網頁設計提供更加豐富的漸變效果，作為投影使用亦可。一般而言，我們可將基于CSS3.0的Gradient細分為兩種漸變形式，一種是徑向漸變（radial gradient），另一種是線性漸變（lineargradient）。例如：網頁設計當中的方盒投影設計，可在方盒的下方位置添加線性漸變的特殊效果，最終可收到絢麗、多變的網頁設計效果。

2.2 CSS3.O動畫（Animation）

作為CSS3.0的最新屬性，Animation的功能更為強大，在實現動畫方面的效果更為理想。上一代CSS2.0，網頁設計的動畫必須要通過Javascript2E以實現，但是如今的CSS3.0不僅可以實現圖形的轉換、變形、扭曲、移動、旋轉、縮放等，還可以實現更逼真而美觀的動畫效果，進而提高網頁設計的水平。

2.3 CSS3.0邊框（border）

以往所采用的CSS2.0，例如在制作圓角邊框之時，基本上都是先行將四個圓角的圖片制作，隨后再采用圖像背景技術進行二次處理與設置，不僅耗時耗力，并且美觀效果不理想。采用CSS3.0技術，邊框的制作變得更加簡單易行，美觀大方。CSS3.0技術新添加了大量邊框的屬性值，主要包括三大類，分別是.box→refl、dorderer→image、border→shadow，基于上述的嶄新邊框屬性值，可更好地實現各類邊框的顏色、陰影、半徑、圖形等的設計，賦予整個網頁的邊框或是按鈕更突出的立體感與線條感。

4 RGBA

RGBA指的是Red（紅色）、Green（綠色）、Blue（藍色）、Alpha色彩空間，CSS3.0具備RGBA命令特性，可對網頁設計當中的元素屬性加以指定，支持用戶自行更改重設各個元素的色彩與透明度，而不會對子元素的屬性造成任何的影響，很大程度上改善了以往的opacity指令的弊端，在網頁設計元素的透明度以及色彩方面的設計更改方面更加簡便易行。

3結語

總而言之，HTML5可稱得上是Web標準近十年來最為明顯的進步與創新，其主要特性與核心優勢在于創建了大量的新屬性與新元素，通過這些新屬性與新元素，在網頁設計的過程當中，可節約ID標識的開辟時間，在很短的時間之內便可創建出基本的網頁結構，Web從此進入到一個更為成熟而完善的開發應用平臺。此外，采用CSS3.0技術可對網頁進行更大范圍與更深層次的美化與調整，通過細微的修改，便可對整個網頁的布局與外觀實現改變，不需要用到過多的插件，絕大多數的圖片均被元素本身取而代之，可切實加快網頁的加載速度，進而提高網站的搜索引擎優化（SEO）權重，確保網頁應用程序的實際性能。