Web 調(diào)試HTML

寫HTML是容易的，但如果某部分出了問題而你找不到錯誤代碼在哪里的時候該如何？這篇文章會介紹一些幫助你查找和修復(fù)HTML中錯誤的工具。

調(diào)試并不可怕

---

在編寫某種代碼時，通常一切都是正常的，直到發(fā)生錯誤的那個可怕時刻——你出錯了，因此你的代碼無效——無論這是不是你想要的。例如下面，當(dāng)我們嘗試用Rust語言去編寫一個簡單的程序時，出現(xiàn)了一個錯誤報告。

這里的錯誤信息比較容易理解 — “unterminated double quote string”（雙引號字符串未閉合）。如果你查看列表，你大概會看到：println!(Hello, world!")，這里邏輯上缺少了一個雙引號。然而，當(dāng)程序變龐大的時候，錯誤信息也會變得更復(fù)雜和更難解釋，即使是簡單的例子，對于不了解Rust語言的人來說也會有點嚇人。

調(diào)試沒有那么可怕 - 編寫和調(diào)試任何編程語言或代碼的關(guān)鍵是熟悉這門語言和工具。

HTML和調(diào)試

---

HTML不像Rust語言那么難以理解。在瀏覽器解析和顯示結(jié)果之前，HTML不會被編譯成其他形式（這是解釋而不是編譯）。而HTML的元素語法可以說比像“Rust”，“JavaScript”或“Python”這樣“真正的編程語言”更容易理解。瀏覽器解析HTML比編程語言的運行更寬松，這可以說是好事也是壞事。

寬容模式代碼

寬容的意思是什么呢? 通常當(dāng)你寫錯代碼的時候，你會遇到以下兩種主要類型的錯誤：

• 語法錯誤：由于拼寫錯誤導(dǎo)致程序無法運行，就像上面Rust的例子。只要你熟悉語言的語法并知道錯誤信息的意思，修正這些錯誤是很容易的。
• 邏輯錯誤：這種錯誤的語法實際上是正確的，但代碼不是你想要表達(dá)的意圖，這意味著程序運行不正確。邏輯錯誤通常比語法錯誤更難修復(fù)，因為沒有一個錯誤信息指示你錯誤的來源。

HTML本身不會受到語法錯誤的影響，因為瀏覽器是以寬松模式來解析，這意味著即使出現(xiàn)語法錯誤，頁面仍然顯示。瀏覽器通常都有自己的規(guī)則來解析錯誤編寫的標(biāo)記，所以程序仍然會運行，盡管可能不是你預(yù)期的樣子。當(dāng)然這樣仍然會是個問題。

主動學(xué)習(xí)：學(xué)習(xí)寬松模式代碼

現(xiàn)在是研究HTML代碼的寬松性的時候了。

1. 首先，下載我們的調(diào)試示例演示并將其保存在本地。這個演示是刻意寫了一些錯誤讓我們?nèi)ヌ剿鳎℉TML標(biāo)記提示是badly-formed，而不是well-formed）。
2. 接下來，在瀏覽器中打開它。你會看到以下的內(nèi)容：
3. 這看起來并不好看；我們來看看源代碼，看看是否可以找出原因（僅顯示正文內(nèi)容）：

   <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 emphasised?</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>

4. Let's review the problems we can see here:
   • The paragraph and list item elements have no closing tags. Looking at the image above, this doesn't seem to have affected the markup rendering too badly, as it is easy to infer where one element should end, and another should begin.
   • The first <strong> element has no closing tag. This is a bit more problematic, as it isn't easy to tell where the element is supposed to end. In fact, the whole of the rest of the text looks to have been strongly emphasised.
   • This section is badly nested: <strong>strong <em>strong emphasised?</strong> what is this?</em>. It is not easy to tell how this has been interpreted, because of the previous problem.
   • The href attribute value has a missing closing double quote. This seems to have caused the biggest problem — the link has not rendered at all.
