由于本人才疏學(xué)淺，對(duì)DIV+CSS也沒有深入徹底研究透，只是憑自己的一點(diǎn)認(rèn)識(shí)而寫，希望高手不要扔磚。

　　廢話少說，直接進(jìn)行正題。

　　現(xiàn)在全國大大小小的網(wǎng)站都在搞一場技術(shù)“革命”，就是所謂“網(wǎng)站重構(gòu)”說簡單點(diǎn)就是DIV+CSS進(jìn)行網(wǎng)站制作。用DIV+CSS代替?zhèn)鹘y(tǒng)的Table制作框架和美化頁面。

　　在重構(gòu)之前，肯定要了解為什么重構(gòu)，為什么要用DIV+CSS技術(shù)?了解了這個(gè)問題，那么大家才有使用此技術(shù)重構(gòu)網(wǎng)站的動(dòng)力。各大CSS學(xué)習(xí)網(wǎng)站和教程無一例外都會(huì)列舉出以下使用DIV+CSS的好處：

　　1、內(nèi)容和形式分離，網(wǎng)頁前臺(tái)只需要顯示內(nèi)容就行，形式上的美工交給CSS來處理。生成的HTML文件代碼精簡，更小打開更快。

　　2、改版網(wǎng)站更簡單容易了，不用重新設(shè)計(jì)排版網(wǎng)頁，甚至于不用動(dòng)原網(wǎng)站的任何HTML和程序頁面，只需要改動(dòng)CSS文件就完成了所有改版。對(duì)于門戶網(wǎng)站來說改版就像換件衣服一樣簡單容易。

　　3、搜索引擎更友好，排名更容易靠前。

　　以上三點(diǎn)是N多好處最吸引人，最突出的三點(diǎn)。我就這三點(diǎn)進(jìn)行一一介紹：

　　{dy}點(diǎn)、內(nèi)容和形式分離，網(wǎng)頁前臺(tái)只需要顯示內(nèi)容就行，形式上的美工交給CSS來處理。生成的HTML文件代碼精簡，更小打開更快。

　　這個(gè)是DIV+CSS技術(shù)最現(xiàn)著的特點(diǎn)，也是CSS存在的根源。wq的顛覆現(xiàn)在傳統(tǒng)(table)網(wǎng)頁設(shè)計(jì)的技術(shù)。所有現(xiàn)在用table制作的內(nèi)容，都可以用CSS來解決掉，而且解決的更wm，更強(qiáng)大。不需要大家再表格套表格，只需要用div套div就可以實(shí)現(xiàn)以往表格套表格所有的美工，這樣的結(jié)果就是使用div+CSS技術(shù)，讓生成的網(wǎng)頁文件大小更精簡，更小。table時(shí)代，一個(gè)頁面表格達(dá)到10個(gè)以上是非常普遍的事情，但是現(xiàn)在用DIV+CSS，一個(gè)table都可以不用，就wq達(dá)到之前的效果，這就直接導(dǎo)致網(wǎng)頁文件大小比使用table時(shí)減少50%-80%，更節(jié)約各位站長的硬盤空間，訪問者打開網(wǎng)頁時(shí)更快，而且用div+CSS時(shí)，不像以往使用table時(shí)，必須把全部table讀取完了才顯示頁面內(nèi)容，現(xiàn)在是可以讀一個(gè)div就顯示一個(gè)效果，大家打開網(wǎng)頁不用等。好處真是明顯而強(qiáng)大。

　　這個(gè)優(yōu)點(diǎn)的確是顯著的，凡是使用傳統(tǒng)table建的網(wǎng)頁，內(nèi)容多的話，有時(shí)候達(dá)到30K左右都有可能，文件打了打開時(shí)，肯定就有0.0幾秒的延遲。使用DIV+CSS,由于沒有表格使用，你前臺(tái)打開看到的全是直接內(nèi)容，CSS文件都是導(dǎo)入鏈接的，是另一個(gè)文件，根本和HTML文件大小沒關(guān)系，這種生成的HTML文件，一個(gè)也就10K左右大小。文件數(shù)量少時(shí)看不出來，但是文件萬級(jí)以上時(shí)，還是會(huì)節(jié)約幾十M大小的。

