diff options
Diffstat (limited to 'files/zh-cn/learn/html/introduction_to_html/debugging_html/index.html')
| -rw-r--r-- | files/zh-cn/learn/html/introduction_to_html/debugging_html/index.html | 179 |
1 files changed, 179 insertions, 0 deletions
diff --git a/files/zh-cn/learn/html/introduction_to_html/debugging_html/index.html b/files/zh-cn/learn/html/introduction_to_html/debugging_html/index.html new file mode 100644 index 0000000000..86ebf29c63 --- /dev/null +++ b/files/zh-cn/learn/html/introduction_to_html/debugging_html/index.html @@ -0,0 +1,179 @@ +--- +title: HTML 调试 +slug: learn/HTML/Introduction_to_HTML/Debugging_HTML +tags: + - Debug + - HTML + - W3C + - 初学者 + - 指南 + - 调试 + - 错误 + - 验证 +translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">HTML 优雅明了，但要是出了错，你会不会一头雾水呢，本节将介绍一些查找和修复 HTML 错误的工具。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备知识:</th> + <td>阅读并理解 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入门</a>、<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML 文字处理初步</a> 和 <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">创建超链接</a> 等文章，熟悉 HTML 的基本概念。</td> + </tr> + <tr> + <th scope="row">学习目标:</th> + <td>学习调试工具的基础用法，以查找 HTML 中的错误。</td> + </tr> + </tbody> +</table> + +<h2 id="调试并不可怕">调试并不可怕</h2> + +<p>写代码通常都是按部就班的，但是一旦犯了错，可怕的代码问题就出现了：或彻底罢工，或得不到正确结果。比如，以下窗口显示了：用 <a href="https://www.rust-lang.org/">Rust</a> 编写的一个小程序在 {{glossary("compile", "编译")}} 时得到的出错信息：</p> + +<p><img alt="一个控制台窗口，显示了一个rust工程编译时的出错信息。（println宏少一个引号）" src="https://mdn.mozillademos.org/files/16527/03.gif" style="display: block; height: 463px; margin: 0px auto; width: 658px;">这里错误信息比较容易理解："unterminated double quote string"，即"双引号字符串未闭合"。错误列表中可以看到 <code>println!(Hello, world!");</code> 这里少一个双引号，然而当程序规模变大时，错误信息也会变得更复杂和更难解释，同时对于 Rust 新手而言，上述提示也是找不到北。</p> + +<p>调试其实没有那么可怕，写代码和调试的关键其实是：熟悉语言本身和相关工具。</p> + +<h2 id="HTML_和调试">HTML 和调试</h2> + +<p>HTML 并不像 Rust 那么难以理解，浏览器并不会将 HTML 编译成其它形式，而是直接解析并显示结果（称之为解释，而非编译）。可以说 HTML 的 {{glossary("element", "元素")}} 语法比 Rust、{{glossary("JavaScript")}} 或 {{glossary("Python")}} 这样“真正的编程语言”更容易理解。浏览器解析 HTML 的过程比编程语言的编译运行的过程要<strong>宽松</strong>得多，但这是一把双刃剑。</p> + +<h3 id="宽松的代码">宽松的代码</h3> + +<p>宽松是什么意思呢？通常写错代码会带来以下两种主要类型的错误：</p> + +<ul> + <li><strong>语法错误</strong>：由于拼写错误导致程序无法运行，就像上面的 Rust 示例。通常熟悉语法并理解错误信息后很容易修复。</li> + <li><strong>逻辑错误：</strong>不存在语法错误，但代码无法按预期运行。通常逻辑错误比语法错误更难修复，因为无法得到指向错误源头的信息。</li> +</ul> + +<p>HTML 本身不容易出现语法错误，因为浏览器是以宽松模式运行的，这意味着即使出现语法错误浏览器依然会继续运行。浏览器通常都有内建规则来解析书写错误的标记，所以即使与预期不符，页面仍可显示出来。当然，是存在隐患的。</p> + +<div class="note"> +<p><strong>注：</strong>HTML 之所以以宽松的方式进行解析，是因为 Web 创建的初心就是：人人可发布内容，不去纠结代码语法。如果 Web 以严格的风格起步，也许就不会像今天这样流行了。</p> +</div> + +<h3 id="主动学习：研究宽容的代码风格">主动学习：研究宽容的代码风格</h3> + +<p>现在来研究 HTML 代码的宽松特性。</p> + +<ol> + <li>首先，下载并保存 <a href="https://github.com/roy-tian/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">debug-example.html</a>。代码中故意留了一些错误，以便探究（这里的 HTML 标记写成了 <strong>糟糕的格式</strong>，与 <strong>良好的格式</strong> 相反）。</li> + <li>下一步，在浏览器中打开，可以看到：<img alt="一个简单的HTML文档，但其中包含一些常见的HTML错误，比如：未关闭的元素、嵌套混乱的元素、未关闭的属性。" src="https://mdn.mozillademos.org/files/16528/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7_2019-02-22_06.28.07.png" style="display: block; margin: 0px auto;"></li> + <li>看起来糟透了，我们到源代码中寻找原因（只列出 <code>body</code> 部分）： + <pre class="brush: html notranslate"><h1>HTML 调试示例</h1> + +<p>什么使得 HTML 出错？ + +<ul> + <li>未闭合的元素：如果元素<strong>没有正确的结束标记，那么将影响下方整个区域，这不是你期望的。 + + <li>错误嵌套元素：正确进行嵌套是一项重要的编码习惯。<strong>重点（strong）<em>重点强调（strongly emphasised）？</strong>这又是什么鬼？</em> + + <li>未闭合的属性：另一种 HTML 常见错误。来看一个示例：<a href="https://www.mozilla.org/>Mozilla 主页链接</a> +</ul> +</pre> + </li> + <li>以下是问题清单： + <ul> + <li>{{htmlelement("p","段落（Paragraph）")}} 和 {{htmlelement("li","列表项（list item）")}} 元素没有结束标签。但是由于元素的结束和另一个的开始很容易推断出来，因此上图中并没有太严重的渲染错误。</li> + <li>第一个 {{htmlelement("strong")}} 元素没有结束标签。这就严重了，因为该元素结束的位置难以确定。事实上所有剩余文本都加粗了。</li> + <li>一下嵌套有问题：<code><strong>重点（strong）<em>重点强调（strongly emphasised）？</strong>这又是什么鬼？</em></code>。浏览器很难做出正确解释，理由同上。</li> + <li>{{htmlattrxref("href","a")}} 属性缺少了一个双引号。从而导致了一个最严重的问题：整个链接完全没有渲染出来。</li> + </ul> + </li> + <li>下面暂时忽略源代码中的标记，先看一下浏览器渲染出的标记。打开浏览器的开发者工具。如果不太熟悉，请先阅读 <a href="/zh-CN/docs/Learn/Discover_browser_developer_tools">浏览器开发工具概览</a>。</li> + <li>在 DOM 查看器中可以看到渲染的标记：<img alt="Firefox控制台中的HTML检查器，可标亮元素，（图中标亮了“什么使得HTML出错？”）可以看到浏览器自动补齐了</p>关闭标签" src="https://mdn.mozillademos.org/files/16529/html-inspector.png" style="display: block; height: 1214px; margin: 0px auto; width: 1700px;"></li> + <li>通过 DOM 查看器可以清楚地看到，浏览器已经尝试修补代码错误（我们尝试了 Firefox，其他现代浏览器也应给出同样结果）： + <ul> + <li>段落和列表元素加上了关闭标签。</li> + <li>第一个 <code><strong></code> 没有明确的关闭标签，因此浏览器为之后所有独立块都补全了 <code><strong></strong></code>。</li> + <li>浏览器是这样修补嵌套错误的： + <pre class="brush: html notranslate"><strong>重点（strong） + <em>重点强调（strongly emphasised）？</em> +</strong> +<em>这又是什么鬼？</em></pre> + </li> + <li>删除整个缺少双引号的链接。最后一个列表项就成了： + <pre class="brush: html notranslate"><li> + <strong>未闭合的属性：另一种 HTML 常见错误。来看一个示例：</strong> +</li></pre> + </li> + </ul> + </li> +</ol> + +<h3 id="HTML_验证">HTML 验证</h3> + +<p>阅读以上示例后，你发现保持良好 HTML 格式的重要性。那么应该如何做呢？以上示例规模较小，查找错误还不难，但是一个非常庞大、复杂的 HTML 文档呢？</p> + +<p>最好的方法就是让你的HTML页面通过 <a href="https://validator.w3.org/">Markup Validation Service</a>。由 W3C（制定 HTML、CSS 和其他网络技术标准的组织） 创立并维护的标记验证服务。把一个 HTML 文档加载至本网页并运行 ，网页会返回一个错误报告。</p> + +<p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p> + +<p>网页可以接受网址、上传一个 HTML 文档，或者直接输入一些 HTML 代码。</p> + +<h3 id="主动学习：验证_HTML_文档">主动学习：验证 HTML 文档</h3> + +<p>不妨用上文的 <a href="https://github.com/roy-tian/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">debug-example.html</a> 尝试一下：</p> + +<ol> + <li>在浏览器中打开 <a href="https://validator.w3.org/">Markup Validation Service</a> 。</li> + <li>选择 <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a> 标签。</li> + <li>将整个示例文档的代码（而不仅仅是<code>body</code>部分）复制粘贴到正中的文本框内。</li> + <li><em>点击 </em><strong>Check</strong><em> 按钮。</em></li> +</ol> + +<p>将返回一个包含错误和其它信息的列表。</p> + +<p><img alt="W3C验证工具为本示例给出的验证结果。" src="https://mdn.mozillademos.org/files/16530/validation-result.png" style="display: block; margin: 0px auto;"></p> + +<h4 id="错误信息分析">错误信息分析</h4> + +<p>错误信息一般都是有用的，也有没用的，有一些经验后你就能够分析并修复这些错误。下面来观察这些错误信息。可以看到每条信息都对应一个行号和一条信息，使得定位错误更方便。</p> + +<ul> + <li>End tag <code>li</code> implied, but there were open elements（需要 <code>li</code> 的结束标签，但又开始了新的元素）（共出现 2 次）：这条信息表明有开始标签必须有结束标签，必须出现结束标签的地方却没有找到它。行/列信息指出结束标签必须出现的位置的第一行，这一线索已经足够明显了。</li> + <li>Unclosed element <code>strong</code>（未闭合元素 <code>strong</code> ）：非常容易理解，{{htmlelement("strong")}} 元素没有闭合，行/列信息表明了它的位置。</li> + <li>End tag <code>strong</code> violates nesting rules（结束标签 <code>strong</code> 违反了嵌套规则）：指出了错误嵌套的元素，行/列信息表明了它的位置。</li> + <li>End of file reached when inside an attribute value. Ignoring tag（在属性值内达到文件末尾。忽略标签）: 这个比较难懂，它说的是在某个地方有一个属性的值格式有误，估计是在文件末尾附近，因为文件的结尾出现在了一个属性值里。事实上浏览器没有渲染超链接已经是一个很明显的线索了。</li> + <li>End of file seen and there were open elements（文件结尾有未闭合的元素）：这个略有歧义，但基本上表明了有元素没有正确闭合。行号指向文件最后几行，且错误信息给出了一个这种错误的案例： + <pre class="notranslate">来看一个示例：<a href="https://www.mozilla.org/>Mozilla 主页链接</a> ↩ </ul>↩ </body>↩</html></pre> + + <div class="note"> + <p><strong>注：</strong>属性缺少结束引号会导致元素无法闭合。因为文档所有剩余部分（直到文档某处出现一个引号）都将被解析为属性的内容。</p> + </div> + </li> + <li>Unclosed element <code>ul</code>（未闭合元素 <code>ul</code>）：这个意义不大，因为 {{htmlelement("ul")}} 已经正确闭合了。出现这个错误是因为 {{htmlelement("a")}} 元素没有右引号而没有闭合。</li> +</ul> + +<p><span>如果你不能一次弄懂所有的错误，别着急，可以试试先修复那些已经弄懂的，再申请验证，看看剩下哪些错误。有时候先修复的错误可能让你摆脱后面一系列的错误，因为一个小问题可能引发一连串错误，就像多米诺骨牌。</span></p> + +<p><span>所有错误都修复之后会得到以下输出：</span></p> + +<p><img alt="W3C站点上HTML通过验证的横幅" src="https://mdn.mozillademos.org/files/16531/valid-html-banner.png" style="display: block; height: 96px; margin: 0px auto; width: 996px;"></p> + +<h2 id="小结">小结</h2> + +<p>以上就是 HTML 调试的一篇入门介绍，同时对于调试 CSS 和 JavaScript 也有帮助，或者你职业生涯中的任一门语言。这也是 HTML 学习一章的最后一节，接下来是两个小测试，点击“下一页”来小试牛刀吧。</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="本章目录">本章目录</h2> + +<ul> + <li><a href="/zh-CN/docs/learn/HTML/Introduction_to_HTML/Getting_started">开始学习 HTML</a></li> + <li><a href="/zh-CN/docs/learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">“头”里有什么？HTML 元信息</a></li> + <li><a href="/zh-CN/docs/learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML 文字处理初步</a></li> + <li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">创建超链接</a></li> + <li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">高级文字格式</a></li> + <li><a href="/zh-CN/docs/learn/HTML/Introduction_to_HTML/文件和网站结构">文档和站点结构</a></li> + <li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTML 调试</a></li> + <li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">课程测验：为信件排版</a></li> + <li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">课程测验：构建内容丰富的网页</a></li> +</ul> |