5. Now let's look at the markup the browser has rendered, as opposed to the markup in the source code. To do this, we can use the browser developer tools. If you are not familiar with how to use your browser's developer tools, take a few minutes out to review Discover browser developer tools, then come back.
6. In the DOM inspector, you can see what the rendered markup looks like:
7. Using the DOM inspector, let's explore our code in detail to see how the browser has tried to fix our HTML errors (we did the review in Firefox; other modern browsers should give the same result):
   • The paragraphs and list items have been given closing tags.
   • It isn't clear where the first <strong> element should be closed, so the browser has wrapped each separate block of text with its own strong tag, right down to the bottom of the document!
   • The  incorrect nesting has been fixed by the browser like this:

     <strong>strong
       <em>strong emphasised?</em>
     </strong>
     <em> what is this?</em>

   • The link with the missing attribute double quote has been deleted altogether. The last list item just looks like this:

     <li>
       <strong>Unclosed attributes: Another common source of HTML problems.
       Let's look at an example: </strong>
     </li>

HTML驗證

所以你可以從上面的例子看到，你真的想確保你的HTML格式正確！ 但是如何？ 在像上面看到的一個小例子中，很容易通過行搜索并找到錯誤，但是一個巨大的，復(fù)雜的HTML文檔呢？

最好的策略是從通過由W3C創(chuàng)建和維護的標(biāo)記驗證服務(wù)運行HTML頁面開始， 該組織負(fù)責(zé)定義HTML，CSS和其他Web技術(shù)的規(guī)范。 此網(wǎng)頁將HTML文檔作為輸入，通過它，并向您提供一個報告，告訴您HTML的錯誤。

要指定要驗證的HTML，您可以為其指定一個要指向的網(wǎng)址，上傳HTML文件或直接輸入一些HTML代碼。

主動學(xué)習(xí):驗證HTML文檔

讓我們試試看，并驗證我們的 example.html"class ="external">示例文檔。

1. First, load up the Markup Validation Service in one of your browser tabs, if it isn't already.
2. Click on/activate the Validate by Direct Input tab.
3. Copy the whole of the sample document's code (not just the body) and paste it into the large text area shown in the Markup Validation Service.
4. Press the Check button.

這應(yīng)該給你一個錯誤和其他信息的列表。

Interpreting the error messages

驗證器提供的錯誤消息列表通常很有用，有時不太有用; 有一點練習(xí)你可以解決這些如何解決你的代碼。 讓我們通過錯誤消息和它們的意思。 您會看到每條消息都帶有行和列號，以幫助您更輕松地找到錯誤。

• End tag li implied, but there were open elements (2 instances): These messages indicate that an element is open that should be closed. The ending tag is implied, but not actually there. The line/column information points to the first line after the line where the closing tag should really be, but this is a good enough clue to see what is up.
• Unclosed element strong: This is really easy to understand — a <strong> element is unclosed, and the line/column information points right to where it is.
• End tag strong violates nesting rules: This points out the incorrectly nested elements, and the line/column information points out where it is.
• End of file reached when inside an attribute value. Ignoring tag: This one is rather cryptic; it refers to the fact that there is an attribute value not properly formed somewhere, possibly near the end of the file because the end of the file appears inside the attribute value. The fact that the browser doesn't render the link should give us a good clue as to what element is at fault.
• End of file seen and there were open elements: This is a bit ambiguous, but basically refers to the fact there are open elements that need to be properly closed. The lines numbers point to the last few lines of the file, and this error message comes with a line of code that points out an example of an open element:

  example: <a href="https://www.mozilla.org/>link to Mozilla homepage</a> ? </ul>? </body>?</html>

  注意:缺少結(jié)束引號的屬性可能會導(dǎo)致打開的元素，因為文檔的其余部分被解釋為屬性的內(nèi)容。

• Unclosed element ul: This is not very helpful, as the <ul> element is closed correctly. This error comes up because the <a> element is not closed, due to the missing closing quote mark.

如果你無法弄清楚每個錯誤信息的含義，不要擔(dān)心它 - 一個好主意是一次嘗試修復(fù)一些錯誤，然后嘗試重新驗證你的HTML以顯示剩下的錯誤。 有時固定較早的錯誤也會除去多個其他錯誤消息 - 在多米諾效應(yīng)中，多個錯誤通?？赡苡蓡蝹€問題引起。

當(dāng)您在輸出中看到以下橫幅時，您會知道所有錯誤何時修復(fù):

總結(jié)

---

所以我們有它，一個介紹調(diào)試你的HTML，應(yīng)該給你一些有用的技能，當(dāng)你開始調(diào)試CSS，JavaScript和其他類型的代碼在你的職業(yè)生涯中。 這也標(biāo)志著HTML模塊學(xué)習(xí)文章介紹的結(jié)束 - 現(xiàn)在你可以繼續(xù)測試自己與我們的評估:第一個鏈接如下。