W3C XHTML 1.0 / CSS 國際標準通關秘訣

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

昨天本站(HTTP://www.tangzhehao.com.cn)從XHTML1.0有121個錯誤和CSS近10個錯誤，本人用了近兩個小時，將所有錯誤搞定。 積累技巧如下，與大家分享討論。 為了讓大家印象深刻，我們採用邊做題，邊總結的方法。

W3C XHTML 1.0 國際標準:

第一題：在 <div class=tzh>I am TZH!</div> 這段語句中有什麼錯誤？
1. 標點符號問題。 這其實也是大家最容易忽視的問題，其實就是小小的兩個引號，就造成了這個錯誤。 雖然很多瀏覽器在不加引號的情況下仍然能正確識別渲染。 但是這樣想要通過嚴格的W3C XHTML國際標準是不可能的，請大家記住等號後面一定要接引號。 正確寫法：<div class="tzh">I am TZH!</div>

第二題：在 <SPAN class="tzh">TZH is me!</SPAN> 這段語句中有什麼錯誤？
2. 大小寫注意。 這和第一個問題一樣，都是特別容易忽視的細節問題。 在W3C標準中是絕對不允許大寫的，其中我仍記得我在檢測一段javascript代碼的時候，由於為了讓自己一目了然寫出的onLoad也被判斷成了錯誤，原因就是L不能大寫。 正確寫法：<span class="tzh">TZH is me!</span>

第三題：在 <p>I am TZH!</p><br><p>TZH is me!</p> 這段語句中有什麼錯誤？
3. <br />標籤問題。 對於強制換行標籤<br />來說，很多新手都分不清它和<br>的區別，甚至在FCKeditor編輯器中有時都會時不時冒出個<br>來充當<br />。 雖然同樣很多瀏覽器都能自動糾錯，將<br>作為<br />識別。 但最好的編輯方法還是推薦大家使用Dreamweaver進行編輯，當你按下Ctrl+Enter，就會自動寫上一個<br />。 正確寫法： <p>I am TZH!</p><br /><p>TZH is me!</p>

第四題：在 <h1>~tangzhehao~hey~</h1> 這段語句中有什麼錯誤？
4. 注意標籤結束後面接的標點符號，很多標籤結束後都不能接特殊標點符號，比如這裡的"~"波浪號，但你要問，那叫我怎麼用呢？ 那就使用ISO Latin-1字元集（ISO Latin-1 Character Set），在這裡，查找到「~」波浪號相對應的字元集十進位編碼是&#126;，然後就用這個十進位編碼代替~波浪號，記住最後的分號不能丟。 在ISO Latin-1字元集中以已命名實體（Named entity）最優先，十進位編碼（Decimal code）其次，也就是說，一個符號在同時有十進位編碼和已命名實體的時候，優先選用已命名實體而不使用十進位編碼。
P.S.：ISO Latin-1字元集位址：HTTP://www.tangzhehao.com.cn/css/z_iso.html

第五題：在 <form id="54tzh"></form> 這段語句中有什麼錯誤？
5. 注意id和class特殊情況。 W3C XHTML1.0 標準中規定，在id或class中，第一個字元是不能是數位的，必須是字母。 正確寫法：<form id="tzh45"></form>

第六題：在 <img src="logo.gif"> 這段語句中有什麼錯誤？
6. <img>標籤注意。 W3C XHTML1.0 標準中規定，在<img>標籤中，必須包括alt元素。 正確寫法：<img alt="Logo" src="logo.gif">

第七題：在<script language="JavaScript"> 這段語句中有什麼錯誤？
7. <script>標籤注意。 W3C XHTML1.0 標準中規定，在<img>標籤中，必須包括type元素。 正確寫法：<script language="JavaScript" type=text/javascript>

第八題：在<div><h1>I am TZH!</div></h1> 這段語句中有什麼錯誤？
8. 注意標籤開始結束順序對應。 正確寫法：<div><h1>I am TZH!</h1></div>

9. 注意特殊套裝。 比如：<dl><dd><ul><li>等一些特殊標籤，套裝順序中缺一不可。 必須按照順序將<dl><dd><ul><li>四個標籤寫完全。 類似的還有許多。

10. 注意未打開標籤。 所謂未打開來自于W3C檢測，這類錯誤顯示的錯誤是 is not open，翻譯過來也就是未打開的意思。 如果按照中文的意思來理解就是有首無尾或者有尾無首。 通常這種錯誤出現的原因都是因為有一段代碼在修改的時候被刪除，而沒有顧及到相對較遠的結束或者開始標籤。

W3C CSS國際標準：
1. 少用偏門。 類似break-word斷行，z-index手動分層，還有像垂直對齊等等這些偏門CSS最好少用，因為不一定所有瀏覽器都支援，而且極難通過W3C檢測。
2. center不是float的值。 很多新手都會把center誤認為是float的值，而偏偏不是如此。 center只是text-align的值。
3. 對齊不能包括兩個值。 很多新手會在float或者text-align中填寫兩個值，比如：float:left top。 這是不允許的，瀏覽器也無法識別。
4. 捲軸顏色最好不要自訂。 很多瀏覽器不能正常識別自訂顏色的捲軸，況且很多自訂顏色都不能通過W3C。
5. 單獨捲軸設置。 現在經常使用overflow-x（橫向捲軸）或者overflow-y（縱向捲軸），在設置這個的時候經常會發現並不是所有的用戶端上都有效果，大家在設置的時候最好在body和html同時進行設置。 然而這個CSS也不是CSS2.1支援的（CSS2.1支援overflow，同時定義橫縱捲軸），直到CSS3才支援這種定義方式。 儘量少用。
6. background和color顏色相同會受到警告。

在最後，如果你的站通過了W3C的檢測之後，將獲得檢測通過W3C認證Logo，下圖（左圖為W3C XHTML 1.0通過，右圖為W3C CSS通過）：

暫時就是以上幾點了，大家如果覺得還有什麼可以互相交流，也可以聯繫我HTTP://www.tangzhehao.com.cn