論HTML5和CSS3在網(wǎng)頁布局中新特性和優(yōu)勢

江漢藝術(shù)職業(yè)學(xué)院教育學(xué)院計算機(jī)教研室　楊　柳

論HTML5和CSS3在網(wǎng)頁布局中新特性和優(yōu)勢

江漢藝術(shù)職業(yè)學(xué)院教育學(xué)院計算機(jī)教研室楊柳

隨著移動互聯(lián)網(wǎng)的興起和壯大，越來越多的用戶通過各種移動終端來訪問網(wǎng)站。如此一來，就給網(wǎng)頁開發(fā)人員提出了更高要求，使用傳統(tǒng)的HTML和CSS已經(jīng)不能滿足開發(fā)需求了。于是在原來的基礎(chǔ)之上，又新增了很多特性，比如HTTML5中的新標(biāo)簽和各種API，CSS3中的選擇器、盒模型、彈性布局、漸變、變換、動畫等。本文就有關(guān)HTML5和CSS3中與布局相關(guān)的一些新特性做一些闡述和探討，包括HTM5語義化標(biāo)簽、響應(yīng)式布局、CSS3盒模型，并通過案例說明這些新特性在實(shí)際開發(fā)中的應(yīng)用。

HTML5；CSS3；語義化標(biāo)簽；盒模型；彈性布局；響應(yīng)式

一、HTML5背景簡介

HTML5為超文本標(biāo)記語言（HTML）的第五次重大修改，2014年該標(biāo)準(zhǔn)規(guī)范終于制定完成。它將會取代1999年制定的HTML4.01、XHTML1.0標(biāo)準(zhǔn)，以期能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時候，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到符合當(dāng)代的網(wǎng)絡(luò)需求，為桌面和移動平臺帶來無縫銜接的豐富內(nèi)容，其設(shè)計目的是為了在移動設(shè)備上支持多媒體。接下來，W3C將致力于開發(fā)用于實(shí)時通信、電子支付、應(yīng)用開發(fā)等方面的標(biāo)準(zhǔn)規(guī)范，還會創(chuàng)建一系列的隱私、安全防護(hù)措施。

二、HTML5的部分新特性

1.HTML5的語義化標(biāo)簽

HTML5賦予網(wǎng)頁更好的意義和結(jié)構(gòu)，使用語義恰當(dāng)?shù)臉?biāo)簽使得頁面元素有含義，能夠讓人和搜索引擎都容易理解。在早期的網(wǎng)頁布局中，我們都是使用div來劃分結(jié)構(gòu)的，通過class來進(jìn)行區(qū)分，由于class不是通用的標(biāo)準(zhǔn)的規(guī)范，搜索引擎只能猜測你的某個div的內(nèi)容屬于哪一部分，導(dǎo)致整個HTML文檔結(jié)構(gòu)定義不清晰。

為了解決整個問題，HTML5專門添加了一些表示結(jié)構(gòu)的語義化標(biāo)簽。常見的有header、nav、section、article、aside、footer、hgroup。有了這些語義化標(biāo)簽之后，就可以使用它們來搭建頁面的結(jié)構(gòu)。

使用語義化標(biāo)簽搭建的頁面有如下幾大優(yōu)點(diǎn)：1）頁面更容易被搜索引擎收錄，有利于SEO。2）能更好的體現(xiàn)頁面的主題，在沒有CSS的情況下，頁面也能呈現(xiàn)出很好的內(nèi)容結(jié)構(gòu)。

3）可以在更多的設(shè)備上進(jìn)行解析，如屏幕閱讀器、移動設(shè)備。2.CSS3響應(yīng)式布局

隨著移動互聯(lián)網(wǎng)的發(fā)展，移動終端的尺寸逐漸出現(xiàn)較大差別，傳統(tǒng)的web頁面已經(jīng)不能滿足多種設(shè)備的瀏覽效果，針對同樣一個網(wǎng)站，我們需要在PC端、平板電腦以及手機(jī)端分別提供特定的內(nèi)容和功能，對于一些中小網(wǎng)站，這種做法將極大增加開發(fā)和維護(hù)成本。我們需要一種技術(shù)，使得我們只需要編寫一份代碼就可以適配不同的終端，隨著這種需求的日益增加，響應(yīng)式網(wǎng)頁布局應(yīng)運(yùn)而生。

（1）響應(yīng)式布局的概念

響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個概念，他在A List Apart發(fā)表了一篇開創(chuàng)性的文章，將三種已有的開發(fā)技巧（彈性網(wǎng)格布局、彈性圖片和媒體查詢）整合起來，并命名為響應(yīng)式網(wǎng)頁設(shè)計（RWD Responsive Web Design），意在實(shí)現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁的不同展示方式，通過響應(yīng)式設(shè)計能使網(wǎng)站在手機(jī)和平板電腦上有更好的瀏覽閱讀體驗(yàn)。

（2）響應(yīng)式的實(shí)現(xiàn)步驟

1）設(shè)置meta標(biāo)簽

