# 邮件签名 HTML 生成器

生成可直接复制粘贴的 HTML 邮件签名，在 Gmail、Outlook 和 Apple Mail 中均能正确显示——支持头像/logo、社交图标（从你的链接自动识别）、主题色、浅色/深色/自动主题，以及使用内联样式的表格化邮件安全布局。复制原始 HTML，直接粘贴到邮箱客户端即可。

> 标准页面: https://elysiatools.com/zh/tools/email-signature-html-builder

- **分类:** Design

- **关键词:** 邮件签名, HTML 签名, Gmail 签名, Outlook 签名, Apple Mail, 名片, 品牌, 社交图标, 深色模式, 内联 CSS, 邮箱客户端, 页脚

## 概述

制作一个真正跨客户端可用的专业邮件签名：

1. **填写资料** —— 姓名、职位、公司、邮箱、电话、网站、地址，以及公开的头像/logo 链接。
2. **选择布局** —— 左右排列（照片在左，带主题色分隔条）或上下堆叠（仅文字）。无照片链接时自动隐藏照片。
3. **样式** —— 选择主题色、网络安全字体和主题：浅色、深色或自动（自动注入 `prefers-color-scheme` 深色块，Apple Mail 会遵守）。
4. **添加社交** —— 粘贴 LinkedIn、X/Twitter、GitHub、Instagram、Facebook 或 YouTube 链接（每行一条或逗号分隔），工具自动识别每个平台，并以邮件安全的内联 SVG data URI 渲染图标徽章（不会被拦截）。
5. **复制 HTML** —— 输出是自包含的表格化签名，所有样式内联，可直接粘贴到 Gmail/Outlook/Apple Mail 签名设置中。

完全在本地运行，数据不会离开浏览器。

## 输入项

- **姓名** (text): Jane Doe
- **职位** (text): Product Manager
- **公司** (text): Acme Inc.
- **邮箱** (text): jane@acme.com
- **电话** (text): +1 555 123 4567
- **网站链接** (text): acme.com
- **地址** (text): 123 Market St, San Francisco, CA
- **头像/Logo 链接** (text): https://…/avatar.png
- **社交链接** (textarea): One per line or comma-separated. Auto-detects LinkedIn, X, GitHub, Instagram, Facebook, YouTube.
- **主题色** (color)
- **字体** (select)
- **布局** (select)
- **主题** (select)

## 适用场景

- 需要在 Gmail、Outlook 或 Apple Mail 中配置排版整齐、带头像和社交图标的专业邮件签名时。
- 邮件客户端默认签名编辑器排版受限，需要使用兼容性更好的 HTML 表格和内联 CSS 布局时。
- 希望邮件签名能够自适应深色模式，避免在深色背景下出现文字看不清或图片白边的问题时。

## 工作原理

- 在输入框中填写姓名、职位、公司、邮箱、电话等基本联系信息，并可选择性填入头像或 Logo 的公开链接。
- 粘贴您的社交媒体链接（如 LinkedIn、GitHub、X 等），系统将自动识别平台并将其转换为安全的内联 SVG 图标。
- 选择您喜欢的布局（左右排列或上下堆叠）、主题色、字体以及主题模式（浅色/深色/自动）。
- 实时预览生成效果，一键复制生成的 HTML 源代码并直接粘贴到您的邮箱客户端签名设置中。

## 使用案例

- 职场人士为个人工作邮箱配置带有 LinkedIn 图标和公司 Logo 的高颜值商务签名。
- 自由职业者或独立开发者生成带有 GitHub 和个人网站链接的极简深色主题签名。
- 企业行政或 HR 统一为团队成员快速生成格式一致、品牌色统一的 HTML 邮件签名模板。

## 常见问题

### 这个生成器生成的签名在 Outlook 中会乱码或变形吗？

不会。生成器采用邮件安全的 HTML 表格（Table）布局和内联 CSS 样式，经过严格测试，能确保在 Outlook、Gmail 和 Apple Mail 中完美兼容。

### 社交图标是如何生成的？会被邮件系统拦截吗？

工具会自动识别您输入的社交链接，并将其转换为内联 SVG Data URI 图标。这种方式无需加载外部图片，不会被邮件客户端作为附件拦截。

### 如何在签名中加入我的头像或公司 Logo？

您需要将头像或 Logo 图片上传到公开的图床或服务器，然后将图片的绝对 URL 链接填入“头像/Logo 链接”输入框中即可。

### 自动主题模式是如何工作的？

自动主题模式会在 HTML 中注入 prefers-color-scheme 媒体查询。在支持该特性的客户端（如 Apple Mail）中，签名会自动切换为适合深色模式的配色。

