第12天:校驗及常見錯誤_基礎教學-css教學-PHP中文網

1.XHTML校驗

2.CSS2校驗

首頁

web前端

css教學

第12天:校驗及常見錯誤_基礎教學

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 12:09 PM

辛苦了很多天，我們努力學習使用XHTML+CSS來重新設計我們的網站。那我們如何知道自己製作的頁面真的符合web標準呢？ W3C和一些志工網站提供了線上校驗程序，來幫助我們檢查頁面是否符合標準，並提供了修正錯誤的幫助資訊。這些校驗非常有用，是我調試頁面第一步要做的事情。

校驗成功，會顯示"This Page Is Valid XHTML 1.0 Transitional!",如圖：

校驗失敗，會顯示更多校驗選項和錯誤訊息，如圖：

一般選擇"Show Source"和"Verbose Output"可以幫助你找出錯誤程式碼所在行和錯誤原因。

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屬性。

其中最常見的錯誤就是標籤的大小寫問題了。通常這些錯誤都是關聯的，例如忘記了一個其他

標籤都會報錯，所以不要看到一堆的錯誤害怕，通常解決了一個錯誤，其他的錯誤也都沒有了。如果你的頁面經過XHTML1.0校驗，可以在頁面上放置這麼一個圖示：通过XHTML1.0校验

程式碼如下：

校驗成功，會顯示"恭喜恭喜，此文件已經透過樣式表校驗! ",hoho,校驗資訊支援中文噢。如圖：

校驗失敗，會顯示兩類錯誤：錯誤和警告。錯誤表示一定要修正，否則無法通過校驗；警告表示有代碼不被W3C推薦,建議修改。

(錯誤)無效數字 : 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 --表示在程式碼中有非標準屬性或值，校驗程式無法判斷並提供對應的警告訊息。

同樣，經過檢驗後，可以放置一個CSS校驗通過圖標，代碼如下：