邮件模板必须用内联CSS和table布局，禁用现代CSS；字体用安全栈；图片需设宽高和alt；按钮用带背景的table实现；发送前须HTTPS图片、无BOM头、真实SMTP发送。
直接用纯 HTML + 内联 CSS 做欢迎邮件模板，不是写网页，而是写「能发到 Gmail、Outlook、Apple Mail 里还能正常显示」的邮件——这俩根本不是一回事。绝大多数前端习惯的 CSS（比如 flex、grid、class 外链或 <style> 块）在邮件客户端里会被无视甚至破坏布局。
为什么不能用现代 CSS 写邮件模板
邮件客户端渲染引擎极度保守：Outlook Desktop 用 Word 渲染，iOS Mail 不支持 @media 查询中的大部分属性，Gmail 会剥离 <style> 标签和几乎所有伪类。你写的 margin: 0 auto 在 Outlook 里可能完全不居中，display: inline-block 在某些安卓邮件 App 里直接塌陷。
实操建议：
- 所有样式必须写成
style="..."内联形式，且只用表格（<table>）做布局，别碰<div>布局 - 字体优先用安全字体栈：
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif；避免用system-ui或自定义 web font - 图片必须带
alt属性，并设width和height（防止 Outlook 拉伸变形） - 禁用
float、position、z-index、:hover等几乎全部交互/定位相关 CSS
怎么用 table 实现居中卡片式欢迎布局
所谓“卡片”，在邮件里就是一层套一层的 <table>：外层定宽居中，中间加 padding，内容区再套一层 table 控制文字对齐。不要幻想用 max-width 或 box-sizing。
立即学习“前端免费学习笔记（深入）”；
示例结构片段：
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" style="padding: 24px 0">
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#ffffff" style="border-radius: 8px; padding: 32px">
<h1 style="margin: 0 0 16px 0; font-size: 24px; color: #333">欢迎加入！</h1>
<p style="margin: 0; font-size: 16px; line-height: 1.5">你的账号已激活，现在可以…</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
注意：border-radius 在 Outlook 中无效，但多数现代客户端（Gmail Web、iOS Mail、Apple Mail）支持；如需兼容 Outlook，改用 bgcolor + 内边距模拟圆角感。
链接、按钮、响应式怎么处理
邮件里的「按钮」本质是带背景色的 <table> 或 <td>，不是 <button>。响应式只能靠媒体查询 + min-width，但仅限 Gmail App、iOS Mail 等少数客户端生效；Outlook 和旧版 Android Mail 完全不认。
实操要点：
- 按钮写法：用
<table>包住<td>，设置background-color、padding、border-radius，内部文字用<center>或align="center" - 所有链接必须带
target="_blank"（部分客户端默认新窗口打开，但显式声明更稳） - 响应式媒体查询只写一次，放在
<head>最上方，且只针对宽度断点（如max-width: 600px），不要嵌套复杂选择器 - 关键 CTA 链接下方务必留白（
padding-bottom: 24px），否则 iOS Mail 可能误判为电话号码自动加链接
测试和发送前必须检查的三件事
写完模板不等于能发——90% 的显示问题出在发送环节。
务必确认：
- 所有图片 URL 是 HTTPS 协议且可公开访问（Gmail 会拦截 HTTP 图片并留空白）
- HTML 文件里没有 UTF-8 BOM 头（会导致 Outlook 解析失败，首行乱码）
- 发送时使用真实 SMTP（如 SendGrid、Mailgun），而不是本地
mailto:或 Outlook 桌面客户端直发——后者会自动重写 HTML、删style、改编码
最省事的验证方式：用 https://putsmail.com 粘贴 HTML 发给自己，看 Gmail / iOS Mail / Outlook 三端实际效果。别信本地预览。
