必须用表格骨架+内联样式+客户端特化处理，因outlook用word引擎不解析div、gmail剥离style、apple mail无视class/id；table需width属性而非css，三层嵌套td，padding/line-height等须显式声明单位，字体多层回退，隐藏内容用hybrid写法，测试覆盖四端真实环境。

不能用现代 HTML 写法直接套用，必须重写为表格骨架 + 内联样式 + 客户端特化处理。这是唯一能发出去不塌、不乱、不空白的路径。

为什么 <div> 和 <code><style></style> 在邮件里基本失效

Outlook 桌面版用 Word 渲染引擎，根本不解析 <div>；Gmail 会整块剥离 <code><style></style> 标签；Apple Mail 对 class 和 id 视而不见。你写的 <div class="header">Hello</div> 在多数客户端里等于没写。

• <p></p> 会被 Outlook 自动包裹、换行、吃掉 margin
• display: flex、max-width、@media 全部被忽略或导致整段错位
• font-family: 'PingFang SC', sans-serif 在 Windows Outlook 里直接回退到 Times New Roman
• 哪怕只加一个 margin-top: 12px，在 Gmail App 中也会被完全丢弃

<table> 嵌套结构怎么写才稳 <p>外层容器必须是 <code><table width="600">，不是 <code>style="width: 600px" —— Outlook 更认 width 属性本身。

• 所有内容必须包在 <table> → <tr> → <td> 三层结构里，不能跳级或混入 <code><div> <li>横向分栏不用 <code>float 或 inline-block，改用 <td width="300"> 并列 <li>需要“响应式堆叠”？再套一层 <code><table>，移动端靠 <code>width="100%" 强制单列，别信 @media
• 避免 colspan/rowspan —— Outlook 2013+ 渲染极不稳定，宁可用空 <td> 占位 <h3>内联样式必须手写，不能靠工具自动转</h3> <p>工具如 Roadie 或 <a style="color:#f60; text-decoration:underline;" title="html" href="https://m.php.cn/zt/15763.html" target="_blank">html</a>email.io 可以帮你把 CSS 类展开，但无法修复 Outlook 对 <code>padding 的忽略、Gmail 对 line-height: 1.4（无单位）的误读，或 Apple Mail 对 font-size: 14px 和 14em 的混淆。
  

  Article To Html

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

  下载
  • 写 padding-top: 12px; padding-right: 16px; padding-bottom: 12px; padding-left: 16px;，别简写成 padding: 12px 16px;
  • 字体必须显式声明单位：font-size: 14px; line-height: 20px;，而不是 line-height: 1.4em
  • 背景色优先设在 <table bgcolor="#f0f0f0"> 上，<code><td style="background-color:#f0f0f0"> 在 Outlook 里渲染不可靠 <li>图片必须带 <code>width 和 height 属性，且 src 是 HTTPS 绝对路径，否则 Outlook 显示占位符、Gmail 直接 block

  Doctype、字体和隐藏内容怎么兜底

  用 —— 不是 HTML5 的 <code>，也不是 HTML 4.01 Strict。Gmail 和 Hotmail 会主动替换成这个，它更稳定。

  • 字体安全栈必须多层回退：font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;，别写系统字体如 'SF Pro Display'
  • 要隐藏“仅桌面显示”的区块？别用 display: none —— Gmail App 会直接删掉整条 style 声明。得用 hybrid 写法：<div style="display:none; max-height:0; overflow:hidden;"> <li> <code><img> 必须加 alt，且建议加 style="max-width:90%" 消除下方空白，Outlook 默认会留空隙

  最常被忽略的一点：没有 DevTools，没有实时刷新，没有 JavaScript 修正。你写的每行 HTML，就是最终用户看到的样子。测试必须覆盖 Outlook（Windows/macOS/iOS）、Gmail（Web/App）、Apple Mail、QQ 邮箱四端真实环境，不能只看浏览器预览。