免费 HTML 邮件签名生成器、模板与代码指南
HTML 邮件签名是邮件客户端附加到每封邮件末尾的一小段 HTML。写对了，在 Gmail、Outlook 和 Apple Mail 里显示一致；写错了，就变成一堆坏图和乱字体。本页解释代码里有什么，以及如何使用生成器的 HTML 输出。
生成你的签名成品签名预览
 |
|
邮件安全的 HTML 代码示例
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.4;color:#111827;">
<tr>
<td style="padding-right:14px;vertical-align:top;">
<img src="https://signmymail.com/avatar-example.jpg" width="64" height="64" alt="Maria Lopez — Northwind Studio" style="display:block;border:0;border-radius:32px;" />
</td>
<td style="vertical-align:top;">
<div style="font-weight:700;font-size:16px;color:#111827;">Maria Lopez</div>
<div style="color:#4b5563;">Product Designer · Northwind Studio</div>
<div style="padding-top:6px;">
<a href="mailto:maria@northwind.studio" style="color:#1f4fd8;text-decoration:none;">maria@northwind.studio</a>
· <a href="https://northwind.studio" style="color:#1f4fd8;text-decoration:none;">northwind.studio</a>
</div>
</td>
</tr>
</table>为什么签名用表格而不是 div
各邮件客户端对 CSS 的支持不一致。Windows 版 Outlook 用 Word 渲染，会忽略 flexbox、grid、部分元素的 margin 和背景图；Gmail 会删掉 <style> 块和 class。所有客户端都支持的布局工具只有朴素的 <table>，且每个样式都要内联写在元素上。
生成器输出的正是这种代码：带 role=“presentation” 的嵌套表格、每个单元格上的内联样式、邮件安全字体，以及图片的明确宽度。它不好读，但能活下来。
代码里有什么
一个签名包含外层表格、放照片和文字的行、放姓名、职位、公司和联系方式的单元格、指向托管照片或社交图标的 img 标签，以及链接的 a 标签。预览里看到的每个元素都与这个结构一一对应。
图片必须托管在公开 URL，或以 base64 数据嵌入。Gmail 只支持托管图片；Outlook 和 Apple Mail 两种都支持。
使用 HTML 代码
- 1
生成签名
在首页生成器中填写资料并选择模板。预览就是由你将得到的 HTML 渲染的。
- 2
复制代码或带格式的签名
大多数人应使用「复制签名」，它粘贴的是富文本。当客户端或工具要求原始代码时（例如 CRM 邮件工具、客服系统或公司签名管理器），使用「复制 HTML」或「下载 .html」。
- 3
粘贴到代码字段
HubSpot、Zendesk、Front、Mailchimp 等工具通常有 HTML 签名框，把代码粘贴到那里。不要把原始代码粘贴到 Gmail 的可视化编辑器，它会把标签当文字显示。
- 4
检查渲染效果
给自己发一封测试邮件，在收件人常用的客户端里打开。生成器的可投递性检查会提前标出体积和图片问题。
小贴士
- 为 Gmail 把总体积控制在 10 KB 以内。用托管照片代替嵌入照片是最大的节省。
- 不要在文字处理软件里编辑代码，它会加入自己的标记。必须改动时请用纯文本编辑器。
- 避免自定义网页字体。它们在邮件里很少能加载，还会导致布局跳动。
- 图片的替代文字会自动用你的姓名和公司填写，屏蔽图片的收件人仍能知道你是谁。