大多數(shù)移動瀏覽器將html頁面放大為寬的視圖（viewport）以符合屏幕分辨率。我們可以使用視圖的meta標(biāo)簽來進(jìn)行重置。下面的視圖標(biāo)簽告訴瀏覽器，使用設(shè)備的寬度作為視圖寬度并禁止初始的縮放。在＜head＞標(biāo)簽里加入這個meta標(biāo)簽：＜meta name="viewport" content="width=device-width，initial-scale=1， maximum-scale=1， user-scalable=no"＞。

2）通過媒體查詢設(shè)置樣式

Media Queries是響應(yīng)式設(shè)計的核心。它根據(jù)條件告訴瀏覽器如何為指定視圖寬度渲染頁面，假如我們要設(shè)定兼容iPad和iphone 的視圖，那么可以這樣設(shè)置：

/** iPad **/

@media only screen and （min-width： 768px） and （max-width： 1024px） ｛...｝

/** iPhone **/

@media only screen and （min-width： 320px） and （max-width： 767px） ｛...｝

3）使用百分比實(shí)現(xiàn)響應(yīng)式內(nèi)容

媒體查詢固然強(qiáng)大，但也有其局限性。如果只是使用媒體查詢來適應(yīng)不同視口的固定寬度設(shè)計，只會從一組css規(guī)則突變到另一組，兩者之間沒有任何的平滑過渡。因此，我們需要將固定寬度布局轉(zhuǎn)換成靈活的百分比布局，這樣才能讓頁面元素根據(jù)視口大小在一個又一個媒體查詢之間靈活伸縮修正樣式。

3.CSS3盒模型

盒模型是CSS中一個非常重要的概念。它規(guī)定了元素處理元素內(nèi)容、內(nèi)邊距、邊框和外邊距的方式。

在CSS2的標(biāo)準(zhǔn)盒模型中，width和height指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會影響內(nèi)容區(qū)域的尺寸，但是會增加元素框的總尺寸。

在傳統(tǒng)的固定寬度布局中，盒模型能夠很好的完成各種布局。但是有了響應(yīng)式之后，我們需要使用百分比來取代固定寬度布局。

我們來看一個百分比的尷尬情況，假設(shè)有如下頁面結(jié)構(gòu)：

＜div class="content"＞

＜div class="left"＞left＜/div＞

＜div class="right"＞right＜/div＞

＜/div＞

我們設(shè)置樣式如下：

其效果如下：

如果我們給內(nèi)部的兩個div分別加上1px的像素，添加css如下：.left， .right ｛border：1px solid #000；｝，則會出現(xiàn)如下效果：

之所以會出現(xiàn)這種情況，原因很簡單，因?yàn)樵跇?biāo)準(zhǔn)盒模型中，增加內(nèi)邊距、邊框和外邊距不會影響內(nèi)容區(qū)域的尺寸，但是會增加元素框的總尺寸。左右兩個div寬度設(shè)置為50%，意味著其寬度為父元素寬度的50%，也就是500px，再加上1px的邊框，兩個div所占據(jù)的總尺寸就是均為502px，整體就是1004px，而父div寬度僅為1000px，所以class為right的div就掉下來了。

針對這種情況，CSS3提供了兩種盒模型，第一種是W3C標(biāo)準(zhǔn)盒模型，另一種則是IE盒模型。它們的相同之處是都提供了和width、height、padding、border和margin等盒子屬性，不同之處則是計算方式不一致，如下所示：

W3C標(biāo)準(zhǔn)盒模型元素所占空間 = width（height）+ padding + border + margin

W3C標(biāo)準(zhǔn)盒模型元素大小 = width（height） + padding + border

IE盒子模型元素所占空間 = width（height）+ margin

IE盒子模型元素大小 = width（height）

在CSS3中，可以使用box-sizing屬性來設(shè)置其解析模式。其語法如下：

其中，content-box表示遵循的是W3C標(biāo)準(zhǔn)盒模型，border-box表示遵循的IE盒模型。

針對百分比的尷尬情況，可以使用IE盒模型來解決，我們將內(nèi)部的兩個div設(shè)置為IE盒模型即可，添加CSS代碼如下：

再次瀏覽，效果如下：

在使用box-sizing的時候，需要注意其兼容性問題。IE家族只有IE8版本以上才支持，其它標(biāo)準(zhǔn)瀏覽器都能很好的支持box-sizing，但有些瀏覽器還是需要加上自己的前綴。Mozilla需要加上-moz-，Webkit內(nèi)核需要加上-webkit-，Presto內(nèi)核需要加上-o-，IE瀏覽器則需要加上-ms-。

［1］大漠.圖解CSS3：核心技術(shù)與案例實(shí)戰(zhàn)［M］.機(jī)械工業(yè)出版社，2014，7.

［2］弗雷恩著，王永強(qiáng)譯.響應(yīng)式Web設(shè)計：HTML5和CSS3實(shí)戰(zhàn)［M］.人民郵電出版社，2013，1.

［3］BenjaminLaGrone著，黃博文，饒勛榮譯.響應(yīng)式Web設(shè)計：HTML5和CSS3實(shí)踐指南［M］.機(jī)械工業(yè)出版社，2014，8.

［4］Peter Lubbers，Brian Albers，F(xiàn)rank Salim.HTML5程序設(shè)計（第2版）［M］.人民郵電出版社，2012，5.