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