文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
里嵌套等块级元素会失效，因浏览器解析时严格遵循内容模型，仅允许短语内容，遇块级元素立即闭合并将其移至外部，导致dom结构变为...，使queryselector('p > div')返回null、css选择器失配、样式无效，w3c验证器明确报错。
标签里放
、等块级元素，浏览器会立刻闭合，把块级元素移出到外面——不是样式没生效，是DOM根本没按你写的建。
为什么
里嵌套
会失效浏览器解析时严格遵循HTML内容模型：<p></p>只允许包含“短语内容”（文本、<strong></strong>、<em></em>、<img>等行内级元素），<div>属于块级容器，非法子节点。
- 遇到<code><p></p>
<div>xxx</div>，实际生成的是
<p></p><div>xxx</div><p></p>
- <code>document.querySelector('p > div')</code>永远返回null
- p { padding: 1em; }对<div>完全无效（它已不在<code><p></p>内）
- W3C验证器明确报错：Element div not allowed as child of element p哪些标签在
里同样会触发强制闭合
以下写法全部非法，效果等同于提前关掉<p></p>：
- <p></p>
<h2>标题</h2>
→ <p></p>
<h2>标题</h2>
<p></p>
- <p></p>
<ul><li>项</li></ul> → <p></p>
<ul><li>项</li></ul>
<p></p>
- <p></p>
<p>嵌套段落</p> → 第二个<p></p>会立即闭合前一个，再开新段落
- <p><section>内容</section></p> → 同样被踢出
正确替代方案：用什么代替
来包裹块级结构
别硬改CSS（display: inline拦不住解析阶段修正），直接换语义正确的父容器：
- 想组织多段内容（含标题+段落+列表）？用<article></article>或<section></section>
- 需要简单分组+样式隔离？用<div>，并加class明确意图（如<code>class="text-block"）
- 富文本编辑器输出带嵌套？后端清洗时用正则或DOMParser剥离非法子节点，或前端用innerHTML赋值前先替换<p>(.*?)</p>为<div class="paragraph">$1</div>
- 模板中动态渲染？避免<p>{items.map(i => </p>
<div>{i}</div>)}，改用<div>{items.map(i => <p>{i}</p>)}<h3>怎么快速确认自己有没有踩坑</h3>
别信源码，看真实DOM：
- 打开Chrome DevTools → Elements面板 → 右键任意节点 → “Edit as HTML”，随便改个字符回车，如果结构跳变，说明原始嵌套不合法
- 运行<code>document.querySelectorAll('p > *').forEach(el => console.log('p直系子元素:', el.tagName))，如果输出DIV或H2，就是已失效
- VS Code装HTMLHint插件，开启attr-validate和doctype-first规则，实时标红
- CI阶段跑npx html-validate src/**/*.html，比人眼可靠
真正麻烦的不是写错，是错得“看起来能用”——<p></p>闭合了，<div>还在页面上，但JS查不到、CSS选不中、SSR hydration失败。修复必须回到HTML结构本身，绕不开。</div>
，把块级元素移出到外面——不是样式没生效，是DOM根本没按你写的建。
为什么
里嵌套
浏览器解析时严格遵循HTML内容模型：<p></p>只允许包含“短语内容”（文本、<strong></strong>、<em></em>、<img>等行内级元素），<div>属于块级容器，非法子节点。
- 遇到<code><p></p>
<div>xxx</div>，实际生成的是
<p></p><div>xxx</div><p></p>
- <code>document.querySelector('p > div')</code>永远返回null
- p { padding: 1em; }对<div>完全无效（它已不在<code><p></p>内）
- W3C验证器明确报错：Element div not allowed as child of element p哪些标签在
里同样会触发强制闭合
以下写法全部非法，效果等同于提前关掉<p></p>：
- <p></p>
<h2>标题</h2>
<p></p>
<h2>标题</h2>
<p></p>
- <p></p>
<ul><li>项</li></ul> → <p></p>
<ul><li>项</li></ul>
<p></p>
- <p></p>
<p>嵌套段落</p> → 第二个<p></p>会立即闭合前一个，再开新段落
- <p><section>内容</section></p> → 同样被踢出
正确替代方案：用什么代替
来包裹块级结构
别硬改CSS（display: inline拦不住解析阶段修正），直接换语义正确的父容器：
- 想组织多段内容（含标题+段落+列表）？用<article></article>或<section></section>
- 需要简单分组+样式隔离？用<div>，并加class明确意图（如<code>class="text-block"）
- 富文本编辑器输出带嵌套？后端清洗时用正则或DOMParser剥离非法子节点，或前端用innerHTML赋值前先替换<p>(.*?)</p>为<div class="paragraph">$1</div>
- 模板中动态渲染？避免<p>{items.map(i => </p>
<div>{i}</div>)}，改用<div>{items.map(i => <p>{i}</p>)}<h3>怎么快速确认自己有没有踩坑</h3>
别信源码，看真实DOM：
- 打开Chrome DevTools → Elements面板 → 右键任意节点 → “Edit as HTML”，随便改个字符回车，如果结构跳变，说明原始嵌套不合法
- 运行<code>document.querySelectorAll('p > *').forEach(el => console.log('p直系子元素:', el.tagName))，如果输出DIV或H2，就是已失效
- VS Code装HTMLHint插件，开启attr-validate和doctype-first规则，实时标红
- CI阶段跑npx html-validate src/**/*.html，比人眼可靠
真正麻烦的不是写错，是错得“看起来能用”——<p></p>闭合了，<div>还在页面上，但JS查不到、CSS选不中、SSR hydration失败。修复必须回到HTML结构本身，绕不开。</div>
