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

作者/楊瑞梅,重慶應(yīng)用技術(shù)職業(yè)學(xué)院汽車與電子工程系

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

作者/楊瑞梅,重慶應(yīng)用技術(shù)職業(yè)學(xué)院汽車與電子工程系

在當今互聯(lián)網(wǎng)時代，桌面設(shè)備和移動設(shè)備種類繁多，設(shè)備類型的不同為網(wǎng)頁的無縫銜接展示帶來了新挑戰(zhàn)，為讓頁面設(shè)計更好的適應(yīng)網(wǎng)絡(luò)發(fā)展，本文對HTML5和CSS3.0的新特性進行了分析。從這兩種技術(shù)的特性出發(fā)分析了HTML5搭建網(wǎng)頁的新結(jié)構(gòu)、CSS3美化頁面的新特效，這些新特性大大提高了網(wǎng)頁性能和美觀性。

HTML5；CSS3.0；網(wǎng)頁設(shè)計；新特性

引言

隨著互聯(lián)網(wǎng)的快速發(fā)展，網(wǎng)頁展示技術(shù)日新月異，從之前的靜態(tài)頁面到動態(tài)變化，從表格排布到后來的DIV+CSS，直到目前主流的全屏布局，視差類布局，瀑布流布局等。為了設(shè)計更高效的頁面結(jié)構(gòu)和給用戶提供更好的界面展示體驗，設(shè)計者需要更強大的技術(shù)支撐，為此在之前技術(shù)的基礎(chǔ)上提出了更強大的HTML5和CSS3.0技術(shù)。為了將它們更快的應(yīng)用到網(wǎng)頁設(shè)計中，需要積極探索HTML5和CSS3.0的新特性。

1. HTML5新特性

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

2. 新標簽內(nèi)容

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

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

3. 對多媒體的支持

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

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

3.1 對視頻的支持

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

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

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

3.2 對音頻的支持

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

4. HTML5離線存儲

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

4.1 應(yīng)用程序緩存

HTML5借助應(yīng)用程序緩存可以對Web應(yīng)用進行緩存，具有可以在不聯(lián)網(wǎng)的情況下訪問該應(yīng)用、在已有緩存資源下加載應(yīng)用速度更快和減少服務(wù)器負載等優(yōu)點。

4.2 索引數(shù)據(jù)庫

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

4.3 本地存儲

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

4.4 文件接口

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

5. 圖形繪制Canvas

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

下面以畫矩形為例：創(chuàng)建canvas元素

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

6. CSS3.0 新特性

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

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

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

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

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

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

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

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

7. 結(jié)束語

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

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

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

＊ [3]李正, 張欣宇, 馮一帆. HTML5技術(shù)在移動互聯(lián)網(wǎng)中的應(yīng)用[J].信息通信技術(shù), 2014(5)：71—75.

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

＊ [5]陸鉆. 基于HTML5和CSS3網(wǎng)頁布局技術(shù)應(yīng)用[J]. 無線互聯(lián)科技, 2016(10)：128—129.