[toc] # 簡述 HTML 優(yōu)雅明了，但要是出了錯(cuò)，你會(huì)不會(huì)一頭霧水呢，本節(jié)將介紹一些查找和修復(fù) HTML 錯(cuò)誤的工具。 # 調(diào)試并不可怕 寫代碼通常都是按部就班的，但是一旦犯了錯(cuò)，可怕的代碼問題就出現(xiàn)了：或徹底罷工，或得不到正確結(jié)果。比如，以下窗口顯示了：用 [Rust](https://www.rust-lang.org/) 編寫的一個(gè)小程序在[編譯](https://developer.mozilla.org/zh-CN/docs/Glossary/%E7%BC%96%E8%AF%91)時(shí)得到的出錯(cuò)信息：  這里錯(cuò)誤信息比較容易理解："unterminated double quote string"，即"雙引號字符串未閉合"。錯(cuò)誤列表中可以看到 println!(Hello, world!"); 這里少一個(gè)雙引號，然而當(dāng)程序規(guī)模變大時(shí)，錯(cuò)誤信息也會(huì)變得更復(fù)雜和更難解釋，同時(shí)對于 Rust 新手而言，上述提示也是找不到北。 調(diào)試其實(shí)沒有那么可怕，寫代碼和調(diào)試的關(guān)鍵其實(shí)是：熟悉語言本身和相關(guān)工具。 # HTML 和調(diào)試 HTML 并不像 Rust 那么難以理解，瀏覽器并不會(huì)將 HTML 編譯成其它形式，而是直接解析并顯示結(jié)果（稱之為解釋，而非編譯）?？梢哉f HTML 的 元素 語法比 Rust、JavaScript 或 Python 這樣“真正的編程語言”更容易理解。瀏覽器解析 HTML 的過程比編程語言的編譯運(yùn)行的過程要寬松得多，但這是一把雙刃劍。 ## 寬松的代碼 寬松是什么意思呢？通常寫錯(cuò)代碼會(huì)帶來以下兩種主要類型的錯(cuò)誤： * 語法錯(cuò)誤：由于拼寫錯(cuò)誤導(dǎo)致程序無法運(yùn)行，就像上面的 Rust 示例。通常熟悉語法并理解錯(cuò)誤信息后很容易修復(fù)。 * 邏輯錯(cuò)誤：不存在語法錯(cuò)誤，但代碼無法按預(yù)期運(yùn)行。通常邏輯錯(cuò)誤比語法錯(cuò)誤更難修復(fù)，因?yàn)闊o法得到指向錯(cuò)誤源頭的信息。 HTML 本身不容易出現(xiàn)語法錯(cuò)誤，因?yàn)闉g覽器是以寬松模式運(yùn)行的，這意味著即使出現(xiàn)語法錯(cuò)誤瀏覽器依然會(huì)繼續(xù)運(yùn)行。瀏覽器通常都有內(nèi)建規(guī)則來解析書寫錯(cuò)誤的標(biāo)記，所以即使與預(yù)期不符，頁面仍可顯示出來。當(dāng)然，是存在隱患的。 **注：** ``` HTML 之所以以寬松的方式進(jìn)行解析，是因?yàn)?Web 創(chuàng)建的初心就是：人人可發(fā)布內(nèi)容，不去糾結(jié)代碼語法。如果 Web 以嚴(yán)格的風(fēng)格起步，也許就不會(huì)像今天這樣流行了。 ``` ##主動(dòng)學(xué)習(xí)：研究寬容的代碼風(fēng)格 現(xiàn)在來研究 HTML 代碼的寬松特性。 * 首先，下載并保存 debug-example.html。代碼中故意留了一些錯(cuò)誤，以便探究（這里的 HTML 標(biāo)記寫成了 糟糕的格式，與 良好的格式 相反）。 * 下一步，在瀏覽器中打開，可以看到：  * 看起來糟透了，我們到源代碼中尋找原因（只列出 body 部分）： ``` <h1>HTML 調(diào)試示例</h1> <p>什么使得 HTML 出錯(cuò)？ <ul> <li>未閉合的元素：如果元素<strong>沒有正確的結(jié)束標(biāo)記，那么將影響下方整個(gè)區(qū)域，這不是你期望的。 <li>錯(cuò)誤嵌套元素：正確進(jìn)行嵌套是一項(xiàng)重要的編碼習(xí)慣。<strong>重點(diǎn)（strong）<em>重點(diǎn)強(qiáng)調(diào)（strongly emphasised）？</strong>這又是什么鬼？</em> <li>未閉合的屬性：另一種 HTML 常見錯(cuò)誤。來看一個(gè)示例：<a href="https://www.mozilla.org/>Mozilla 主頁鏈接</a> </ul> ``` * 以下是問題清單： ``` 1.段落（Paragraph） 和 列表項(xiàng)（list item） 元素沒有結(jié)束標(biāo)簽。但是由于元素的結(jié)束和另一個(gè)的開始很容易推斷出來，因此上圖中并沒有太嚴(yán)重的渲染錯(cuò)誤。 2.第一個(gè) <strong> 元素沒有結(jié)束標(biāo)簽。這就嚴(yán)重了，因?yàn)樵撛亟Y(jié)束的位置難以確定。事實(shí)上所有剩余文本都加粗了。 3.一下嵌套有問題：<strong>重點(diǎn)（strong）<em>重點(diǎn)強(qiáng)調(diào)（strongly emphasised）？</strong>這又是什么鬼？</em>????。瀏覽器很難做出正確解釋，理由同上。 4.href 屬性缺少了一個(gè)雙引號。從而導(dǎo)致了一個(gè)最嚴(yán)重的問題：整個(gè)鏈接完全沒有渲染出來。 ``` * 下面暫時(shí)忽略源代碼中的標(biāo)記，先看一下瀏覽器渲染出的標(biāo)記。打開瀏覽器的開發(fā)者工具。如果不太熟悉，請先閱讀 瀏覽器開發(fā)工具概覽。 * 在 DOM 查看器中可以看到渲染的標(biāo)記：  * 通過 DOM 查看器可以清楚地看到，瀏覽器已經(jīng)嘗試修補(bǔ)代碼錯(cuò)誤（我們嘗試了 Firefox，其他現(xiàn)代瀏覽器也應(yīng)給出同樣結(jié)果）： 段落和列表元素加上了關(guān)閉標(biāo)簽 第一個(gè) <strong> 沒有明確的關(guān)閉標(biāo)簽，因此瀏覽器為之后所有獨(dú)立塊都補(bǔ)全了 <strong></strong>。 瀏覽器是這樣修補(bǔ)嵌套錯(cuò)誤的： ``` <strong>重點(diǎn)（strong） <em>重點(diǎn)強(qiáng)調(diào)（strongly emphasised）？</em> </strong> <em>這又是什么鬼？</em> ``` 刪除整個(gè)缺少雙引號的鏈接。最后一個(gè)列表項(xiàng)就成了： ``` <li> <strong>未閉合的屬性：另一種 HTML 常見錯(cuò)誤。來看一個(gè)示例：</strong> </li> ``` # HTML 驗(yàn)證 閱讀以上示例后，你發(fā)現(xiàn)保持良好 HTML 格式的重要性。那么應(yīng)該如何做呢？以上示例規(guī)模較小，查找錯(cuò)誤還不難，但是一個(gè)非常龐大、復(fù)雜的 HTML 文檔呢？ 最好的方法就是讓你的HTML頁面通過 Markup Validation Service。由 W3C（制定 HTML、CSS 和其他網(wǎng)絡(luò)技術(shù)標(biāo)準(zhǔn)的組織） 創(chuàng)立并維護(hù)的標(biāo)記驗(yàn)證服務(wù)。把一個(gè) HTML 文檔加載至本網(wǎng)頁并運(yùn)行 ，網(wǎng)頁會(huì)返回一個(gè)錯(cuò)誤報(bào)告。  網(wǎng)頁可以接受網(wǎng)址、上傳一個(gè) HTML 文檔，或者直接輸入一些 HTML 代碼。