基于HTML5和CSS3網頁布局技術應用

陸 鉆

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

?

基于HTML5和CSS3網頁布局技術應用

陸 鉆

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

摘 要：隨著互聯網產業的高速發展，HTML超文本標記語言作為構建web世界的基礎語言，也經歷了數次發展。從1995年的HTML2.0到當前最炙手可熱的HTML5，從1996年的CSS1.0到最近的CSS3.0，HTML5和CSS3兩種技術的融合正引領著web前端開發的革命。本文主要探討了HTML5和CSS3技術的新特性、優勢，以及通過實例說明它們在網頁布局中的應用。

關鍵詞：HTML5；CSS3.0；網頁布局

隨著web2.0標準的普及，表格布局和框架布局的方式已然被摒棄。web2.0標準將網頁分為結構、表現、行為3部分，即使用HTML創建基本的網頁結構和內容，使用CSS控制它們的外觀即表現樣式，使用JavaScript添加交互功能控制網頁的行為。經過數十年的發展，HTML和CSS目前的最新版本為HTML5和CSS3，相較于之前的版本，HTML5和CSS3不論在功能還是人機交互方面，都有著突出的表現和優勢，一躍成為如今WEB前端開發技術的新秀。

1　HTML5和CSS3的新特性和優勢

1.1 HTML5和CSS3的新特性

HTML5是WHATWG工作組繼HTML4.01和XHTML2.0之后開發的后續版本。和上一代HTML4相比，HTML5集中體現了結構標簽語義化、視頻、音頻、畫布、離線存儲、新增表單界面控件功能等方面的優勢。目前國內外很多大型的門戶網站都使用HTML5和CSS3網頁制作技術對所屬網站進行結構和內容上的調整、布局和優化。毋庸置疑，在未來的5～10年內，HTML5將成為移動互聯網領域的領導者。

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

1.2 HTML5+CSS3架構優勢

目前普遍使用的DIV+CSS布局模式，是使用DIV標簽將頁面分割成各個區塊，再由CSS完成對區塊布局、大小及顏色等方面的修飾。網頁頭部、導航條、正文內容、側邊欄以及版權聲明等模塊，都是通過id屬性對DIV的不同命名來區分。因為DIV標簽本身除了具有容器性質外毫無語義，搜索引擎在抓取網頁內容的時候，并不能知悉各個模塊的作用。圖1為常見DIV+CSS布局示意圖。

針對DIV+CSS網頁布局結構不清晰的問題，HTML5新增了一些結構標簽，對常用id命名的DIV標簽進行了語義化。以獨立的標簽在HTML5中出現，使得HTML文檔結構的定義更為明確，便于搜索引擎快速識別網頁內容，可閱讀性更強。圖2為對應HTML5+CSS3布局示意圖。

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

圖1　DIV+CSS布局示意圖

圖2　HTML5+　CSS3布局示意圖

2　HTML5新結構標簽介紹

HTML5結構化標簽的使用應遵循它特定的意義，這就要求在適當的位置用適當的標簽，以更好地展現它的結構。

下面對常用的HTML5新增結構標簽及其適用場合做簡單介紹：

（1）header標簽。

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

（2）nav標簽。

用于定義導航鏈接部分，其中的導航內容可以鏈接到其他頁面或當前頁面的其他部分。

（3）article標簽。

用于定義頁面或文檔中獨立、完整的內容，如文章內容、論壇帖子及用戶評論等，一個網頁中可以有一個或多個該標簽。

（4）section標簽。

用于定義一段有專題性的內容，如文檔中的章節。

（5）aside標簽：

用于定義網頁的非正文內容，如側邊欄、說明、引用等。

（6）footer標簽：

用于定義文檔的頁腳或頁面的頁腳。作為文檔頁腳時，一般包含作者姓名、聯系信息和文檔創建日期等內容；作為頁面頁腳時，一般包含版權聲明、相關鏈接等部分。

3　HTML　5+CSS3布局實例

以圖3所示的W3school網站首頁的布局為例，介紹HTML5新結構標簽和CSS3彈性盒布局技術的結合運用。

圖3　W3school網站首頁

（1）劃分頁面板塊

這是一個典型的“國”字形布局，頁面整體分為頭部、導航、左側邊欄、主體內容、右側邊欄、版權聲明6個部分。使用HTML5結構標簽分別對上述部分進行定義，結構代碼如下：

（2）使用CSS3進行板塊布局。

頁面各板塊的布局效果如圖4所示。導入外部樣式表文件，在樣式表文件中，對頁面各板塊的位置、大小、顏色等做相應設置。

樣式代碼如下：

（3）對各個頁面板塊添加內容。

圖4　W3school網站首頁布局圖

4　結語

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

［參考文獻］

［1］田佳妮，翟悅.DIV+CSS在網頁布局中的應用研究［J］.電腦知識與技術，2015（11）：181.

［2］張州，李存永.HTML5和CSS3.0在網頁設計中的新特性和優勢探討［J］.無線互聯科技，2015（4）：98-99.

［3］高春燕.HTML5和CSS3.0在網頁設計中的新特性和優勢［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

作者簡介：陸鉆（1988-），女，江蘇揚中，助教，碩士；研究方向：網頁制作，數據庫的教學與研究。