楊毅

摘要：Web前端是一個(gè)網(wǎng)站開發(fā)的首要部分，前端開發(fā)的好壞直接影響到整個(gè)網(wǎng)站的交互效果，該文從開發(fā)Web前端所需要的核心技術(shù)出發(fā)，探討了這些技術(shù)的特點(diǎn)，并介紹了一個(gè)新的開發(fā)框架Bootstrap。

關(guān)鍵詞：HTNL5；jQuery；JavaScript；Bootstrap

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2014）23-5458-02

1 概述

2005年以后，互聯(lián)網(wǎng)進(jìn)入Web2.0時(shí)代，Web前端由此發(fā)生了翻天覆地的變化。和Web1.0時(shí)代相比，網(wǎng)站的主要內(nèi)容不再只是靜態(tài)的，網(wǎng)頁也不再只是承載單一的文字和圖片，各種富媒體讓網(wǎng)頁的內(nèi)容更加生動(dòng)，網(wǎng)頁上軟件化的交互形式為用戶提供了更好的使用體驗(yàn)，這些都是基于前端技術(shù)實(shí)現(xiàn)的。

這里介紹Web前端開發(fā)所需要用到一些的重要技術(shù)。

2 DIV+CSS、JavaScript 、HTML5和jQuery

2.1 DIV+CSS

DIV+CSS是WEB設(shè)計(jì)標(biāo)準(zhǔn)，它是一種網(wǎng)頁的布局方法，而網(wǎng)頁的布局不僅僅影響到網(wǎng)頁的美觀，也直接決定了網(wǎng)頁重構(gòu)的難度，因此在網(wǎng)頁開發(fā)中占有重要的位置。與傳統(tǒng)中通過表格（table）布局定位的方式不同，它可以實(shí)現(xiàn)網(wǎng)頁頁面內(nèi)容與表現(xiàn)相分離。

相對(duì)與傳統(tǒng)的table， 采用DIV+CSS技術(shù)的網(wǎng)頁，對(duì)于搜索引擎的收錄更加友好。樣式的調(diào)整更加方便現(xiàn)在YAHOO，MSN等國際門戶網(wǎng)站，網(wǎng)易，新浪等國內(nèi)門戶網(wǎng)站，和主流的WEB2.0網(wǎng)站，均采用DIV+CSS的框架模式。

對(duì)于同一個(gè)頁面視覺效果，采用CSS+DIV重構(gòu)的頁面容量要比TABLE編碼的頁面文件容量小得多，代碼更加簡潔，前者一般只有后者的1/2大小。對(duì)于一個(gè)大型網(wǎng)站來說，可以節(jié)省大量帶寬，并且支持瀏覽器的向后兼容。

2.2 HTML5

HTML5是2012年才開始推出的新的網(wǎng)頁設(shè)計(jì)語言，和HTML相比，HTML5賦予網(wǎng)頁更好的意義和結(jié)構(gòu)。基于HTML5開發(fā)的網(wǎng)頁APP擁有更短的啟動(dòng)時(shí)間，更快的聯(lián)網(wǎng)速度，這些全得益于HTML5 APP Cache，以及本地存儲(chǔ)功能。

HTML5具有以下的優(yōu)點(diǎn)：

易用性：新的HTML標(biāo)簽像

Bootstrap是Twitter推出的一個(gè)用于前端開發(fā)的開源工具包。它由Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開發(fā)，是一個(gè)CSS/HTML框架。它提供了豐富的元素和組件，并使得形式和功能結(jié)合得很好。Bootstrap的強(qiáng)大之處在于它對(duì)常見的CSS布局小組件和JavaScript插件都進(jìn)行了完整且完善的封裝，即使代碼不是很理解，也輕松使用。

Bootstrap主要具有以下的優(yōu)點(diǎn)：

網(wǎng)格系統(tǒng)：使用了目前比較流行的網(wǎng)格系統(tǒng)，靈活的網(wǎng)格系統(tǒng)可以讓開發(fā)工作變得更簡單，不僅可以使用核心默認(rèn)的網(wǎng)格類，也可以去創(chuàng)建自己的，新的網(wǎng)格系統(tǒng)允許根據(jù)設(shè)備大小通過變量來聲明。比如，可以針對(duì)桌面環(huán)境設(shè)置4列布局，針對(duì)平板電腦設(shè)置2列布局，針對(duì)手機(jī)設(shè)置1列布局。這樣，就可以很容易地控制你的頁面的跨設(shè)備顯示效果。

響應(yīng)式設(shè)計(jì)：根據(jù)不同的屏幕分辨率與上網(wǎng)設(shè)備，Bootstrap的布局與組件會(huì)做出響應(yīng)，自動(dòng)縮放。

扁平化和整潔的UI：Bootstrap采用了時(shí)下最為流行的扁平化設(shè)計(jì)風(fēng)格，而扁平化帶來的好處包括優(yōu)化網(wǎng)站加載速度、有利于SEO搜索引擎優(yōu)化、采用FontAwesome等字體類矢量網(wǎng)頁圖標(biāo)。

基于 LESS：可以更有效，更快速的創(chuàng)建CSS代碼，大大簡化了 CSS 的編寫，并且降低了CSS 的維護(hù)成本，就像它的名稱所說的那樣，LESS可以讓我們用更少的代碼做更多的事情。

4 小結(jié)

前端開發(fā)的學(xué)習(xí)曲線是先快后慢，每一步的提高都不是一件容易的事情。在學(xué)習(xí)的過程中，一定要保持良好的習(xí)慣。比如，注意多寫代碼、和命名規(guī)范，保持好的html的文檔結(jié)構(gòu)，盡量優(yōu)化html，css和js代碼，多去關(guān)注網(wǎng)站性能優(yōu)化的方式。

Web前端學(xué)習(xí)時(shí)間的長短和編寫的熟練程度，僅僅是精通語言表現(xiàn)的一個(gè)方面。更重要的是要掌握這個(gè)語言的適用范圍，整體構(gòu)架，語法規(guī)則、功能分類等基礎(chǔ)理論方面的知識(shí)，并能利用這方面的知識(shí)，用最科學(xué)的方法去解決現(xiàn)實(shí)中各種項(xiàng)目的各個(gè)問題。

參考文獻(xiàn)：

[1] 李俊青，季文天.高職WEB 程序設(shè)計(jì)實(shí)訓(xùn)課程探索與實(shí)踐[J].職業(yè)教育研究，2009（9）.

[2] 唐燦.下一代Web 界面前端技術(shù)綜述[J].重慶工商大學(xué)學(xué)報(bào)：自然科學(xué)版，2009（8）.

[3] 曹劉陽.編寫高質(zhì)量代碼——Web 前端開發(fā)修煉之道[M].北京：機(jī)械工業(yè)出版社， 2010.

[4] 李強(qiáng)，楊巋，吳天吉.基于Asp_net的網(wǎng)站開發(fā)前端技術(shù)優(yōu)化研究[J].軟件導(dǎo)刊，2013，12（5）.