订单确认邮件必须用内联样式表格布局，因邮箱客户端CSS支持不一：Outlook不支持flex、Gmail剥离style标签、安卓客户端忽略媒体查询；需用table固定宽度、td/tr结构、十六进制色值、绝对路径图片及px字体。

订单确认邮件不是前端页面，不能直接用 HTML 渲染交互；它本质是一封兼容性优先的纯静态邮件模板，核心约束是：只用内联样式、禁用 JavaScript、回避 Flex/Grid、表格布局仍是主力。

为什么不能直接套用网页 HTML 写邮件？

因为各大邮箱客户端（Gmail、Outlook、Apple Mail）对 CSS 支持极不统一。比如：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• display: flex 在 Outlook 桌面版完全不生效
• @media 查询在部分安卓邮件客户端被忽略
• 外部样式表或 标签块在 Gmail Web 版会被直接剥离
• 所有样式必须写成 style="..." 内联形式才可靠

怎么写一个真正能发出去的订单确认邮件 HTML？

用语义清晰的

布局 + 100% 内联样式 + 安全色值 + 显式宽高。关键点：

• 整个邮件容器用

固定宽度，避免响应式“自作聪明”

每行用

，每列用

，不要嵌套

字体统一用 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）

示例片段：

Content-Type

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