### 我的个人数据会被上传到服务器吗？

不会。本工具完全在您的浏览器本地运行，所有输入的数据和生成的 HTML 代码均不会发送到任何服务器，确保您的隐私安全。

## 相关工具

- [图片调色板转设计令牌](https://elysiatools.com/zh/tools/image-to-design-tokens): 从图片中用 k-means 聚类提取主色，导出为 CSS 变量 / SCSS 变量 / Tailwind 配置 / JSON 设计令牌，并自动为每个颜色生成命名色阶
- [HTML标签清除](https://elysiatools.com/zh/tools/new-html-tag-stripper): 从HTML代码中移除标签并提取纯文本内容
- [二维码生成器](https://elysiatools.com/zh/tools/qr-code-generator): 从网址或文本生成二维码，支持自定义大小和颜色
- [无障碍热力图生成器](https://elysiatools.com/zh/tools/accessibility-heatmap-generator): 从 UI 截图或 HTML 输入生成聚焦对比度的无障碍热力图，并给出建议修补色值
- [批量条码生成器](https://elysiatools.com/zh/tools/barcode-batch-generator): 从 CSV 或多行文本批量生成 Code 128、EAN-13、UPC-A、ITF-14、QR Code 和 Data Matrix，并导出 PNG ZIP 或 PDF
- [Meta标签提取器](https://elysiatools.com/zh/tools/meta-tag-extractor): 从网页提取和分析Meta标签、Open Graph、Twitter Cards和结构化数据
- [ECharts 主题 Token 抽取器](https://elysiatools.com/zh/tools/echarts-theme-token-extractor): 从 ECharts 主题 JSON 抽取设计 token——颜色、数字、字号与字符串——并直接导出到你的设计系统。粘贴一个主题对象（即通过 echarts.init(dom, themeName) 注册的那种），工具遍历每个叶子节点，为每个颜色（可选地将命名色/rgb 规范化为 hex）、间距数字、字号与字符串打标，然后输出干净的 CSS 变量、Tailwind theme.extend 配置、Style Dictionary tokens.json 或 SCSS 变量。在 ECharts 可视化主题与 Figma/CSS/Tailwind 设计 token 之间架桥，无需逐个手抄。
- [表头删除器](https://elysiatools.com/zh/tools/header-remover): 从CSV数据中删除表头，创建无表头的干净文件。非常适合数据库导入、数据处理管道、API集成和需要无表头CSV格式的系统。 功能特点： - 从CSV数据中删除第一行（表头） - 删除多个表头行 - 删除表头前跳过空行 - 保持数据完整性 - 支持多种CSV分隔符 - 删除前预览 - 数据验证选项 - 批量处理能力 常见用途： - 为数据库导入准备数据 - 清理API响应数据 - 从导出文件中移除元数据 - 为机器学习创建无表头数据 - 为不使用表头的系统准备数据 - 从结构化文件中提取纯数据值

## 示例

- [HTML 查看器样本](https://elysiatools.com/zh/samples/html-viewer-samples): 用于浏览器内 HTML 查看器的样本文件
- [包含图片的HTML示例](https://elysiatools.com/zh/samples/html-with-images): 包含图片的HTML源代码示例，用于测试提取
- [MSG Viewer Samples](https://elysiatools.com/zh/samples/msg-viewer-samples): An Outlook MSG email sample for in-browser preview
- [包含敏感数据的文本示例](https://elysiatools.com/zh/samples/text-with-sensitive-data-samples): 包含各种类型敏感数据的文本样本，用于测试数据脱敏（电话、邮箱、身份证、银行卡）

## 相关内容

- [HTML 提取、清洗与 Markdown/PDF 导出工具](https://elysiatools.com/zh/hubs/html-convert): 在一个专题里比较 HTML 清洗、属性提取、图片地址提取、HTML 转 Markdown 和 HTML 转 PDF 工具，适合网页内容转换流程。
- [条码、二维码与标签工具](https://elysiatools.com/zh/hubs/barcode-utility): 把条码生成、二维码创建与解码、UPC/EAN 校验、WiFi 二维码分享和可打印标签工具集中到一个专题中。
- [网页无障碍审查与可读配色工具](https://elysiatools.com/zh/hubs/web-accessibility-audits): 在一个专题中检查 WCAG 问题、读屏顺序、低对比度区域、色觉缺陷风险和可读配色选择，适合网页与 UI 无障碍工作流。
- [HTML 内容提取、清理与交付工具](https://elysiatools.com/zh/hubs/html-content-extraction-cleanup-and-delivery): 从 HTML 中提取链接、图片、表格和纯文本，再转换或渲染为可复用的交付内容。