web前端學習入門：DIV+CSS對頁面佈局的優勢！

目前從小的個人網站甚至大的入口網站都在用Div+CSS進行頁面佈局，網頁設計人員已經把Div+CSS頁面佈局當作業界標準。在這以前都是用table進行佈局的哦！那麼業界人士為什麼現在這麼推崇Div+CSS頁面佈局而棄用table呢？

先來看看到底什麼是Div+css？

DIV+CSS是網站標準（或稱為「WEB標準」）中常用的術語之一，通常為了說明與HTML網頁設計語言中的表格（table）定位方式的區別，因為XHTML網站設計標準中，不再使用表格定位技術，而是採用DIV+CSS的方式來實現各種樣式製作定位。
Div是html(超文本語言)中的一個元素，Div 是標籤 css是層疊樣式表(css樣式) ，Div+css 是一種網頁的佈局方法,這一種網頁佈局方法有別於傳統的table佈局，真正達到了w3c內容與表現相分離。

（web前端學習入門：DIV+CSS對頁面佈局的優勢！）

Div+CSS的標準化設計模式到底有什麼好處？

1、大幅縮減頁面程式碼，提高頁面瀏覽速度,縮減頻寬成本;

2、結構清晰，容易被搜尋引擎搜尋到，天生優化了seo

3、縮短改版時間。只要簡單的修改幾個CSS檔案就可以重新設計一個有數百頁的網站。

4、強大的字體控制和排版能力。 CSS控製字體的能力比糟糕的FONT標籤好多了，有了CSS，我們不再需要用FONT標籤或透明的1 px GIF圖片來控制標題，改變字體顏色，字體樣式等等。

5、CSS非常容易寫。你可以像寫html程式碼一樣輕鬆地寫CSS。

6、提高易用性。使用CSS可以結構化HTML，例如：

標籤只用來控制段落，heading標籤只用來控制標題，table標籤只用來表現格式化的資料等等。你可以增加更多的使用者而不需要建立獨立的版本。

7、可以一次設計，隨處發布。你的設計不只用於web瀏覽器，也可以發佈在其他裝置上，例如PowerPoint。

8、更好的控制頁面佈局。

9、表現和內容相分離。將設計部分剝離出來放在一個獨立樣式檔案中，你可以減少未來網頁無效的可能性。

10、更方便搜尋引擎的搜尋。用只包含結構化內容的HTML取代巢狀的標籤，搜尋引擎將更有效地搜尋你的內容，並可能給你一個較高的評價(ranking)。

11、Table 版面彈性不大，只能遵循 table tr td 的格式。而Div 你可以 Div ul li 也可以 ol li 還可以 ul li ……但標準語法最好有序的寫。

12、另外如果你不是javascript的高手，你可以不必去寫ID，只用class就可以。當客戶端程式設計師寫完程序，需要調整時候，你可以利用他的ID來控制。

13、Table 中佈局中，垃圾程式碼會很多，一些修飾過的樣式和佈局的程式碼混合在一起，很不利於直覺。而Div 更能體現樣式和結構相分離，結構的重構性強。

14、幾乎在所有的瀏覽器上都可以使用。

15、以前一些非得透過圖片轉換實現的功能，現在只要用CSS就可以輕鬆實現，從而更快地下載頁面。

16、讓頁面的字體變得更漂亮，更容易編排，讓頁面真正賞心悅目。

17、你可以輕鬆控制頁面的佈局 。

總結：Div+css既然這麼多優勢，那還幹嘛要學table?所以請忘記table吧！目前市面上都是採用DIV+CSS進行版面網頁，跟著市場上最新的科技趨勢走肯定是對的！那就感覺學習吧！ （web前端學習路線：如何從零開始學習DIV+CSS）

#相關文章推薦：

##web前端學習路線:

WEB前端開發快速入門

成為優秀的前端工程師需要學什麼？

#