標準化你的網頁_CSS/HTML

Web標準是越來越突出了，現在建站都講究個符合標準，透過W3C的XHTML和CSS驗證，那麼怎麼才能做出一個符合標準的站點呢，下面是我在BLOG重構和製作OSdev Resource過程中的一些經驗^_^。

去網頁設計師看一些關於Web標準方面的文章

雖然w3.org比較權威，但對於母語是中文的我們來說，這個比較容易看懂：）個人覺得比去w3.org看那些滿屏的E文舒服。可以在這裡找到很多有關XTHML，DIV+CSS佈局，CSS技巧等的文章。還有站長阿捷寫的《循序漸進》的教程，介紹了怎麼一步一步來製作一個符合標準的網站。

丟掉table，採用div+css佈局

這似乎是設計一個符合標準的網頁首先應該做到的了：），DIV+CSS佈局也是一種趨勢。用DIV+CSS版面可以參考w3cn.org的文章：CSS基本版面16例，典型的三行二列居中高度自適應版面。

關閉標籤

在以前，可能我們並不注意關閉標籤這個問題，例如img，p等，在用這些標籤時往往只用了開頭，而沒有正確的關閉它。通常情況，我們是這樣用img的：

但是在XHTML中，不允許這樣的情況存在，而是應該關閉它：

再者如段落標記

，以前用它都是直接一個

，而沒有想過在段落結束時加上

，這在XHTML也是不允許的。

正確巢狀標籤

瀏覽器的容錯性使得我們在寫了一個不符合規則的網頁也能得到正確的顯示效果，如用

sample

並沒有什麼問題，同樣的，這在XHTML中是不被允許的。 XHTML從XML而來，而XML必須具有結構性，所以嵌套標籤時，必須一層一層嵌套，而不能交錯。

正確設定字元集

似乎沒有什麼大關係，但設定好字元集更有利於瀏覽器對文件的解析。

圖片的對齊

在XHTML中，align屬性只能是left、middle、right或top、middle、bottom這三個值中的一個，而很多時候我們需要圖片與文字絕對中間對齊，也就是用absmiddle。使用XHTML之後，就要丟掉這個屬性了，解決方法？我也不知道，不過網頁設計師裡有文章有提到這個問題，我在BLOG重構時，把圖片對齊一律設為top，顯示效果也還過得去。

處理連結中的&

動態網站中在用GET方法傳參時，如果有多個參數，就會用到&來連接各個參數，但在XHTML中如果有&就意味之後是一個實體，但是應該沒有人會把參數名取nbsp、lt、gt這樣的吧。在XHTML中規定所有不是實體的&必須轉換成&，如果不進行轉換的話，在進行W3C校驗時就會報錯找不到實體。

其實個人感覺按照標準來製作網站比按傳統方式來製作網站輕鬆很多，因為結構與內容分離，在改變顯示效果時不需要整個頁面重新做過，只需要在CSS中重寫樣式就行了。而且方便以後改版什麼的，再者如Fdream的FBS，無刷新換膚，不錯的東東～～