辛苦了好多天,我們努力學(xué)習使用XHTML+CSS來(lái)重新設計我們的網(wǎng)站。那么我們如何知道自己制作的頁(yè)面真的符合web標準?W3C和一些志愿者網(wǎng)站提供了在線(xiàn)校驗程序,來(lái)幫助我們檢查頁(yè)面是否符合標準,并提供了修正錯誤的幫助信息。這些校驗非常有用,是我調試頁(yè)面第一步要做的事情。
1.XHTML校驗
校驗成功,會(huì )顯示"This Page Is Valid XHTML 1.0 Transitional!",如圖:
校驗失敗,會(huì )顯示更多校驗選項和錯誤信息,如圖:
一般選擇"Show Source"和"Verbose Output"可以幫助你找到錯誤代碼所在行和錯誤原因。
XHTML校驗常見(jiàn)錯誤原因對照表
- No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--未定義DOCTYPE。
- No Character Encoding Found! Falling back to UTF-8.--未定義語(yǔ)言編碼。
- end tag for "img" omitted, but OMITTAG NO was specified--圖片標簽沒(méi)有加"/"關(guān)閉。
- an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--屬性值必須加引號。
- element "DIV" undefined---DIV標簽不能用大寫(xiě),要改成小寫(xiě)div。
- required attribute "alt" not specified---圖片需要加alt屬性。
- required attribute "type" not specified---JS或者CSS調用的標簽漏了type屬性。
其中最最常見(jiàn)的錯誤就是標簽的大小寫(xiě)問(wèn)題了。通常這些錯誤都是關(guān)聯(lián)的,比如忘記了一個(gè)</li>其他<li>標簽都會(huì )報錯,所以不要看到一堆的錯誤害怕,通常解決了一個(gè)錯誤,其他的錯誤也都 沒(méi)有了。如果你的頁(yè)面通過(guò)XHTML1.0校驗,可以在頁(yè)面上放置這么一個(gè)圖標:
代碼如下:
<p> <a ><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" /></a> </p>
2.CSS2校驗
校驗成功,會(huì )顯示"恭喜恭喜,此文檔已經(jīng)通過(guò)樣式表校驗! ",hoho,校驗信息支持中文噢。如圖:
校驗失敗,會(huì )顯示兩類(lèi)錯誤:錯誤和警告。錯誤表示一定要修正,否則無(wú)法通過(guò)校驗;警告表示有代碼不被W3C推薦,建議修改。
CSS2校驗常見(jiàn)錯誤原因對照表
- (錯誤)無(wú)效數字 : color909090 不是一個(gè) color 值 : 909090 ---十六進(jìn)制顏色值必須加"#"號,即#909090
- (錯誤)無(wú)效數字 : margin-topUnknown dimension : 6pixels ---pixels不是一個(gè)單位值,正確寫(xiě)法6px
- (錯誤)屬性 scrollbar-face-color 不存在 : #eeeeee --- 定義滾動(dòng)條顏色是非標準的屬性
- (錯誤)值 cursorhand不存在 : hand是非標準屬性值,修改為cursor:pointer
- (警告)Line : 0 font-family: 建議你指定一個(gè)種類(lèi)族科作為最后的選擇 --W3C建議字體定義的時(shí)候,最后以一個(gè)類(lèi)別的字體結束,例如"sans-serif",以保證在不同操作系統下,網(wǎng)頁(yè)字體都能被顯示。
- (警告)Line : 0 can‘t find the warning message for otherprofile --表示在代碼中有非標準屬性或值,校驗程序無(wú)法判斷和提供相應的警告信息。
同樣,通過(guò)檢驗后,可以放置一個(gè)CSS校驗通過(guò)圖標,代碼如下:
<p> <a > <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /> </a> </p>
本站僅提供存儲服務(wù),所有內容均由用戶(hù)發(fā)布,如發(fā)現有害或侵權內容,請
點(diǎn)擊舉報。