編輯“Ajax- 使用Firefox擴(kuò)展驗(yàn)證HTML內(nèi)容”

<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>導(dǎo)航:</strong> [[Ajax學(xué)習(xí)教程#Ajax學(xué)習(xí)教程|上一頁]] | {{template:開發(fā)語言導(dǎo)航}}</span>
<div style="clear:both;"></div>

== 使用Firefox擴(kuò)展驗(yàn)證HTML內(nèi)容 ==


當(dāng)前的瀏覽器都能很好地實(shí)現(xiàn)W3C DOM標(biāo)準(zhǔn)。只要創(chuàng)建的內(nèi)容能遵循標(biāo)準(zhǔn)HTML或XHTML，就幾乎能得到所有瀏覽器的支持。 <br>

不過通常說起來簡單，做起來就不那么容易了。不同于C++或Java這樣的編譯語言，HTML沒有編譯器可以將人可讀的代碼翻譯為機(jī)器可讀的二進(jìn)制代碼，要由Web瀏覽器將人可讀的HTML或XHTML代碼解釋成DOM的內(nèi)部表示，并適當(dāng)?shù)貙⑦@個內(nèi)容展現(xiàn)在屏幕上。<br>

20世紀(jì)90年代末，瀏覽器之爭使得瀏覽器開發(fā)商（如Microsoft和Netscape）紛紛增加了一些專用的HTML標(biāo)記，以擴(kuò)大自己的市場份額。出于這個原因，再加上HTML沒有嚴(yán)格的編譯器，這就導(dǎo)致了大量非標(biāo)準(zhǔn)Web頁面的出現(xiàn)。當(dāng)前的瀏覽器盡管支持最新的W3C標(biāo)準(zhǔn)，不過也會盡可能地“通融”寫得不好的HTML頁面。根據(jù)HTML頁面的doctype（如果有的話），大多數(shù)瀏覽器都有兩種呈現(xiàn)模式：strict（嚴(yán)格）和quirks（怪異）。當(dāng)doctype指示W(wǎng)eb頁面應(yīng)遵循某個W3C推薦規(guī)約（如HTML 4.1或XHTML 1.0）編寫時(shí)，Web瀏覽器就會使用strict模式；當(dāng)沒有doctype，或者頁面與指定的doctype有很多沖突時(shí)，Web瀏覽器就使用quirks模式。<br>

作為一名開發(fā)人員，應(yīng)當(dāng)盡力創(chuàng)建遵循某種W3C標(biāo)準(zhǔn)的頁面。這么做不僅使你的Web頁面在所有現(xiàn)代Web瀏覽器上可訪問，而且由于瀏覽器可以根據(jù)HTML代碼創(chuàng)建準(zhǔn)確的DOM表示，這也能讓你的日子更好過。如果頁面寫得不好，瀏覽器可能無法創(chuàng)建DOM的準(zhǔn)確表示，就會使用quirks模式來呈現(xiàn)頁面。DOM表示不正確，就很難通過JavaScript來訪問和修改，特別是無法以跨瀏覽器的方式來訪問。<br>

由于HTML沒有嚴(yán)格的編譯器，怎么確保你寫的HTML代碼遵循W3C標(biāo)準(zhǔn)呢？幸運(yùn)的是，F(xiàn)irefox Web瀏覽器已經(jīng)有幾個擴(kuò)展，可以很容易地驗(yàn)證你的Web頁面。
<br>

== HTML Validator ==


HTML Validator[1]是一個Firefox擴(kuò)展，它能查找并標(biāo)志出HTML頁面上的錯誤。HTML Validator以Tidy為基礎(chǔ)，Tidy最初是W3C為驗(yàn)證HTML代碼開發(fā)的一個工具。HTML Validator把Tidy工具嵌入在Firefox中，這樣就能在瀏覽器中驗(yàn)證頁面的源代碼，而不必把代碼發(fā)給第三方進(jìn)行驗(yàn)證。 <br>

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

錯誤（error）：Tidy無法修正或理解的問題。<br>

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

可訪問性警告（accessibility warning）：這些HTML警告對應(yīng)W3C Web可訪問性計(jì)劃（Web Accessibility Initiative，WAI）定義的3個優(yōu)先級。<br>

[[Image:image002.jpg]]

HTML Validator在瀏覽器的右下角顯示頁面的狀態(tài)以及錯誤個數(shù)，從而能在開發(fā)周期中提供很快的反饋（見圖5-2）。<br>

如果選擇View→Page Source菜單項(xiàng)查看Web頁面的源代碼，HTML Validator還能提供更多的幫助。Firefox的view-source（查看源代碼）窗口會正常打開，不過還將啟用HTML Validator，這個窗口中包括兩個新的窗格（見圖5-3）。HTML Errors and Warnings（HTML錯誤和警告）窗格列出在頁面中找到的所有錯誤。點(diǎn)擊列表中的任何錯誤項(xiàng)，源代碼主窗口就會顯示HTML源代碼中有問題的代碼行。Help（幫助）窗格詳細(xì)描述了這個問題，并提供一些修正這個問題的建議。<br>

Firefox的view-source窗口的底部包括一個Clean up the Page（清理頁面）按鈕。點(diǎn)擊這個按鈕后將打開一個窗口，這個窗口中顯示的內(nèi)容能進(jìn)一步幫助你修正頁面上的錯誤（見圖5-4）。Clean up the Page窗口打開后，窗口的最上面有4個標(biāo)簽：Cleaned Html（清理后的HTML）、Original Html（原來的HTML）、Cleaned Browser（清理后的瀏覽器）和Original Browser（原來的瀏覽器）。<br>

[[Image:image003.jpg]]

圖5-3　當(dāng)查看頁面的源代碼時(shí)，HTML Validator會列出HTML源代碼中的錯誤，并提出修正問題的建議<br>

[[Image:image004.jpg]]

圖5-4　HTML Validator 的Cleanup the Page對話框給出了新的源代碼，這個源代碼已經(jīng)修正了在原來的源HTML代碼中發(fā)現(xiàn)的錯誤 <br>

Cleaned Html標(biāo)簽對Web開發(fā)人員最有用。這個標(biāo)簽列出了通過HTML Validator進(jìn)行修正后的頁面源代碼。HTML Validator會盡其所能自動修正頁面上的所有錯誤，修正后的輸出就列在這個標(biāo)簽下。Original Html標(biāo)簽列出了頁面原來的源代碼，也就是在HTML Validator處理之前的形式。<br>

有時(shí)，修正頁面上的HTML錯誤可能會改變?yōu)g覽器呈現(xiàn)頁面的方式，這可能是我們需要的，也可能不是我們希望的。Cleaned Browser標(biāo)簽顯示了使用HTML Validator提供的已修正源代碼后，頁面會是什么樣子，而Original Browser標(biāo)簽則顯示使用原來的源代碼時(shí)相應(yīng)的頁面。<br>

