浏览器解析HTML时自动修复语法错误（如非法嵌套、未闭合标签），生成的DOM树与源码不一致，因此必须通过开发者工具Elements面板查看真实DOM结构，而非依赖源码。
HTML代码本身不“运行”，它被浏览器解析、构建 DOM、计算样式、布局绘制后才呈现效果；想理解实际效果，必须观察浏览器最终生成的渲染树和真实 DOM，而不是盯着源码猜。
为什么直接看 HTML 源码看不出真实效果
浏览器会自动修复语法错误，比如 <div><p></div></p> 这种嵌套错乱，解析器会强行重排成合法结构，你在 Elements 面板看到的 DOM 树早不是你写的源码。更隐蔽的是：未闭合标签可能吞掉后续元素，class="calss" 拼错不会报错但样式失效，<img src="x"></img> 中的 被忽略，导致兄弟节点位置偏移。
这些都不会在控制台报错，但效果已偏离预期。
用 Elements 面板确认真实 DOM 结构
按 F12 打开开发者工具，切到 Elements 面板，这才是你该盯住的地方：
立即学习“前端免费学习笔记（深入）”；
- 右键元素 →
Edit as HTML可临时改结构，验证是否是结构问题 - 点击左上角鼠标图标，悬停页面即可高亮对应 DOM 节点
- 展开右侧
Styles面板，搜索dis或vis快速定位display: none、visibility: hidden - 检查
Computed选项卡，看最终生效的width、height、box-sizing值——border-box下 padding 和 border 会计入宽高，常被误判 - 注意
z-index是否生效：只对position不是static的元素起作用
用 Network 和 Console 排查“看不见”的失败
页面空白、无样式、交互没反应，大概率不是 HTML 写错了，而是资源没加载或 JS 报错了：
- 切换到
Network面板，刷新页面，过滤css、js、img，看有没有404或403状态 -
src或href路径写成style.css却放在子目录下？应改为./style.css或../style.css - 切到
Console面板，看是否有Uncaught TypeError: Cannot read property 'xxx' of null—— 很可能是document.getElementById('modal')返回null，因为 id 拼错或元素还没加载完就执行 JS - JS 报错会阻塞后续脚本，哪怕只是某一行
console.log少了个括号，也可能让整个交互逻辑失效
别信“改完就生效”，DOM 修改有边界
在 Elements 面板里编辑 HTML 是改运行时 DOM，刷新即丢，且不触发框架响应式更新：
- 删掉一个
<div class="container">，所有.container > .item的 CSS 都会失效 - 手动加个
id="test"，document.getElementById('test')能取到，但 Vue/React 不知道这个变化，绑定的事件或数据不会自动同步 - 用
console.dir($0)查看当前选中元素的真实对象，比光看渲染结果更准 - 如果改了结构后样式崩了，先回退，再检查 CSS 选择器是否强依赖原有层级
真正影响效果的，从来不是你写了什么，而是浏览器最终构建出什么、加载到了什么、执行到了哪一步——盯住 Elements、Network、Console 这三个面板，比反复重读源码管用得多。