　　這些優(yōu)點(diǎn)其實(shí)拿到現(xiàn)在來說，個(gè)人感覺用處不大，為什么呢?

　　因?yàn)閠able雖然生成的HTML文件要大一些，占空間多點(diǎn)，但是現(xiàn)在的虛擬主機(jī)空間幾百塊錢就可以達(dá)到3G以上，一個(gè)中小型門戶或是網(wǎng)站，wq夠用，就算不夠用，你數(shù)據(jù)量達(dá)到十萬級(jí)別以上，生成的HTML文件也用不了2G，這個(gè)成本其實(shí)對(duì)于中小型網(wǎng)站長來說wq可以不計(jì)。再說使用table說的是打開速度慢。這個(gè)在現(xiàn)在的網(wǎng)絡(luò)環(huán)境下面來說，也可以忽略的，現(xiàn)在大家上網(wǎng)都是用的寬帶，至少也是512K以上，一個(gè)網(wǎng)頁30K，打開也就一秒不到的時(shí)候，使用DIV+CSS也就快那么0.0幾秒，這基本上是大家感覺不到的。而且既然都是生成HTML，那對(duì)服務(wù)器來說影響的效果是一樣的，只要你的虛擬主機(jī)網(wǎng)絡(luò)穩(wěn)定，那么在table和div+css上就沒差別。

　　但是使用table制作網(wǎng)頁框架和表格時(shí)，全是選擇化制作的，也就是說不用大家去寫代碼，很簡單輸入邊框和行數(shù)列數(shù)就可以達(dá)到制作出來的要求，但是使用div+CSS時(shí)，wq是靠手寫代碼，一個(gè)表格寫四行代碼的話，如果一個(gè)頁面涉及十多個(gè)div表格生成，手寫代碼將超過50行，而且如果你數(shù)學(xué)不好，或是邏輯思維能力不強(qiáng)的話，你手寫出來的表格將是亂78糟，出現(xiàn)表格重疊和位置wq不正確。因?yàn)橛胐iv+css寫表格時(shí)，表格間的邏輯排列關(guān)系wq是靠自己手寫代碼判斷，如果你沒有很強(qiáng)的手寫代碼能力和邏輯性，你所花費(fèi)的時(shí)間，比你用table制作時(shí)間至少是4倍左右?；旧弦粋€(gè)頁面定義的ID和class類，完整頁面是不會(huì)少于20個(gè)的，一個(gè)ID或class手寫5句，你制作一個(gè)HTML頁面將超過100句代碼，當(dāng)然其中很多是可以存成一個(gè)CSS文件來重復(fù)調(diào)用的。也就是說相同的頁面內(nèi)容的話，排版一樣的情況下，可以直接導(dǎo)入鏈接CSS來實(shí)現(xiàn)。

　　這個(gè)就很像之前生成HTML時(shí)，制作一個(gè)網(wǎng)頁模板。但制作這個(gè)模板花的時(shí)間是用table制作時(shí)的幾倍。這里有些人要說，但是我改版的時(shí)候，就只需要再寫一個(gè)css就可以了，不用再生成HTML了。那么我要說，當(dāng)你再寫一個(gè)CSS文件改版時(shí)，我可能都已經(jīng)用table制作好一個(gè)頁面模板，而且還自動(dòng)生成HTML全站的頁面了。這不是不可能的。

　　如果作為站長的你，對(duì)于手寫代碼不是特別有信心，成都建設(shè)網(wǎng)站邏輯思維能力不是特別強(qiáng)，建議還是使用傳統(tǒng)的table制作網(wǎng)頁更熟練和快捷。

