浏览器会静默修正非法嵌套html，如将hello改为hello，导致dom与源码不一致，引发css失效、js查询失败等问题；w3c validator是唯一能准确定位嵌套错误的工具。
浏览器根本不拦截非法嵌套，只静默修正
你写的 <p></p>
<div>hello</div>
<p></p>，把 <div> 提到外面，再补一个空 <code><p></p>。整个过程不报错、不警告、不中断加载——你看到的 DOM 树，和你写的 HTML 已经是两回事。
这意味着：CSS 选择器失效、document.querySelector('p div') 返回 null、JS 绑定事件找不到目标、表单提交逻辑错乱，全都不意外。
- 别信“页面能显示”，打开 Chrome DevTools → Elements 面板，看左侧真实 DOM 结构
- 右键任意节点 → “Edit as HTML”，随便敲个空格回车：如果整块结构跳变位置，说明原始嵌套不合法
- 禁用所有 CSS 后检查布局是否塌陷或错位，这是父容器被提前截断的典型信号
W3C Validator 是唯一能准确定位首个嵌套错误的工具
DevTools 看的是“修正后”的 DOM，而 W3C Validator（validator.w3.org）按 HTML 规范逐条校验内容模型（content model），它告诉你“哪个标签不该出现在谁里面”。比如报错 Element div not allowed as child of element p，就是铁证。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 粘贴 HTML 片段 → 选 “Validate by Input” → 立刻得到结构级错误定位
- 优先修复第一条 Error，后续大量 Warning 往往是连锁反应，修完第一个，后面可能全消失
- 别忽略
Element img is not closed这类提示：写成<img>是违法的，会导致后续所有层级偏移
用 JS 快速揪出被浏览器“踢出来”的孤立节点
那些被浏览器自动挪到 DOM 树外层、失去父级上下文的元素，不会报错，但永远拿不到父级样式、JS 查询也找不到它们。执行这行代码能暴露全部：
document.querySelectorAll('*').forEach(el => { if (!el.parentElement) console.log('孤立元素:', el) })
常见来源包括：<ul></ul> 里直接塞 <div>、<code><table> 里漏了 <code><tr>、<code><p></p> 里放 <h2></h2>。
- 这些节点在 Elements 面板里通常显示为灰色、半透明、缩进突兀
- 它们无法响应
body > div这类依赖父级关系的选择器 - 服务端渲染或模板引擎（如 JSX、Vue SFC）中尤其隐蔽，因为编译阶段不校验 HTML 合法性
嵌套错误会隐式放大重排范围，不止影响样式
非法嵌套触发的不是一次 layout，而是多次 DOM 修正 + 样式重计算。比如 <ol><p>Item</p></ol> 被拆成两个 <ol></ol> 和中间一个 <p></p>，列表序号重置、焦点顺序错乱，更关键的是：原本一次 layout 就能完成的渲染，变成了三次独立 layout，且父级 可能被迫参与。
- 在 Chrome Layers 面板观察是否有大量小尺寸、边界重叠的合成层——这是嵌套修正 + position 堆叠共同导致的渲染子树碎片化
- 运行
getComputedStyle(document.body).display，若返回block但实际有浮动/定位干扰，大概率是嵌套不合法导致样式继承链断裂 - 对疑似区域右键 → “Break on” → “subtree modifications”，交互触发变化时若断点停在 wrapper 而非目标元素，说明重排已扩散
真正难的不是定位问题，而是接受：你写的 HTML 和浏览器生成的 DOM 是两套东西。靠肉眼数标签、靠 CSS 调样式、靠 JS 强行 patch，都绕不开这个前提——必须回到规范本身去修正嵌套逻辑。
