除錯 HTML
編寫 HTML 很好，但是如果出現問題，並且你無法找出程式碼中的錯誤在哪裡，該怎麼辦？本文將向你介紹一些可以幫助你查詢和修復 HTML 中錯誤的工具。
| 預備知識 | 掌握 基本 HTML 語法中涵蓋的基本 HTML 知識。文字級語義，例如 標題和段落以及 列表。結構化 HTML。 |
|---|---|
| 學習成果 |
|
除錯並不可怕
編寫某種程式碼時，一切都很好，直到出現可怕的錯誤時刻——你做錯了什麼，所以你的程式碼不起作用——要麼根本不起作用，要麼沒有按照你想要的方式執行。例如，下面顯示了嘗試編譯用 Rust 語言編寫的簡單程式時報告的錯誤。
在這裡，錯誤訊息相對容易理解——“未終止的雙引號字串”。如果你檢視列表，你可能會看到 println!(Hello, world!"); 邏輯上可能缺少一個雙引號。然而，隨著程式的增大，錯誤訊息會很快變得更加複雜且難以解釋，即使是簡單的情況對於不瞭解 Rust 的人來說也可能顯得有些嚇人。
然而，除錯並不一定可怕——熟練編寫和除錯任何程式碼的關鍵是熟悉語言和相關工具。
HTML 和除錯
HTML 不像 Rust 那樣複雜難懂。HTML 在解析之前不會被編譯成不同的形式（它被解釋，而不是編譯）。而且，HTML 的元素語法可以說比 Rust、JavaScript 或 Python 等“真正的程式語言”更容易理解。
瀏覽器解析 HTML 的方式比大多數程式語言的解析方式要寬鬆得多，這既是好事也是壞事。
但首先，我們所說的寬鬆是什麼意思？一般來說，當你在程式碼中做錯了什麼時，你會遇到兩種主要的錯誤型別
- 語法錯誤：這些是程式碼中的拼寫錯誤，導致程式無法執行，就像前面顯示的 Rust 錯誤一樣。只要你熟悉語言的語法並知道錯誤訊息的含義，這些錯誤通常很容易修復。
- 邏輯錯誤：這些是語法實際上是正確的錯誤，但程式碼沒有按照你的意圖執行，這意味著程式執行不正確。這些錯誤通常比語法錯誤更難修復，因為沒有錯誤訊息可以直接引導你找到錯誤源。
HTML 本身沒有語法錯誤，因為瀏覽器以寬鬆的方式解析它，這意味著即使原始碼中有語法錯誤，頁面仍然會顯示。瀏覽器內建了規則來規定如何解釋編寫不正確的 HTML 標記（通常稱為無效或格式不正確的標記），並將其自動更改為一些有效的標記。
例如，以下 HTML 片段包含不正確巢狀的元素
<p>I didn't expect to find the <em>next-door neighbor's <strong>cat</em></strong> here!</p>
閉合的 </strong> 標籤應該在閉合的 </em> 標籤之前，但它在它之後。
如果你將此 HTML 載入到瀏覽器中，然後檢視渲染的 DOM，你會看到巢狀已被瀏覽器更正
<p>
I didn't expect to find the
<em>next-door neighbor's <strong>cat</strong></em> here!
</p>
那麼，這為什麼既是好也是壞呢？嗯，在這種情況下，瀏覽器建立了預期的結果，但正如你稍後將看到的，情況並非總是如此。你總會得到一些東西執行，但瀏覽器並不總是能正確處理，這可能會導致問題。最好一開始就編寫正確的標記。
注意：HTML 之所以被寬鬆解析，是因為在 Web 最初建立時，人們決定釋出內容比確保語法絕對正確更重要。如果 Web 從一開始就更加嚴格，它可能不會像今天這樣受歡迎。
那麼如何查詢標記錯誤呢？稍後我們將向你展示如何使用一個名為 HTML 驗證器的工具查詢 HTML 中的錯誤，但首先我們將向你展示如何使用DOM 檢查器手動檢查你的 HTML，然後探索你可能會尋找哪些型別的標記錯誤，以及瀏覽器可能如何解釋這些錯誤。
使用 DOM 檢查器
所有現代瀏覽器都內建了一套開發者工具（devtools），它們提供了一系列功能，用於檢查當前選項卡中載入的網頁。這些工具可以向你展示頁面中渲染的 HTML、應用於每個 DOM 節點的 CSS、頁面中執行的 JavaScript 等等。它們還允許你編輯當前執行的程式碼並即時檢視頁面上的效果。
你可以在每個瀏覽器中以類似的方式開啟開發者工具——請參閱如何在瀏覽器中開啟開發者工具以瞭解如何操作。
對於本文，唯一相關的開發者工具功能是 DOM 檢查器，它顯示當前渲染的 HTML DOM 並允許你編輯它。我們現在來看看這個
- 在瀏覽器中開啟開發者工具。
- 開啟 DOM 檢查器。它在每個瀏覽器中的位置都相同——開發者工具中行首的第一個選項卡。在 Firefox 中，它被標記為檢查器，而在 Safari、Edge 和 Chrome 中，它被標記為元素。這應該是你第一次開啟開發者工具時預設選中的選項卡，如果不是，請選中它。
- 檢查選項卡中顯示的 DOM 樹結構，並注意如何單擊每個 DOM 節點開頭的擴充套件箭頭以展開和摺疊它們並顯示其後代節點。你還可以使用向上和向下游標鍵在節點之間上下移動，並使用向右和向左游標鍵展開和摺疊節點。
- 還要嘗試將滑鼠懸停在節點上（或使用游標鍵選擇它們），並注意當前懸停（或選擇）的元素如何在視口中突出顯示。
- 您還可以編輯渲染的 DOM。本文中我們不會使用編輯功能，但如果您好奇，請花一些時間瞭解如何操作。
輪到你了：使用 DOM 檢查器學習 HTML
在本節中，你將使用 DOM 檢查器研究一些程式碼，並瞭解瀏覽器如何處理常見的標記錯誤。
-
首先，將以下 HTML 檔案列表儲存為
debug-example.html，儲存在你的本地機器上的某個位置。這個演示是故意編寫了一些內建錯誤供我們探索。html<!doctype html> <html lang="en-US"> <head> <meta charset="utf-8"> <title>HTML debugging examples</title> </head> <body> <h1>HTML debugging examples</h1> <p>What causes errors in HTML? <ul> <li>Unclosed elements: If an element is <strong>not closed properly,then its effect can spread to areas you didn't intend <li>Badly nested elements: Nesting elements properly is also very important for code behaving correctly. <strong>strong <em>strong emphasized?</strong> what is this?</em> <li>Unclosed attributes: Another common source of HTML problems. Let's look at an example: <a href="https://www.mozilla.org/>link to Mozilla homepage</a> </ul> </body> </html> -
接下來，在瀏覽器中開啟它。你將看到類似這樣的內容：
-
這看起來立刻就不太好；讓我們看看原始碼，看我們能否找出原因（只顯示了 body 內容）
html<h1>HTML debugging examples</h1> <p>What causes errors in HTML? <ul> <li>Unclosed elements: If an element is <strong>not closed properly, then its effect can spread to areas you didn't intend <li>Badly nested elements: Nesting elements properly is also very important for code behaving correctly. <strong>strong <em>strong emphasized?</strong> what is this?</em> <li>Unclosed attributes: Another common source of HTML problems. Let's look at an example: <a href="https://www.mozilla.org/>link to Mozilla homepage</a> </ul> -
讓我們回顧一下問題
-
現在我們來檢查渲染的 DOM，而不是原始碼。為此，請開啟瀏覽器的 DOM 檢查器。你將看到渲染標記的表示：
-
看看瀏覽器是如何嘗試修復我們的 HTML 錯誤的（我們是在 Firefox 中進行的審查；其他現代瀏覽器應該給出相同的結果）
-
段落和列表項已被賦予閉合標籤。
-
不清楚第一個
<strong>元素應該在哪裡閉合，所以瀏覽器將每個單獨的文字塊都包裝在它自己的<strong>元素中，一直到文件底部！ -
瀏覽器已修復了不正確的巢狀，如下所示
html<strong> strong <em>strong emphasized?</em> </strong> <em> what is this?</em> -
缺少雙引號的連結已完全刪除。最後一個列表項如下所示
html<li> <strong> Unclosed attributes: Another common source of HTML problems. Let's look at an example: </strong> </li>
-
HTML 驗證
從上面的例子你可以看出，你確實需要確保你的 HTML 格式良好！但是如何做到呢？在一個像上面這樣的小例子中，很容易逐行查詢錯誤，但是對於一個巨大而複雜的 HTML 文件呢？
這項工作的工具是 標記驗證服務（或HTML 驗證器），它由 W3C 建立和維護（你可以在Web 標準模型中瞭解它）。驗證器將 HTML 文件作為輸入，遍歷它，併為你提供一份報告，告訴你 HTML 中有什麼問題。
要指定要驗證的 HTML，你可以提供一個網址、上傳一個 HTML 檔案，或者直接輸入一些 HTML 程式碼。
驗證 HTML 文件
在此任務中，我們將讓你嘗試 HTML 驗證器。你將驗證我們的示例文件，並檢視返回的結果。此示例包含你之前使用 DOM 檢查器研究過的相同 HTML。
- 首先，在新的瀏覽器選項卡中載入標記驗證服務（如果尚未開啟）。
- 切換到透過直接輸入驗證選項卡。
- 複製所有示例文件的程式碼（不僅僅是 body 部分），並將其貼上到標記驗證服務中顯示的大文字區域。
- 按下檢查按鈕。
這應該會給你一個錯誤和其他資訊的列表。
解釋錯誤訊息
錯誤訊息通常很有幫助，但有時它們不太容易理解。透過一些練習，你可以弄清楚如何解釋這些訊息來修復你的程式碼。讓我們逐一檢視錯誤訊息，看看它們是什麼意思。你會看到每條訊息都帶有一行和列號，以幫助你輕鬆定位錯誤。
-
“結束標籤
li隱式存在，但存在未閉合的元素”（2 個例項）：這些訊息表明存在一個應該閉合但未閉合的元素。結束標籤是隱式存在的，但實際上並不在那裡。行/列資訊指向應該真正存在閉合標籤的那一行之後的第一個行，但這足以作為線索來發現錯誤。 -
“未閉合元素
strong”：這更容易理解——一個<strong>元素未閉合，行/列資訊直接指向它的位置。 -
“結束標籤
strong違反巢狀規則”：這指出了巢狀錯誤的元素，並且行/列資訊指出了它們的位置。 -
“到達檔案末尾，位於屬性值內部。忽略標籤”：這條資訊相當神秘；它指的是某個地方有一個屬性值格式不正確，可能靠近檔案末尾，因為檔案末尾出現在屬性值內部。瀏覽器沒有渲染連結的事實應該給我們一個很好的線索，知道哪個元素出了問題。
-
“已看到檔案末尾並且存在開放元素”：這有點含糊，但基本上是指存在需要正確關閉的開放元素。行號指向檔案的最後幾行，並且此錯誤訊息附帶一行程式碼，指出一個開放元素的示例
example: <a href="https://www.mozilla.org/>link to Mozilla homepage</a> ↩ </ul>↩ </body>↩</html>
注意：屬性缺少閉合引號會導致開放元素，因為文件的其餘部分被解釋為屬性的內容。
-
“未閉合元素
ul”：這不是很 G 助，因為<ul>元素是正確閉合的。此錯誤發生是因為<a>元素未閉合，原因是缺少閉合引號。
如果你無法理解每個錯誤訊息的含義，請不要擔心。一個好的策略是每次修復幾個錯誤，然後在每組修復後重新驗證你的 HTML，以顯示還剩下哪些錯誤。有時，修復一個較早的錯誤也會消除其他錯誤訊息——幾個錯誤通常可能由一個問題引起，形成多米諾骨牌效應。
當看到一個漂亮的小綠橫幅告訴你沒有錯誤報告時，你就知道所有錯誤都已修復。在撰寫本文時，它顯示“文件檢查完成。沒有錯誤或警告顯示。”
總結
至此，我們對 HTML 除錯的介紹就結束了，它應該能為你提供一些有用的技能，以便在課程後期除錯 HTML、CSS 和 JavaScript 程式碼時使用。這也標誌著《使用 HTML 構建內容》模組的結束。