引入
HTML 写错时，浏览器不一定会直接报错，页面可能只是显示异常。
验证和调试就是用来检查 HTML 结构、标签、属性和页面效果是否正常。
正文
定义
定义
HTML 验证和调试是检查 HTML 代码是否规范、页面结构是否正确、资源是否正常加载的过程。
它可以帮助发现标签没闭合、属性写错、路径错误、结构不合理等问题。
常见问题
标签没有正确闭合
<p>这是一段文字
<p>这是另一段文字</p>有些标签虽然浏览器会自动修正，但不代表代码写得规范。
更推荐写清楚结构：
<p>这是一段文字</p>
<p>这是另一段文字</p>嵌套关系错误
<p>
<div>错误示例</div>
</p><p> 里面不适合放 <div> 这类块级结构，容易导致浏览器自动调整结构。
属性写错
<img scr="cat.jpg" alt="猫">这里把 src 写成了 scr，图片就不会正常加载。
正确写法：
<img src="cat.jpg" alt="猫">路径错误
<img src="image/cat.jpg" alt="猫">如果实际文件夹叫 images，路径就会失效。
路径问题常见表现是图片不显示、CSS 不生效、JS 不运行。
浏览器开发者工具
浏览器开发者工具可以用来查看页面结构、样式、网络请求和错误信息。
常见打开方式：
- 右键页面，选择“检查”
- 使用快捷键
F12 - 使用快捷键
Ctrl + Shift + I
Elements 面板
Elements 面板可以查看浏览器最终解析出来的 HTML 结构。
如果页面显示和自己写的不一样，可以在这里检查结构是否被浏览器自动修正。
Console 面板
Console 面板可以查看错误和警告。
HTML 本身错误不一定都显示在 Console 中，但资源加载失败、JavaScript 错误通常会显示。
Network 面板
Network 面板可以查看资源是否加载成功。
如果图片、CSS、JS 加载失败，通常可以在这里看到 404 等状态。
HTML 验证工具
可以使用 W3C 的 HTML 验证工具检查代码规范性。
网站
它可以提示标签嵌套、属性、文档结构等问题。
简单检查清单
- 标签是否正确闭合
- 嵌套关系是否合理
- 属性名是否拼写正确
- 路径是否写对
- 图片是否有合适的
alt - 页面是否有
<title> - 是否设置了
charset="UTF-8" - 表单控件是否有
name
特点
- 浏览器会容错，但不代表 HTML 写法正确
- 开发者工具可以查看页面真实结构和资源加载情况
- Console 适合查看错误和警告
- Network 适合检查资源路径和加载状态
- W3C 验证工具可以检查 HTML 规范问题
- 调试时要先从最简单的问题查起，例如路径、拼写、闭合标签
注意事项
- 不要完全依赖浏览器自动修正 HTML
- 页面能显示不代表代码完全正确
- 图片不显示时，优先检查
src和文件路径 - 样式不生效时，优先检查
<link>路径和选择器 - 表单提交异常时，检查
name、action、method - 调试问题时一次只改一个地方，更容易定位原因
理解
可以把 HTML 调试理解为“检查浏览器到底看到了什么”。
自己写的是源代码，浏览器最终解析出来的是页面结构。
当显示结果不对时，不要只盯着代码猜，要用开发者工具看结构、路径和错误信息。
引出
理解验证和调试之后，可以继续学习 HTML 最佳实践，减少一开始就写出错误结构的概率。