第12天:校正及常見錯誤_基礎教程

來源:互聯網
上載者:User
辛苦了好多天,我們努力學習使用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屬性。

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

  • 標籤都會報錯,所以不要看到一堆的錯誤害怕,通常解決了一個錯誤,其他的錯誤也都沒有了。如果你的頁面通過XHTML1.0校正,可以在頁面上放置這麼一個表徵圖: 代碼如下:

    2.CSS2校正

    • 校正網址:http://jigsaw.w3.org/css-validator/
    • 校正方式:網址校正、檔案上傳校正、直接貼入代碼校正

    校正成功,會顯示"恭喜恭喜,此文檔已經通過樣式表校正! ",hoho,校正資訊支援中文噢。

    校正失敗,會顯示兩類錯誤:錯誤和警告。錯誤表示一定要修正,否則無法通過校正;警告表示有代碼不被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 --表示在代碼中有非標準屬性或值,校正程式無法判斷和提供相應的警告資訊。

    同樣,通過檢驗後,可以放置一個CSS校正通過表徵圖,代碼如下:

  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.