大家都知道，web標(biāo)準(zhǔn)在中國傳播初期，人們使用“div+css”描述web標(biāo)準(zhǔn)，似乎有點道理，根據(jù)國內(nèi)網(wǎng)頁設(shè)計師的編碼水平，看似就是使用div配合css來替代table布局?？墒菍W(xué)過一段時間web標(biāo)準(zhǔn)的人士，都知道這是誤解，那么有人提出，摒棄div+css的說法，提倡XHTML+CSS的說法，因為要使用兩門語言來架構(gòu)網(wǎng)頁，但是這種稱呼也不準(zhǔn)確，不完整，因為只提到了XHTML1.0標(biāo)準(zhǔn)和CSS2.0（CSS2.1）規(guī)范。其實web標(biāo)準(zhǔn)就是web標(biāo)準(zhǔn)，叫別的都不對，他就是web開發(fā)中的一些列標(biāo)準(zhǔn)的集合，XHTML，XML，CSS，DOM，ECMAScript，制定這些標(biāo)準(zhǔn)是為了更好的約束，web運行平臺（瀏覽器）的開發(fā)廠商，而我們遵循web標(biāo)準(zhǔn)開發(fā)，也是為自己著想，通過大眾的努力，迫使流氓開發(fā)商，遵循統(tǒng)一標(biāo)準(zhǔn)，降低開發(fā)者的難度，讓我們的作品能更好的跨平臺，跨越瀏覽器的障礙（IE，F(xiàn)F，Opera等等），跨越設(shè)備的障礙（PC，手持設(shè)備，手機，打印設(shè)備等），跨越用戶障礙（色盲，色弱，視力不好，肢體殘疾等）。為什么要遵循web標(biāo)準(zhǔn)進行設(shè)計和開發(fā)？上一段也已經(jīng)宏觀的提到了，跨平臺統(tǒng)一于一個標(biāo)準(zhǔn)，最終降低開發(fā)難度。具體實施上肯定沒有一個老板這么偉大的投身標(biāo)準(zhǔn)事業(yè)，商人總是依照利益的驅(qū)動，是哪些利益驅(qū)動了他們應(yīng)用web標(biāo)準(zhǔn)的？更少的代碼和組件，容易維護 帶寬要求降低（代碼更簡潔），成本降低。更容易被搜尋引擎搜索到 改版方便，不需要變動頁面內(nèi)容 提供打印版本而不需要復(fù)制內(nèi)容 提高網(wǎng)站易用性。當(dāng)最終老板看到在應(yīng)用web標(biāo)準(zhǔn)后的代碼很簡潔，出現(xiàn)了許多未曾謀面的div，然后你給他展示，可以隨意改版，多種設(shè)備兼容，多種瀏覽器兼容，很好，老板很欣賞，這么多的好處，我們?nèi)χС謜eb標(biāo)準(zhǔn)，而導(dǎo)致的結(jié)果，web標(biāo)準(zhǔn)技術(shù)人才火熱，應(yīng)用web標(biāo)準(zhǔn)開發(fā)的項目增多，開發(fā)效率成為問題，開發(fā)模式還在摸索之中，里面出現(xiàn)了，在web標(biāo)準(zhǔn)應(yīng)用中的一些錯誤方法，div的濫用，html' target='_blank'>class的濫用，結(jié)構(gòu)一塌糊涂，人們重視css比重視xhtml多了許多。div是什么？剛開始人們的認識是無語義，應(yīng)用無語義的事物來布局，是正確的，既然無語義，div這三個字母就不會出現(xiàn)。Jeffrey Zeldman的解釋是“用短語division解釋div，是最恰當(dāng)不過的了”。Div和span一樣是用作裁減分割文檔的，那么他們也就擁有語義了。Div聯(lián)合id和class屬性，提供了一個把結(jié)構(gòu)添加到文檔的通用機制。 Div將文檔分割成一塊一塊的，怎么區(qū)分這一塊塊來進行布局呢？也就是怎么給獨有的div賦予一個唯一標(biāo)識ID，通用的div賦予一個class值，也可以在class的基礎(chǔ)上再賦一個id。如果不用id看似也可以，全部class，只要合理的命名就可以，你可以為header區(qū)域，添加class, div ，類IdHeader告訴你，這里是唯一的而且是header區(qū)域?？墒荌D是最能體現(xiàn)文檔結(jié)構(gòu)的一個屬性。當(dāng)你為ID不能重用而牢騷時，想想ID的強大功能吧！ID的屬性有著令人難以置信的強大功能。ID屬性可以完成下列功能：作為一個樣式表的選擇器，可以讓我們創(chuàng)建緊湊的、最小化了的XHTML頁面文件。最為一個超文本鏈接的目標(biāo)anchor，用來替代過時的name屬性（或者向前兼容和她共存）作為基于DOM的腳本中特殊元素的引用方法。作為一個聲明的對象元素名字。作為通常目的流程處理的工具（W3C的例子中：“當(dāng)叢HTML頁面提取數(shù)據(jù)倒一惡數(shù)據(jù)庫，或者把HTML文檔轉(zhuǎn)化到另外一個格式等，這個實惠用來標(biāo)明區(qū)域”）現(xiàn)在也經(jīng)常出現(xiàn)組合class的結(jié)構(gòu)，就是擁有一個CSS框架，然后任意組合class實現(xiàn)布局，看似是提高效率的捷徑，可是花費的代價卻是破壞結(jié)構(gòu)，（當(dāng)然也有例外，如Grids CSS），一般的做法就像土豆網(wǎng)前臺編碼的設(shè)計 div 這個維護帶來了很大的困難，也就是結(jié)構(gòu)設(shè)計的不夠合理，只是為了div+css而不是為了web標(biāo)準(zhǔn)。Web標(biāo)準(zhǔn)的要把握幾點：Use structural, semantic markup. Separate presentation from the (X)HTML document using CSS. Rely on JavaScript as an enhancement for, not a replacement of, website features. 使用結(jié)構(gòu)化，語義化的標(biāo)簽使用CSS分離出（X）HTML文檔中的表現(xiàn)元素依靠Javascript去增強，而不是替代，網(wǎng)站的特征（具個例子就是如果css做不了的，交給Javascript而不是替代css去做他能做的）對于多樣式組合的結(jié)構(gòu)我一直是很反感的，可能我理解的不夠深入，體會不到他的好處，或許合理的組合可以兼顧結(jié)構(gòu)和開發(fā)效率，可是我沒有發(fā)現(xiàn)，我就要抵觸。對樣式組合方式是這樣的 div >舉個布局例子 div >幾個類組合成一個左浮動，寬400 背景為白色的一個區(qū)域 你可能擁有一個龐類庫，頁面只需要任意的class的組合就可以完成，省去大部分花費在css上的時間，可是帶來的是下次結(jié)構(gòu)的混亂，這樣做和table布局沒什么兩樣，只是代碼看著好看而以，而且代碼量相差也不會太大。在應(yīng)用web標(biāo)準(zhǔn)初期，合理的table布局也是允許的。如此多的class讓我想起了table冗長的屬性 TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER WIDTH=100% HEIGHT=100% 難道辛辛苦苦就是想使用div配合css模擬出一個table很容易實現(xiàn)的效果？而且達到和table布局一樣的拙劣？語義化也是結(jié)構(gòu)的一個部分，語義除了合理的使用（X）HTML標(biāo)記語言，id也是一個語義組成的部分，div的id就像一格即時貼，告訴你div的語義，告訴你這個區(qū)塊的意義。微格式（Microformat）是在標(biāo)準(zhǔn) XHTML 代碼中嵌入結(jié)構(gòu)化數(shù)據(jù)的一種新方法。他的誕生也很明確的說明了web的結(jié)構(gòu)永遠是第一位，語義化的優(yōu)勢很現(xiàn)實的體現(xiàn)出來，div的屬性規(guī)劃也體現(xiàn)著語義，而不僅僅是一個傳遞對樣式工作的接口?？梢匀タ纯磇bm文檔中心的一篇“使用 microformats 分離數(shù)據(jù)與格式”了解它的工作原理。 其實說了這么多，我也有點沒頭緒了。主要就是我對結(jié)構(gòu)和開發(fā)效率之間的矛盾的一個說明，css框架如何才能不破環(huán)結(jié)構(gòu)的一個疑問。而且對于結(jié)構(gòu)和效率我的觀點就是“只有合理的結(jié)構(gòu)，才是你web標(biāo)準(zhǔn)化的根本動機”，web是承載信息的，沒有理由為了視覺效果，而破壞合理的結(jié)構(gòu) 本文作者:html教程
