Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
浏览器elements面板显示的dom是html5规范强制修正后的结果，而非原始html；例如内嵌会被拆分为兄弟节点，因只允许短语内容。
浏览器 Elements 面板里看到的 DOM 不是你写的 HTML
你写的 <p>文字</p>
<div>区块</div>
<p>文字</p> 和 <div>区块</div>。这不是渲染 bug，是浏览器按 HTML5 规范强制修正的结果——<p></p> 只能包含短语内容（phrasing content），<div> 是流内容，不允许作为其子元素。
<ul>
<li>别靠“源码视图”判断结构，Elements 面板才是真实 DOM 树</li>
<li>灰色、半透明、缩进突兀的节点，大概率是被踢出的孤立元素</li>
<li>右键某节点 → Edit as HTML → 敲个空格回车：如果整个子树位置跳变，说明原始嵌套不合法</li>
<li>禁用所有 CSS 后检查布局是否塌陷或错位，常因父容器被提前闭合导致</li>
</ul>
<h3>用 W3C Validator 定位首个嵌套错误</h3>
<p>它不看渲染，只校验 content model，报错精准到“哪个标签不该出现在谁里面”。例如报 <code>Element div not allowed as child of element p，就说明你在 <p></p> 里写了 <div>，必须改。
<ul>
<li>粘贴 HTML 片段到 <code>validator.w3.org，选 “Validate by Input”
Element img is not closed 这类提示：<img> 写成 <img> 就违法，会导致后续层级整体偏移curl -F "uploaded_file=@index.html" https://validator.w3.org/nu/ 自动阻断部署用 JS 快速揪出被浏览器丢弃的孤立节点
这些节点没父级，拿不到继承样式，querySelector 找不到，但又真实存在于页面上——它们就是非法嵌套后被“踢出来”的孤儿。
- 控制台执行：
document.querySelectorAll('*').forEach(el => { if(!el.parentElement) console.log('孤立元素:', el) }) - 常见来源：
<ul></ul>里直接塞<div>、<code><table> 里漏了 <code><tr>、<code><p></p>里放<h2></h2> - 这些节点不会报错，但
getComputedStyle(el).display可能返回inline却表现得像块级——因为父级上下文已丢失 - 再执行
el.innerHTML += '结束'，等于解析'<p>开始</p>结束'，第二个因无匹配起始标签被忽略 - 结果是：
<p>开始</p>结束，而非预期的<p>开始结束</p> - 需要流式拼接时，先累积字符串变量，最后一次性赋值；更安全用
insertAdjacentHTML('beforeend', ...)或DocumentFragment
为什么 innerHTML += 会把结构越修越烂
innerHTML += 不是追加 DOM，而是每次重新解析字符串。浏览器不会保留上次解析的中间状态，所以它根本不知道你“本想接着写一个 <div>”。
<ul>
<li>写 <code>el.innerHTML = '<p>开始'</p>，实际得到的是 <p>开始</p>（自动补闭合）
<div> 被踢出去了，而是你还在用原始 HTML 的层级写 CSS 选择器、JS 查询逻辑，却不知道浏览器早已重建了一棵完全不同的 DOM 树。</div>
