Web頁工具 - 使用Firefox擴充驗證HTML内容

使用Firefox擴充驗證HTML内容

　　目前的浏覽器都能很好地實作W3C DOM标準。隻要建立的内容能遵循标準HTML或XHTML，就幾乎能得到所有浏覽器的支援。

　　不過通常說起來簡單，做起來就不那麼容易了。不同于C++或Java這樣的編譯語言，HTML沒有編譯器可以将人可讀的代碼翻譯為機器可讀的二進制代碼，要由Web浏覽器将人可讀的HTML或XHTML代碼解釋成DOM的内部表示，并适當地将這個内容展現在螢幕上。

　　20世紀90年代末，浏覽器之争使得浏覽器開發商（如Microsoft和Netscape）紛紛增加了一些專用的HTML标記，以擴大自己的市場佔有率。出于這個原因，再加上HTML沒有嚴格的編譯器，這就導緻了大量非标準Web頁面的出現。目前的浏覽器盡管支援最新的W3C标準，不過也會盡可能地“通融”寫得不好的HTML頁面。根據HTML頁面的doctype（如果有的話），大多數浏覽器都有兩種呈現模式：strict（嚴格）和quirks（怪異）。當doctype訓示Web頁面應遵循某個W3C推薦規約（如HTML 4.1或XHTML 1.0）編寫時，Web浏覽器就會使用strict模式；當沒有doctype，或者頁面與指定的doctype有很多沖突時，Web浏覽器就使用quirks模式。

　　作為一名開發人員，應當盡力建立遵循某種W3C标準的頁面。這麼做不僅使你的Web頁面在所有現代Web浏覽器上可通路，而且由于浏覽器可以根據HTML代碼建立準确的DOM表示，這也能讓你的日子更好過。如果頁面寫得不好，浏覽器可能無法建立DOM的準确表示，就會使用quirks模式來呈現頁面。DOM表示不正确，就很難通過JavaScript來通路和修改，特别是無法以跨浏覽器的方式來通路。

　　由于HTML沒有嚴格的編譯器，怎麼確定你寫的HTML代碼遵循W3C标準呢？幸運的是，Firefox Web浏覽器已經有幾個擴充，可以很容易地驗證你的Web頁面。

　　5.2.1　HTML Validator

　　HTML Validator[1]是一個Firefox擴充，它能查找并标志出HTML頁面上的錯誤。HTML Validator以Tidy為基礎，Tidy最初是W3C為驗證HTML代碼開發的一個工具。HTML Validator把Tidy工具嵌入在Firefox中，這樣就能在浏覽器中驗證頁面的源代碼，而不必把代碼發給第三方進行驗證。

　　Tidy會查找HTML錯誤，并把這些錯誤歸為3類：

　　l　　錯誤（error）：Tidy無法修正或了解的問題。

　　l　　警告（warning）：Tidy可以自動修正的錯誤。

　　l　　可通路性警告（accessibility warning）：這些HTML警告對應W3C Web可通路性計劃（Web Accessibility Initiative，WAI）定義的3個優先級。

HTML Validator在浏覽器的右下角顯示頁面的狀态以及錯誤個數，進而能在開發周期中提供很快的回報（見圖5-2）。

　　如果選擇View→Page Source菜單項檢視Web頁面的源代碼，HTML Validator還能提供更多的幫助。Firefox的view-source（檢視源代碼）視窗會正常打開，不過還将啟用HTML Validator，這個視窗中包括兩個新的窗格（見圖5-3）。HTML Errors and Warnings（HTML錯誤和警告）窗格列出在頁面中找到的所有錯誤。點選清單中的任何錯誤項，源代碼主視窗就會顯示HTML源代碼中有問題的代碼行。Help（幫助）窗格較長的描述了這個問題，并提供一些修正這個問題的建議。

　　Firefox的view-source視窗的底部包括一個Clean up the Page（清理頁面）按鈕。點選這個按鈕後将打開一個視窗，這個視窗中顯示的内容能進一步幫助你修正頁面上的錯誤（見圖5-4）。Clean up the Page視窗打開後，視窗的最上面有4個标簽：Cleaned Html（清理後的HTML）、Original Html（原來的HTML）、Cleaned Browser（清理後的浏覽器）和Original Browser（原來的浏覽器）。

　　圖5-3　當檢視頁面的源代碼時，HTML Validator會列出HTML源代碼中的錯誤，并提出修正問題的建議

　　圖5-4　HTML Validator 的Cleanup the Page對話框給出了新的源代碼，這個源代碼已經修正了在原來的源HTML代碼中發現的錯誤

　　Cleaned Html标簽對Web開發人員最有用。這個标簽列出了通過HTML Validator進行修正後的頁面源代碼。HTML Validator會盡其所能自動修正頁面上的所有錯誤，修正後的輸出就列在這個标簽下。Original Html标簽列出了頁面原來的源代碼，也就是在HTML Validator處理之前的形式。

　　有時，修正頁面上的HTML錯誤可能會改變浏覽器呈現頁面的方式，這可能是我們需要的，也可能不是我們希望的。Cleaned Browser标簽顯示了使用HTML Validator提供的已修正源代碼後，頁面會是什麼樣子，而Original Browser标簽則顯示使用原來的源代碼時相應的頁面。

　　總之，HTML Validator是一個強大的工具，可以幫助你清理HTML，使之遵循W3C标準和推薦規約。遺憾的是，HTML Validator隻能在Windows平台上使用。好在，還有另一個與HTML Validator有類似功能的Firefox擴充，而且在所有平台上都可以使用。

　　5.2.2　Checky

　　Checky[2]是另一個Firefox擴充，可以幫助開發人員編寫更好的HTML頁面。HTML Validator在本地驗證源代碼，與此不同，Checky則把頁面源代碼發送給不同的第三方網站來完成HTML驗證。

　　在Firefox中，右鍵點選任何頁面，并選擇Checky菜單項（見圖5-5）就可以通路Checky。Checky菜單項包含多個子菜單項，分别完成不同的任務。HTML/XHTML菜單項列出了可以提供HTML驗證服務的多個網站，點選此清單中的任何網站就會在Firefox中打開一個新的标簽，該标簽指向這個驗證網站。Checky自動地填入進行驗證的頁面位址，并開始驗證過程。

　　圖5-5　可以在Firefox中通過上下文菜單來通路Checky

　　如圖5-6所示，要驗證的代碼必須能夠在網際網路上公開得到，這樣驗證網站才能通路到其HTML。

　　圖5-6　通過Checky通路，使用W3C的線上驗證器得到的HTML驗證結果

　　通過Checky還可以通路其他網站，這些網站不僅限于驗證HTML。Links（連結）菜單會列出能驗證頁面上所有連結的網站，以確定所有連結連接配接的URL都确實存在。CSS菜單列出的網站能驗證頁面上使用的所有CSS檔案，以確定這些CSS檔案遵循标準CSS規則。

　　你應當花點時間來測試Checky提供的驗證網站。通過使用這些驗證工具，可以使你的代碼更能與标準相容，而且可以減少手工跟蹤問題花費的時間。