Article To Html

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

下载

应使用 margin 控制段落上下间距、text-indent 实现首行缩进、text-align 设置对齐方式；避免滥用 padding、line-height 或嵌套非法元素，确保语义正确与兼容性最优。

直接用 margin 控制段落上下间距，用 text-indent 实现首行缩进，用 text-align 调对齐——这是最稳定、兼容性最好、语义也最干净的做法。别用

<br>

模拟段落，也别靠 line-height “凑”段距。

怎么改段落上下间距？只动 margin，别碰 padding 和 line-height

浏览器给 <p></p> 默认加了约 1em 的 margin-top 和 margin-bottom，这就是你看到的“段距”。想调大调小，就直接覆盖它：

• 统一所有段落：p { margin: 0.8em 0; }
• 只调某一段下方空隙：.intro p { margin-bottom: 1.2em; }
• 去掉首段顶边距、末段底边距：.content p:first-child { margin-top: 0; } .content p:last-child { margin-bottom: 0; }
• 千万别只设 margin-top，否则相邻段落会叠加出双倍空白
• line-height 是控制段内行高，和段距无关；padding 是往段落内部“撑”，不是用来分隔段落的

中文首行缩进两个字，为什么用 2em 而不是 32px？

text-indent: 2em 是推荐写法，因为 em 相对于当前字体大小，缩进始终是“两个字符宽”。如果用户放大字体或切换系统字号，2em 仍能自适应；而 32px 是固定像素，在高 DPI 屏幕或缩放 150% 时可能缩进过窄或过宽。

• 在 <p></p> 上直接加：<p style="text-indent: 2em;">正文开始…</p>
• 若必须用像素（比如设计稿强约束），至少配合 font-size 一起设，避免脱节
• text-indent 只作用于首行，不影响后续换行，这点比用 padding-left 安全得多

为什么不能在 <p></p> 里嵌套 <div> 或另一个 <code><p></p>？

HTML 规范明确禁止块级元素嵌套在 <p></p> 内。浏览器遇到 <p></p> <div>xxx</div>

会自动截断，实际解析成 <p></p> <div>xxx</div> <p></p>——结构意外断裂，样式错位，SEO 和屏幕阅读器也会误判。

• 合法嵌套：只有行内元素，比如 <strong></strong>、<a></a>、<code>、<em></em>
• 要包裹多段内容？用 <div> 或语义化容器（如 <code><article></article>）包住多个 <p></p>，而不是反向操作
• 地址、作者信息等非自然语言段落，该用 <address></address> 就别硬塞 <p></p>

什么时候不该用 <p></p> 标签？

<p></p> 的本质是「自然语言段落」，不是「视觉上占一行的东西」。滥用会导致语义污染，影响可访问性和 SEO。

• 表单提示文字（如“密码需包含数字”）应放在 <small></small> 或用 aria-describedby 关联，而非独立 <p></p>
• 短标语、页脚版权行、作者署名，更适合 <small></small>、<footer></footer> 或 <aside></aside>
• 代码说明、技术术语解释，优先考虑 <dl></dl> + <dt></dt>/<dd></dd>，比堆 <p></p> 更清晰
• 富文本编辑器粘贴后出现的 <div> 块，要手动转回 <code><p></p>，否则语义丢失

  真正难的不是怎么写样式，而是判断哪段内容“配得上”一个 <p></p>。语义对了，样式才不会反复返工；结构稳了，响应式和无障碍才不是补丁活。