Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

标签不能嵌套，因浏览器解析时会强制闭合前一个，生成两个独立段落，导致css选择器（如p > p）失效、js查询不到预期结构、屏幕阅读器误判；它仅合法包含短语内容（如、、），禁用块级元素（如、），验证须以devtools elements面板和queryselectorall('p')结果为准。

标签不能嵌套

，但可以合法包裹行内内容——只要不塞块级元素、不交叉闭合、不省略结束标签，就基本能保结构完整。

为什么

里不能套另一个

浏览器解析时会自动“修复”非法嵌套：<p>第一段</p> <p>第二段</p>

实际被转成 <p>第一段</p> <p>第二段</p>。这不是你写的结构，而是浏览器强行闭合第一个

导致的 DOM 断裂。后果包括：CSS 选择器失效（比如 p > p 永远匹配不到）、JS querySelector 找不到预期父节点、屏幕阅读器误判段落边界。

能合法包含哪些内容？

只接受 phrasing content（短语级内容），也就是语义上属于“文本流中一部分”的元素：

• <strong></strong>、<em></em>、<span></span>、<a></a> 这类行内元素 —— 完全安全
• <img>、<input>、<button></button> —— HTML5 允许，但要注意语义是否合理（比如 <p>请填写<input type="text"></p> 合法但体验差）
• <div>、<code><section></section>、<ul></ul>、<h2></h2> —— 非法，浏览器会提前闭合

  ，造成结构塌陷

  怎么验证嵌套是否真的完整？

  别信编辑器高亮或肉眼判断，直接看浏览器 DevTools 的 Elements 面板：

  • 展开后如果看到 <p></p> 标签内部突然跳出另一个独立 <p></p>，说明已被自动拆分
  • 检查 DOM 树有没有灰色文字（浏览器插入的隐式闭合提示）
  • 用 document.querySelectorAll('p').length 对比你写的 <p></p> 数量，不一致就是被修正过了
  • 运行 document.querySelector('p').innerHTML，如果返回值开头/结尾有意外换行或空格，大概率是解析干预痕迹

  实际写的时候最容易漏掉什么？

  最常被忽略的是「看似无害的换行和空格」：<p>\n <span>文字</span>\n</p> 看似干净，但首尾换行会被解析为文本节点，导致 textContent 带前后空白；更隐蔽的是 CMS 或模板引擎自动注入的空 <p></p>，它们会撑开间距、干扰 flex 布局对齐。真正完整的

  ，不是“没报错”，而是 DOM 树里它确实包裹了且仅包裹了你想让它包裹的内容。