總之，HTML Validator是一個強(qiáng)大的工具，可以幫助你清理HTML，使之遵循W3C標(biāo)準(zhǔn)和推薦規(guī)約。遺憾的是，HTML Validator只能在Windows平臺上使用。好在，還有另一個與HTML Validator有類似功能的Firefox擴(kuò)展，而且在所有平臺上都可以使用。<br>


==  Checky ==


Checky[2]是另一個Firefox擴(kuò)展，可以幫助開發(fā)人員編寫更好的HTML頁面。HTML Validator在本地驗(yàn)證源代碼，與此不同，Checky則把頁面源代碼發(fā)送給不同的第三方網(wǎng)站來完成HTML驗(yàn)證。<br>

在Firefox中，右鍵點(diǎn)擊任何頁面，并選擇Checky菜單項(xiàng)（見圖5-5）就可以訪問Checky。Checky菜單項(xiàng)包含多個子菜單項(xiàng)，分別完成不同的任務(wù)。HTML/XHTML菜單項(xiàng)列出了可以提供HTML驗(yàn)證服務(wù)的多個網(wǎng)站，點(diǎn)擊此列表中的任何網(wǎng)站就會在Firefox中打開一個新的標(biāo)簽，該標(biāo)簽指向這個驗(yàn)證網(wǎng)站。Checky自動地填入進(jìn)行驗(yàn)證的頁面地址，并開始驗(yàn)證過程。<br>

[[Image:image005.jpg]]

圖5-5　可以在Firefox中通過上下文菜單來訪問Checky<br>

如圖5-6所示，要驗(yàn)證的代碼必須能夠在因特網(wǎng)上公開得到，這樣驗(yàn)證網(wǎng)站才能訪問到其HTML。<br>

[[Image:image006.jpg]]

圖5-6　通過Checky訪問，使用W3C的在線驗(yàn)證器得到的HTML驗(yàn)證結(jié)果<br>

通過Checky還可以訪問其他網(wǎng)站，這些網(wǎng)站不僅限于驗(yàn)證HTML。Links（鏈接）菜單會列出能驗(yàn)證頁面上所有鏈接的網(wǎng)站，以確保所有鏈接連接的URL都確實(shí)存在。CSS菜單列出的網(wǎng)站能驗(yàn)證頁面上使用的所有CSS文件，以確保這些CSS文件遵循標(biāo)準(zhǔn)CSS規(guī)則。<br>

你應(yīng)當(dāng)花點(diǎn)時(shí)間來測試Checky提供的驗(yàn)證網(wǎng)站。通過使用這些驗(yàn)證工具，可以使你的代碼更能與標(biāo)準(zhǔn)兼容，而且可以減少手工跟蹤問題花費(fèi)的時(shí)間。<br>
[[category:Ajax]]