HTML 邮件模板生成器
根据页眉、正文、行动号召按钮、页脚和品牌颜色，生成响应式、兼容邮件客户端的 HTML 模板（基于表格布局并使用内联样式）。可复制可直接发送的 HTML，或实时预览。
输入
用于邮件的 <title> 标签。
大多数收件箱在主题行旁显示的隐藏预览片段。
每个空行开始一个新段落；单个换行会转换为 <br>。
用于页眉文字和按钮。
输出
邮件预览将显示在这里。
基于表格布局并使用内联样式——粘贴到您的邮件服务商即可。
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/html-email-template-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"subject": "Welcome to Acme",
"preheader": "Everything you need to get started.",
"headerText": "Acme",
"bodyContent": "Hi there,\n\nThanks for signing up. Your account i…",
"buttonText": "Get Started",
"buttonUrl": "https://example.com/start",
"footerText": "You received this email because you signed up at…",
"brandColor": "#464aff",
"bgColor": "#f4f4f7"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `html-email-template-generator` tool (HTML Email Template Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/html-email-template-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="HTML 邮件模板生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
几秒钟内即可制作一封响应式、可直接发送的 HTML 邮件。填写页眉、几段正文、行动号召按钮、页脚和品牌颜色，工具就会生成基于表格布局并使用内联样式的简洁 HTML，它能在 Gmail、Outlook、Apple Mail、Yahoo 及其他客户端中稳定显示——然后复制，或下载为 .html 文件。
为什么邮件 HTML 与网页 HTML 不同
您为网站编写的 HTML 在收件箱里并不能正常工作。邮件客户端落后浏览器好几年，而且差异很大：Windows 版 Outlook 使用 Microsoft Word 的排版引擎渲染邮件，Gmail 会删除 <style> 代码块和外部样式表，而且几乎所有客户端都不支持 flexbox、grid 或现代 CSS 定位。在 Chrome 中看起来完美的代码，在收件箱里可能会整个崩坏。
邮件开发者通过一种刻意保守的方式来应对这个问题，本生成器也遵循这种方式：
- 基于表格的布局。 结构由嵌套的
<table>元素构建，而不是<div>+ flexbox，因为表格是所有客户端都能理解的唯一布局基础元素。 - 仅使用内联样式。 每个样式都直接写在元素的
style=""属性中。没有可能被剥离的<style>代码块。 width属性。 主容器使用width="600"——一个安全且广泛使用的内容宽度——作为 HTML 属性，因为即使 Outlook 忽略 CSS，它仍会遵循该属性。- 完整的文档结构。 包含
<!DOCTYPE html>外壳、<title>，以及隐藏的预览文本<div>（大多数收件箱会在主题旁显示的简短预览行）。
使用方法
- 输入邮件主题（用于
<title>）和预览文本。 - 输入页眉/标志文字和正文内容。段落之间留一个空行——每段都会成为独立的
<p>；单个换行会变为<br>。 - 为行动号召添加按钮文字和链接（留空文字则不显示按钮）。
- 选择品牌色（用于页眉文字和按钮）以及背景颜色。
- 查看实时预览的更新，然后复制 HTML 或下载
email-template.html。
所有操作都在您的浏览器中完成——您输入的内容不会发送到服务器。
我可以把它粘贴到 Mailchimp 或其他邮件服务商吗？
可以。输出是标准的、独立的 HTML。大多数邮件服务商都提供"粘贴您自己的代码"或"导入 HTML"选项——只需将生成的标记粘贴到那里即可。
我的输入安全吗？
您输入的所有文本在放入模板之前都会进行 HTML 转义，因此 <、>、& 和引号等字符会显示为普通文本，而不会破坏标记。
能在 Outlook 中正常显示吗？
可以。表格布局、内联样式和 width 属性正是用于在 Outlook 基于 Word 的渲染器中保持邮件完整的技术。