熟悉網(wǎng)站架設(shè)的朋友都知道，table結(jié)構(gòu)的網(wǎng)站需要先對(duì)table進(jìn)行加載，然后讀取table內(nèi)的內(nèi)容，而div是直接加載，所以div在一定程度上在加載速度優(yōu)于table結(jié)構(gòu)的網(wǎng)頁。
但這是絕對(duì)的嗎？
答案是：不一定。
最近，鳳凰涅磐做了4個(gè)頁面進(jìn)行測(cè)試，兩個(gè)形式的網(wǎng)頁，兩種網(wǎng)頁結(jié)構(gòu)。同樣的數(shù)據(jù)量的情況下，首先的結(jié)論是div一定快于table結(jié)構(gòu)，但快了多少呢？ 經(jīng)過同一個(gè)服務(wù)器測(cè)試，兩種結(jié)構(gòu)的頁面、同一個(gè)數(shù)據(jù)量的情況，div快于table的速度微乎其微.以調(diào)用動(dòng)易2006beat1核心為例：文章調(diào)用5個(gè) 欄目，各調(diào)用10個(gè)標(biāo)題；下載調(diào)用2個(gè)欄目，各調(diào)用10個(gè)欄目；商城調(diào)用4個(gè)標(biāo)題+圖片；圖片頻道調(diào)用6個(gè)圖片；網(wǎng)站統(tǒng)計(jì)隱藏調(diào)用。帶寬10M，經(jīng)過精確 的讀秒計(jì)算，div結(jié)構(gòu)的網(wǎng)頁僅僅比table快不到1秒。由此可見，如果table網(wǎng)頁結(jié)構(gòu)的代碼優(yōu)化的好，速度一樣可以提升?。?！
以模板263三個(gè)版本進(jìn)行測(cè)試：測(cè)試環(huán)境：服務(wù)器雙至強(qiáng)，20M獨(dú)享帶寬，本地測(cè)試連接帶寬10M。午夜二時(shí)左右開始測(cè)試。以目前模板263使用的 VLO8測(cè)試時(shí)間為：4秒30左右可以全部打開；測(cè)試模板263 2006_V2版（div結(jié)構(gòu)）,全部打開為2秒30左右，測(cè)試模板263_2006_V3版（div）結(jié)構(gòu)，全部打開時(shí)間為2秒。但需要注意的是，模板 263測(cè)試的DIV結(jié)構(gòu)網(wǎng)站數(shù)據(jù)為不完全型，即：數(shù)據(jù)沒有全部加載，但所差的速度為1秒左右。
誠然，div作為一個(gè)行業(yè)標(biāo)準(zhǔn)會(huì)慢慢的走近我們，而作為從事這個(gè)行業(yè)的朋友和愛好者也是應(yīng)該掌握的一種技術(shù)。但我個(gè)人認(rèn)為，技術(shù)和思路都會(huì)存在一個(gè)盲區(qū)， 而這個(gè)div就是一個(gè)網(wǎng)頁行業(yè)的盲區(qū)，首先我們得知道，動(dòng)態(tài)網(wǎng)站即使生成靜態(tài)頁面的情況，也是有從數(shù)據(jù)庫讀取的情況，比如:網(wǎng)站調(diào)查。網(wǎng)站統(tǒng)計(jì)等。。。。 所以在對(duì)于一定的動(dòng)態(tài)網(wǎng)站上速度并沒有太大的提高;
而W3C標(biāo)準(zhǔn)很多代碼是不能用的，例如：iframe，這些如果去校驗(yàn)的話，都屬于不合格產(chǎn)品而已。而對(duì)于div結(jié)構(gòu)的網(wǎng)站，手工代碼很多，DW編輯中屬 于不可視狀態(tài)（即便可視，也不是瀏覽器的狀態(tài)），所以代碼需要自己一行一行的敲出來，而后臺(tái)的css也是同樣，而且css用量更大，因?yàn)閐iv是用id進(jìn) 行定義的。但可以肯定的是，div對(duì)手寫代碼鍛煉性極佳！??！
就我個(gè)人為例：寫一個(gè)首頁代碼div+css，用div需要寫一天左右，而這個(gè)時(shí)間，我能做出一個(gè)首頁+一個(gè)頻道的首頁了。例如：某些表格的邊框，我使用table的話，只要填充就可以，而div結(jié)構(gòu)需要對(duì)這個(gè)ID進(jìn)行定義，等于加大了css的工作量。
而且作為目前商業(yè)發(fā)展看，我們最后加工的網(wǎng)頁是交給客戶，div結(jié)構(gòu)的網(wǎng)頁客戶如何維護(hù)？如果客戶能夠進(jìn)行熟練的維護(hù)div結(jié)構(gòu)的網(wǎng)頁（包含前臺(tái)的部分改 動(dòng)），那么他可能已經(jīng)不需要你了。而table客戶拿到后，客戶相對(duì)可以容易的維護(hù)和擴(kuò)展。而相對(duì)的DIV結(jié)構(gòu)的網(wǎng)站造價(jià)也要比table高，這僅僅是制 作的費(fèi)用，還不包括后期的維護(hù)！
其實(shí)，這里并不是說div有多么的不好，本身模板263也開始制作和啟用div結(jié)構(gòu)的模板，只是這種結(jié)構(gòu)的網(wǎng)站需要熟悉代碼和結(jié)構(gòu)人使用而已.
而目前動(dòng)易系統(tǒng)部分結(jié)構(gòu)還不支持div結(jié)構(gòu)，比如：鏈接標(biāo)簽、欄目模板（如果使用w3c標(biāo)志會(huì)出現(xiàn)500錯(cuò)誤），后臺(tái)編輯會(huì)去掉屬性引號(hào)（在w3c中這是絕對(duì)不允許的）.
記得做完檢查：IE、Firefox 、Opera三種瀏覽器的兼容性。
這里只想告訴大家：技術(shù)不要盲從?。?！
CSS＋DIV是網(wǎng)站標(biāo)準(zhǔn)（或稱“WEB標(biāo)準(zhǔn)”）中常用的術(shù)語之一，通常為了說明與HTML網(wǎng)頁設(shè)計(jì)語言中的表格（table）定位方式的區(qū)別，因?yàn)閄HTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用css+div的方式實(shí)現(xiàn)各種定位。
CSS＋DIV網(wǎng)站設(shè)計(jì)的優(yōu)勢(shì)
首先，CSS的極大優(yōu)勢(shì)表現(xiàn)在簡(jiǎn)潔的代碼，對(duì)于一個(gè)大型網(wǎng)站來說，可以節(jié)省大量帶寬，而且眾所周知，搜索引擎喜歡清潔的代碼（其真正意義在于，增加了有效關(guān)鍵詞占網(wǎng)頁總代碼的比重），因此使用CSS＋DIV的web標(biāo)準(zhǔn)制作的網(wǎng)站具有搜索引擎友好的一定優(yōu)勢(shì)。
其次，CSS+DIV制作的網(wǎng)站使得網(wǎng)站改版相對(duì)簡(jiǎn)單，很多問題只需要改變CSS而不需要改動(dòng)程序，從而降低了網(wǎng)站改版的成本。
盡管CSS+DIV具有一定的優(yōu)勢(shì)，不過現(xiàn)階段CSS+DIV網(wǎng)站建設(shè)存在的問題也比較明顯，主要表現(xiàn)在：
第一，對(duì)于CSS的高度依賴使得網(wǎng)頁設(shè)計(jì)變得比較復(fù)雜。相對(duì)于HTML4.0中的表格布局（table），CSS+DIV盡管不是高不可及，但至少要比表 格定位復(fù)雜的多，即使對(duì)于網(wǎng)站設(shè)計(jì)高手也很容易出現(xiàn)問題，更不要說初學(xué)者了，這在一定程度上影響了XHTML網(wǎng)站設(shè)計(jì)語言的普及應(yīng)用。
第二，CSS文件異常將影響整個(gè)網(wǎng)站的正常瀏覽。CSS網(wǎng)站制作的設(shè)計(jì)元素通常放在幾個(gè)l外部文件中，這一個(gè)或幾個(gè)文件有可能相當(dāng)復(fù)雜，甚至比較龐大，如果CSS文件調(diào)用出現(xiàn)異常，那么整個(gè)網(wǎng)站將變得慘不忍睹。
第三，對(duì)于CSS網(wǎng)站設(shè)計(jì)的瀏覽器兼容性問題比較突出?；贖TML4.0的網(wǎng)頁設(shè)計(jì)在IE4.0之后的版本中幾乎不存在瀏覽器兼容性問題，但 CSS+DIV設(shè)計(jì)的網(wǎng)站在IE瀏覽器里面正常顯示的頁面，到火狐瀏覽器（FireFox ）中卻可能面目全非（這也是為什么建議網(wǎng)絡(luò)營銷人員使用火狐瀏覽器的原因所在 ）。CSS+DIV還有待于各個(gè)瀏覽器廠商的進(jìn)一步支持。
用過div+css作個(gè)整個(gè)網(wǎng)站，如果是純粹的div的布局是比較麻煩的，尤其是你div里面嵌套div的，div布局的時(shí)候，你有些頁面效果還是要舍棄 一點(diǎn)的，比如圖片的圓角，這些如果套div比較麻煩，在一個(gè)div在VS2005設(shè)計(jì)器里面可能變形，如果過多的套div，你實(shí)現(xiàn)ajax拖動(dòng)效果的時(shí)候 比較麻煩，所以我覺得眼下還是div+嵌套table比較好。
圓角——可以用div+css做出一樣漂亮的圓角，而且不用圖片，而且是寬度、高度自適應(yīng)的
怎么實(shí)現(xiàn)?挖挖Google Talk的css模板
忘掉 div 和 table 吧!
html 最大的特點(diǎn)就是兼容性和自適應(yīng)性。
使用了復(fù)雜的 div+css 后，你也許會(huì)發(fā)現(xiàn)在 IE 中很美觀的頁面在其他瀏覽器中看起來象一團(tuán)漿糊。做一個(gè)網(wǎng)站而只服務(wù)與特定的瀏覽器，是不可取的。如果看到哪個(gè)網(wǎng)頁上有“請(qǐng)用 XXX 瀏覽”的字樣，一個(gè)字的評(píng)價(jià)“爛”!
html 瀏覽器會(huì)自動(dòng)根據(jù)頁面的內(nèi)容進(jìn)行排版，這是普通的應(yīng)用程序難以做到的。做出“請(qǐng)用 X*Y 以上分辨率瀏覽”的、在高分辨率顯示器上浪費(fèi)了大量頁面左右空白而使用長(zhǎng)長(zhǎng)滾動(dòng)條的、使用了固定字體大小的，統(tǒng)統(tǒng)都是從開發(fā)應(yīng)用程序轉(zhuǎn)過來的“半路出家的 和尚”。
千萬不要模仿所謂的“XX優(yōu)秀網(wǎng)站設(shè)計(jì)”，那如果不是主辦方有意的推廣某種技術(shù)，就是作者的美術(shù)功底太過優(yōu)秀的。一個(gè)好的網(wǎng)站，只有先做到內(nèi)容充實(shí)、簡(jiǎn)潔、合理組織、方便閱讀，再去考慮錦上添花的修飾。
已經(jīng)完全轉(zhuǎn)型div/css 剛開始還是比較麻煩，動(dòng)不動(dòng)就查樣式文檔，現(xiàn)在基本實(shí)現(xiàn)手寫。
推薦用VS2005布局，比如一個(gè)頁面在VS2005的標(biāo)準(zhǔn)樣式布局后，再將一個(gè)個(gè)樣式取出到單獨(dú)css文件中，這是比較快的辦法。
SPAN 和 DIV 的區(qū)別在于，DIV(division)是一個(gè)塊級(jí)元素，可以包含段落、標(biāo)題、表格，乃至諸如章節(jié)、摘要和備注等。而SPAN 是行內(nèi)元素，SPAN 的前后是不會(huì)換行的，它沒有結(jié)構(gòu)的意義，純粹是應(yīng)用樣式，當(dāng)其他行內(nèi)元素都不合適時(shí)，可以使用SPAN。
下面以一個(gè)實(shí)例來說明這兩個(gè)屬性的區(qū)別。
代碼:
SPAN標(biāo)記有一個(gè)重要而實(shí)用的特性，即它什么事也不會(huì)做，它的唯一目的就是圍繞你的HTML代碼中的其它元素，這樣你就可以為它們指定樣式了。在此例中，標(biāo)識(shí)符允許你將一個(gè)段落分成不同的部分。
還有一個(gè)標(biāo)識(shí)符具有類似的功能，
DIV也被用來在HTML文件中建立邏輯部分。但與
SPAN不同，
工作于文本塊一級(jí)，它在它所包含的HTML元素的前面及后面都引入了行分隔。
效果:
SPAN標(biāo)記有一個(gè)重要而實(shí)用的特性，即它什么事也不會(huì)做，它的唯一目的就是圍繞你的HTML代碼中的其它元素，這樣你就可以為它們指定樣式了。在此例中，標(biāo)識(shí)符允許你將一個(gè)段落分成不同的部分。
還有一個(gè)標(biāo)識(shí)符具有類似的功能，
DIV也被用來在HTML文件中建立邏輯部分。但與
SPAN不同，
工作于文本塊一級(jí)，它在它所包含的HTML元素的前面及后面都引入了行分隔
1.網(wǎng)頁背景色的設(shè)置
犯錯(cuò)機(jī)率：很大
普遍性：較廣
犯錯(cuò)可能性：懶/不知道
約2年前我曾發(fā)現(xiàn)21cn上出現(xiàn)過一次沒有設(shè)置背景色的情況，當(dāng)時(shí)我用Email通知了他們，自此之后這個(gè)問題我從沒犯過。
絕大部分人的窗口背景顏色都是白色，但如果象我這樣個(gè)性的人，就會(huì)把windows窗口的背景顏色改成灰色或其他色，這樣一來，如果你沒有設(shè)置網(wǎng)頁的背景顏色的話，你以為正常的網(wǎng)頁在我的電腦上看起來會(huì)是一團(tuán)糟。
2.Align center（自動(dòng)居中）的濫用
犯錯(cuò)機(jī)率：非常大
普遍性：非常廣
犯錯(cuò)可能性：以為方便/以為好用
工作中，修改、維護(hù)別人的網(wǎng)頁是家常便飯，發(fā)現(xiàn)不少人有一個(gè)陋習(xí)：
在表格中的文字或圖片，你是這樣來令它居中、靠左或靠右過？
當(dāng)有些表格很多、文字很多、內(nèi)容分得很細(xì)的時(shí)候，愛用這種方法（它在DW里的快捷鍵是Ctrl+Alt+C，F(xiàn)P不知道是什么）的人往往會(huì)狂用，慘了，我 一碰到這樣的網(wǎng)頁就頭痛，為什么要用那么多
來居中呢？tell me why？難道表格沒有居中屬性嗎？為什么要加入這些垃圾代碼？特別修改的時(shí)候也不能把文字或圖片刪除了就能自動(dòng)清除
這個(gè)代碼，還要手工去清除，在復(fù)雜點(diǎn)的網(wǎng)頁中就會(huì)無故地浪費(fèi)維護(hù)者一筆時(shí)間。
建議使用 來居中，當(dāng)需要多重定位的時(shí)候，才考慮，因?yàn)檫@個(gè)代碼并不好處理，所以能用表格代替就用表格替代。
3.重復(fù)使用實(shí)現(xiàn)相同功能的代碼、或雜七雜八的亂套代碼
犯錯(cuò)機(jī)率：非常普遍
普遍性：非常普遍
犯錯(cuò)可能性：復(fù)雜多樣
大家先來看一看下面的代碼：
標(biāo) 題
你覺得這樣的代 碼看起來感覺怎么樣呢？
我不知道讀者有什么感覺，壓根我一看到這樣的代碼就會(huì)先自我麻木十來秒，這十來秒目的是為了找一個(gè)能表達(dá)我的思想感情的詞（我？你想反問我嗎？sorry~~，我一般不犯，因?yàn)槲易鼍W(wǎng)頁至少有一半以上的時(shí)間在瀏覽代碼，代碼中多了不該多的東西我一眼就能看出來。）。
看看上面的代碼，使用了2個(gè)class，4個(gè)font來定義2個(gè)文本，其實(shí)這樣的問題很多時(shí)候是在大家不斷的修改中產(chǎn)生的，對(duì)代碼不熟、或懶查看代碼、又 或不喜歡查看代碼的人犯這些問題特別嚴(yán)重，當(dāng)然，事實(shí)上別人瀏覽這個(gè)網(wǎng)頁的時(shí)候，是沒有任何問題的，但維護(hù)的人就…………。
這些多余的垃圾代碼完全是可以省略掉的，其實(shí)上面的例子不夠嚴(yán)重，更恐怖的我都見過。
另外還有一個(gè)問題也要提提的，就是
...
和...，為什么要用它們呢？tell me why~~，有甚者是這樣的：
標(biāo) 題
< /td>你覺得這樣的代碼看起來感覺怎么樣呢？
< /div>
看到這樣的代碼我是會(huì)很無奈的（更無奈的是我經(jīng)?？吹剑冶仨毧矗?，我來簡(jiǎn)化一下：
標(biāo)題
你覺得這樣的 代碼看起來感覺怎么樣呢？
是不是看起來覺得這個(gè)世界安靜了很多？'標(biāo)題'后面的文字完成可以定義在 的class里，就算不用css，再用多一個(gè)<.font>也沒問題，一樣很清爽。
4.表格不正確嵌套
犯錯(cuò)機(jī)率：一般
普遍性：普遍
犯錯(cuò)可能性：對(duì)這個(gè)不了解
其實(shí)這是一個(gè)街知巷聞的問題了，但還是不斷有人犯，不正確的嵌套表格，可能會(huì)令到你被老總叫到辦公室里臭罵一頓，會(huì)令到你以為正常的網(wǎng)頁用ADSL開2、3分鐘都開不了。
先講第一個(gè)問題，就是在一個(gè)大表格里不斷地嵌套表格，這樣會(huì)令到打開網(wǎng)頁的速度變慢（雖然說現(xiàn)在的IE改善了這一問題，但還是不建議這樣做），另一方面維護(hù)、修改也極不方便，一般來說簡(jiǎn)單的套用是沒有問題的，甚至3、4層，但是不要把所有內(nèi)容都放到一個(gè)表格里去。
第二個(gè)問題就是在一個(gè)大表格里放入所有內(nèi)容，而其中包括一個(gè)免費(fèi)的計(jì)數(shù)器代碼，嘻嘻，你猜有可能出現(xiàn)什么情況呢？其實(shí)也沒什么大不了的，最嚴(yán)重的就是你的IE象死機(jī)了一樣，什么都沒顯示。解決方法就是把計(jì)數(shù)器單獨(dú)放在一個(gè)表格里，別和其他內(nèi)容一起放在同一表格。
5.寫代碼縮進(jìn)的時(shí)候，不是使用Tab而是使用空格
犯錯(cuò)機(jī)率：一般
普遍性：較少
犯錯(cuò)可能性：不知道Tab更好用
這一個(gè)問題針對(duì)js、vbs、asp、php之類，html不能使用Tab會(huì)寫一點(diǎn)程序的都知道什么叫縮進(jìn)，怎么樣縮進(jìn)？有人使用空格，有人使用Tab，如果你是使用空格的，那么從現(xiàn)在起，改用Tab吧。
使用空格有二大壞處：1、縮進(jìn)速度慢、修改速度慢。2、增大網(wǎng)頁體積，會(huì)影響速度。
歡迎訪問更多網(wǎng)站推廣,網(wǎng)絡(luò)營銷,網(wǎng)站優(yōu)化,SEO相關(guān)內(nèi)容
.png)