Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
标签内不能嵌套，浏览器会强制闭合并移出列表，导致dom断裂、样式失效、js查询失败；应改用等允许嵌套的容器，或让与列表并列布局。
<p></p> 标签里不能放 <ul></ul>、<ol></ol> 或 <li> —— 浏览器会立刻关闭 <p></p>，把列表移出到外面，导致结构断裂、样式丢失、JS 查询不到预期节点。
为什么 <p></p> 里写 <ul></ul> 会直接“断开”
根本原因是 <p></p> 的 content model 只允许 phrasing content（如 <span></span>、<em></em>、<img>），而 <ul></ul> 属于 flow content，一出现就触发解析器强制闭合当前 <p></p>。
常见后果包括：
-
document.querySelector('p ul')永远返回null - 原本靠
<p></p>的 margin 控制的段落间距消失，视觉上“跳空” - CSS 中
p > ul或p + ul选择器完全不生效 - 服务端渲染后客户端 hydration 失败（DOM 不一致）
替代方案：用语义正确又支持列表的容器
别硬塞进 <p></p>，改用本身允许嵌套列表的块级元素：
- 用
<div> 包裹整个段落+列表组合：<code><div> <p>说明文字</p> <ul><li>项1</li></ul> </div> - 若需强调“一段含列表的完整内容”，可用
<section></section>或<article></article>，它们天然支持混合内容 - 纯文本段落 + 列表分离更清晰？那就保持
<p></p>和<ul></ul>并列，用 CSS 控制间距（如margin-bottom） - 目标是更新一个
<div class="content">？那字符串就只写 <code><p>文字</p> <ul><li>列表</li></ul>，不带外层<div> <li>需要控制段落和列表的共用样式？统一加 class 到容器上，别依赖 <code>p ul这种层级选择器 - 批量插入？优先用
insertAdjacentHTML("beforeend", html)或DocumentFragment，避免反复清空重写 - 某个
<ul></ul>节点缩进突兀变平、颜色偏灰，大概率已被移出父级 - 右键该
<ul></ul>→ “Edit as HTML”，敲个空格回车，如果位置瞬间跳到外面，就是原始嵌套不合法 - 在 Console 执行：
[...document.querySelectorAll('*')].filter(el => !el.parentElement)，列出所有“孤儿节点”——这些就是被浏览器踢出来的
动态生成时怎么防 innerHTML 引发的嵌套错乱
用 innerHTML 更新某元素内容时，传入的 HTML 字符串不能以 <p></p> 开头再包 <ul></ul>——它会被当成子内容塞进去，形成非法嵌套。
怎么一眼看出是不是被浏览器“踢过”
打开 Chrome DevTools → Elements 面板，重点看三点：
最可靠的验证不是看源码，而是看浏览器实际建了什么 DOM；W3C Validator 报的 Element ul not allowed as child of element p 就是铁证，别绕开它强行 hack。
