邮件模板必须用内联样式+表格布局，因outlook等客户端不支持现代css；文字居中用align="center"和table align属性；动态内容需服务端替换占位符，禁用js。
直接用 HTML 写生日邮件模板，最大的坑不是样式不好看，而是大多数邮箱客户端（尤其是 Outlook、Apple Mail、Gmail App）根本不支持现代 CSS——flex、grid、float、@media 响应式写法基本失效，连 margin 和 padding 都可能被忽略。
为什么不能用现代 HTML/CSS 写邮件模板
邮件客户端渲染引擎五花八门：Outlook 用 Word 渲染引擎（对 CSS 支持极差），iOS Mail 禁用外部字体和部分伪类，Gmail Web 版会剥离 <style></style> 标签里的大部分规则。实测下来，只有内联样式（style="..."）+ 表格布局 + 行内 <font></font> 标签最稳。
- 所有关键样式必须写成内联形式，比如
<td style="font-family: Arial, sans-serif; color: #333;"> <li>布局用 <code><table> 套嵌，不用 <code><div>；列宽用 <code>width属性（如width="600"），不用 CSS 宽度 - 避免
class、id、外部 CSS 文件、<link>、<style></style>标签 - 图标/装饰图必须用绝对 URL，且建议加
alt和固定height/width，防止 Gmail 自动缩放变形 - 文字内容务必包在
<td> 里，并设置 <code>align="center"属性（比style="text-align:center"兼容性更好） - 整块内容容器用
<table width="600" align="center">，靠表格自身的 <code>align属性实现水平居中 - 避免用
<center></center>标签（HTML5 已废弃，且部分客户端不识别） - 如果要垂直居中单行文字，用
line-height匹配容器高度，别依赖vertical-align: middle（Outlook 不认） - 模板里留占位符，例如
亲爱的 <font color="#e74c3c">*|FNAME|*</font>或祝您 <span id="birthday-year">2025</span> 生日快乐 - 切勿用 JavaScript 动态填充（邮件里 JS 被全部禁用）
- 如果用 SendGrid/Mailgun，直接用它们的模板语法，如
{{first_name}}，服务端渲染后才发出去 - 本地测试时，可用 Python 脚本做简单字符串替换：
template.replace("*|FNAME|*", "张三")，再喂给发信函数
怎么让生日祝福文字在各种邮箱里都居中显示
居中是最容易翻车的点之一：CSS 的 text-align: center 在部分 Outlook 版本里对 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img
src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a>
<p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p>
</div>
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 失效，但对 <td> 是可靠的；<code>margin: 0 auto 几乎全军覆没。
生日邮件里插入动态日期或名字的安全做法
纯静态 HTML 模板没法自动填名字或日期，但硬编码又没法复用。真实生产中，这类替换必须由发信服务端完成（如 Node.js 的 Nodemailer、Python 的 smtplib + Jinja2、或 Mailchimp 的 merge tags）。
真正难的不是写几行 HTML，而是每改一个样式都要在 Outlook 2016、iOS Mail、Gmail Android、Apple Mail 四个环境里手动截图验证。哪怕只是把 font-size: 14px 改成 16px，都可能让某款 Outlook 把行高撑爆。发前必测，别信“看起来差不多”。
