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

導(dǎo)航: 上一頁 | ASP | PHP | JSP | HTML | CSS | XHTML | aJAX | Ruby | JAVA | XML | Python | ColdFusion

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

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

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

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

作為一名開發(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)確表示，就會(huì)使用quirks模式來呈現(xiàn)頁面。DOM表示不正確，就很難通過JavaScript來訪問和修改，特別是無法以跨瀏覽器的方式來訪問。

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

HTML Validator

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

Tidy會(huì)查找HTML錯(cuò)誤，并把這些錯(cuò)誤歸為3類：

錯(cuò)誤（error）：Tidy無法修正或理解的問題。

警告（warning）：Tidy可以自動(dòng)修正的錯(cuò)誤。

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

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

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

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

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

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

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

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

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

Checky

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

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

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

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

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

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

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