Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
浏览器会自动修正非法嵌套，将p内div等块级元素移出并闭合p标签；elements面板中div变灰、缩进塌陷、与p并列即为信号；w3c validator能精准报错“element div not allowed as child of element p”。
怎么一眼看出 p 里塞了 div、h1 或其他块级元素
浏览器不会报错，但会立刻关掉 p 标签，把非法子元素“踢”到外面——你写的 <p></p>
<div>内容</div>
<p></p>
<div>内容</div>
<p></p>。Elements 面板里最直观的信号是：div 节点突然变灰、缩进塌陷、和 p 并列显示（不是嵌套），右键 Edit as HTML 后结构跳变也说明它原本不合法。
-
p允许的子元素只有短语级内容：文本、span、em、strong、a、img（带alt）、br等；div、h1–h6、ul、table全都不行 - 富文本编辑器（如微信公众号后台、CMS 可视化编辑器）导出的 HTML 最容易偷偷塞进
<p></p> <div class="card">...</div> - 用
document.querySelector('p div')返回null，但页面上明明有div在“段落位置”，基本就是被踢出来了
用 W3C Validator 快速定位具体哪一行错了
W3C validator.w3.org 是目前唯一能明确告诉你 “Element div not allowed as child of element p” 的工具。它不看渲染，只按 HTML5 内容模型（content model）校验，比任何浏览器面板都准。
- 粘贴 HTML 片段或输入 URL，选 “Validate by Input” 或 “Validate by URI”
- 优先修复第一条 Error，后面很多 Warning 是连锁反应（比如
p被提前闭合后，后续所有层级都偏移） - 注意提示里的 “in this context”，它强调的是父容器上下文，不是标签本身是否合法
- 别忽略
Element img is not closed这类提示：<img>是非法写法，会导致p解析中断，间接引发嵌套错位
命令行批量检查含 p 的 HTML 文件（Linux/macOS）
本地 CI 或运维场景下，不能靠手动开浏览器。tidy 是最轻量可靠的命令行选择，它能识别嵌套违规并输出行号。
- 安装：
sudo apt install tidy（Ubuntu/Debian）或brew install tidy-html5（macOS） - 运行：
tidy -errors -quiet index.html——-quiet不要加-q，否则丢行号 - 典型报错：
replacing unexpected <div>、<code>discarding unexpected <h2></h2>，直接对应p内非法子元素 - 如果已有 Python 环境，
html5lib更贴近浏览器解析逻辑：python -c "import html5lib; html5lib.parse(open('index.html').read())"，抛异常的位置就是嵌套断裂点 -
p > div这类选择器永远匹配不到——因为div已不在p里 -
p默认的上下 margin 消失，导致段落间紧贴，误以为是 CSS 没生效 -
document.querySelector('p').textContent可能返回空字符串，因为内容被移到了兄弟节点 - SSR（服务端渲染）和客户端 hydration 失败：服务端吐出的嵌套结构和服务端实际生成的 DOM 不一致，React/Vue 会报 “Hydration failed”
为什么 CSS 和 JS 会莫名其妙失效
不是代码写错了，而是你操作的对象根本不存在于你认为的位置。真实 DOM 已被浏览器重排，所有基于原始结构的假设都崩了。
p 嵌套，本质是查“哪些元素不该出现在段落上下文中”，而不是数括号是否配对。
