最直接办法是打开浏览器开发者工具（F12）切到Elements面板查看真实DOM结构，因浏览器会自动补全或强行闭合未闭合标签，导致源码与实际渲染不一致，高亮区域错位或内容缺失即提示嵌套错误、标签漏闭或错位。
用浏览器开发者工具看实际DOM结构
HTML代码写完却没显示？别急着重写，先打开浏览器开发者工具（F12），切到 Elements 面板。这里展示的是浏览器**真正解析后的DOM树**，不是你写的源码——它会自动补全缺失的 <html>、<body>，甚至强行闭合没配对的 <div>。如果看到高亮区域和预期位置不符，或者某段内容根本没出现在DOM里，基本就是标签嵌套错误、未闭合或错位（比如把 <p> 套在 <span> 里）。
常见现象：<ul> 下直接写文字、<table> 里漏了 <tr>、<head> 里塞了 <script> 但没加 defer 或 async 导致阻塞渲染。这些都会被 Elements 面板暴露出来，比肉眼扫代码快得多。
用CSS选择器快速标记可疑HTML
不用装插件，直接在开发者工具的 Console 里粘贴一行CSS，就能让问题元素“自己跳出来”：
document.head.innerHTML += '<style>a:not([href]), img:not([alt]), *[style], html:not([lang]) { outline: 2px solid #f00 !important; }</style>'
这段代码会高亮四类高频隐患：
立即学习“前端免费学习笔记（深入）”；
-
a:not([href])：没加href的链接，点击无效 -
img:not([alt])：缺失alt的图片，影响可访问性和SEO -
*[style]：滥用行内样式，后期难维护 -
html:not([lang])：没声明语言，屏幕阅读器可能读错音调
注意：alt="" 不会被这个规则匹配，因为它是合法的空值（装饰图），但如果你需要也标出来，换成 img:not([alt]):not([alt=""]) 即可。
验证器报错行号不准？先查DOCTYPE和编码
W3C验证器或Nu Html Checker 报第12行有错，结果删掉第12行还是报错——大概率是开头就埋了雷：
- 没写
<!DOCTYPE html>，浏览器进怪异模式，后续所有结构都算“错” - 文件保存成
ANSI或GBK编码，但HTML里写了中文，导致验证器读乱码，把整段当无效字符处理 -
<meta charset="UTF-8">没放在<head>最前面，浏览器可能用默认编码解析，后面标签全乱套
解决方法：用VS Code打开文件 → 右下角确认编码显示为 UTF-8 → 点击切换编码 → 选 Save with Encoding → UTF-8；再确保第一行就是 <!DOCTYPE html>，第二行是 <html lang="zh-CN">。
本地双击打开HTML总失效？换本地服务器跑
直接双击 index.html 用 file:// 协议打开，90%的JS/CSS/图片路径会404，尤其是含 ../ 或 ./ 的相对路径。浏览器出于安全限制，会拒绝加载本地资源，控制台报 CORS 或 Not allowed to load local resource。
正确做法：
- VS Code 用户装
Live Server插件，右键HTML文件 →Open with Live Server - 命令行用户运行
python -m http.server 8000（Python 3），然后访问http://localhost:8000 - 确保所有路径按服务器根目录算：比如
css/style.css要放在与HTML同级的css/文件夹下
这个步骤绕不开。哪怕只是改一行字，也别省这一步——否则你调的不是代码，是在和浏览器的安全策略搏斗。
