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

作者/楊瑞梅,重慶應用技術職業學院汽車與電子工程系

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

作者/楊瑞梅,重慶應用技術職業學院汽車與電子工程系

在當今互聯網時代，桌面設備和移動設備種類繁多，設備類型的不同為網頁的無縫銜接展示帶來了新挑戰，為讓頁面設計更好的適應網絡發展，本文對HTML5和CSS3.0的新特性進行了分析。從這兩種技術的特性出發分析了HTML5搭建網頁的新結構、CSS3美化頁面的新特效，這些新特性大大提高了網頁性能和美觀性。

HTML5；CSS3.0；網頁設計；新特性

引言

隨著互聯網的快速發展，網頁展示技術日新月異，從之前的靜態頁面到動態變化，從表格排布到后來的DIV+CSS，直到目前主流的全屏布局，視差類布局，瀑布流布局等。為了設計更高效的頁面結構和給用戶提供更好的界面展示體驗，設計者需要更強大的技術支撐，為此在之前技術的基礎上提出了更強大的HTML5和CSS3.0技術。為了將它們更快的應用到網頁設計中，需要積極探索HTML5和CSS3.0的新特性。

1. HTML5新特性

HTML5是萬維網下的超文本標記語言的第五次修改，其標準規范是由WHATWG組織和W3C共同制定。HTML5設計的目的是在當今互聯網快速發展的同時，取代HTML4.01和XHTML1.0標準，使網頁規范能夠達到現代網絡需求，為桌面設備和移動設備提供無縫銜接的展示內容。HTML5作為新一代的Web前端開發標準，主要新特性體現在以下幾個方面。

2. 新標簽內容

HTML5增添了許多新的內容標簽，這些標簽通常具有一定的語義，比如＜command＞、＜article＞等，這些標簽賦予了網頁全新的含義和結構，并且使頁面設計和搜索引擎爬取網頁信息更有效。

從下圖可以看出，由于HTML4的內容標簽的等級相同，在網頁設計中對各部分內容很難進行區分。但是在HTML5中各個部分的內容標簽相互獨立，且級別不同，因此搜索引擎和統計軟件等快速方便的識別出各部分內容。

3. 對多媒體的支持

對多媒體的支持是HTML5的一個非常優異的特性，它能直接支持視頻、音頻的播放，省去了安裝Flash等第三方網頁插件的中間配置，網頁運行速度更快，提高用戶體驗。

在視頻方面，HTML5支持Ogg Theora,Web M和MPEG—4格式，在音頻方面，HTML5則支持AAC,MP3和Ogg Vorbis三種格式。

3.1 對視頻的支持

Video標簽可同時包含多個source元素，這些source元素鏈接到多個視頻文件，瀏覽器可以直接過濾無效文件直至找到第一個有效文件進行播放。對于不支持Video標簽的瀏覽器而言，可以在＜video＞與＜/video＞標簽之間插入內容顯示，比如放入一段文本或者圖片替換。

HTML5可以直接使用＜video＞ 標簽播放視頻，下面案例使用了多個屬性分別指定了播放器的寬度、高度和當瀏覽器不支持Video標簽時的一個預留錯誤信息。

其中width屬性表示播放器的寬度，height屬性表示高度，src屬性表示播放文件名稱，可以指定多個文件，control屬性用來調整是否顯示播放控制欄，比如播放按鈕。

3.2 對音頻的支持

音頻標簽＜audio＞的使用和視頻非常類似：使用source同樣指定指定多個音頻文件，瀏覽器可以過濾無效音頻文件直至找到第一個有效文件進行播放。當瀏覽器不支持audio標簽時提供顯示備用錯誤信息。

4. HTML5離線存儲

為了方便Web應用的離線使用，HTML5提供網頁存儲接口。HTML5離線存儲相對于傳統的cookie具有高效率、高安全性、更大離線空間等特點。HTML5離線存儲分別包括應用程序緩存、索引數據庫、本地存儲、文件接口。

4.1 應用程序緩存

HTML5借助應用程序緩存可以對Web應用進行緩存，具有可以在不聯網的情況下訪問該應用、在已有緩存資源下加載應用速度更快和減少服務器負載等優點。

4.2 索引數據庫

索引數據庫允許用戶在瀏覽器中保存大量數據，這使得任何需要發送大量數據的應用都能離線存儲數據，加快應用加載速度。同時。索引數據庫也提供了基于數據庫索引的搜索接口功能來方便獲取用戶所需數據。

4.3 本地存儲

相對于Cookies、Flash等文件緩存，HTML5則統一規定了了每個網站5MB的本地存儲，保證了本地存儲的空間可使用量。在HTML5中，本地存儲包含window. localStorage和window.sessionStorage，前者用于保存到本地，后者則是伴隨著Session，窗口關閉則存儲消失。

