邮件模板必须用内联样式+表格布局，因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="..."）+ 表格布局 + 行内 <font> 标签最稳。
- 所有关键样式必须写成内联形式，比如
<td style="font-family: Arial, sans-serif; color: #333;"> - 布局用
<table>套嵌，不用<div>；列宽用width属性（如width="600"），不用 CSS 宽度 - 避免
class、id、外部 CSS 文件、<link>、<style>标签 - 图标/装饰图必须用绝对 URL，且建议加
alt和固定height/width，防止 Gmail 自动缩放变形
怎么让生日祝福文字在各种邮箱里都居中显示
居中是最容易翻车的点之一：CSS 的 text-align: center 在部分 Outlook 版本里对 <p> 失效，但对 <td> 是可靠的；margin: 0 auto 几乎全军覆没。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 文字内容务必包在
<td>里，并设置align="center"属性（比style="text-align:center"兼容性更好） - 整块内容容器用
<table width="600" align="center">，靠表格自身的align属性实现水平居中 - 避免用
<center>标签（HTML5 已废弃，且部分客户端不识别） - 如果要垂直居中单行文字，用
line-height匹配容器高度，别依赖vertical-align: middle（Outlook 不认）
生日邮件里插入动态日期或名字的安全做法
纯静态 HTML 模板没法自动填名字或日期，但硬编码又没法复用。真实生产中，这类替换必须由发信服务端完成（如 Node.js 的 Nodemailer、Python 的 smtplib + Jinja2、或 Mailchimp 的 merge tags）。
立即学习“前端免费学习笔记（深入）”；
- 模板里留占位符，例如
亲爱的 <font color="#e74c3c">*|FNAME|*</font>或祝您 <span id="birthday-year">2025</span> 生日快乐 - 切勿用 JavaScript 动态填充（邮件里 JS 被全部禁用）
- 如果用 SendGrid/Mailgun，直接用它们的模板语法，如
{{first_name}}，服务端渲染后才发出去 - 本地测试时，可用 Python 脚本做简单字符串替换：
template.replace("*|FNAME|*", "张三")，再喂给发信函数
真正难的不是写几行 HTML，而是每改一个样式都要在 Outlook 2016、iOS Mail、Gmail Android、Apple Mail 四个环境里手动截图验证。哪怕只是把 font-size: 14px 改成 16px，都可能让某款 Outlook 把行高撑爆。发前必测，别信“看起来差不多”。
