Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
标签不能嵌套块级元素，这是浏览器解析阶段强制执行的结构修正规则，dom构建前已自动修正为合法结构，css和js均基于修正后结构工作。
标签不能嵌套块级元素，这不是限制，是浏览器解析阶段就强制执行的结构修正规则——你写的 <p></p>
<div></div>
<p></p>
<div></div>
<p></p>，CSS 和 JS 都得按这个“被修正后”的结构来工作。
为什么改结构比加 CSS 更有效
很多人试图用 display: inline 或 display: inline-block 让 <div> 塞进 <code><p></p>，但这是徒劳的。HTML 解析器根本不看 CSS，它只按规范判定：<p></p> 的内容模型只允许 phrasing content（文本、<span></span>、<strong></strong>、<img> 等），<div> 是 flow content，直接拒收。强行写进去，只会触发自动闭合，不会延迟、不会警告、不会报错，只默默改 DOM。
<ul>
<li>你写的 <code>document.querySelector('p > div') 永远返回 null
p { padding: 1em } 对移出去的 <div> 完全无效
<li>服务端渲染（SSR）后客户端 hydration 会因 DOM 结构不一致而失败</li>
<h3>哪些标签能合法包裹块级内容</h3>
<p>别在 <code><p></p> 上硬扛，换真正设计用来容纳块级结构的容器：
-
<section></section>：语义清晰，支持任意嵌套，适合内容区块 -
<article></article>：当内容自成一体（如博客正文、卡片）时首选 <div>：无语义但最自由，兼容性无压力 <li> <code><figure></figure>+<figcaption></figcaption>：图文组合场景下比<p></p>+<div> 更合理 <p>例如把 <code><p></p> <div class="meta">作者：张三</div> <div class="content">正文...</div>改为：<article><div class="meta">作者：张三</div> <div class="content">正文...</div> </article>
如何快速发现和验证嵌套问题
别信源码，信 Elements 面板里真实渲染出的 DOM 树：
- 在 Chrome DevTools 中右键节点 → “Edit as HTML”，随便改个空格再回车，如果结构跳变，说明原始嵌套不合法
- 运行
document.querySelectorAll('p > *').forEach(el => console.log(el.tagName))，如果输出中出现DIV或H2，说明你的页面已被浏览器悄悄修正过 - 用 W3C Validator（validator.w3.org）或 VS Code 插件 HTMLHint，配置启用
attr-validate和doctype-first规则
模板字符串拼接或 JSX 中同样危险：
看似只是结构小错，但它会引发多层副作用：空<p>{items.map(i => </p> <div>{i}</div>)}是错的，应改为<div>{items.map(i => <p>{i}</p>)}。 <h3>容易被忽略的连锁影响</h3> <p>一个 <code><p></p> <div></div><p></p>节点增加内存占用；文本流被切碎影响首屏文字绘制（FCP）；焦点顺序和屏幕阅读器遍历路径错乱；后续 JS 监听offsetHeight可能读到空<p></p>的值。这些都不是“看起来还行”，而是性能、可访问性和稳定性层面的真实退化。
