HTML邮件模板必须用table布局、内联样式和XHTML 1.0 Strict规范，因Outlook用Word引擎不支持div/flex，Gmail剥离style标签，Apple Mail禁用float；所有样式需内联，图片须带宽高和alt，链接需显式定义样式。
不能用现代网页那一套写 HTML 邮件模板 —— 你写的不是网页，是“能发出去、能打开、不崩排版”的兼容性工程。
为什么 <div> 和 flex 在邮件里直接失效
Outlook（尤其是 Windows 桌面版）用的是 Word 渲染引擎，根本不认识 <div>、display: flex、@media；Gmail 会剥离 <style> 标签，把你的 CSS 全删掉；Apple Mail 禁用 float 和大部分定位属性。你写的“看起来很美”的页面，在 Outlook 里可能只剩一行文字堆在左上角。
- 所有布局必须用
<table>套嵌，cellpadding和cellspacing控制间距 -
<p>可用但不保险 —— Outlook 有时自动加 margin 或换行错位，稳妥做法是用<td>包文本 +style="line-height:1.4; font-size:16px;" - 别信“HTML5 语义标签更清晰” ——
<section>、<header>在多数客户端被忽略或转成<div>后再丢弃
mailto: 链接能做什么、不能做什么
mailto: 是纯前端触发本地邮件客户端的协议，不是发信接口。它只负责“打开软件并填好字段”，后续发送完全依赖用户环境。
- 基础写法：
<a href="mailto:support@example.com">联系我们</a> - 带主题和正文：
<a href="mailto:support@example.com?subject=反馈&body=页面加载慢">提交反馈</a>（注意&而不是&） - 多个收件人用逗号分隔：
mailto:user1@com,user2@com；抄送用cc=，密送用bcc= - 空格必须编码：
%20；中文建议用encodeURIComponent()处理后再拼进 URL - 不支持附件、不保证
body显示（部分 iOS 邮件 App 忽略）、敏感信息暴露在 URL 中
表格布局怎么写才不出错
一个能跑通 Outlook/Gmail/Apple Mail 的最小可靠骨架，核心就三点：XHTML 1.0 Strict Doctype、外层 <table width="600">、所有样式内联。
立即学习“前端免费学习笔记（深入）”；
- 开头必须是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> - 主容器：
<table width="600" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;"> - 每段文字必须包在
<td>里，不能直接写<p>或裸文本 - 背景色优先用
bgcolor="#f5f5f5"（Outlook 认），慎用background-color - 字体双写更稳：
<font face="Helvetica, Arial, sans-serif"><span style="font-family:Helvetica, Arial, sans-serif;">文字</span></font>
图片和链接的硬性要求
邮件里图片默认被阻止，链接点击行为也不统一 —— 不显式声明，就等于没写。
-
<img>必须带width和height属性（不能只靠 CSS），且值为具体像素数（如width="600" height="300"） - 必须有
alt属性，且内容有意义（被屏蔽时显示） - 加
style="display:block;"消除图片下方默认空白 - 所有图片用 HTTPS 绝对路径，避免相对路径或本地路径
- 链接要明确目标：
<a href="https://example.com" style="color:#007bff; text-decoration:underline;">立即访问</a>—— 别省略style，否则 Gmail 可能重置颜色
真正难的不是写代码，而是接受：你得放弃语义、放弃响应式、放弃现代 CSS，用一套 20 年前的规则去适配几十种渲染引擎。写完别急着发，先用 Email on Acid 或 Litmus 测三端 —— 你看到的，和用户看到的，从来不是一回事。
