邮件模板禁用JavaScript，须用绝对URL和URL编码的验证链接，内联样式仅支持基础属性，图片需设宽高和alt，token须单次有效且限时，测试必须通过真实邮箱客户端。
邮件模板里不能用 JavaScript，别白费劲写 onclick
HTML 邮件模板本质是纯静态内容，所有主流邮箱客户端（Gmail、Outlook、Apple Mail）都会剥离 <script></script> 标签和内联事件（如 onclick、onload）。你写的验证链接必须是完整、可点击的 <a href="https://yoursite.com/verify?token=abc123">，而不是靠 JS 拼接 URL 或发请求。
常见错误现象：本地预览能跳转，发到 Gmail 后链接失效或变成纯文本；点击后打开空白页——大概率是用了 JS 动态生成链接，或者用了相对路径。
- 所有链接必须用绝对 URL，比如
https://app.example.com/verify?email=user%40domain.com&token=xyz，不能写/verify?... - URL 中的
email参数要 URL 编码（%40代替@），否则 Outlook 可能截断链接 - 避免使用
target="_blank"—— 多数客户端不支持，或强制忽略
用内联 style 写样式，别信 <style> 标签
Gmail 会彻底删除 <style> 块，Outlook 对 CSS 类选择器支持极差。唯一靠谱的方式是每个标签都加 style="..." 属性，且只用最基础的属性（color、font-family、padding、background-color 等）。
示例安全写法：
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
<p style="font-family: Arial, sans-serif; font-size: 16px; color: #333;">请点击下方按钮完成验证：</p> <a href="https://app.example.com/verify?token=abc" style="display: inline-block; padding: 12px 24px; background-color: #007bff; color: white; text-decoration: none; border-radius: 4px; font-family: Arial, sans-serif;">验证邮箱</a>
- 不要用
flex、grid、:hover，它们在多数客户端无效 - 字体优先用
Arial, Helvetica, sans-serif或"Segoe UI", "Helvetica Neue", sans-serif，避免系统缺失字体导致回退异常 - 图片必须带
alt和固定宽高（width="600"），否则 Outlook 可能拉伸变形
验证链接有效期和 token 安全性得后端兜底，前端模板管不了
邮件模板只是“展示层”，它不参与验证逻辑。用户点链接后，必须由后端接收 GET /verify 请求，检查：token 是否存在且未过期、是否已被使用、对应 email 是否待验证状态。
容易被忽略的关键点：
-
token必须是单次有效 + 限时（建议 ≤ 24 小时），数据库字段要有used_at和expires_at - 链接中不要暴露用户 ID 或原始邮箱明文（虽已编码，但仍有信息泄露风险），推荐用加密 token（如 JWT）或服务端映射 ID
- 如果用户重复请求验证邮件，应更新 token 并使旧 token 失效，避免“一链多用”
测试不能只看浏览器，必须走真实邮箱链路
本地用浏览器打开 HTML 文件，再漂亮也没用。真正决定效果的是 Gmail、iOS Mail、Outlook Desktop 这三类渲染引擎。
- 免费方案：用 Putsmail 或 Email on Acid（有免费额度）上传 HTML，发到不同邮箱测试渲染
- 开发阶段可用本地 SMTP（如
MailHog）捕获邮件，但务必再转发到真实 Gmail/Outlook 账号看最终效果 - 特别注意 Gmail 的“显示原始邮件”功能（右上角 ⋯ → “显示原始邮件”），能直接看到它实际解析出的 HTML 结构，比预览更准
最常被漏掉的一环：没给链接加 rel="noopener" 不是重点，但没做 URL 编码、没设绝对路径、token 无过期检查——这些才是让验证流程卡住的真实原因。
