HTML邮件模板必须用table布局、内联样式、XHTML DOCTYPE，禁用Flex/Grid/@media；因Outlook用Word引擎、Gmail剥离style标签、Apple Mail禁用float，现代CSS在邮件中基本失效。
HTML 邮件模板不能用现代前端那一套 —— Flex、Grid、CSS 外链、@media 查询（多数客户端不认），必须回归到 2000 年代的写法：内联 style、table 布局、行内样式优先、属性尽量用老标准。
为什么 Outlook 里表格错位、Gmail 不显示背景色？
因为各大邮件客户端渲染引擎差异极大：Outlook (Windows) 用 Word HTML 引擎，Gmail (Web) 会剥离 <style></style> 标签并重写内联样式，Apple Mail 支持度稍好但依然禁用 float 和 position。所有“看起来正常”的网页式写法，在邮件里大概率崩。
- 别用
class或外部 CSS —— 全部样式必须写进style="..."属性里 - 别依赖
div+margin/padding布局 —— 用table套嵌 +cellpadding/cellspacing控制间距 - 背景色慎用
background——Outlook只认bgcolor属性（如<td bgcolor="#f5f5f5">） -
font标签虽过时，但在 Outlook 中比font-family更可靠（可双写：<font face="Helvetica, Arial, sans-serif"></font>）
怎么写一个真正能发、能看、不乱排版的基础模板？
核心原则：语义退让，结构保守。下面是一个兼容主流客户端（包括 Outlook 2016/365、Gmail、Apple Mail）的最小可用骨架：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin:0; padding:0; min-width:100%; background-color:#ffffff;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td align="center" style="padding:20px 0;">
<table width="600" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td bgcolor="#ffffff" style="padding:30px 20px; font-family:Helvetica, Arial, sans-serif; color:#333333;">
<h1 style="margin:0 0 16px 0; font-size:24px;">欢迎加入</h1>
<p style="margin:0 0 12px 0; font-size:16px;">感谢您注册我们的服务。</p>
<a href="https://example.com" style="display:inline-block; padding:10px 20px; background-color:#007bff; color:#ffffff; text-decoration:none; font-size:16px;">立即开始</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
注意几个关键点：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
<!DOCTYPE>必须用 XHTML 1.0 Strict —— Outlook 某些版本会因 DOCTYPE 错误直接降级渲染 - 所有
table必须带cellpadding="0" cellspacing="0" border="0"和style="border-collapse:collapse;"，否则 Outlook 默认加边框和空隙 - 宽度控制靠
table width="600"，不是max-width；移动端适配靠<meta name="viewport">+ 宽度固定 + 内容自适应（别指望响应式断点） - 链接按钮用
<a>包裹文字，并设display:inline-block+ 内边距 —— 这是目前最稳的“按钮”写法
图片不显示、文字变小、链接失效？检查这四件事
这些不是 bug，是邮件客户端主动干预的结果：
-
img标签必须带alt、width、height属性，且推荐使用绝对 URL（https://cdn.example.com/logo.png），相对路径或本地路径一律无效 - 文字变小？可能是 Gmail 自动缩放 —— 在
<body>上加style="-webkit-text-size-adjust:100%;"抑制（对 Apple Mail 也有效） - 链接点击无反应？确认
href是完整协议开头（https://），mailto:和tel:在部分客户端（如 Outlook iOS）会被过滤或转义 - 字体 fallback 失效？别只写
font-family: "Segoe UI"—— 必须按顺序写全：例如font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif
真正难的不是写出来，而是测出来。每个客户端都要单独验证，尤其是 Outlook for Windows（Word 渲染）、Gmail App (Android)（会删 style）、iOS Mail（支持 @media 但仅限部分属性）。上线前至少在 Litmus 或 Email on Acid 跑一遍多端截图 —— 手动发测试邮件到不同邮箱再截图，太容易漏掉细节。