　　第二點(diǎn)，改版網(wǎng)站更簡單容易了，不用重新設(shè)計(jì)排版網(wǎng)頁，甚至于不用動(dòng)原網(wǎng)站的任何HTML和程序頁面，只需要改動(dòng)CSS文件就完成了所有改版。

　　DIV+CSS對(duì)于門戶網(wǎng)站來說改版就像換件衣服一樣簡單容易，改版時(shí)，不用改動(dòng)全站HTML頁面，只需要重新寫CSS，再用新CSS覆蓋以前的CSS就可以實(shí)現(xiàn)改版了。方便吧。

　　方便是方便了，但是一個(gè)網(wǎng)站，我想問一下是不是一個(gè)月就要改次版?或是半年就要改一次?估計(jì)這么頻繁的網(wǎng)站少的很哦。現(xiàn)在很多知名網(wǎng)站，行業(yè)的，門戶的，包括個(gè)人網(wǎng)站，最多也是一年改一次版。一年改一次版，你一年才用一次重新寫CSS，而且你寫的CSS時(shí)間所用時(shí)間，比我用table制作時(shí)慢一二倍(技術(shù)熟練情況下)。那我何必還要用CSS啊?我用table一樣可以完成的效果，二分鐘就做好了表格，你用css寫要用十分鐘。

　　全國中小型站長的網(wǎng)站數(shù)據(jù)量一般也就在十萬條數(shù)據(jù)之內(nèi)，現(xiàn)在用自動(dòng)批量生成HTML功能，生成完也用不了幾個(gè)小時(shí)時(shí)間吧。費(fèi)這點(diǎn)神一年也就一次，沒什么大不了的。

　　所以除非你網(wǎng)站一個(gè)月改一次版，那么你還是用最熟練和方便的方法來實(shí)現(xiàn)網(wǎng)頁設(shè)計(jì)為妙。

　　當(dāng)然如果你CSS已經(jīng)學(xué)的如火純青了，而且是代碼狂人。你當(dāng)我說的廢話。

　　第三點(diǎn)，搜索引擎更友好，排名更容易靠前。

　　當(dāng)我看到CSS優(yōu)點(diǎn)有這個(gè)時(shí)，我冷笑了二聲。翻譯和編寫者真的是太不了解中國的網(wǎng)絡(luò)環(huán)境了，這條拿到國外來說，的環(huán)境下，wq可行。但是拿到中國以百度為壟斷的網(wǎng)絡(luò)環(huán)境下，wq可以忽略。

　　搜索引擎主要的排名依據(jù)不管百度和google，都是title和權(quán)重為主。他們不可能拿到這二點(diǎn)不用，而是用你的content內(nèi)容來為主抓數(shù)據(jù)吧。而且最重要的一點(diǎn)，中小型網(wǎng)站主80%左右的流量是百度來的，百度現(xiàn)在wq是人工在排序，你以為你用了div+CSS百度就先排你在前面啊??如果你這樣認(rèn)為你就是太不配做中國站長了。

　　退一萬不說，就算你DIV+CSS有這優(yōu)點(diǎn)，能讓你頁面在百度搜索時(shí)排前幾位，你以為這個(gè)位置你能坐的長啊?不出一個(gè)月只要你這頁面給你帶去的流量達(dá)到一定數(shù)量，百度K你沒商量。(我是指K這個(gè)關(guān)鍵字)

　　綜上所述，個(gè)人感覺DIV+CSS不能太迷信它的很好很強(qiáng)大，它作為制作網(wǎng)頁，美化網(wǎng)頁的一個(gè)重要輔助是很強(qiáng)大方便的。可以彌補(bǔ)table制作框架和表格時(shí)的很多不足和美工上的缺點(diǎn)，但是wq只用它來做，太費(fèi)時(shí)費(fèi)力，對(duì)于全國中小型網(wǎng)站長來說，真的不太適合。我個(gè)人覺得用table+DIV+CSS是{zh0}的組合，也是最省時(shí)省力的辦法。

