基于HTML5+CSS3的移動端網(wǎng)頁開發(fā)的研究

摘 要：如今互聯(lián)網(wǎng)技術(shù)高速發(fā)展，HTML5+CSS3已成為目前比較主流的Web前端開發(fā)技術(shù)，其與以往的HTML+CSS相比，HTML5的新元素、語義化標(biāo)簽以及屬性，再加上CSS3的豐富的渲染效果，能夠使開發(fā)者極為方便、快速、靈活地實(shí)現(xiàn)web頁面的前端開發(fā)。本文以一個簡單的網(wǎng)站首頁為例來介紹基于HTML5+CSS3網(wǎng)頁的開發(fā)。

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

隨著互聯(lián)網(wǎng)技術(shù)的高速發(fā)展，HTML5+CSS3已成為目前比較主流的Web前端開發(fā)技術(shù)，其與以往的HTML+CSS相比，HTML5的新元素、語義化標(biāo)簽以及屬性，再加上CSS3的豐富的渲染效果，能夠使開發(fā)者極為方便、快速、靈活地實(shí)現(xiàn)web頁面的前端開發(fā)。

一、 HTML5

HTML5是下一代的HTML。HTML5是開放的Web網(wǎng)絡(luò)平臺的奠基石，HTML5的設(shè)計(jì)目的是為了在移動設(shè)備上支持多媒體，其新的語法特征被引進(jìn)以支持這一點(diǎn)，比如canvas、video和audio標(biāo)簽。HTML5還引進(jìn)了最新的功能，能夠改變用戶與文檔的交互方式。HTML5的優(yōu)點(diǎn)包括：

1. 具有強(qiáng)大的可移植性；

2. 提高了用戶體驗(yàn)和可用性；

3. HTML5將被大量的應(yīng)用在游戲和移動應(yīng)用程序；

4. 對SEO比較友好；

5. 增加的新標(biāo)簽有助于定義重要內(nèi)容；

6. 能很好的替代FLASH和Silverlight；

7. 能給站點(diǎn)帶來更多的音頻和視頻等多媒體元素。

二、 CSS3

CSS3是CSS（層疊樣式表）技術(shù)的升級版本，CSS演進(jìn)的一個主要變化就是W3C決定將CSS3分成一系列模塊。CSS3的新特征有很多，例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實(shí)現(xiàn)透明效果、漸變效果、使用@FontFace實(shí)現(xiàn)定制字體、多背景圖、文字或圖像的變形處理（旋轉(zhuǎn)、縮放、傾斜、移動）、多欄布局、媒體查詢等。

三、 頁面適應(yīng)性問題

移動終端與電腦端比較，分辨率和屏幕尺寸都不相同，如果在移動端還是把最大屏幕尺寸設(shè)計(jì)成和電腦端最大屏幕尺寸一樣的比如1024像素，字體大小還設(shè)計(jì)成電腦端的12像素或者14像素，那么就會出錯，因此，在設(shè)計(jì)移動終端網(wǎng)頁時，最好讓網(wǎng)頁的寬度自適應(yīng)于屏幕，萬維網(wǎng)聯(lián)盟在設(shè)計(jì)html的時候充分考慮到了這點(diǎn)，我們只需要加上標(biāo)簽就可以。

四、 圖片適應(yīng)性問題

圖片分為背景圖片和通過標(biāo)簽引入的圖片，前者可以通過media query自動的切換不同分辨率的版本，但是在不支持background image size的瀏覽器中背景圖片無法無級地調(diào)整大小（也就是在media query切換css的點(diǎn)上可以換一張不同分辨率的圖，但是沒法獲得兩張分辨率中間大小的版本），而且在很多情況下（比如cms中）并不適合用背景圖片。

通過標(biāo)簽引入的圖片，我們要使用延遲加載圖片的方法來加載圖片，也就是說在實(shí)際加載圖片之前，首先要用js檢查當(dāng)前屏幕的寬度，然后頁面加載不同分辨率的圖片，如屏幕寬度小于等于480，那么就加載80像素寬度的圖片，如屏幕寬度大于480小于等于768，那么就加載120像素的圖片，如果屏幕寬度大于768則加載160像素的圖片，如果屏幕寬度是600像素，那么就需要通過百分比來縮放120像素的圖片來達(dá)到合適的效果。這種處理方式對于移動設(shè)備來說加載的圖片變小了，網(wǎng)頁瀏覽速度也減小了，但是在豎屏和橫屏的轉(zhuǎn)換，或者瀏覽器擴(kuò)大時圖片會由于放大而產(chǎn)生模糊問題，這個問題如果解決呢？我們認(rèn)為對于圖片的考慮應(yīng)該從網(wǎng)頁布局設(shè)計(jì)的開始就應(yīng)避免圖片在各窗口寬度下的尺寸相差不要太大，要通過排列更多的內(nèi)容，而不能通過擴(kuò)大圖片尺寸來填充由于瀏覽器窗口的擴(kuò)大而帶來的空間。

例如：移動設(shè)備圖片自適應(yīng)的css代碼：

img{maxwidth：100%；height：auto；width：auto；}

五、 導(dǎo)航適應(yīng)性問題

導(dǎo)航如何能夠適應(yīng)屏幕的大小，怎樣適應(yīng)能夠更簡單是我們研究的一個難點(diǎn)，通過多種方法的對比，我們發(fā)現(xiàn)采用jQuery自適應(yīng)窗口大小設(shè)置導(dǎo)航菜單的方式比較簡單。

例如：

.nav{lineheight：50px；background： #0099cc；position： relative；}

.nav li{float：left；}

.nav li a{display：block；padding：0 20px；color： #00C；}

.navspan.navon{display：none；width：20px；position： absolute；top：12px；right：12px；cursor： pointer；}

@media screen and （maxwidth：768px）

{.nav ul{display：none；width：100%；}.nav ul li{width：100%；}

.nav span.navon{display：block；}}

• 首頁
• 欄目一
• 欄目二

HTML5+CSS3是最近幾年最熱門的新興技術(shù)，由此引發(fā)的Web應(yīng)用開發(fā)熱潮也獲得人們的極大關(guān)注。大家心向往之，卻苦于無從下手，原因是相關(guān)技術(shù)太過復(fù)雜，技術(shù)更新太快而參考資料匱乏且不成體系，因此，我們將不斷的探索，總結(jié)，以期對網(wǎng)頁的開發(fā)做出貢獻(xiàn)。

參考文獻(xiàn)：

[1]白蕾，郭清菊.HTML5與CSS3的設(shè)計(jì)模式[J].智能計(jì)算機(jī)與應(yīng)用，2016（2）.

[2]葛藍(lán).基于HTML5+CSS3的網(wǎng)頁布局[J].數(shù)字技術(shù)與應(yīng)用研究，2017（10）.

[3]王艷.探析HTML5與CSS3在網(wǎng)頁設(shè)計(jì)中的新特性和優(yōu)勢[J].電腦編程技巧與維護(hù)，2016（21）.

[4]劉冰月.HTML與CSS3項(xiàng)目實(shí)戰(zhàn)[M].東軟電子出版社.

作者簡介：孫曉娟，遼寧省沈陽市，遼寧林業(yè)職業(yè)技術(shù)學(xué)院。