HTML 邮件

学完这篇，你能从零手写出一封在 Gmail、Outlook、Apple Mail、QQ 邮箱里都不跑版的中文 HTML 邮件，并且知道怎么测、怎么发、怎么不进垃圾箱。

第一步：先认清 HTML 邮件不是网页

这一步要做什么：动手写代码之前，先搞清楚邮件客户端给你的运行环境。做完之后你就明白，为什么下面所有代码都写得这么"老土"。

三个必须接受的事实：

1. 没有统一的渲染引擎。Gmail 用自己的解析器，会剥离一部分 CSS；Windows 上的 Outlook 2007–2021 直接调用 Word 的排版引擎；Apple Mail 和 iOS 反而是最接近浏览器的那个。
2. 没有 JavaScript。所有主流客户端都会删掉 <script>，交互、折叠、动态计数全靠 CSS 和图片本身。
3. 外部 CSS 不可靠。Gmail 不支持 <link rel="stylesheet">。<head> 里的 <style> 现在大部分客户端支持，但关键样式仍然必须内联。

注意：不要用 flexbox、grid、position: fixed、<video>、CSS 变量。Outlook 完全不认，布局会直接崩掉。

所以 HTML 邮件的排版方式停留在 2005 年：<table> 嵌套 + 行内 style。

第二步：搭一个最小可用的骨架

这一步要做什么：写出无论哪个客户端打开都不跑版的模板。做完之后你得到一个 600px 宽、居中、手机端自适应的空白邮件。

600px 是当前最安全的内容宽度（Outlook 2013 以后阅读窗格约 600px）。照着敲：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>邮件标题</title>
<!--[if mso]>
<xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
<![endif]-->
<style>
  body,table,td,a{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
  table,td{mso-table-lspace:0pt;mso-table-rspace:0pt;}
  img{-ms-interpolation-mode:bicubic;border:0;height:auto;line-height:100%;outline:none;text-decoration:none;}
  body{margin:0;padding:0;width:100%!important;}
  @media only screen and (max-width:600px){
    .wrap{width:100%!important;}
    .px{padding-left:16px!important;padding-right:16px!important;}
    .stack{display:block!important;width:100%!important;}
    .hide{display:none!important;}
  }
</style>
</head>
<body style="margin:0;padding:0;background-color:#f4f4f4;">
  <div style="display:none;font-size:1px;color:#f4f4f4;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">这段文字会出现在收件箱主题后面</div>

  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f4f4f4;">
    <tr>
      <td align="center" style="padding:24px 12px;">
        <table role="presentation" class="wrap" width="600" cellpadding="0" cellspacing="0" border="0" style="width:600px;max-width:600px;background-color:#ffffff;border-radius:8px;">
          <tr>
            <td class="px" style="padding:32px 40px;font-family:'Microsoft YaHei','PingFang SC',Arial,sans-serif;font-size:16px;line-height:1.7;color:#333333;">
              正文内容放这里
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

几个关键点：

• role="presentation"：告诉屏幕阅读器这是布局表格，不是数据表格。
• cellpadding="0" cellspacing="0" border="0"：必须写成 HTML 属性，部分客户端会忽略 CSS 里的同名设置。
• <o:PixelsPerInch>96</o:PixelsPerInch>：不加这句，Outlook 在某些缩放下会把图片放大到 120%。
• 顶部那个隐藏 div 是 preheader（预览摘要），会显示在收件箱里主题的下一行，不写的话客户端会抓正文第一句。

第三步：写正文——图片、按钮、文字

这一步要做什么：把真实内容塞进去，保证图片被屏蔽时也不难看。做完之后你有一封可以发的完整邮件。

图片。很多企业邮箱默认不加载图片：

<img src="https://cdn.example.com/banner.png" width="520" alt="2024 春季新品发布会" style="display:block;width:100%;max-width:520px;height:auto;border:0;">

width 属性必须写，alt 必须写，display:block 用来消掉 Gmail 图片下方那几个像素的缝隙。

按钮。不要用 <button>，不要用 CSS 背景图，Outlook 不认。用 VML 给 Outlook 单独写一份：

<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
  href="https://example.com/act" style="height:44px;v-text-anchor:middle;width:180px;"
  arcsize="20%" strokecolor="#1a73e8" fillcolor="#1a73e8">
  <w:anchorlock/>
  <center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;">立即查看</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="https://example.com/act" style="display:inline-block;background-color:#1a73e8;color:#ffffff;font-family:'Microsoft YaHei',Arial,sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:180px;border-radius:8px;">立即查看</a>
<!--<![endif]-->

中文字体。字体栈要写全：'Microsoft YaHei','PingFang SC','Hiragino Sans GB',Arial,sans-serif。只写 sans-serif，Windows 下会掉到宋体，观感差很多。

注意：正文可用宽度 = 外层 600px 减去左右 padding 80px = 520px。图片宽度要按这个算，超了会把表格撑破。

第四步：绕开三大客户端的坑

这一步要做什么：记住下面几个高频踩坑点，写完先自查一遍。

• Outlook（Windows）：不支持 max-width、border-radius、background-image；<td> 上的 margin 无效，改用 padding；段落之间会多出空隙，把 <p> 换成 <div style="margin:0 0 16px;">。
• Gmail：不支持 #id 选择器，<style> 里只用 class 和标签选择器；不支持 position。
• QQ 邮箱 / 网易邮箱：媒体查询会被部分过滤，响应式除了 <style> 里的 @media，还要靠内联的 max-width:100% 兜底。
• 深色模式：iOS 15+ 的 Mail 会反色。正文背景别用纯白 #ffffff，用 #f4f4f4；图片避免大面积白底黑字，反色后容易看不清。
• 多栏变单栏：桌面端两栏并排的 <td>，在手机上靠 class="stack" 加 display:block!important;width:100%!important 堆叠。

注意：<!--[if mso]> 是条件注释，只有 Outlook 解析，其他客户端当注释忽略。