本文章是一位網友在進行網站更新與調整時,進行W3C XHTML1.0驗證的時候的一些經驗。
總結出透過W3C XHTML1.0標準需要注意的九個問題:
一、在<div class=tzh>I am TZH!</div> 這段語句中有什麼錯誤?
標點符號問題。這其實也是大家最容易忽略的問題,其實就是小小的兩個引號,就造成了這個錯誤。雖然許多瀏覽器在不加引號的情況下仍然能正確辨識渲染。但是這樣想要通過嚴格的W3C XHTML國際標準是不可能的,請大家記住等號後面一定要接引號。正確寫法:<div class="tzh">I am TZH!</div>
二、在<SPAN class="tzh">TZH is me!</SPAN> 這段語句有什麼錯誤?
大小寫注意。這和第一個問題一樣,都是特別容易忽略的細節問題。在W3C標準中是絕對不允許大寫的,其中我仍記得我在檢測一段javascript程式碼的時候,由於為了讓自己一目了然寫出的onLoad也被判斷成了錯誤,原因就是L不能大寫。正確寫法:<span class="tzh">TZH is me!</span>
三、在<p>I am TZH!</p><br><p>TZH is me!</p> 這段語句中有什麼錯誤?
<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> 這段語句中有什麼錯誤?
注意標籤結束後面接的標點符號,很多標籤結束後都不能接特殊標點符號,例如這裡的"~"波浪號,但你要問,那叫我怎麼用呢?那就使用ISO Latin-1字符集(ISO Latin-1 Character Set),在這裡,查找到“~”波浪號相對應的字符集十進制編碼是~,然後就用這個十進制編碼代替~波浪號,記住最後的分號不能丟。在ISO Latin-1字元集中以已命名實體(Named entity)最優先,十進制編碼(Decimal code)其次,也就是說,一個符號在同時有十進制編碼和已命名實體的時候,優先選用已命名實體而不使用十進制編碼。
五、在<form id="54tzh"></form> 這段語句中有什麼錯誤?
注意id和class特殊情況。 W3C XHTML1.0 標準中規定,在id或class中,第一個字元是不能是數字的,必須是字母。正確寫法:<form id="tzh45"></form>
六、在<img src="logo.gif"> 這段語句中有什麼錯誤?
<img>標籤注意。 W3C XHTML1.0 標準中規定,在<img>標籤中,必須包含alt元素。正確寫法:<img alt="Logo" src="logo.gif">
七、在<script language="JavaScript"> 這段語句中有什麼錯誤?
<script>標籤注意。 W3C XHTML1.0 標準中規定,在<img>標籤中,必須包含type元素。正確寫法:<script language="JavaScript" type=text/javascript>
八、在<div><h1>I am TZH!</div></h1> 這段語句中有什麼錯誤?
注意標籤開始結束順序對應。正確寫法:<div><h1>I am TZH!</h1></div>
九、除了上面的之外,還需要注意哪些問題?
注意特殊套裝。例如:<dl><dd><ul><li>等一些特殊標籤,套裝順序中缺一不可。必須依照順序將<dl><dd><ul><li>四個標籤寫完全。類似的還有許多。
注意未開啟標籤。所謂未開啟來自於W3C偵測,這類錯誤顯示的錯誤是is not open,翻譯過來也就是未開啟的意思。如果按照中文的意思來理解就是有首無尾或是有尾無首。通常這種錯誤出現的原因都是因為有一段程式碼在修改的時候被刪除,而沒有顧及到相對較遠的結束或開始標籤。
總結出關於W3C CSS標準的一些經驗:
一、少用偏門。類似break-word斷行,z-index手動分層,還有像垂直對齊等等這些偏門CSS最好少用,因為不一定所有瀏覽器都支持,而且極難通過W3C檢測。
二、center不是float的值。很多新手都會把center誤認為float的值,而偏偏不是如此。 center只是text-align的值。
三、對齊不能包括兩個值。很多新手會在float或text-align中填入兩個值,例如:float:left top。這是不允許的,瀏覽器也無法辨識。
四、捲動條顏色最好不要自訂。很多瀏覽器無法正常辨識自訂顏色的捲軸,況且許多自訂顏色都不能通過W3C。
五、單獨滾動條設定。現在經常使用overflow-x(橫向滾動條)或overflow-y(縱向滾動條),在設定這個的時候經常會發現並不是所有的客戶端上都有效果,大家在設定的時候最好在body和html同時進行設定。然而這個CSS也不是CSS2.1支援的(CSS2.1支援overflow,同時定義橫縱捲軸),直到CSS3才支援這個定義方式。盡量少用。
六、background和color顏色相同會被警告。