HTML5语义标签在邮件中基本不可用，因Outlook、Gmail、iOS Mail等客户端会剥离或忽略这些标签；邮件开发必须回归table布局+内联样式，可借助MJML等工具实现语义化抽象与兼容性保障。

HTML5语义标签在邮件中基本不可用

绝大多数邮件客户端（包括 Outlook、Apple Mail、Gmail Web/App）会剥离或忽略

• Outlook Desktop（2013+）使用 MS Word 渲染引擎，完全不识别 HTML5 标签，会将其当作未知元素丢弃或包裹进
• Gmail（Web 和 App）虽基于现代 WebKit，但会主动 strip 掉非内联、非表格类结构标签，且禁用 CSS 中的 display: flex、display: grid 等布局声明
• iOS Mail 对
  等标签支持极不稳定：某些 iOS 版本会保留标签但忽略其样式，另一些则直接移除

邮件模板必须回归 table 布局 + 内联样式

兼容性优先的邮件开发仍需以

为布局骨架，所有关键样式必须通过 style 属性内联书写，不能依赖外部 CSS 或 标签（多数客户端会过滤掉）。
的 cellpadding、cellspacing、border 属性仍需显式设为 0，避免 Outlook 默认边距干扰
• 文字颜色、字体、行高、内外边距全部写在

或 的 style 属性里，例如：

响应式需靠媒体查询 + max-width + width: 100% 组合实现，但必须用 标签包裹并放在 中——Gmail 仅支持有限的媒体查询（如 @media only screen and (max-width: 600px)），且只对 和 生效 如何安全地“模拟”语义结构 你无法用 HTML5 标签表达结构，但可以用 class 名 + 注释 + 表格嵌套来维持可维护性，同时确保渲染安全。 用 替代 ，并在注释中说明： 导航栏用单行 + 多个 并排实现，每个 内放带 style 的 主内容区用 包裹，内部再用 分隔标题、段落、按钮等模块 所有 class 名仅用于开发者识别和预处理工具（如 MJML 编译、Inky 转换），不参与样式控制——样式全靠内联 @@##@@ MJML 或 Foundation for Emails 是更现实的选择 手写兼容 table 布局极易出错，推荐用 MJML 这类抽象层工具——它把语义化写法（如 、）编译*兼容的 table 代码，同时内置邮箱客户端适配逻辑。 立即学习“前端免费学习笔记（深入）”； MJML 输出的 HTML 默认禁用所有 HTML5 标签，全部转为 + ，并自动内联样式、补全 Outlook VML 条件注释 Foundation for Emails 使用 Inky 语法（类似 、），编译后同样生成 table-based HTML 切勿在 MJML 中混用自定义 HTML5 标签：MJML 解析器会跳过未知标签，导致内容丢失 真正麻烦的不是“能不能用 HTML5”，而是不同客户端对同一份 HTML 的解析差异比想象中更大——比如 Gmail 会重写你的 ，Outlook 会强制替换字体，而 Yahoo 邮箱至今不支持 background-image。留出至少 20% 开发时间做多端截图测试，比纠结语义标签重要得多。