Article To Html

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

下载

必须用布局，因outlook windows版使用word引擎，不解析和现代css，90%邮件会错位、留白或堆叠；gmail则剥离且静默丢弃部分内联样式。

直接说结论：不用 <table> 布局，90% 的邮件在 Outlook Windows 版里会错位、留白、文字堆叠或按钮消失——这不是你代码写得差，是客户端根本不解析 <code><div> 或现代 CSS。 <h3>为什么必须用 <code><table> 而不是 <code><div> <p>Outlook Desktop（2016–2024）用的是冻结在 2007 年的 MS Word 渲染引擎，它不认识 <code>display: flex、margin: 0 auto，甚至会把 <p></p> 自动包裹或吃掉你设的 padding；Gmail 则整块剥离 <style></style> 标签，连 style="margin: 20px" 都可能静默丢弃。

你看到的“布局崩了”，不是 bug，是预期行为。写 <div class="header"> 在多数客户端里等于没写。 <ul><li><code><table> 不是怀旧，是唯一能跨平台控制对齐、宽度、堆叠顺序的 HTML 元素 <li>语义化标签（<code><section></section>、<header></header>、<article></article>）会被主动忽略或强制闭合

Flexbox / Grid / @media 在 Outlook 中完全无效，在 Gmail 中支持极弱且不可靠

<table> 三层嵌套怎么写才不出错 <p>实测安全上限就是三层：外层撑满、中层定宽、内层控内容。超三层在 iOS Mail 和 Samsung Email 里容易触发文字换行异常、<code>valign 失效甚至整列偏移——它们不报错，只是静默错乱。

• 最外层：<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation"> —— 提供背景色和居中上下文，<code>role="presentation" 告诉屏幕阅读器这不是数据表
• 中层：<table width="600" cellpadding="0" cellspacing="0" border="0"> —— <code>width="600" 是硬性属性，style="width: 600px" 在 Outlook 2013/2016 中直接被忽略；600px 是 Outlook 安全线，700px 可能横向滚动
• 内层：<td bgcolor="#ffffff" style="padding: 32px"> —— 所有内容必须包在 <code><td> 里，<code><p></p> 可以用，但不能脱离 <td> 单独存在 <h3>图片、按钮、文字这些细节怎么防崩</h3> <p>它们不是独立元素，而是要“寄生”在已对齐的 <code><td> 里，靠 HTML 属性而非 CSS 控制行为。 <ul> <li>图片必须同时写 <code>width="200" height="40" 和 style="width: 200px; height: 40px; display: block;"，缺一不可；否则 Outlook 可能拉伸变形，Gmail App 里相对路径常 404
• 按钮禁用 <button></button>，改用嵌套 <table>：<code><table align="center"><tr><td bgcolor="#007bff" style="padding:12px 24px">点击确认</td></tr></table>；background-color 内联在 Outlook 2007/2010 中不支持
• 文字对齐统一用 <td align="center">，别信 <code>style="text-align: center"（Outlook 2010 中大概率失效）；小字号 footer 优先用 <font size="2"></font>，比 CSS font-size 更稳
• 所有 <td> 显式加 <code>valign="top"，否则 Outlook 默认垂直居中，导致上下留白不可控

  宽度、边距、圆角这些样式怎么写才生效

  很多样式不是“不支持”，是写法错了位置。比如 border-radius 在 Gmail Web、iOS Mail、Apple Mail 中支持，但在 Outlook 中无效——但你不能因此放弃，而要用 bgcolor + 内边距模拟圆角感。

  • 所有 <table> 必须显式声明 <code>border="0"、cellpadding="0"、cellspacing="0"；漏掉 cellspacing，单元格之间会出现不可控空白
  • 宽度必须用 width="600" 而非 style="width: 600px"；max-width 在 Outlook 中不解析
  • 左右栏布局时，两个并列 <td> 各设 <code>width="300"，比嵌套 <table> 更稳（Yahoo 邮箱对嵌套 <code><table> 容易撑宽整行） <li>按钮或卡片区域的“圆角感”：用 <code>bgcolor="#f8f9fa" + style="padding: 24px"，视觉上接近，且全平台兼容

  真正难的不是写代码，而是记住哪些属性必须写成 HTML 属性（align、valign、width），哪些样式只能内联且仅限子集（color、font-family、line-height），以及哪些“看起来正常”的写法在 Outlook 里根本不会被解析——这些边界，才是邮件模板稳定交付的关键。