2023-09-12 分類: 網(wǎng)站建設(shè)
1、對(duì)于web標(biāo)準(zhǔn)和W3C XHTML規(guī)范的理解
按照習(xí)慣的理解,這兩個(gè)概念似乎都是指的一個(gè)東西(就是咱們?cè)谶@個(gè)版里討論的這些個(gè)"高深理論“^_^)。但我們認(rèn)為,事實(shí)上從技術(shù)的角度上講, 這兩個(gè)事物幾乎沒(méi)有任何相關(guān)性。web標(biāo)準(zhǔn)簡(jiǎn)而言之就是將頁(yè)面的結(jié)構(gòu)、表現(xiàn)和行為各自獨(dú)立實(shí)現(xiàn),更通俗的講就是如今招聘時(shí)流行的語(yǔ)言”div+css"。 但W3C XHTML的任何一個(gè)版本都沒(méi)有對(duì)web標(biāo)準(zhǔn)理念作限制。很顯然的,我們可以用xhtml 1.1寫出一個(gè)table定位的網(wǎng)頁(yè)。說(shuō)到這里,或許會(huì)認(rèn)為我們講了一堆廢話。但任何一項(xiàng)技術(shù),只有當(dāng)你對(duì)基礎(chǔ)概念有足夠清晰的認(rèn)識(shí)的時(shí)候,你才會(huì)正確的使 用它。我們從下面兩個(gè)方面,來(lái)談?wù)勅缃馱eb標(biāo)準(zhǔn)應(yīng)用走向的兩個(gè)歧途:
第一種情況很簡(jiǎn)單。自以為只要使用了XHTML+CSS就是Web標(biāo)準(zhǔn)了。頁(yè)面里面遍地是class和id。肆意的為每個(gè)細(xì)節(jié)都單獨(dú)定義 class。這樣的頁(yè)面和傳統(tǒng)的html的區(qū)別就是img標(biāo)簽里多了個(gè)"/"。事實(shí)上這樣子還不如回到傳統(tǒng)的html,至少我們可以輕松的使用font,而 不用總是跟查字典一樣去查樣式表。另一種更隱蔽的隨意使用CSS的我們?cè)谝院笾v。
第二種情況我們覺(jué)得比較難理解一些,即試圖用各種紛繁復(fù)雜的div嵌套和css語(yǔ)句來(lái)實(shí)現(xiàn)你所想要的表現(xiàn)。很簡(jiǎn)單的一個(gè)例子就在我們剛看到的一個(gè)帖
子"
不用切圖的頁(yè)面圓角"。首先我們想肯定的是這個(gè)創(chuàng)意確實(shí)很不錯(cuò),使用CSS功能將圓角“畫”出來(lái)。為此,設(shè)計(jì)者必須在相應(yīng)的位置加上一大段如下的代碼:
但是,這里嚴(yán)重違反了Web標(biāo)準(zhǔn)的基本概念——結(jié)構(gòu)與表現(xiàn)要分離。因?yàn)樗鼘⒂糜诳刂凭W(wǎng)頁(yè)表現(xiàn)的代碼放在結(jié)構(gòu)文檔中了。或許你會(huì)說(shuō)它事實(shí)上還是將 真正的表現(xiàn)代碼放在CSS里的。但我們認(rèn)為這是一個(gè)偷換概念。因?yàn)橐陨线@些b標(biāo)簽跟網(wǎng)頁(yè)結(jié)構(gòu)無(wú)關(guān),它們都是一些空標(biāo)簽。也就是說(shuō),它的存在并不是為了將某些 內(nèi)容放在文檔結(jié)構(gòu)需要的位置。因此它們對(duì)于文檔結(jié)構(gòu)來(lái)說(shuō)只是一些廢代碼。
另外一個(gè)例子可能更加隱蔽。之前我們有在alistapart.com上看到過(guò)如何實(shí)現(xiàn)網(wǎng)頁(yè)三通欄的文章,其原理大概就是使用三四個(gè)div相互嵌 套。我們認(rèn)為這也是一個(gè)違反Web標(biāo)準(zhǔn)思想的做法。因?yàn)檫@些div標(biāo)簽在代碼中擺放的次序已經(jīng)不單純是為了結(jié)構(gòu)的需要,而是用于網(wǎng)頁(yè)的表現(xiàn)。
當(dāng)然,我們承認(rèn),以上的觀點(diǎn)在一定程度是鉆牛角尖(但反過(guò)來(lái)說(shuō),非要實(shí)現(xiàn)非圖片圓角不也是在鉆牛角尖么,呵呵)。有些時(shí)候結(jié)構(gòu)和表現(xiàn)并不是那么輕 易的就能分開(kāi)的,我們?yōu)榱藢?shí)現(xiàn)一些豐富的表現(xiàn)不得不讓結(jié)構(gòu)去遷就(想想
最后,我們想聲明的是,我們并不是"非圖片圓角"是無(wú)意義或是錯(cuò)誤的。我們也很佩服作者的聰明和靈感。我們覺(jué)得這樣的技術(shù)研究就如同以前用CSS畫國(guó)旗 一樣,對(duì)CSS技術(shù)的熟練掌握很有幫助。但是,它的用途也應(yīng)該僅和CSS國(guó)旗一樣局限,不應(yīng)該在實(shí)際應(yīng)用中采納。因?yàn)樗`反Web標(biāo)準(zhǔn)的基本原則。
2、HTML標(biāo)簽的語(yǔ)義
如今Web標(biāo)準(zhǔn)都被通俗的叫做“div+css”或者“層布局”。我們不反對(duì)這種便宜行事的叫法。但是這樣會(huì)陷入一個(gè)誤區(qū):即大量的使用div標(biāo)簽作為結(jié)構(gòu)元素。事實(shí)上這是一種更高級(jí)的div濫用(Jeffrey Zeldman在《網(wǎng)站重構(gòu)》一書(shū)中提到)。
HTML為我們提供了相當(dāng)豐富的標(biāo)簽,每個(gè)標(biāo)簽都有它各自的含義。我們認(rèn)為在設(shè)計(jì)時(shí),除了遵循HTML語(yǔ)法以外,應(yīng)該充分利用并遵守各標(biāo)簽的“語(yǔ) 義”。如標(biāo)題文字應(yīng)該包含在h1-h6中,大段的文字內(nèi)容應(yīng)該由
進(jìn)行分段而不是
,列表項(xiàng)應(yīng)該放在ul或ol或dl中,表格形式的數(shù)據(jù)應(yīng)該仍然用table布局。
為什么要這樣做?一個(gè)很有說(shuō)服力的原因是,保證在用戶去掉CSS顯示的情況下,網(wǎng)頁(yè)能夠盡量有效的將內(nèi)容的結(jié)構(gòu)層次顯示出來(lái)。如果全部用div,當(dāng)去掉CSS之后,整個(gè)網(wǎng)頁(yè)就失去了層次,只剩下一些雜亂的文字碎片。這并不符合Web標(biāo)準(zhǔn)對(duì)低配置兼容性的要求。
我們下面詳細(xì)的列舉一下我們對(duì)一些標(biāo)簽的語(yǔ)義的理解:
p br
先說(shuō)個(gè)最簡(jiǎn)單的。分段要用p標(biāo)簽而不是用br(甚至連續(xù)兩個(gè)
)。這個(gè)似乎不用多說(shuō)。但是有時(shí)候我們不得不放棄這個(gè)原則。一個(gè)常見(jiàn)的例子是論壇發(fā)帖,如果我們想分段,便打回車。而如此傳輸?shù)胶笈_(tái)并顯示出來(lái)
的,顯然就是用
分段的。
table th
由于大力宣揚(yáng)div+css的結(jié)果,似乎現(xiàn)在誰(shuí)用table布局誰(shuí)就是未開(kāi)化的土著。但我們認(rèn)為這種觀點(diǎn)是不正確的。table的含義是表格,因 此凡是應(yīng)該以表格形式出現(xiàn)的數(shù)據(jù),仍然應(yīng)該用table布局。簡(jiǎn)單的例子是班級(jí)同學(xué)的花名冊(cè),包括姓名學(xué)號(hào)性別等等,這明顯是一個(gè)表格形式的數(shù)據(jù),因此應(yīng) 該用table布局。另一個(gè)比較值得探討的例子是,blog里面的日歷導(dǎo)航。我們?cè)?jīng)有見(jiàn)過(guò)一個(gè)blog程序,它的日歷導(dǎo)航里的各個(gè)日期,從1號(hào)到30號(hào)全 用div套好,再使用float:left樣式7個(gè)一排的排出當(dāng)月的日歷。當(dāng)我們?nèi)∠麨g覽器的CSS顯示之后,日歷的那部分則從1號(hào)到30號(hào)一豎排下來(lái)。我們 認(rèn)為這是不對(duì)的。因?yàn)槿諝v應(yīng)該是一個(gè)表格形式的數(shù)據(jù),因此仍然應(yīng)該用table布局。當(dāng)取消css之后,應(yīng)該仍然按照一排7個(gè)的樣子歸成一個(gè)表格。
th則是另一個(gè)會(huì)被忽視的標(biāo)簽。由于CSS的萬(wàn)能,所有的表格單元都可以用td加一個(gè)class屬性搞定。但是從語(yǔ)義上講,一些表格單元應(yīng)該用 th標(biāo)簽。比如上文說(shuō)到的日歷表格,里面的“MON TUE /WED... SUN”這些標(biāo)識(shí)星期的單元,就應(yīng)該用th而不是td。
本文標(biāo)題:Web標(biāo)準(zhǔn)網(wǎng)站建設(shè)的一些思考
分享路徑:http://www.rwnh.cn/news44/282694.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供移動(dòng)網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站排名、自適應(yīng)網(wǎng)站、軟件開(kāi)發(fā)、搜索引擎優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容