4.4 文件接口

之前在操作本地文件通常使用Flash、Silverlight或者第三方插件，但是使用插件往往對實現跨平臺、跨瀏覽器、跨設備等情況的統一表現造成阻礙，形成了Web應用對第三方插件的依賴困擾。為解決該問題， HTML5標準中統一提供了操作文件的接口使一切標準化，獨立化。通過這些接口，Web應用可以通過JavaScript來控制文件讀取、寫入等。

5. 圖形繪制Canvas

HTML5的canvas標簽是一個矩形區域，可以使用JavaScript控制矩形中每一個像素來繪制圖像，包括路徑、矩形、橢圓、圓形、字符等。

下面以畫矩形為例：創建canvas元素

canvas元素本身是沒有繪圖能力的。繪制工作必須在JavaScript內部完成：

6. CSS3.0 新特性

CSS是指層疊樣式表（Cascading StyleSheet）。在網頁設計過程中使用CSS可以對頁面布局、背景、字體大小、顏色等效果進行展示控制。CSS3.0是CSS的升級版本，它通過提供更加豐富的特性，不僅將之前復雜笨重的內容按模塊化設計劃分為各種特定功能的小模塊，而且增加了新的功能模塊，方便了頁面的管理和維護，提高了工作人員的開發效率。

(1)邊框的改進。CSS3.0相對于CSS對頁面設計中邊框進行了改進，主要包括多層邊框、圓角邊框、邊框的圖片和色彩等。例如在之前的CSS方塊對象的四角都是九十度，CSS3.0則提供了圓角效果；多層邊框則是在一個邊框外存在多個外層邊框，并且能指定邊框的顏色等。CSS3.0通過border—color屬性設置邊框顏色，并提供更大的靈活性，可以產生漸變效果；border—image屬性設置邊框圖象；border—corner—image屬性設置邊角的圖象； border—radius屬性則能控制圓角矩形的效果。

(2)網站的多列。多列是CSS3.0比較常用的一個功能，通過創建網站的多列，減少了為每列定制相關的層或段落，同時也可以設置多列的高度和寬度。CSS3.0通過column—width屬性指定每列寬度；column—count屬性設定指定列數；column—gap屬性指定每列之間的間距。

(3)網頁背景。CSS3.0可以設置網頁的背景來實現頁面的美化，其中借助background—origin來決定背景在頁面的初始位置，background—size指定背景圖片的大小，以像素或百分比顯示，multiple backgrounds設置多重背景圖象，可以把不同背景圖象放到一個塊元素里。

(4)字體特性。傳統HTML只能支持少量字體，不能自定義字體，但是在CSS3.0通過@font—face屬性可以加載內嵌字體樣式，還可以加載服務器的字體文件，讓客戶端顯示沒有安裝的字體，實現頁面字體的個性化。

(5)模塊尺寸調整。在CSS3.0中首先設置resize的horizontal、vertical，both等屬性，并加上max—width或min—width防止破壞布局，在代碼運行時，模塊元素的右下角會出現一個三角形提示用戶可以通過拉動它來調整這個元素的大小。

(6)顏色設置。CSS3.0除了支持RGB顏色，還支持HSL（色相、飽和度、亮度）。這使得網頁設計人員在不熟悉不同顏色模型的情況下也能實現更好的顏色設計。

(7)漸變透明。借助CSS3.0可以方便的實現顏色漸變和顏色透明，例如最常見的線性漸變和徑向漸變，這個特征大大提供網頁的美觀度。

7. 結束語

通過上面分析可知，HTML5并不僅僅是一種標記性語言，而是為網頁前端技術提供了全新的平臺，包括新定義標簽、多媒體支持、離線存儲、設備訪問接口等，并使這些功能開放化和標準化；CSS3.0能在不借助第三方插件的情況下對頁面進行更深層次的美化，可以有效的對網頁字體、布局、背景等實現更精確的控制。隨著HTML5和CSS3.0的快速傳播和性能提高，它們將會成為未來的主流頁面設計技術。

＊ [1]張玉清, 賈巖, 雷柯楠,等. HTML5新特性安全研究綜述[J].計算機研究與發展, 2016, 53(10)：2163—2172.

＊ [2]閔棟, 魏凱, 文婷. 移動智能終端HTML5技術與標準研究[J].中興通訊技術, 2013, 19(6)：24—27.

＊ [3]李正, 張欣宇, 馮一帆. HTML5技術在移動互聯網中的應用[J].信息通信技術, 2014(5)：71—75.

＊ [4]孔志文. HTML5與CSS3技術在網頁制作中的應用及發展前景[J]. 課程教育研究, 2015(9)：216—217.

＊ [5]陸鉆. 基于HTML5和CSS3網頁布局技術應用[J]. 無線互聯科技, 2016(10)：128—129.