Article To Html

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

下载

应优先使用 或 css 控制换行， 仅限同一语义段落内人工断行（如地址、诗歌）；滥用 破坏可访问性与 seo，css 更安全可控。

直接用 <br> 就能换行，但绝大多数时候不该用它——真正该用的是 <p></p>，或者干脆交给 CSS 控制。

什么时候必须用 <br>

只在「同一语义段落内、需人工断行」的场景才合法。比如地址、诗歌、歌词、表单提示文案这类内容，逻辑上是一段，但视觉上必须逐行对齐。

• 错误用法：<p>第一段<br>第二段</p> —— 这等于把两个独立语义块硬塞进一个段落，破坏可访问性和 SEO
• 正确用法：上海市<br>徐汇区<br>漕溪北路123号 —— 地址本身是一个信息单元，<br> 只负责视觉分行
• 注意：如果父容器是 <pre class="brush:php;toolbar:false;"></pre> 或设置了 white-space: pre，<br> 会被忽略；同理，在 Flex/Grid 容器里也大概率失效

<p></p> 不是“带空行的 <br>”

<p></p> 是块级元素，浏览器默认给它加了 margin-top 和 margin-bottom（通常是 1em），所以看起来“空了一行”。但这不是换行，是语义分隔。

• 搜索引擎和屏幕阅读器会把它当作独立内容块处理，<br> 则完全不被识别为结构节点
• 如果你删掉所有 <p></p> 的 margin，它不会“变成 <br>”，而是变成紧贴着的两行文本——语义依然存在，只是视觉间距没了
• 常见误操作：用 <p>标题</p> <p>描述</p> 做卡片文案是对的；但写成 <p>标题<br>描述</p> 就混淆了层级

CSS 比 <br> 更可靠

90% 的所谓“换行需求”，其实是间距或响应式断行问题，靠标签硬塞只会让样式越来越难维护。

• 段落间统一留空？写 p { margin-bottom: 1.2em; }，别每个后面加 <br>
• 用户输入含 \n 怎么渲染？服务端先转义 HTML 实体（<、>），再用 white-space: pre-line 包裹，比手动生成一堆 <br> 安全得多
• 表格/表单里想垂直堆叠字段？改 display: block 或 flex-direction: column，别在 <td> 里狂塞 <code><br>

  最容易被忽略的点

  不是“怎么换行”，而是“这段内容有没有独立语义”。<br> 一旦出现在富文本编辑器输出、服务端模板拼接、或 SSR 渲染流程里，就极容易触发 XSS 或结构错乱——因为它是纯表现指令，不参与 DOM 结构校验。而 <p></p> 至少有闭合约束，CSS 也能兜底控制。真正难的，是看一眼就知道该用哪个。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！