邮件模板必须用 xhtml 1.0 transitional doctype、table 布局、内联样式，禁用 html5 标签、外部 css、flexbox、grid 和媒体查询，600px 宽度最安全，所有样式（字体、行高、颜色等）须写在每个标签的 style 属性中。
直接说结论：别用 HTML5 语义标签、别写外部 CSS、别碰 Flexbox 或 Grid、别信 <style></style> 里的响应式媒体查询能生效。能跑通主流客户端（Outlook、Gmail、Apple Mail、QQ 邮箱）的邮件模板，本质是一套“降级到 2005 年”的表格 + 内联样式工程。
为什么 <table> 是唯一靠谱的布局方式<p>不是因为怀旧，而是 Outlook（尤其是 Windows 版）仍基于 MS Word 渲染引擎，Gmail 会剥离 `</p>` 和大部分 `<style>`，QQ 邮箱直接忽略 `class` 和 `id`。你写的 `<div class="header">` 在很多客户端里等于没写。<p>实操建议：<ul><li>外层用 <code><table width="100%"> 做容器，加 <code>role="presentation" 明确语义（避免屏幕阅读器误读）<li>内容区固定宽度：600px 是安全线，700px 在部分 Outlook 中会横向滚动<li>所有文字、图片、按钮必须包在 <code><td> 里，<code><p> 可以用，但不能脱离 <code><td> 单独存在<li>避免嵌套过深——超过 4 层 <code><table> 嵌套时，某些 Android 客户端会错乱<H3><code>style 属性必须手写到每个标签上<p>你写在 `<style>` 里的 <code>.btn { color: #fff; }，在 Gmail 里大概率被整段删掉；Outlook 会保留 `<style>` 但忽略选择器，只认内联。<p>常见错误现象：<ul><li>字体变成 Times New Roman（没写 <code>font-family 内联）<li>按钮文字居中失效（只写了 <code>text-align: center 在父 <code><table>，没写在 <code><td>）<li>行高塌陷（<code>line-height 没设，或设了但没带单位如 <code>line-height: 1.6 而非 <code>line-height: 1.6em）<p>正确写法示例：<br><code><td style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 16px; line-height: 1.6em; color: #333;">正文内容<H3>Doctype 和 meta 标签怎么选才不翻车<p>用 <code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> —— 不是 HTML5 的 <code><!DOCTYPE html>，也不是 HTML 4.01 Strict。<p>原因很实际：<ul><li>Gmail 和 Hotmail 会主动把你写的 Doctype 替换成这个 XHTML 1.0 Transitional<li>XHTML 语法更严格（要求所有标签闭合、属性小写、引号包裹），反而让客户端解析更稳定<li><code><meta name="viewport"> 要写，但仅对 Apple Mail 和部分 Android 客户端生效；Outlook 完全无视它，所以别指望靠它做真·响应式<p>别写 <code><html lang="zh-CN"> —— QQ 邮箱会把它干掉，还可能连带删掉后面紧跟的 `<head>`。<H3>图片、链接和字体的兼容性底线<p>图片不是“能显示就行”，而是“没图也要可读”：<ul><li>所有 <code><img> 必须带 <code>alt，且 <code>alt 文本要能独立传达关键信息（比如按钮图的 alt 是“立即续订”）<li>禁用 <code>border：写成 <code><img border="0" ...>，否则 Outlook 会给图加蓝边<li>避免背景图：Outlook 不支持 <code>background-image，哪怕你用 <code>table background="..." 也只在旧版生效；切图+base64 是少数可行方案，但 base64 过大会触发 Gmail 截断<li>字体栈必须 fallback 到系统字体：用 <code>"Helvetica Neue", Helvetica, Arial, sans-serif，别写 <code>"Inter", "SF Pro Text" —— 它们不会加载，最终回退到默认 serif<li>链接颜色必须内联：<code><a href="..." style="max-width:90%">，否则 Outlook 默认蓝色下划线无法覆盖<p>最后提醒一句：所谓“响应式邮件”，其实只是靠媒体查询隐藏/显示某些 <code><td>，并在移动端强制重排——但它在 Outlook for Windows 上根本不起作用。真要保底，就老老实实用单列表格，别赌媒体查询。
</style>
</table>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
