基于HTML5和CSS3網(wǎng)頁布局技術(shù)應(yīng)用

陸 鉆

（南通理工學(xué)院 軟件工程系，江蘇 南通 226000）

?

基于HTML5和CSS3網(wǎng)頁布局技術(shù)應(yīng)用

陸 鉆

（南通理工學(xué)院 軟件工程系，江蘇 南通 226000）

摘 要：隨著互聯(lián)網(wǎng)產(chǎn)業(yè)的高速發(fā)展，HTML超文本標(biāo)記語言作為構(gòu)建web世界的基礎(chǔ)語言，也經(jīng)歷了數(shù)次發(fā)展。從1995年的HTML2.0到當(dāng)前最炙手可熱的HTML5，從1996年的CSS1.0到最近的CSS3.0，HTML5和CSS3兩種技術(shù)的融合正引領(lǐng)著web前端開發(fā)的革命。本文主要探討了HTML5和CSS3技術(shù)的新特性、優(yōu)勢(shì)，以及通過實(shí)例說明它們?cè)诰W(wǎng)頁布局中的應(yīng)用。

關(guān)鍵詞：HTML5；CSS3.0；網(wǎng)頁布局

隨著web2.0標(biāo)準(zhǔn)的普及，表格布局和框架布局的方式已然被摒棄。web2.0標(biāo)準(zhǔn)將網(wǎng)頁分為結(jié)構(gòu)、表現(xiàn)、行為3部分，即使用HTML創(chuàng)建基本的網(wǎng)頁結(jié)構(gòu)和內(nèi)容，使用CSS控制它們的外觀即表現(xiàn)樣式，使用JavaScript添加交互功能控制網(wǎng)頁的行為。經(jīng)過數(shù)十年的發(fā)展，HTML和CSS目前的最新版本為HTML5和CSS3，相較于之前的版本，HTML5和CSS3不論在功能還是人機(jī)交互方面，都有著突出的表現(xiàn)和優(yōu)勢(shì)，一躍成為如今WEB前端開發(fā)技術(shù)的新秀。

1　HTML5和CSS3的新特性和優(yōu)勢(shì)

1.1 HTML5和CSS3的新特性

HTML5是WHATWG工作組繼HTML4.01和XHTML2.0之后開發(fā)的后續(xù)版本。和上一代HTML4相比，HTML5集中體現(xiàn)了結(jié)構(gòu)標(biāo)簽語義化、視頻、音頻、畫布、離線存儲(chǔ)、新增表單界面控件功能等方面的優(yōu)勢(shì)。目前國(guó)內(nèi)外很多大型的門戶網(wǎng)站都使用HTML5和CSS3網(wǎng)頁制作技術(shù)對(duì)所屬網(wǎng)站進(jìn)行結(jié)構(gòu)和內(nèi)容上的調(diào)整、布局和優(yōu)化。毋庸置疑，在未來的5～10年內(nèi)，HTML5將成為移動(dòng)互聯(lián)網(wǎng)領(lǐng)域的領(lǐng)導(dǎo)者。

CSS3作為層疊樣式表的最新升級(jí)版，新增了諸多選擇器及顏色透明度、陰影、漸變、圓角、自定義字體、彈性盒布局、多列布局等方面的特性，可以方便快捷地實(shí)現(xiàn)精美的頁面表現(xiàn)效果。

1.2 HTML5+CSS3架構(gòu)優(yōu)勢(shì)

目前普遍使用的DIV+CSS布局模式，是使用DIV標(biāo)簽將頁面分割成各個(gè)區(qū)塊，再由CSS完成對(duì)區(qū)塊布局、大小及顏色等方面的修飾。網(wǎng)頁頭部、導(dǎo)航條、正文內(nèi)容、側(cè)邊欄以及版權(quán)聲明等模塊，都是通過id屬性對(duì)DIV的不同命名來區(qū)分。因?yàn)镈IV標(biāo)簽本身除了具有容器性質(zhì)外毫無語義，搜索引擎在抓取網(wǎng)頁內(nèi)容的時(shí)候，并不能知悉各個(gè)模塊的作用。圖1為常見DIV+CSS布局示意圖。

針對(duì)DIV+CSS網(wǎng)頁布局結(jié)構(gòu)不清晰的問題，HTML5新增了一些結(jié)構(gòu)標(biāo)簽，對(duì)常用id命名的DIV標(biāo)簽進(jìn)行了語義化。以獨(dú)立的標(biāo)簽在HTML5中出現(xiàn)，使得HTML文檔結(jié)構(gòu)的定義更為明確，便于搜索引擎快速識(shí)別網(wǎng)頁內(nèi)容，可閱讀性更強(qiáng)。圖2為對(duì)應(yīng)HTML5+CSS3布局示意圖。

網(wǎng)頁布局中涉及的原理是盒子模型，使用DIV+ CSS2布局時(shí)，盒子在頁面上顯示的位置依賴于浮動(dòng)屬性float和定位屬性position，而CSS3增加了彈性盒模型的概念，使得元素在盒子中的分布方式和空間位置更加靈活。

圖1　DIV+CSS布局示意圖

圖2　HTML5+　CSS3布局示意圖

2　HTML5新結(jié)構(gòu)標(biāo)簽介紹

HTML5結(jié)構(gòu)化標(biāo)簽的使用應(yīng)遵循它特定的意義，這就要求在適當(dāng)?shù)奈恢糜眠m當(dāng)?shù)臉?biāo)簽，以更好地展現(xiàn)它的結(jié)構(gòu)。

