談XHTML結(jié)構(gòu)合理從div css開始_Web標(biāo)準(zhǔn)教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
大家都知道,web標(biāo)準(zhǔn)在中國傳播初期,人們使用“div css”描述web標(biāo)準(zhǔn),似乎有點道理,根據(jù)國內(nèi)網(wǎng)頁設(shè)計師的編碼水平,看似就是使用div配合css來替代table布局。
可是學(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運(yùn)行平臺(瀏覽器)的開發(fā)廠商,而我們遵循web標(biāo)準(zhǔn)開發(fā),也是為自己著想,通過大眾的努力,迫使流氓開發(fā)商,遵循統(tǒng)一標(biāo)準(zhǔn),降低開發(fā)者的難度,讓我們的作品能更好的跨平臺,跨越瀏覽器的障礙(IE,F(xiàn)F,Opera等等),跨越設(shè)備的障礙(PC,手持設(shè)備,手機(jī),打印設(shè)備等),跨越用戶障礙(色盲,色弱,視力不好,肢體殘疾等)。
為什么要遵循web標(biāo)準(zhǔn)進(jì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)的?
當(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的濫用,class的濫用,結(jié)構(gòu)一塌糊涂,人們重視css比重視xhtml多了許多。
div是什么?剛開始人們的熟悉是無語義,應(yīng)用無語義的事物來布局,是正確的,既然無語義,div這三個字母就不會出現(xiàn)。(有另一說指div是部分的意思)
Div將文檔分割成一塊一塊的,怎么區(qū)分這一塊塊來進(jìn)行布局呢?也就是怎么給獨(dú)有的div賦予一個唯一標(biāo)識ID,通用的div賦予一個class值,也可以在class的基礎(chǔ)上再賦一個id。假如不用id看似也可以,全部class,只要合理的命名就可以,你可以為header區(qū)域,添加class, <div class="IdHeader"> ,類IdHeader告訴你,這里是唯一的而且是header區(qū)域�?墒荌D是最能體現(xiàn)文檔結(jié)構(gòu)的一個屬性。當(dāng)你為ID不能重用而牢騷時,想想ID的強(qiáng)大功能吧!
ID的屬性有著令人難以置信的強(qiáng)大功能。ID屬性可以完成下列功能:
現(xiàn)在也經(jīng)常出現(xiàn)組合class的結(jié)構(gòu),就是擁有一個CSS框架,然后任意組合class實現(xiàn)布局,看似是提高效率的捷徑,可是花費(fèi)的代價卻是破壞結(jié)構(gòu),(當(dāng)然也有例外,如Grids CSS),一般的做法就像土豆網(wǎng)前臺編碼的設(shè)計
這個維護(hù)帶來了很大的困難,也就是結(jié)構(gòu)設(shè)計的不夠合理,只是為了div css而不是為了web標(biāo)準(zhǔn)。
Web標(biāo)準(zhǔn)的要把握幾點:
對于多樣式組合的結(jié)構(gòu)我一直是很反感的,可能我理解的不夠深入,體會不到他的好處,或許合理的組合可以兼顧結(jié)構(gòu)和開發(fā)效率,可是我沒有發(fā)現(xiàn),我就要抵觸。
對樣式組合方式是這樣的
舉個布局例子
幾個類組合成一個左浮動,寬400 背景為白色的一個區(qū)域
你可能擁有一個龐類庫,頁面只需要任意的class的組合就可以完成,省去大部分花費(fèi)在css上的時間,可是帶來的是結(jié)構(gòu)的混亂,改版的困難,甚至向后兼容受到限制。這樣做和table布局沒什么兩樣,只是代碼看著好看而以,而且代碼量相差也不會太大。在應(yīng)用web標(biāo)準(zhǔn)初期,合理的table布局也是答應(yīng)的。
如此多的class讓我想起了table冗長的屬性
難道辛辛勞苦就是想使用div配合css模擬出一個table很輕易實現(xiàn)的效果?而且達(dá)到和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)永遠(yuǎn)是第一位,語義化的優(yōu)勢很現(xiàn)實的體現(xiàn)出來,div的屬性規(guī)劃也體現(xiàn)著語義,而不僅僅是一個傳遞給樣式工作的接口。可以去看看ibm文檔中心的一篇“使用 microformats 分離數(shù)據(jù)與格式”了解它的工作原理。
其實說了這么多,我也有點沒頭緒了。主要就是我對結(jié)構(gòu)和開發(fā)效率之間的矛盾的一個思考,css框架怎樣才能不破環(huán)結(jié)構(gòu)的一個疑問。而且對于結(jié)構(gòu)和效率我的觀點就是“擁有合理的結(jié)構(gòu),才是你web標(biāo)準(zhǔn)化的根本動機(jī)”,web是承載信息的,沒有理由為了視覺效果,而破壞合理的結(jié)構(gòu)。
可是學(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運(yùn)行平臺(瀏覽器)的開發(fā)廠商,而我們遵循web標(biāo)準(zhǔn)開發(fā),也是為自己著想,通過大眾的努力,迫使流氓開發(fā)商,遵循統(tǒng)一標(biāo)準(zhǔn),降低開發(fā)者的難度,讓我們的作品能更好的跨平臺,跨越瀏覽器的障礙(IE,F(xiàn)F,Opera等等),跨越設(shè)備的障礙(PC,手持設(shè)備,手機(jī),打印設(shè)備等),跨越用戶障礙(色盲,色弱,視力不好,肢體殘疾等)。
為什么要遵循web標(biāo)準(zhǔn)進(jì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)的?
示例代碼 [www.hl5o.cn]
更少的代碼和組件,輕易維護(hù)
帶寬要求降低(代碼更簡潔),成本降低。
更輕易被搜尋引擎搜索到
改版方便,不需要變動頁面內(nèi)容
提供打印版本而不需要復(fù)制內(nèi)容
提高網(wǎng)站易用性。
帶寬要求降低(代碼更簡潔),成本降低。
更輕易被搜尋引擎搜索到
改版方便,不需要變動頁面內(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的濫用,class的濫用,結(jié)構(gòu)一塌糊涂,人們重視css比重視xhtml多了許多。
div是什么?剛開始人們的熟悉是無語義,應(yīng)用無語義的事物來布局,是正確的,既然無語義,div這三個字母就不會出現(xiàn)。(有另一說指div是部分的意思)
示例代碼 [www.hl5o.cn]
Jeffrey Zeldman的解釋是“用短語division解釋div,是最恰當(dāng)不過的了”。Div和span一樣是用作裁減分割文檔的,那么他們也就擁有語義了。Div聯(lián)合id和class屬性,提供了一個把結(jié)構(gòu)添加到文檔的通用機(jī)制。
Div將文檔分割成一塊一塊的,怎么區(qū)分這一塊塊來進(jìn)行布局呢?也就是怎么給獨(dú)有的div賦予一個唯一標(biāo)識ID,通用的div賦予一個class值,也可以在class的基礎(chǔ)上再賦一個id。假如不用id看似也可以,全部class,只要合理的命名就可以,你可以為header區(qū)域,添加class, <div class="IdHeader"> ,類IdHeader告訴你,這里是唯一的而且是header區(qū)域�?墒荌D是最能體現(xiàn)文檔結(jié)構(gòu)的一個屬性。當(dāng)你為ID不能重用而牢騷時,想想ID的強(qiáng)大功能吧!
ID的屬性有著令人難以置信的強(qiáng)大功能。ID屬性可以完成下列功能:
示例代碼 [www.hl5o.cn]
作為一個樣式表的選擇器,可以讓我們創(chuàng)建緊湊的、最小化了的XHTML頁面文件。
最為一個超文本鏈接的目標(biāo)anchor,用來替代過時的name屬性(或者向前兼容和她共存)
作為基于DOM的腳本中非凡元素的引用方法。
作為一個聲明的對象元素名字。
作為通常目的流程處理的工具(W3C的例子中:“當(dāng)從HTML頁面提取數(shù)據(jù)到一個數(shù)據(jù)庫,或者把HTML文檔轉(zhuǎn)化到另外一個格式等,這個可以用來標(biāo)明區(qū)域”)
最為一個超文本鏈接的目標(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)布局,看似是提高效率的捷徑,可是花費(fèi)的代價卻是破壞結(jié)構(gòu),(當(dāng)然也有例外,如Grids CSS),一般的做法就像土豆網(wǎng)前臺編碼的設(shè)計
示例代碼 [www.hl5o.cn]
<div class='box_abstract box_program box_border'>
這個維護(hù)帶來了很大的困難,也就是結(jié)構(gòu)設(shè)計的不夠合理,只是為了div css而不是為了web標(biāo)準(zhǔn)。
Web標(biāo)準(zhǔn)的要把握幾點:
示例代碼 [www.hl5o.cn]
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去增強(qiáng),而不是替代,網(wǎng)站的特征(舉個例子就是假如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.
使用結(jié)構(gòu)化,語義化的標(biāo)簽
使用CSS分離出(X)HTML文檔中的表現(xiàn)元素
依靠Javascript去增強(qiáng),而不是替代,網(wǎng)站的特征(舉個例子就是假如css做不了的,交給Javascript而不是替代css去做他能做的)
對于多樣式組合的結(jié)構(gòu)我一直是很反感的,可能我理解的不夠深入,體會不到他的好處,或許合理的組合可以兼顧結(jié)構(gòu)和開發(fā)效率,可是我沒有發(fā)現(xiàn),我就要抵觸。
對樣式組合方式是這樣的
示例代碼 [www.hl5o.cn]
<div class=”class1 class2 … classn”></div>
舉個布局例子
示例代碼 [www.hl5o.cn]
<div class=”f-left w400 bgfff”>
幾個類組合成一個左浮動,寬400 背景為白色的一個區(qū)域
你可能擁有一個龐類庫,頁面只需要任意的class的組合就可以完成,省去大部分花費(fèi)在css上的時間,可是帶來的是結(jié)構(gòu)的混亂,改版的困難,甚至向后兼容受到限制。這樣做和table布局沒什么兩樣,只是代碼看著好看而以,而且代碼量相差也不會太大。在應(yīng)用web標(biāo)準(zhǔn)初期,合理的table布局也是答應(yīng)的。
如此多的class讓我想起了table冗長的屬性
示例代碼 [www.hl5o.cn]
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER WIDTH=100% HEIGHT=100%>
難道辛辛勞苦就是想使用div配合css模擬出一個table很輕易實現(xiàn)的效果?而且達(dá)到和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)永遠(yuǎn)是第一位,語義化的優(yōu)勢很現(xiàn)實的體現(xiàn)出來,div的屬性規(guī)劃也體現(xiàn)著語義,而不僅僅是一個傳遞給樣式工作的接口。可以去看看ibm文檔中心的一篇“使用 microformats 分離數(shù)據(jù)與格式”了解它的工作原理。
其實說了這么多,我也有點沒頭緒了。主要就是我對結(jié)構(gòu)和開發(fā)效率之間的矛盾的一個思考,css框架怎樣才能不破環(huán)結(jié)構(gòu)的一個疑問。而且對于結(jié)構(gòu)和效率我的觀點就是“擁有合理的結(jié)構(gòu),才是你web標(biāo)準(zhǔn)化的根本動機(jī)”,web是承載信息的,沒有理由為了視覺效果,而破壞合理的結(jié)構(gòu)。
相關(guān)Web標(biāo)準(zhǔn)教程:
- Web標(biāo)準(zhǔn):需要正確的使用H1~ H6標(biāo)簽
- 五個WEB標(biāo)準(zhǔn)中必須注意的地方
- 做到結(jié)構(gòu)(XHTML),表現(xiàn)(CSS),行為(JavaScript)的分離
- CSS標(biāo)準(zhǔn):HTML標(biāo)簽元素的關(guān)閉
- Web標(biāo)準(zhǔn)之路 勿使用W3C廢棄的元素
- CSS布局 聲明文檔類型描述(DTD)
- DIV CSS\讓搜索引擎蜘蛛不再累
- 用XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)頁
- XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)站
- DIV+CSS對SEO的幫助
- 淺析什么是Web標(biāo)準(zhǔn) 及其前景
- CSSer新手寄語:開始標(biāo)準(zhǔn)之路
Web標(biāo)準(zhǔn)教程Rss訂閱Div+Css教程搜索
Web標(biāo)準(zhǔn)教程推薦
- WEB標(biāo)準(zhǔn)教程第2天:什么是名字空間
- Web標(biāo)準(zhǔn)化制作:利用CSS按比例縮小圖片
- 經(jīng)典樣式表大賽中web標(biāo)準(zhǔn)應(yīng)用存在的問題
- Browser網(wǎng)頁瀏覽器淺談
- XHTML1.0、XHTML Basic、XHTML1.1及XHTML2.0區(qū)別
- 無內(nèi)容div占據(jù)空間的觸發(fā)條件和解決方法
- CSSer新手寄語:開始標(biāo)準(zhǔn)之路
- WebDeveloper更新最新版本W(wǎng)ebDeveloper1.1.4
- 有關(guān)web標(biāo)準(zhǔn)化的一些想法
- 定義標(biāo)題的最好方法
- 相關(guān)鏈接:
- 教程說明:
Web標(biāo)準(zhǔn)教程-談XHTML結(jié)構(gòu)合理從div css開始
。