　　我的廢話太多，寫了一長竄，不足之處非常多，認(rèn)識(shí)也不夠深入。大家不要介意哈。

　　PS：很多CSS資料宣傳的CSS生成網(wǎng)頁代碼少，指的是生成的HTML文件的代碼少，因?yàn)檫@種HTML文件根本沒有美化過的，美化過程語句全在CSS文件中，一個(gè)CSS文件代碼是奇多mb。

　　一個(gè)HTML要配合一個(gè)CSS文件來用，不能單獨(dú)使用。

{dy}題：在 <div class=tzh>I am TZH!</div> 這段語句中有什么錯(cuò)誤？
1. 標(biāo)點(diǎn)符號(hào)問題。這其實(shí)也是大家最容易忽視的問題，其實(shí)就是小小的兩個(gè)引號(hào)，就造成了這個(gè)錯(cuò)誤。雖然很多瀏覽器在不加引號(hào)的情況下仍然能正確識(shí)別渲染。但是這樣想要通過嚴(yán)格的W3C XHTML國際標(biāo)準(zhǔn)是不可能的，請(qǐng)大家記住等號(hào)后面一定要接引號(hào)。正確寫法：<div class="tzh">I am TZH!</div>

 第二題：在 <SPAN class="tzh">TZH is me!</SPAN> 這段語句中有什么錯(cuò)誤？
2. 大小寫注意。這和{dy}個(gè)問題一樣，都是特別容易忽視的細(xì)節(jié)問題。在W3C標(biāo)準(zhǔn)中是{jd1}不允許大寫的，其中我仍記得我在檢測(cè)一段javascript代碼的時(shí)候，由于為了讓自己一目了然寫出的也被判斷成了錯(cuò)誤，原因就是L不能大寫。正確寫法：<span class="tzh">TZH is me!</span>

 第三題：在 <p>I am TZH!</p><br><p>TZH is me!</p> 這段語句中有什么錯(cuò)誤？
3. <br />標(biāo)簽問題。對(duì)于強(qiáng)制換行標(biāo)簽<br />來說，很多新手都分不清它和<br>的區(qū)別，甚至在FCKeditor編輯器中有時(shí)都會(huì)時(shí)不時(shí)冒出個(gè)<br>來充當(dāng)<br />。雖然同樣很多瀏覽器都能自動(dòng)糾錯(cuò)，將<br>作為<br />識(shí)別。但{zh0}的編輯方法還是推薦大家使用Dreamweaver進(jìn)行編輯，當(dāng)你按下Ctrl+Enter，就會(huì)自動(dòng)寫上一個(gè)<br />。正確寫法： <p>I am TZH!</p><br /><p>TZH is me!</p>

 第四題：在 <h1>~tangzhehao~hey~</h1> 這段語句中有什么錯(cuò)誤？
4. 注意標(biāo)簽結(jié)束后面接的標(biāo)點(diǎn)符號(hào)，很多標(biāo)簽結(jié)束后都不能接特殊標(biāo)點(diǎn)符號(hào)，比如這里的"~"波浪號(hào)，但你要問，那叫我怎么用呢？那就使用ISO Latin-1字符集（ISO Latin-1 Character Set），在這里，查找到“~”波浪號(hào)相對(duì)應(yīng)的字符集十進(jìn)制編碼是&#126;，然后就用這個(gè)十進(jìn)制編碼代替~波浪號(hào)，記住{zh1}的分號(hào)不能丟。在ISO Latin-1字符集中以已命名實(shí)體（Named entity）{zy}先，十進(jìn)制編碼（Decimal code）其次，也就是說，一個(gè)符號(hào)在同時(shí)有十進(jìn)制編碼和已命名實(shí)體的時(shí)候，優(yōu)先選用已命名實(shí)體而不使用十進(jìn)制編碼。 
P.S.：ISO Latin-1字符集地址：http:///css/z_iso.html

 第五題：在 <form id="54tzh"></form> 這段語句中有什么錯(cuò)誤？
