標(biāo)準(zhǔn)化你的網(wǎng)頁(yè)
Web標(biāo)準(zhǔn)是越來(lái)越突出了,現(xiàn)在建站都講究個(gè)符合標(biāo)準(zhǔn),通過(guò)W3C的XHTML和CSS驗(yàn)證,那么怎樣才能做出一個(gè)符合標(biāo)準(zhǔn)的站點(diǎn)呢,下面是我在BLOG重構(gòu)和制作OSdev Resource過(guò)程中的一些經(jīng)驗(yàn)^_^。
去網(wǎng)頁(yè)設(shè)計(jì)師看一些有關(guān)Web標(biāo)準(zhǔn)方面的文章
雖然w3.org更權(quán)威,但對(duì)于母語(yǔ)是中文的我們來(lái)說(shuō),這個(gè)更容易看懂:)個(gè)人覺(jué)得比去w3.org看那些滿(mǎn)屏的E文舒服??梢栽谶@里找到很多有關(guān)XTHML,DIV+CSS布局,CSS技巧等的文章。還有站長(zhǎng)阿捷寫(xiě)的《循序漸進(jìn)》的教程,介紹了怎么一步一步來(lái)制作一個(gè)符合標(biāo)準(zhǔn)的網(wǎng)站。
丟掉table,采用div+css布局
這似乎是設(shè)計(jì)一個(gè)符合標(biāo)準(zhǔn)的網(wǎng)頁(yè)首先應(yīng)該做到的了:),DIV+CSS布局也是一種趨勢(shì)。用DIV+CSS布局可以參考w3cn.org的文章:CSS基本布局16例,典型的三行二列居中高度自適應(yīng)布局。
關(guān)閉標(biāo)簽
在以前,可能我們并不注意關(guān)閉標(biāo)簽這個(gè)問(wèn)題,例如img,p等,在用這些標(biāo)簽時(shí)往往只用了開(kāi)頭,而沒(méi)有正確的關(guān)閉它。通常情況,我們是這樣用img的:
<img src="sample.gif">
但是在XHTML中,不允許這樣的情況存在,而是應(yīng)該關(guān)閉它:
<img src="sample.gif" />
再者如段落標(biāo)記<p>,以前用它都是直接一個(gè)<p>,而沒(méi)有想過(guò)在段落結(jié)束時(shí)加上</p>,這在XHTML也是不允許的。
正確嵌套標(biāo)簽
瀏覽器的容錯(cuò)性使得我們?cè)诰帉?xiě)了一個(gè)不符合規(guī)則的網(wǎng)頁(yè)也能得到正確的顯示效果,如用
<p><b>sample</p><b>
并沒(méi)有什么問(wèn)題,同樣的,這在XHTML中是不被允許的。XHTML從XML而來(lái),而XML必須具有結(jié)構(gòu)性,所以嵌套標(biāo)簽時(shí),必須一層一層嵌套,而不能交錯(cuò)。
正確設(shè)置字符集
似乎沒(méi)有什么大關(guān)系,但設(shè)置好字符集更有利于瀏覽器對(duì)文檔的解析。
圖片的對(duì)齊
在XHTML中,align屬性只能是left、middle、right或者top、middle、bottom這三個(gè)值中的一個(gè),而很多時(shí)候我們需要圖片與文本絕對(duì)中間對(duì)齊,即用absmiddle。使用XHTML之后,就要丟掉這個(gè)屬性了,解決方法?我也不知道,不過(guò)網(wǎng)頁(yè)設(shè)計(jì)師里有文章有提到這個(gè)問(wèn)題,我在BLOG重構(gòu)時(shí),把圖片對(duì)齊一律設(shè)為top,顯示效果也還過(guò)得去。
處理鏈接中的&
動(dòng)態(tài)網(wǎng)站中在用GET方法傳參時(shí),如果有多個(gè)參數(shù),就會(huì)用到&來(lái)連接各個(gè)參數(shù),但在XHTML中如果有&就意味之后是一個(gè)實(shí)體,但是應(yīng)該沒(méi)有人會(huì)把參數(shù)名取nbsp、lt、gt這樣的吧。在XHTML中規(guī)定所有不是實(shí)體的&必須轉(zhuǎn)換成&,如果不進(jìn)行轉(zhuǎn)換的話,在進(jìn)行W3C校驗(yàn)時(shí)就會(huì)報(bào)錯(cuò)找不到實(shí)體。
其實(shí)個(gè)人感覺(jué)按照標(biāo)準(zhǔn)來(lái)制作網(wǎng)站比按傳統(tǒng)方式來(lái)制作網(wǎng)站輕松很多,因?yàn)榻Y(jié)構(gòu)與內(nèi)容分離,在改變顯示效果時(shí)不需要整個(gè)頁(yè)面重新做過(guò),只需要在CSS中重寫(xiě)樣式就行了。而且方便以后改版什么的,再者如Fdream的FBS,無(wú)刷新?lián)Q膚,不錯(cuò)的東東~~
相關(guān)文章
HTML相關(guān)知識(shí)點(diǎn)總結(jié)
本文詳細(xì)總結(jié)了HTML的相關(guān)知識(shí)點(diǎn),有助于大家初步的學(xué)習(xí)或之后的復(fù)習(xí),感興趣的小伙伴一起來(lái)看看吧,可以參考一下2021-08-08
HTML-Canvas的優(yōu)越性能以及實(shí)際應(yīng)用
本文主要講解HTML中Canvas的優(yōu)越性能以及其實(shí)際應(yīng)用,文中運(yùn)用圖片和文字詳細(xì)解釋?zhuān)兄诖蠹业膶W(xué)習(xí)與工作,感興趣的小伙伴可以參考一下2021-08-08
關(guān)于在HTML網(wǎng)頁(yè)制作中如何添加背景圖片
這篇文章主要介紹了關(guān)于在網(wǎng)頁(yè)制作中如何添加背景圖片,我們通常使用background來(lái)添加網(wǎng)頁(yè)的背景圖,需要的朋友可以參考下2023-04-04

