浏览器不报错但dom结构已崩坏，可通过elements面板观察灰色斜体标签、缩进断裂、父子关系突兀断开等现象确认；右键“edit as html”触发结构跳变，或比对document.body.innerhtml与源码差异，即可发现浏览器静默修正痕迹。
浏览器不报错但DOM结构已崩坏，怎么确认？
别信源码缩进，信 Elements 面板里实际渲染的 DOM 树。灰色斜体标签（如 <div> 显示为灰色且无子节点）、缩进突然断裂、父子关系突兀断开——这些都是浏览器自动纠错的铁证。<p>实操建议：</p>
<ul>
<li>右键疑似父容器 → “Edit as HTML”，删一个字符再回车：如果子树整体跳出去，说明原始 HTML 已被修正过</li>
<li>在 Console 执行 <code>document.body.innerHTML，和本地文件逐行比对——多出的 、消失的 <section></section> 都是线索
End tag for element 'section' seen, but there were open elements. 这类提示，先去 Elements 确认是否已被修复，再决定要不要补闭合为什么 <p></p>
<div>xxx</div> 会导致整个页脚跑进导航栏？
<p></p> 是严格行内容容器，按规范不能包含 <div>、<code><h2></h2>、<ul></ul> 等块级元素。浏览器解析时会立刻关闭 <p></p>，把后续内容扔到外面。
错误写法：<p></p>
<div>文字</div>
<p></p>
<div>文字</div>实操建议：
- 想包裹多段内容或嵌套标题/列表，用
<section></section>或<div> 替代 <code><p></p>，而不是往<p></p>里硬塞 - VS Code 开启
editor.matchBrackets，光标停在<p></p>上能高亮匹配的，避免手动数漏 - W3C Validator 报
Element div not allowed as child of element p必须优先修复，不是警告，是结构性错误 - 统一用
<img src="x">（HTML5 推荐省略/>），不要加 - 模板字符串拼接（如 EJS、JSX）时尤其危险，建议加注释标明层级：
<!-- end user card --> - W3C Validator 报
Element img is not closed不是可忽略提示，必须处理 - outline 不影响盒模型，比
border安全；但会覆盖部分伪元素效果（如::before背景），仅作临时调试 - 查完立刻执行
document.querySelector('style').remove()清除样式
自闭合标签加 /> 会怎样？
<img>、<input>、<meta>、<br> 是 void 元素，在 HTML5 中禁止闭合。写成 <img src="x"> 会被当成两个标签：第一个被忽略，第二个被当作普通容器，后续所有嵌套整体右移一级。
错误后果举例：<div>
<img src="a.jpg"><p>文字</p>
</div> → 实际 DOM 可能变成 <div><img src="a.jpg"></div>
<img><p>文字</p>
实操建议：
用 outline 快速暴露错位元素，但页面太乱怎么办？
布局异常（横向滚动、内容跑出容器、定位漂移）八成源于结构错误导致的 DOM 解析偏移，不是 CSS 写错了。执行 document.head.innerHTML += '<style>*{outline:1px solid red!important;background:rgba(255,0,0,0.05)!important;}</style>' 能立刻显形撑破父容器的 <div>、错嵌在 <code><p></p> 里的 <div>、或被浏览器自动包裹的孤立文本块。<p>但全量 outline 容易视觉过载，实操建议：</p>
<ul>
<li>缩小范围：只标记关键容器，例如 <code>div { outline: 2px solid #0088ff !important; }
真正难的不是发现错误，而是意识到“浏览器没报错”不等于“结构没问题”。DOM 实际结构和你写的源码不一致，才是大多数布局、JS 查询、表单失效问题的根源。