5. 注意id和class特殊情況。W3C XHTML1.0 標(biāo)準(zhǔn)中規(guī)定，在id或class中，{dy}個(gè)字符是不能是數(shù)字的，必須是字母。正確寫法：<form id="tzh45"></form>

 第六題：在 <img src="logo.gif"> 這段語句中有什么錯(cuò)誤？
6. <img>標(biāo)簽注意。W3C XHTML1.0 標(biāo)準(zhǔn)中規(guī)定，在<img>標(biāo)簽中，必須包括alt元素。正確寫法：<img alt="Logo" src="logo.gif">

 第七題：在<script language="JavaScript"> 這段語句中有什么錯(cuò)誤？
7. <script>標(biāo)簽注意。W3C XHTML1.0 標(biāo)準(zhǔn)中規(guī)定，在<img>標(biāo)簽中，必須包括type元素。正確寫法：<script language="JavaScript" type=text/javascript>

 第八題：在<div><h1>I am TZH!</div></h1> 這段語句中有什么錯(cuò)誤？
8. 注意標(biāo)簽開始結(jié)束順序?qū)?yīng)。正確寫法：<div><h1>I am TZH!</h1></div>

9. 注意特殊套裝。比如：<dl><dd><ul><li>等一些特殊標(biāo)簽，套裝順序中缺一不可。必須按照順序?qū)?lt;dl><dd><ul><li>四個(gè)標(biāo)簽寫wq。類似的還有許多。

10. 注意未打開標(biāo)簽。所謂未打開來自于W3C檢測(cè)，這類錯(cuò)誤顯示的錯(cuò)誤是 is not open，翻譯過來也就是未打開的意思。如果按照中文的意思來理解就是有首無尾或者有尾無首。通常這種錯(cuò)誤出現(xiàn)的原因都是因?yàn)橛幸欢未a在修改的時(shí)候被刪除，而沒有顧及到相對(duì)較遠(yuǎn)的結(jié)束或者開始標(biāo)簽。

W3C CSS國際標(biāo)準(zhǔn)：
1. 少用偏門。類似break-word斷行，z-index手動(dòng)分層，還有像垂直對(duì)齊等等這些偏門CSS{zh0}少用，因?yàn)椴灰欢ㄋ袨g覽器都支持，而且極難通過W3C檢測(cè)。
2. center不是float的值。很多新手都會(huì)把center誤認(rèn)為是float的值，而偏偏不是如此。center只是text-align的值。
3. 對(duì)齊不能包括兩個(gè)值。很多新手會(huì)在float或者text-align中填寫兩個(gè)值，比如：float:left top。這是不允許的，瀏覽器也無法識(shí)別。
4. 滾動(dòng)條顏色{zh0}不要自定義。很多瀏覽器不能正常識(shí)別自定義顏色的滾動(dòng)條，況且很多自定義顏色都不能通過W3C。
5. 單獨(dú)滾動(dòng)條設(shè)置?，F(xiàn)在經(jīng)常使用overflow-x（橫向滾動(dòng)條）或者overflow-y（縱向滾動(dòng)條），在設(shè)置這個(gè)的時(shí)候經(jīng)常會(huì)發(fā)現(xiàn)并不是所有的客戶端上都有效果，大家在設(shè)置的時(shí)候{zh0}在body和html同時(shí)進(jìn)行設(shè)置。然而這個(gè)CSS也不是CSS2.1支持的（CSS2.1支持overflow，同時(shí)定義橫縱滾動(dòng)條），直到CSS3才支持這種定義方式。盡量少用。
6. background和color顏色相同會(huì)受到警告。

在{zh1}，如果你的站通過了W3C的檢測(cè)之后，將獲得檢測(cè)通過W3C認(rèn)證Logo，下圖（左圖為W3C XHTML 1.0通過，右圖為W3C CSS通過）：