HTML邮件必须用表格布局和内联样式，因Outlook（Word引擎）、Gmail、Apple Mail等不支持Flex/Grid/@media，会剥离外部CSS和style标签，导致布局错乱、样式失效。
HTML 邮件不能用现代前端那一套 —— Flex、Grid、@media 查询在多数邮箱客户端里直接失效，连 margin 和 padding 都可能被忽略。想让活动邀请邮件在 Outlook、Apple Mail、Gmail 里长得差不多，得倒退十年用表格布局 + 内联样式。
为什么不能直接用 CSS 外链或 <style> 标签
Outlook（尤其是 Windows 版）会剥离 <head> 和外部样式表；Gmail 会过滤大部分 <style> 块里的规则；Apple Mail 虽然支持部分 CSS，但不保证一致性。结果就是：你在浏览器里预览好好的邮件，在收件人手机上变成文字堆叠、按钮消失、图片错位。
- 所有样式必须写成
style="..."内联形式 - 布局靠
<table>套嵌，单列为主，避免复杂嵌套 - 字体优先用系统安全字体栈：
font-family: Arial, sans-serif;，别指望Inter或Helvetica Neue被识别 - 图片必须带
alt属性，且设固定width/height，否则 Outlook 可能撑开容器
<table> 布局怎么写才稳
不是“能用就行”，而是要适配最老的 Outlook（2007/2010），它只认 cellspacing="0"、cellpadding="0" 和 border="0" 这三板斧。任何留白都得靠 <td> 的 height 或透明 GIF 占位。
- 外层容器用
<table width="600" align="center">，固定宽度比百分比更可靠 - 每行一个
<tr>，内容区用<td valign="top">，避免垂直对齐异常 - 按钮别用
<button>或<a>加 CSS，改用带背景色的<table>包裹文字：<table role="presentation" cellspacing="0" cellpadding="0" border="0"> <tr> <td align="center" bgcolor="#007bff" style="border-radius:4px;"> <a href="https://example.com/rsvp" target="_blank" style="display:inline-block; color:#ffffff; font-family:Arial,sans-serif; font-size:16px; font-weight:bold; text-decoration:none; padding:12px 24px;">立即报名</a> </td> </tr> </table>
发之前必须做的三件事
光写完 HTML 不代表能发——邮件客户端的解析逻辑和网页完全不同，漏掉任一环节，打开就是灾难现场。
立即学习“前端免费学习笔记（深入）”；
- 用 Putsmail 或 Email on Acid 测试主流客户端渲染效果，重点关注 Outlook for Windows、iOS Mail、Gmail App
- 把所有链接补全协议（
https://开头），Gmail 会拦截无协议的//example.com - 文本内容不能全靠图片，必须有等价纯文本段落（放在
<div style="display:none;">里不行，要用<span style="display:none;">或干脆另建<!--[if !mso]-->...<!--[endif]-->条件注释包裹）
真正麻烦的不是写 HTML，而是验证它在二十种环境里是否都显示正常。哪怕只漏测一个 Outlook 2013，就可能让关键按钮变成不可点击的纯文本。别信“看起来差不多”，得点开每一个截图确认对齐、颜色、间距、链接跳转——这才是活动邮件能落地的前提。
