我們使用XHTML+CSS來重新設計我們的網站,如何知道自己製作的頁面真的符合web標準?W3C和一些志願者網站提供了在線校驗程序,來幫助我們檢查頁面是否符合標準,並提供了修正錯誤的幫助訊息。這些校驗非常有用,是我調試頁面第一步要做的事情。
1.XHTML校驗
校驗網址:http://validator.w3.org/
校驗方式:網址校驗、檔案上傳校驗
校驗成功,會顯示"This Page Is Valid XHTML 1.0 Transitional!"。
校驗失敗,會顯示更多校驗選項和錯誤訊息。
一般選擇"Show Source"和"Verbose Output"可以幫助你找到錯誤代碼所在行和錯誤原因。
XHTML校驗常見錯誤原因對照表
No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--未定義DOCTYPE。
No Character Encoding Found! Falling back to UTF-8.--未定義語言編碼。
end tag for "img" omitted, but OMITTAG NO was specified--圖片標籤沒有加"/"關閉。
an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--屬性值必須加引號。
element "DIV" undefined---DIV標籤不能用大寫,要改成小寫div。
required attribute "alt" not specified---圖片需要加alt屬性。
required attribute "type" not specified---JS或CSS呼叫的標籤漏了type屬性。
其中最常見的錯誤就是標籤的大小寫問題了。通常這些錯誤都是關聯的,例如忘了一個其他
2.CSS2校驗
校驗網址:http://jigsaw.w3.org/css-validator/
校驗方式:網址校驗、檔案上傳校驗、直接貼入程式碼校驗
校驗成功,會顯示"恭喜恭喜,此文件已經通過樣式表校驗! "。
校驗失敗,會顯示兩類錯誤:錯誤和警告。錯誤表示一定要修正,否則無法通過校驗;警告表示有代碼不被W3C推薦,建議修改。
CSS2校驗常見錯誤原因對照表
(錯誤)無效數字: color909090 不是一個color 值: 909090 ---十六進位顏色值必須加"#"號,即#909090
(錯誤)無效數字: margin-topUnknown dimension : 6pixels ---pixels不是一個單位值,正確寫法6px
(錯誤)屬性 scrollbar-face-color 不存在: #eeeeee --- 定義捲軸顏色是非標準的屬性
(錯誤)值cursorhand不存在: hand是非標準屬性值,修改為cursor:pointer
(警告)Line : 0 font-family: 建議你指定一個種類族科作為最後的選擇--W3C建議字體定義的時候,最後以一個類別的字體結束,例如"sans-serif",以保證在不同操作系統下,網頁字體都能被顯示。
(警告)Line : 0 can't find the warning message for otherprofile --表示在程式碼中有非標準屬性或值,校驗程式無法判斷和提供對應的警告訊息。
本文連結網址: http://www.williamlong.info/archives/166.html