下面對(duì)常用的HTML5新增結(jié)構(gòu)標(biāo)簽及其適用場(chǎng)合做簡(jiǎn)單介紹：

（1）header標(biāo)簽。

用于定義文檔的頁眉即頭部信息，其中可以簡(jiǎn)單地包含標(biāo)題和文本，也可以包含Logo、背景和菜單等。

（2）nav標(biāo)簽。

用于定義導(dǎo)航鏈接部分，其中的導(dǎo)航內(nèi)容可以鏈接到其他頁面或當(dāng)前頁面的其他部分。

（3）article標(biāo)簽。

用于定義頁面或文檔中獨(dú)立、完整的內(nèi)容，如文章內(nèi)容、論壇帖子及用戶評(píng)論等，一個(gè)網(wǎng)頁中可以有一個(gè)或多個(gè)該標(biāo)簽。

（4）section標(biāo)簽。

用于定義一段有專題性的內(nèi)容，如文檔中的章節(jié)。

（5）aside標(biāo)簽：

用于定義網(wǎng)頁的非正文內(nèi)容，如側(cè)邊欄、說明、引用等。

（6）footer標(biāo)簽：

用于定義文檔的頁腳或頁面的頁腳。作為文檔頁腳時(shí)，一般包含作者姓名、聯(lián)系信息和文檔創(chuàng)建日期等內(nèi)容；作為頁面頁腳時(shí)，一般包含版權(quán)聲明、相關(guān)鏈接等部分。

3　HTML　5+CSS3布局實(shí)例

以圖3所示的W3school網(wǎng)站首頁的布局為例，介紹HTML5新結(jié)構(gòu)標(biāo)簽和CSS3彈性盒布局技術(shù)的結(jié)合運(yùn)用。

圖3　W3school網(wǎng)站首頁

（1）劃分頁面板塊

這是一個(gè)典型的“國(guó)”字形布局，頁面整體分為頭部、導(dǎo)航、左側(cè)邊欄、主體內(nèi)容、右側(cè)邊欄、版權(quán)聲明6個(gè)部分。使用HTML5結(jié)構(gòu)標(biāo)簽分別對(duì)上述部分進(jìn)行定義，結(jié)構(gòu)代碼如下：

（2）使用CSS3進(jìn)行板塊布局。

頁面各板塊的布局效果如圖4所示。導(dǎo)入外部樣式表文件，在樣式表文件中，對(duì)頁面各板塊的位置、大小、顏色等做相應(yīng)設(shè)置。

樣式代碼如下：

（3）對(duì)各個(gè)頁面板塊添加內(nèi)容。

圖4　W3school網(wǎng)站首頁布局圖

4　結(jié)語

目前HTML5+ CSS3網(wǎng)頁制作技術(shù)正處于快速發(fā)展階段，使用HTML5結(jié)構(gòu)標(biāo)簽可以在短時(shí)間內(nèi)搭建語義明確的網(wǎng)頁結(jié)構(gòu)，使用CSS3可以更有效地控制網(wǎng)頁的外觀和布局，增強(qiáng)頁面美化效果。但是任何一種新技術(shù)的推廣，都需要一段適應(yīng)的過程。HTML5和CSS3的發(fā)展和普及過程中，遇到的最大阻礙就是瀏覽器的兼容問題。由于不同瀏覽器使用的內(nèi)核不一樣，對(duì)web標(biāo)準(zhǔn)的兼容程度不一樣，同樣的站點(diǎn)設(shè)計(jì)在不同瀏覽器上的顯示效果可能有偏差。對(duì)于CSS3的很多新增屬性，不同瀏覽器需要加上自己的私有屬性前綴，比如Firefox瀏覽器的前綴是-moz-，Safari和Chrome瀏覽器的前綴是-webkit-，Opera瀏覽器的前綴是-o-等。但不可否認(rèn)的是，隨著時(shí)間的推移，各種瀏覽器對(duì)HTML5和CSS3的良好兼容將成為一種趨勢(shì)。

［參考文獻(xiàn)］

［1］田佳妮，翟悅.DIV+CSS在網(wǎng)頁布局中的應(yīng)用研究［J］.電腦知識(shí)與技術(shù)，2015（11）：181.

［2］張州，李存永.HTML5和CSS3.0在網(wǎng)頁設(shè)計(jì)中的新特性和優(yōu)勢(shì)探討［J］.無線互聯(lián)科技，2015（4）：98-99.

［3］高春燕.HTML5和CSS3.0在網(wǎng)頁設(shè)計(jì)中的新特性和優(yōu)勢(shì)［J］.旅游縱覽：下半月，2014（5）：337-338.

Application of Web Layout Technology Based on HTML5 and CSS3

Lu Zuan
（Nantong Institute of Technology，Department of Software Engineering，Nan Tong 226000，China）

Abstract:With the rapid development of the Internet industry，hypertext markup language （HTML），as a basic language to build web world，also has experienced several times of development. From HTML2.0 in 1995 to the hottest HTML 5，from CSS1.0 in 1995 to the nearest CSS3.0，the integration of HTML5 and CSS3 is leading the revolution of web front-end development. This paper mainly discusses the features and advantages of HTML5 and CSS3，then illustrates their use in the web layout by example.

Key words:HTML5；CSS3.0；web layout

作者簡(jiǎn)介：陸鉆（1988-），女，江蘇揚(yáng)中，助教，碩士；研究方向：網(wǎng)頁制作，數(shù)據(jù)庫(kù)的教學(xué)與研究。