基于HTML5+CSS3交互式網(wǎng)頁布局的研究

摘 要：本文主要闡述最熱門交互式網(wǎng)頁布局技術(shù)HTML+CSS的發(fā)展歷程，以及HTML5+CSS3的優(yōu)勢，并以HTML5中新的頁面交互元素應(yīng)用為例講述其新的交互功能，并通過CSS3樣式表的控制功能完善交互式網(wǎng)頁的布局的案例體現(xiàn)HTML5與CSS3相結(jié)合在制作交互式網(wǎng)頁中起到的關(guān)鍵性作用。

關(guān)鍵詞：交互式網(wǎng)頁；HTML5；CSS3

隨著Web技術(shù)的迅速發(fā)展，用戶對互聯(lián)網(wǎng)的依賴性愈加強(qiáng)烈，由最初的瀏覽靜態(tài)文檔，到后期的動態(tài)網(wǎng)頁，客戶端與服務(wù)端的交互顯得尤為重要。用戶不僅僅局限于讀書、瀏覽新聞、購物，越來越希望能夠參與其中。隨著Blog的誕生，網(wǎng)頁的交互性功能體現(xiàn)的愈加明顯，用戶的參與性也得到提高，因此對于Web前端開發(fā)人員提出了更高的要求，對于網(wǎng)頁的交互式需求日益增加，這就需要開發(fā)人員能夠應(yīng)用最新最強(qiáng)大的技術(shù)來完成項(xiàng)目的開發(fā)。

一、 HTML概述

（一） HTML簡介

HTML，超文本標(biāo)記語言，通過段落標(biāo)記、圖片標(biāo)記、超鏈接標(biāo)記等對網(wǎng)頁中的文本、圖片、聲音等進(jìn)行描述，使Web頁面變得豐富多彩。

它的發(fā)展經(jīng)歷了六個階段，超文本標(biāo)記語言（第一版）、HTML2.0、HTML3.2、HTML4.0、HTML4.01、HTML5.0。

直到HTML5的出現(xiàn)，本著用戶優(yōu)先的原則，化繁為簡，新增多個新特性，并解決了跨瀏覽器的問題，使網(wǎng)頁開發(fā)技術(shù)得到了前所未有的改善，是一個很大的突破。

（二） HTML5的優(yōu)勢

作為當(dāng)下最熱門的通用性標(biāo)記語言，HTML5的到來沒有帶給開發(fā)者很大的沖擊，它只是使這種描述性標(biāo)記語言更加規(guī)范，并增加了許多實(shí)用的新功能和新特性。

（1） 化繁為簡

簡化了字符集聲明、DOCTYPE聲明、屬性定義等，增加了新的簡單的API，使語義簡明清晰，更易讀取，提高了瀏覽速度。

（2） 跨平臺性

●由于各瀏覽器中不具有統(tǒng)一的標(biāo)準(zhǔn)，功能多種多樣，導(dǎo)致HTML5之前不同瀏覽器，

看到不同的頁面效果。而HTML5解決了這個問題，但卻對瀏覽器版本要求比較高，

對于不支持新標(biāo)簽的老式IE瀏覽器，只需簡單的添加JavaScript代碼就可以使用。

●HTML5開發(fā)的游戲，可以很輕易地移植到UC的開放平臺、Opera的游戲中心、

Facebook應(yīng)用平臺，甚至可以通過封裝的技術(shù)發(fā)放到App Store或Google Play上，

所以它的跨平臺性非常強(qiáng)大。

（3） 新特性

為實(shí)現(xiàn)圖文并茂的網(wǎng)頁效果，增強(qiáng)網(wǎng)頁多媒體顯示功能，HTML5新增了許多新特性。

●新的頁面元素：如header、nav、section、article、footer。

●新的表單控件：如calendar、date、time、email、url、search。

●用于繪畫的canvas元素。

●用于嵌入視頻音頻的video和audio元素。

●支持本地離線存儲。

●新增地理位置、拖拽、攝像頭等API。

二、 CSS概述

（一） CSS簡介

CSS，層疊樣式表，用來表現(xiàn)HTML或XHTML的一種語言，CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。能夠控制網(wǎng)頁中文本樣式、圖片外形及版本布局。

它的發(fā)展出現(xiàn)四個版本，CSS1、CSS2.0、CSS2.1、CSS3.0。隨著CSS技術(shù)的升級，CSS3將過去的復(fù)雜的一個大模塊規(guī)范分解成一些小模塊規(guī)范，如盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等，簡化編碼，但是增加美觀度。

（二） CSS3的優(yōu)勢

●CSS3較之前的版本新增許多新特性，使編碼更加簡化，布局更加清晰，讀取更加

速度。

●Grid布局用簡單的代碼實(shí)現(xiàn)復(fù)雜的布局。

●Flexbox伸縮布局盒能讓我們更好的操作它的子元素布局。

●強(qiáng)大的生成工具：CSS3 Maker在線演示漸變、陰影、旋轉(zhuǎn)、動畫等效果并生成代碼；

CSS3 Generator支持圓角、漸變、旋轉(zhuǎn)和陰影等眾多特性并生成代碼；CSS3 Please

即時在線修改代碼并預(yù)覽效果。

三、 HTML5+CSS3優(yōu)化交互式網(wǎng)頁布局案例解析

（一） HTML5頁面交互元素details和summary

Details元素與summary元素結(jié)合使用，可用來定義網(wǎng)頁中下拉式列表或菜單，summary用來定義details的標(biāo)題，標(biāo)題可見，當(dāng)用戶單擊標(biāo)題時，會顯示或隱藏details中的其他內(nèi)容。

（二） CSS3重復(fù)徑向漸變

CSS3可為HTML5編寫的網(wǎng)頁提供多姿多彩的樣式，使布局更合理美觀，為實(shí)現(xiàn)更好的交互式網(wǎng)頁提供有力的支持。

CSS3中，通過“background-image： repeating-radial-gradient（參數(shù)值）；”樣式可以實(shí)現(xiàn)重復(fù)線性漸變的效果。

參考文獻(xiàn)：

[1] 傳智播客高教產(chǎn)品研發(fā)部.HTML5+CSS3網(wǎng)站設(shè)計基礎(chǔ)教程[M].人民郵電出版社，2016，3.

[2] 傳智播客高教產(chǎn)品研發(fā)部. HTML+CSS+Javascript網(wǎng)頁制作案例教程[M].人民郵電出版社，2015，9.

作者簡介：

辛紅，講師，吉林省松原市，松原職業(yè)技術(shù)學(xué)院。endprint