HTML 教程 / 查找错误并验证 HTML 文档

HTML 验证有助于找到标记错误，这些错误浏览器可能会默默修复，例如格式错误的属性、意外的关闭标签或重复的 ID。在修正报告的问题后，您应始终在浏览器中检查页面的内容和实际交互。

保存页面并首先进行检查

保存当前的 HTML 文件并在浏览器中打开它。检查标题、段落、链接、图片和表单是否出现在您预期的位置。页面可见并不证明其标记是有效的：浏览器可以修正某些错误并显示一个与您计划的结构不同的结果。

运行 Nu HTML Checker

Nu HTML 检查器 可以检查公共 URL、上传的文件或插入的标记。对于本地或未发布的文档，请使用文件上传或直接输入。不要将包含密码或个人数据的源文件上传到公共验证服务。目前验证的标签和属性规则将在 HTML 语法 中介绍。

1. 保存 HTML 文件的最新版本。
2. 选择合适的输入方法并开始检查。
3. 阅读每条消息，并检查报告的部分以及周围的开闭标签。
4. 修正文件，保存它，然后重新启动检查。

如果显示多个错误，请从报告的第一个错误开始。单个格式错误的属性可能会导致多个后续错误。检测到错误的行不一定是引起错误的那一行；例如，未闭合的引号可能导致下一个标签显示为无效。确保上传已保存的修订版本，而不是多次验证旧文件。

例如，这段代码重复了一个 id：

<label for="email">电子邮件</label>
<input id="email" name="email" type="email">
<label for="email">确认电子邮件</label>
<input id="email" name="email_check" type="email">

将第二个字段的 ID 更改为 email-check，并更新标签的 for 属性以匹配。然后检查重复 ID 的错误是否消失，并确保每个标签都将焦点指向自己的字段。缺少结束标签并不总是错误：根据 HTML 规则，一些元素，包括在特定上下文中的 li，可以省略其结束标签。

使用 Nu HTML Checker 26.11.2 的本地命令行工具对完整示例进行静态检查后，Duplicate ID “email”. 对错误文档进行了报告，而对修正后的文档没有报告错误。分别比较标签的交互；额外的诊断可能会随检查器的更新或文件内容而有所不同。

将有错误的文档与其修正版本进行比较

以下验证练习故意重复使用一个 ID。将其保存为 invalid.html，并使用 Nu HTML Checker 的文本输入或文件上传模式进行检查。这是一个失败的测试用例，而不是可以直接使用的代码。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>文件验证练习</title>
</head>
<body>
  <h1>标签验证练习</h1>
  <form method="get">
    <p><label for="email">电子邮件</label>
      <input id="email" name="email" type="email"></p>
    <p><label for="email">确认电子邮件</label>
      <input id="email" name="email_check" type="email"></p>
    <button type="submit">检查输入的值</button>
  </form>
</body>
</html>

找到关于 email ID 被重复使用的诊断信息。浏览器仍然可以显示两个字段，但重复的 ID 阻止了每个标签与其字段的唯一对应。修正后的文档更改了第二个字段及其标签目标为 email-check。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>文件验证练习</title>
</head>
<body>
  <h1>标签验证练习</h1>
  <form method="get">
    <p><label for="email">电子邮件</label>
      <input id="email" name="email" type="email"></p>
    <p><label for="email-check">确认电子邮件</label>
      <input id="email-check" name="email_check" type="email"></p>
    <button type="submit">检查输入的值</button>
  </form>
</body>
</html>

1. 将更正保存为 valid.html，并验证最新保存的文件，而不是之前的副本。
2. 点击每个标签并比较哪个输入字段获得焦点。如果您更改了 ID，而没有更新 for 属性，则映射将保持错误。
3. 在诊断修复后，总是测试目标、内容和键盘使用情况。分别保存语法和可用性测试结果。

不要将故意失败的示例与文章本身的格式错误混淆。代码块可以显示会产生错误的字符串；验证文档是从此示例创建的独立文档。

验证只是一种检查方式

一个语法检查器不能保证链接指向正确的文章，替代文本正确描述图像，或者服务器正确处理表单。请打开链接，用键盘使用页面，并检查窄显示窗口。对于缺失的媒体，检查路径、服务器响应和支持的格式以及标记。在 创建一个小型多页网站 中，同时使用语法检查和实际导航测试。

请明确区分检查对象：文件上传会检查文件，而 URL 检查会检查服务器实际返回的文档。在 WordPress 上，主题会包裹文章主体，因此检查文章正文片段和检查完整发布页面可能会产生不同的结果。将文章中的问题与由主题或插件引入的问题区分开来。