订单确认邮件必须用内联样式表格布局，因邮箱客户端CSS支持不一：Outlook不支持flex、Gmail剥离style标签、安卓客户端忽略媒体查询；需用table固定宽度、td/tr结构、十六进制色值、绝对路径图片及px字体。
订单确认邮件不是前端页面，不能直接用 HTML 渲染交互；它本质是一封兼容性优先的纯静态邮件模板，核心约束是：只用内联样式、禁用 JavaScript、回避 Flex/Grid、表格布局仍是主力。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
为什么不能直接套用网页 HTML 写邮件？
因为各大邮箱客户端（Gmail、Outlook、Apple Mail）对 CSS 支持极不统一。比如：
-
display: flex在 Outlook 桌面版完全不生效 -
@media查询在部分安卓邮件客户端被忽略 - 外部样式表或
<style></style>标签块在 Gmail Web 版会被直接剥离 - 所有样式必须写成
style="..."内联形式才可靠
怎么写一个真正能发出去的订单确认邮件 HTML？
用语义清晰的 <table> 布局 + 100% 内联样式 + 安全色值 + 显式宽高。关键点：
<ul><li>整个邮件容器用 <code><table width="600" cellpadding="0" cellspacing="0"> 固定宽度，避免响应式“自作聪明”
<li>每行用 <code><tr>，每列用 <code><td>，不要嵌套 <code><div>
<li>字体统一用 <code>font-family: "Helvetica Neue", Arial, sans-serif;，字号用 px（如 font-size: 14px;），不用 rem 或 em
#333333），别用 rgb() 或命名色（gray 在 Outlook 可能变黑）width 和 height 属性，且加 alt；URL 用绝对路径（https://cdn.example.com/logo.png）示例片段：
立即学习“前端免费学习笔记（深入）”；
<table width="600" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tr>
<td align="center" style="padding:24px 0; background:#f8f9fa;">
<img src="https://cdn.example.com/logo.png" style="max-width:90%" style="max-width:90%" alt="Logo" style="display:block;">
</td>
</tr>
<tr>
<td style="padding:24px; font-family:Arial,sans-serif; font-size:14px; line-height:1.5; color:#333333;">
<p>您的订单已确认，订单号：<strong>#ORD-789012</strong></p>
<p>下单时间：2024-06-15 14:22</p>
</td>
</tr>
</table>
发邮件时容易被忽略的三个硬性配置
HTML 模板只是基础，实际发送还依赖后端配置，漏掉任一都会导致退信或进垃圾箱：
-
Content-Type必须设为text/html; charset=utf-8，且声明在邮件头，不能只靠<meta charset="utf-8"> -
From地址需使用已验证的域名邮箱（如no-reply@yourdomain.com），不能用gmail.com或qq.com直接发 - 必须设置
Subject和List-Unsubscribe头（即使只是静态邮箱地址），否则 Gmail 可能降权
最麻烦的不是写 HTML，而是测试——同一份模板在 Outlook 2016、iOS Mail、Gmail App 上渲染效果可能完全不同。建议用 Mailchimp 或 Putsmail 做跨客户端快照比对，而不是只看本地浏览器预览。
