HTML 邮件搭建
HTML Email Builder
用积木块拼出基于表格布局、行内样式的 HTML 邮件，按钮走 VML 兜底，并用同一批积木生成纯文本备用版本。
一个只能产出邮件客户端都认可的那种布局的块编辑器：嵌套表格、内联样式，还有画两遍的按钮，好让 Outlook 的 Word 引擎得到一个真正的形状，而不是一条背景没用的文本链接。它把 HTML 和纯文本替代版本一起导出，纯文本是从块生成的，不是剥掉标签得到的。
邮件设置
区块
- 标题
- 段落
- 按钮
- 分隔线
- 两栏
- 页脚
预览
这不是客户端的截图。这是把你的 HTML 按那个客户端有文档记载的删改规则处理之后，由这个浏览器画出来的。
- Windows 版 Outlook 用 Microsoft Word 渲染。这个窗格是浏览器：它能告诉你删减之后 Word 里还剩什么，但没法告诉你 Word 会怎么排版这些内容。换行、间距和图片缩放（Word 在 120 dpi 的屏幕上也按 96 dpi 来算）都会不一样。
这个客户端删掉的东西 · 2
声明： border-radius: 6px · border-radius: 8px
按钮画了两遍：给 Outlook 的 Word 引擎用的 VML 图形，和给其他所有客户端用的链接。任何时候只有一个看得见。
检查器对这份输出的判断
没有会坏的，也没有会丢效果的。这样搭就是为了这个。
4.86 kB · Gmail 102 KB 上限的 5%
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-Hans" xml:lang="zh-Hans" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>本周的 Example</title>
<!--[if mso]>
<xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
<![endif]-->
</head>
<body style="margin:0;padding:0;background:#f2f4f7;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%">
<div style="display:none;max-height:0;overflow:hidden;mso-hide:all;font-size:1px;line-height:1px;color:#f2f4f7">这周变了什么，接着读的地方在哪‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ </div>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#f2f4f7" style="background:#f2f4f7">
<tr>
<td align="center" style="padding:24px 12px">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff" style="width:100%;max-width:600px;background:#ffffff;border-radius:8px">
<tr><td align="left" style="padding:24px 24px 8px;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:26px;line-height:1.35;font-weight:700;color:#1f2328">本周更新</td></tr>
<tr><td align="left" style="padding:8px 24px 16px;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.75;color:#1f2328">你好。<br>这是这周的变动。版面是用表格搭的，所以在 Outlook 里也不会散。</td></tr>
<tr><td align="center" style="padding:16px 24px"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/news" style="height:46px;v-text-anchor:middle;width:240px;" arcsize="13%" stroke="f" fillcolor="#1a56db"><w:anchorlock/><center style="color:#ffffff;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:16px;font-weight:700;">读完整篇</center></v:roundrect><![endif]--><!--[if !mso]><!-- --><a href="https://example.com/news" target="_blank" style="display:inline-block;min-width:192px;background:#1a56db;color:#ffffff;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:16px;font-weight:700;line-height:46px;text-align:center;text-decoration:none;border-radius:6px;padding:0 24px;mso-hide:all">读完整篇</a><!--<![endif]--></td></tr>
<tr><td style="padding:8px 24px"><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td height="1" style="height:1px;line-height:1px;font-size:0;background:#e3e6ea"> </td></tr></table></td></tr>
<tr><td style="padding:8px 24px"><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td width="276" valign="top" style="font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.7;color:#1f2328;padding-right:12px">这是左栏。两栏其实是一个表格行。</td><td width="276" valign="top" style="font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.7;color:#1f2328;padding-left:12px">这是右栏。没有用 flexbox，所以 Word 引擎里两栏还是并排。</td></tr></table></td></tr>
<tr><td align="left" style="padding:16px 24px 28px;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.7;color:#1f2328;font-size:12px;line-height:1.7;color:#6b7280;">寄件地址 · 首尔<br><a href="https://example.com/unsubscribe" target="_blank" style="color:#6b7280;text-decoration:underline">退订</a></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>纯文本
这周变了什么，接着读的地方在哪 本周更新 ==== 你好。 这是这周的变动。版面是用表格搭的，所以在 Outlook 里也不会散。 读完整篇: https://example.com/news —————————————————————————————— 这是左栏。两栏其实是一个表格行。 这是右栏。没有用 flexbox，所以 Word 引擎里两栏还是并排。 —————————————————————————————— 寄件地址 · 首尔 退订: https://example.com/unsubscribe
不是把标签剥掉，而是直接从区块生成的——所以链接读起来是句子，不是一堵网址墙。
怎么用
设置邮件
主题、预览文字、宽度和颜色。预览文字是收件箱列表在主题后面显示的那行灰字——留空的话，客户端会拿最先出现的文字，通常是“在浏览器中查看”。
堆叠块
标题、段落、图片、按钮、双栏、分隔线、留白、页脚。双栏块是一个表格行，不是媒体查询，所以在忽略媒体查询的客户端里它仍然是两栏。
看预览和结论
和检查工具一样的逐客户端窗格，下面是检查工具对这份输出自己的解读。它应该保持为空——这样搭建的意义就在于此。
导出两个部分
以 multipart/alternative 发送。只有 HTML 的邮件在每个垃圾邮件过滤器那里得分都更差，而且任何朗读邮件的东西都读不了它。
常见问题
为什么按钮在 HTML 里出现了两次？
一份是 `<!--[if mso]-->` 注释里的 VML 形状，只有 Outlook 的 Word 引擎会读；另一份是普通的锚点，放在一段 Word 会忽略的注释里。任何时候只有其中一个可见。没有 VML 那一半，Outlook 里内边距会丢掉，只有文字本身可以点。
韩文在 Windows 上能正确显示吗？
字体栈把 Apple SD Gothic Neo、Malgun Gothic 和 Noto Sans KR 排在所有拉丁字体之前，因为网页字体失败时 Outlook 回退到的是 Times New Roman，而不是下一个字体——拉丁字体在前的字体栈就是韩文变成方框的原因。这个字体栈是按韩文排的；中文没有单独的字体栈。
能把我自己的 HTML 粘进来吗？
不能——这个页面只负责搭建。已有的 HTML 去兼容性检查工具，它会告诉你要改什么，并为需要的元素生成替换标记。
可以从这些接进来
接下来
这些工具吃得下当前工具的产出，结果可以直接送过去。
邮件客户端支持对照表
Email Client Support Table
Gmail、Outlook、Apple Mail、Yahoo、三星邮件和 Thunderbird 在 HTML 邮件里各支持什么，取自 caniemail 的真机测试，每一项都标了最后测试日期。
发出与收到对比
Sent vs Delivered Comparison
用你自己的账号把一封草稿发到临时地址，看看发送链路改写了什么——被包成跳转的链接、被丢掉的 style 块、被塞进来的追踪像素、实际使用的编码。
HTML 邮件兼容性检查
HTML Email Compatibility Check
拿邮件的 HTML 去对照各家邮件客户端真正支持的范围，直接指出会散架的元素，并把 Gmail、Outlook 等客户端里还剩下什么并排列出来。
可疑链接检查
Suspicious URL Check
在你点开之前先看这条链接长什么样——混淆字符、直接写 IP 的主机、@ 障眼法、层层子域、奇怪端口、短链服务——需要时还能追踪跳转并查域名注册时间；没有信誉库。
压缩包结构检查
Archive Inspector
不解压就打开 zip，标出路径穿越条目、可执行文件、宏文档和压缩炸弹。
音频格式转换
Audio Converter
在 MP3、WAV、FLAC、AAC、OGG、Opus 之间转换，比特率和采样率可设。