Web 调试HTML

写HTML是容易的，但如果某部分出了问题而你找不到错误代码在哪里的时候该如何？这篇文章会介绍一些帮助你查找和修复HTML中错误的工具。

调试并不可怕

---

在编写某种代码时，通常一切都是正常的，直到发生错误的那个可怕时刻——你出错了，因此你的代码无效——无论这是不是你想要的。例如下面，当我们尝试用Rust语言去编写一个简单的程序时，出现了一个错误报告。

这里的错误信息比较容易理解 — “unterminated double quote string”（双引号字符串未闭合）。如果你查看列表，你大概会看到：println!(Hello, world!")，这里逻辑上缺少了一个双引号。然而，当程序变庞大的时候，错误信息也会变得更复杂和更难解释，即使是简单的例子，对于不了解Rust语言的人来说也会有点吓人。

调试没有那么可怕 - 编写和调试任何编程语言或代码的关键是熟悉这门语言和工具。

HTML和调试

---

HTML不像Rust语言那么难以理解。在浏览器解析和显示结果之前，HTML不会被编译成其他形式（这是解释而不是编译）。而HTML的元素语法可以说比像“Rust”，“JavaScript”或“Python”这样“真正的编程语言”更容易理解。浏览器解析HTML比编程语言的运行更宽松，这可以说是好事也是坏事。

宽容模式代码

宽容的意思是什么呢? 通常当你写错代码的时候，你会遇到以下两种主要类型的错误：

• 语法错误：由于拼写错误导致程序无法运行，就像上面Rust的例子。只要你熟悉语言的语法并知道错误信息的意思，修正这些错误是很容易的。
• 逻辑错误：这种错误的语法实际上是正确的，但代码不是你想要表达的意图，这意味着程序运行不正确。逻辑错误通常比语法错误更难修复，因为没有一个错误信息指示你错误的来源。

HTML本身不会受到语法错误的影响，因为浏览器是以宽松模式来解析，这意味着即使出现语法错误，页面仍然显示。浏览器通常都有自己的规则来解析错误编写的标记，所以程序仍然会运行，尽管可能不是你预期的样子。当然这样仍然会是个问题。

主动学习：学习宽松模式代码

现在是研究HTML代码的宽松性的时候了。

1. 首先，下载我们的调试示例演示并将其保存在本地。这个演示是刻意写了一些错误让我们去探索（HTML标记提示是badly-formed，而不是well-formed）。
2. 接下来，在浏览器中打开它。你会看到以下的内容：
3. 这看起来并不好看；我们来看看源代码，看看是否可以找出原因（仅显示正文内容）：

   <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格式正确！ 但是如何？ 在像上面看到的一个小例子中，很容易通过行搜索并找到错误，但是一个巨大的，复杂的HTML文档呢？

最好的策略是从通过由W3C创建和维护的标记验证服务运行HTML页面开始， 该组织负责定义HTML，CSS和其他Web技术的规范。 此网页将HTML文档作为输入，通过它，并向您提供一个报告，告诉您HTML的错误。

要指定要验证的HTML，您可以为其指定一个要指向的网址，上传HTML文件或直接输入一些HTML代码。

主动学习:验证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.

这应该给你一个错误和其他信息的列表。

Interpreting the error messages

验证器提供的错误消息列表通常很有用，有时不太有用; 有一点练习你可以解决这些如何解决你的代码。 让我们通过错误消息和它们的意思。 您会看到每条消息都带有行和列号，以帮助您更轻松地找到错误。

• 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>

  注意:缺少结束引号的属性可能会导致打开的元素，因为文档的其余部分被解释为属性的内容。

• 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.

如果你无法弄清楚每个错误信息的含义，不要担心它 - 一个好主意是一次尝试修复一些错误，然后尝试重新验证你的HTML以显示剩下的错误。 有时固定较早的错误也会除去多个其他错误消息 - 在多米诺效应中，多个错误通常可能由单个问题引起。

当您在输出中看到以下横幅时，您会知道所有错误何时修复:

总结

---

所以我们有它，一个介绍调试你的HTML，应该给你一些有用的技能，当你开始调试CSS，JavaScript和其他类型的代码在你的职业生涯中。 这也标志着HTML模块学习文章介绍的结束 - 现在你可以继续测试自己与我们的评估:第一个链接如下。