html做审批通知邮件必须用table布局、内联样式、600px固定宽、安全字体，禁用flex/grid/外部css；状态标识用纯色块+文字，链接需https短链，务必多客户端实测。
HTML 做审批通知邮件，核心不是“怎么写漂亮”，而是“怎么写不被客户端拦、不乱码、不崩布局”——绝大多数失败都出在过度使用 CSS 或现代 HTML 特性上。
为什么 <table> 还在用？
<p>Outlook（尤其是 Windows 桌面版）、Apple Mail、部分企业邮箱 Web 端对 <code>flex、grid、float 甚至 margin 支持极差。一封用 div + CSS 写的邮件，可能在 Outlook 里文字堆成一团、按钮消失、颜色全灰。
- 必须用嵌套
<table> 控制布局，<code>cellpadding/cellspacing 设为 0，用 <td> 做区块容器
<li>
<code><style></style> 标签在邮件中基本无效（Gmail 会剥离），所有样式必须内联，即每个标签加 style="..."
- 字体优先用系统安全字体：
font-family: "Helvetica Neue", Arial, sans-serif;，避免用 "Microsoft YaHei" 等未声明 fallback 的中文名
- 宽度固定为 600px 左右（适配主流客户端），不要用百分比或
max-width
mailto: 能不能直接发审批结果？
不能。它只能打开本地邮件客户端并预填收件人/主题/正文，但无法自动发送，也无法携带动态数据（比如审批人姓名、单据号）。更关键的是：用户可能没配客户端，或点击后无响应，体验断裂。
- 真实场景必须走后端发送（如 Node.js 的
nodemailer、Python 的 smtplib、Java 的 JavaMailSender）
- 前端只负责生成纯文本 + 内联样式 HTML 字符串，传给后端；后端注入变量（如
{{approverName}}）、设置 Content-Type: text/html，再调 SMTP 发出
- 如果硬要用
mailto: 做测试，正文需 URL 编码，且避免换行和特殊符号（否则截断）：mailto:test@example.com?subject=审批通过&body=%E5%90%8C%E6%84%8F%EF%BC%9A%E5%8D%95%E6%8D%AE%231001
审批状态怎么标得清晰又兼容？
别依赖图标字体（如 Font Awesome）、SVG 或背景图——它们在 Outlook 和部分移动端会被屏蔽或渲染为空白。状态标识必须用纯色块 + 文字组合，且颜色要有足够对比度。
- 通过：用
<span style="background:#4CAF50; color:white; padding:4px 12px; border-radius:3px; font-size:12px;">已通过</span>
- 拒绝：用
<span style="background:#f44336; color:white; padding:4px 12px; border-radius:3px; font-size:12px;">已驳回</span>
- 注意：
border-radius 在旧版 Outlook 不支持，但至少文字和底色能显示；如需绝对兼容，改用 padding + 矩形背景
- 避免仅靠颜色区分状态（如红/绿），务必搭配文字，满足无障碍阅读要求
附件或链接跳转怎么处理才可靠？
邮件里不能嵌入文件，所谓“附件”只能是后端生成的下载链接；而审批系统链接若带参数或需登录态，必须用短链或后端代理跳转，否则容易被邮箱标记为钓鱼。
- 审批详情页链接务必用 HTTPS，且域名与公司官网一致（如
https://oa.example.com/approval/1001），避免用 http://192.168.1.100:8080 这类内网地址
- 不要用
target="_blank" —— Gmail 会自动移除，Outlook 可能报错；改用 target="_blank" rel="noopener"（虽仍可能被删，但更规范）
- 如果链接含中文或特殊字符，后端必须做 URL 编码，前端拼接时别漏掉；例如
https://oa.example.com?title=%E5%87%BA%E5%B7%AE%E7%94%B3%E8%AF%B7
- 重要操作按钮（如“查看单据”）建议用
<a></a> 包裹带样式的 <table> 模拟，而非纯文字链接，提高点击热区
<p>最常被忽略的一点：测试不能只看浏览器预览。一定要用真实邮箱（Outlook、Gmail、Apple Mail、腾讯企业邮）实测，尤其关注图片是否加载、按钮是否可点、中文是否折行异常。一次发信前的多端验证，比重写三遍模板更省时间。</p>
</table>
<table> 控制布局，<code>cellpadding/cellspacing 设为 0，用 <td> 做区块容器
<li>
<code><style></style> 标签在邮件中基本无效（Gmail 会剥离），所有样式必须内联，即每个标签加 style="..."
font-family: "Helvetica Neue", Arial, sans-serif;，避免用 "Microsoft YaHei" 等未声明 fallback 的中文名max-width
mailto: 能不能直接发审批结果？
不能。它只能打开本地邮件客户端并预填收件人/主题/正文，但无法自动发送，也无法携带动态数据（比如审批人姓名、单据号）。更关键的是：用户可能没配客户端，或点击后无响应，体验断裂。
- 真实场景必须走后端发送（如 Node.js 的
nodemailer、Python 的smtplib、Java 的JavaMailSender） - 前端只负责生成纯文本 + 内联样式 HTML 字符串，传给后端；后端注入变量（如
{{approverName}}）、设置Content-Type: text/html，再调 SMTP 发出 - 如果硬要用
mailto:做测试，正文需 URL 编码，且避免换行和特殊符号（否则截断）：mailto:test@example.com?subject=审批通过&body=%E5%90%8C%E6%84%8F%EF%BC%9A%E5%8D%95%E6%8D%AE%231001
审批状态怎么标得清晰又兼容？
别依赖图标字体（如 Font Awesome）、SVG 或背景图——它们在 Outlook 和部分移动端会被屏蔽或渲染为空白。状态标识必须用纯色块 + 文字组合，且颜色要有足够对比度。
- 通过：用
<span style="background:#4CAF50; color:white; padding:4px 12px; border-radius:3px; font-size:12px;">已通过</span> - 拒绝：用
<span style="background:#f44336; color:white; padding:4px 12px; border-radius:3px; font-size:12px;">已驳回</span> - 注意：
border-radius在旧版 Outlook 不支持，但至少文字和底色能显示；如需绝对兼容，改用padding+ 矩形背景 - 避免仅靠颜色区分状态（如红/绿），务必搭配文字，满足无障碍阅读要求
附件或链接跳转怎么处理才可靠？
邮件里不能嵌入文件，所谓“附件”只能是后端生成的下载链接；而审批系统链接若带参数或需登录态，必须用短链或后端代理跳转，否则容易被邮箱标记为钓鱼。
- 审批详情页链接务必用 HTTPS，且域名与公司官网一致（如
https://oa.example.com/approval/1001），避免用http://192.168.1.100:8080这类内网地址 - 不要用
target="_blank"—— Gmail 会自动移除，Outlook 可能报错；改用target="_blank" rel="noopener"（虽仍可能被删，但更规范） - 如果链接含中文或特殊字符，后端必须做 URL 编码，前端拼接时别漏掉；例如
https://oa.example.com?title=%E5%87%BA%E5%B7%AE%E7%94%B3%E8%AF%B7 - 重要操作按钮（如“查看单据”）建议用
<a></a>包裹带样式的<table> 模拟，而非纯文字链接，提高点击热区 <p>最常被忽略的一点：测试不能只看浏览器预览。一定要用真实邮箱（Outlook、Gmail、Apple Mail、腾讯企业邮）实测，尤其关注图片是否加载、按钮是否可点、中文是否折行异常。一次发信前的多端验证，比重写三遍模板更省时间。</p> </table>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
