马上默 在线轻量工具箱
登录
EDM

HTML 邮件模板生成器

填好品牌、标题、正文与行动按钮，一键生成 table 布局 + 全内联样式的高兼容性邮件 HTML：可在下方 iframe 实时预览，默认 600px 安全宽度，并自动带上 Outlook 与暗色模式适配代码。纯浏览器本地生成，不上传。

1编辑内容

2预览与源码

✓各客户端渲染自检清单

  • Outlook（Windows）✓ 已处理 用 Word 引擎渲染：本模板全部使用 table + bgcolor 属性 + 内联样式，不使用 flex / grid / 圆角阴影依赖。
  • Gmail 网页版✓ 已处理 会剥离 head 内 style：关键样式全部内联，preheader 用隐藏文字实现。
  • Apple Mail / iOS✓ 已处理 附带 prefers-color-scheme 媒体查询与 color-scheme meta，暗色模式不花屏。
  • QQ / 微信邮箱✓ 已处理 中文字体栈 PingFang / YaHei，图片建议补 alt 与 width 属性（模板已留提示）。

★模板预设 · 多格式导出 · 结构图

8 套常见邮件模板一键填充文案与配色；除 HTML 外还可导出纯文本、.eml 与 JSON 配置，并附自绘结构线框图。

邮件结构线框 · 自绘 SVG（600px 安全宽度）

方案管理 · 数值对比 · 导出

调好的参数可存成方案随时载入，也能生成可分享链接；结果里的数值列会自动画成对比图，并支持导出 CSV / JSON。

最近方案 暂无

✉️口径说明与常见误填

table 布局全内联，Outlook 与暗色模式已预置

兼容三律
table 布局、样式全内联、宽度不超 680px，不用 flex、grid、position。
Outlook 对策
td 同写 bgcolor 属性与内联背景、cellpadding 代替 margin、MSO 条件注释固定 96dpi。
Gmail 对策
head 内 style 会被剥离：关键样式全部内联，preheader 用隐藏文字实现。
暗色模式
默认带 color-scheme meta 与 prefers-color-scheme 媒体查询，Apple Mail 不花屏。
实时预览
iframe 即时渲染邮件效果，切源码标签查看完整 HTML。

这个工具解决什么问题

浏览器里好看的 EDM 一发进 Outlook 就花屏。本工具填好品牌、标题、正文与行动按钮，一键生成 table 布局加全内联样式的高兼容性邮件 HTML：默认 600px 安全宽度，Outlook MSO 条件注释、暗色模式适配与 preheader 全部内置，iframe 实时预览，下载即可导入任意 EDM 平台，纯浏览器本地生成不上传。

三条兼容守则

① 宽度固定 600px：兼容 Outlook 阅读窗格与 Gmail 缩进，最宽不超 680px；过宽在移动端会被整体缩小。

② 图片必写 alt 与 width：多数客户端默认屏蔽图片，alt 文字是唯一保证可见的内容，width 防撑破布局。

③ 按钮用 table 拼：bulletproof 按钮以 table 加 padding 拼出色块，不依赖圆角阴影等被剥离的属性。

怎么用

  1. 第 1 步 · 填文案与配色
    品牌、preheader、主标题、正文段落、按钮文字与链接、页脚逐项填写，选主色与背景色。
  2. 第 2 步 · 看渲染预览
    右侧 iframe 实时渲染邮件效果，切 HTML 源码标签查看完整代码。
  3. 第 3 步 · 核对自检清单
    Outlook、Gmail、Apple Mail、QQ/微信邮箱的渲染自检清单标注已处理项。
  4. 第 4 步 · 复制或下载
    复制 HTML 或下载 .html 文件，导入 Mailchimp、SendCloud 或自建 SMTP 发送。

更新记录

  • v1.0 2026-11-02
  • 2026-11-02 上线首个版本
  • 2026-11-02 新增暗色覆盖示例与 640/680 宽度选项

常见问题

html 邮件模板怎么写才兼容？
记住三条铁律：外层用 table 布局、样式全部内联、宽度固定不超过 680px。不要用 flex、grid、position，图片写 alt 与 width 属性，按钮用 table 拼出 bulletproof 结构。本页生成的模板已按此规则编写。
邮件在 Outlook 里变形怎么办？
Outlook 桌面版用 Word 渲染引擎：margin、float、背景简写常失效。对策是给 td 同时写 bgcolor 属性与内联 background、用 cellpadding 代替 margin、加 MSO 条件注释固定 96dpi。本模板已内置这些写法。
有没有免费的营销邮件模板生成工具？
本页就是：免费、无需注册、浏览器本地生成。填好文案与配色即可拿到可直接投放的 HTML，还能下载 .html 文件导入任意 EDM 平台（Mailchimp、SendCloud、自建 SMTP 均可）。
邮件宽度一般设多少 px？
行业惯例是 600px（兼容 Outlook 窗格与 Gmail 缩进），最宽不超过 680px；两侧留 24px 内边距。过宽会在移动端被缩小，过窄显得廉价。生成器默认 600px 可选。
邮件模板怎么做暗色模式适配？
在 head 里声明 color-scheme 为 light only 可强制浅色；想真适配则在 prefers-color-scheme dark 媒体查询中覆盖卡片背景与文字颜色（注意 Gmail 只支持部分选择器）。本模板默认强制浅色并附带暗色覆盖示例。

💬 留言板 0

全部留言需审核通过后展示
💬

还没有留言，来抢沙发吧！

✍️ 说点什么
0 / 500
图形验证码

🔗 相关工具

🔍 SERP 搜索结果预览器三端标题截断模拟 → 🔗 Deep Link 生成器App 唤起配置四件套 → 🧩 组件状态矩阵生成器八态 token 一键交付 → ✂️ CSS clip-path 生成器多边形拖拽裁剪 →
👣 做完这一步，顺便看看
🏛️ 凯撒密码解密 凯撒密码解密 ：1~25 位位移加解密、ROT13 一键转换… → 🔤 乱码转换器在线修复 乱码转换器在线 ：把“锟斤拷”“�”“涓枃”“😀”等乱… → 📸 代码截图美化工具 在线代码转图片工具：粘贴或输入代码（支持 JavaScrip… → 🎨 WCAG 对比度检测工具 在线颜色对比度检测工具：输入前景文字色与背景色（支持 #he… →
全部工具 →