浏览器会静默修正内嵌等非法结构，拆为文字块内容，导致CSS/JS失效、首屏偏差和无障碍问题；应通过Elements面板验证真实DOM，并用语义化标签替代非法嵌套。
模板里硬往 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 里塞 <div>、<code><ul></ul> 或 <h3></h3>，不是“样式没生效”，是浏览器根本没按你写的建 DOM——它当场拆掉、重排、补空标签，后续所有 JS 查询和 CSS 选择器都基于这个被篡改后的结构运行。
模板中动态拼接时，<p></p> 开头的字符串会触发非法嵌套
比如在 Vue 的 v-html、React 的 dangerouslySetInnerHTML 或纯 JS 的 innerHTML = '<p>说明</p>
<div>详情</div>
<p></p> 开头且内部含块级元素，解析器就会立刻闭合 <p></p>，把 <div> 移到外面。结果是：<pre class="brush:php;toolbar:false;"><p>说明</p><div>详情</div><p></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></p>
<ul>
<li>永远别传 <code><p>...<ul>...</ul>...</p></pre> 这类字符串给 <code>innerHTML 或服务端模板引擎
'<p>说明</p>
<ul><li>项1</li></ul>'，再整体插入容器（如 <div class="content">）
<li>用 <code>insertAdjacentHTML("beforeend", html) 替代反复清空 innerHTML，避免多次触发非法解析
<p></p> 在模板循环或条件块中不能当外层容器用
常见错误：在 Nunjucks / Jinja / EJS 中写 <p>{% if showTip %}<span>提示</span>{% endif %}</p>，看似安全，但一旦 showTip 为 false，<p></p> 就变成空标签；更危险的是混入 <div> 或 <code><ul></ul> 条件分支，比如 <p>{% if type == 'list' %}</p>
<ul>...</ul>{% endif %} —— 浏览器不等模板渲染完，解析时就已修正结构。
- 条件逻辑必须在外层容器完成：
<div class="block"> <p>文字</p>{% if type == 'list' %}<ul>...</ul>{% endif %}</div> - 循环内容不要塞进
<p></p>：避免<p>{% for item in list %}<span>{{ item }}</span>{% endfor %}</p>，改用<div> <p>文字</p> <div class="items">...</div> </div> - SSR 场景下尤其危险：服务端生成的 HTML 和客户端 hydration 时重建的 DOM 结构不一致，直接触发 React/Vue 的 hydration error
怎么在模板开发阶段就发现嵌套问题
靠肉眼检查源码毫无意义——模板编译后输出的 HTML 字符串，和浏览器最终构建的 DOM 是两回事。必须验证真实 DOM：
- 在 DevTools Elements 面板中右键某个疑似有问题的
<p></p>→ “Edit as HTML”，删一个空格再回车：如果子节点突然跳到同级或缩进变平，说明原始嵌套非法 - 控制台执行：
document.querySelectorAll('p > *').forEach(el => console.log(el.tagName))，若输出含DIV、UL、H3，即表示你看到的是浏览器修复后的 DOM，不是模板输出的 - CI/CD 中加校验：用
html-validate配置规则no-inline-element-with-block-content，或nu-html-checker检查报错Element ul not allowed as child of element p
最隐蔽的坑不在报错里，而在没人检查的模板片段中：它不中断构建、不抛异常、甚至页面看起来“差不多”，但每次 querySelector 失败、CSS margin 失效、屏幕阅读器读序错乱，根源可能就是某一行被浏览器悄悄拆开的 <p></p>
<div>。</div>
