張州+李存永

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

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

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

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

HTML5的新特性與優(yōu)勢集中體現(xiàn)在視頻、音頻、語義化標記、可編輯內(nèi)容、畫布、數(shù)據(jù)存儲穩(wěn)健、Form表單增強功能等方面。其在網(wǎng)頁設(shè)計當(dāng)中的應(yīng)用與表現(xiàn)，較之上一代的HTML4，支持功能更為強大而全面，具體如下：

1.1新型的多媒體方式

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

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

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

1.3新增畫布

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

1.4嶄新的語義屬性與標簽

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

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

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

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

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

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

2.1 CSS3.O漸變（Gradient）

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

2.2 CSS3.O動畫（Animation）

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

2.3 CSS3.0邊框（border）

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

4 RGBA

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

3結(jié)語

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