您是否应该发送 HTML 邮件？
这当然是一个有争议的问题，但最终我认为，如果您有一条您认为可以通过精心设计的电子邮件获益的消息，您应该尝试一下。如果您只是想因为您街区上的其他人也在这样做而这样做，那就不要这样做。如果您决定这样做，以下是我认为的 HTML 邮件的**五条黄金法则**
- 只向选择接收邮件的人发送邮件。
- 确保使其在所有邮件客户端中都能获得最佳显示效果。
- 不要过度发送。每周可能过于频繁。
- 发送纯文本备选方案。
- 提供退订链接并尊重用户的选择。
更新：在更新本文时，这篇文章已经有十年历史了。可能不再是可靠的信息来源。有关 HTML 邮件中 CSS 的良好信息来源是 Campaign Monitor 的指南。
在设计之前撰写邮件内容
您应该做的第一件事是撰写电子邮件的纯文本版本。在您精力充沛的时候首先执行此操作，将带来更好的文案、更好的设计计划，并最终带来更好的电子邮件。您无论如何都需要这样做，因为其中一条黄金法则是向 HTML 邮件发送纯文本备选方案。在一封组合电子邮件中同时发送纯文本和 HTML 电子邮件称为多部分/备选电子邮件格式或**MIME**。大多数电子邮件客户端都支持它，它是弹出的那个询问您是否要以纯文本、HTML 或两者发送邮件的内容，例如在此 Thunderbird 屏幕截图中
有关纯文本电子邮件的一些快速提示：将您的行硬换行至 60 个字符，并写出完整的 URL，而不是使用锚标记。
首先针对最低公分母进行设计。
在完成电子邮件的纯文本版本后，开始考虑设计。每个读取您电子邮件的电子邮件客户端都将有自己的规则来处理 HTML 电子邮件，因此您必须针对最低公分母进行设计。认为在 4-5 个不同的浏览器中测试网站很痛苦吗？电子邮件的情况更糟糕。以下是部分列表：AOL（多个版本）、Comcast、Earthlink、Gmail、Hotmail、Lotus Notes、Mail.com、Outlook（多个版本）、Thunderbird、Windows Live、Yahoo！、Mail.app。更不用说移动客户端了。
假设您要发送到一个相当大的列表，并且不知道他们正在使用哪种电子邮件客户端，您需要考虑您不能做什么，而不是您可以做什么。
您不能做什么
- 包含带有
<style>的<head>部分。Apple Mail.app 支持它，但 Gmail 和 Hotmail 不支持，因此这是不行的。Hotmail 将支持正文中的样式部分，但 Gmail 仍然不支持。**更新**：在 2020 年，这得到了更好的支持。 - 链接到外部样式表。没有很多电子邮件客户端支持这一点，最好忘记它。
- Background-image / Background-position。Gmail 也是此问题的原因。
- 清除浮动。还是 Gmail。
- Margin。是的，说真的，Hotmail 忽略边距。基本上任何 CSS 定位都不起作用。
- Font-anything。Eudora 很可能忽略您尝试使用字体声明的任何内容。
还有很多其他事情您应该注意。有关在线电子邮件服务支持什么的完整列表，请查看这篇文章。
您可以做什么。
简单来说，就是**内联样式**。它并不像您想象的那么糟糕，因为我们基本上是在开发一次性电子邮件，内联样式远不如在网站上使用它们那么令人反感。需要一个大型绿色标题用于一段文本吗？
现在 159 美元
- 最大的优势是**图片**。创造性地思考您可以用图片做什么。
- 由于您将使用表格，因此**考虑网格化**。网格是设计师的朋友，您可以使用网格做很多事情。
表格仍然是标准。
查看您收到的几乎所有 HTML 邮件的代码。我敢打赌它使用表格进行格式化。表格仍然是在电子邮件客户端中获得一致结果的最佳方式。“视口”是电子邮件客户端中专门用于显示实际电子邮件的区域，相当于浏览器窗口。这差别很大。一种非常常见的技巧是设置一个宽度为 100% 的表格，并在其中嵌套一个具有静态宽度的居中表格。这似乎非常有效。外部表格也是您设置整个电子邮件背景颜色的绝佳机会。可惜我们不能只使用带有自动左右边距的 div 来进行居中，但它在大多数电子邮件客户端中不起作用。
帮助！
如果您不想考虑所有这些恼人的内联样式会破坏您的代码以及哪些内容有效哪些内容无效的所有细微规则，请不要担心！有一个非常好的（且免费的）预检服务，名为Premailer。使用 Premailer，您只需将电子邮件设计为网页（仍然考虑表格），然后提交您的 URL。Premailer 将解析 HTML 并将所有样式转换为内联样式，并为您提供有关您正在执行可能存在危险以及哪些电子邮件客户端存在危险的 CSS 警告列表。方便！
那里也有提供全面服务的 HTML 电子邮件营销提供商。最值得注意的是 MailChimp。使用 MailChimp，您可以在其网络编辑器中直接设计电子邮件。您仍然拥有大量的控制权，预制模板非常不错，MailChimp 将尽一切努力确保电子邮件在所有电子邮件客户端中都能获得最佳显示效果。仅此一项就值得其合理的费用（每月 30 美元，最多可容纳 2,500 个列表，并且从那里开始上下浮动）。MailChimp 提供更多功能，一项几乎无价的服务，为您管理列表。您可以获得一个可自定义的网页，您可以将其发送给人们以注册您的电子邮件，这将自动将其添加到您的列表中。更好的是，他们还可以自动处理退订。这两件事都可以像您希望的那样透明。提供有关您的电子邮件的统计信息。
该服务提供免费试用版。即使您最终从未真正使用过该服务，也应该查看 MailChimp 的资源中心。他们提供了大量关于电子邮件营销、技术信息和设计技巧的有用信息。他们甚至提供了一本完全免费的 64 页 PDF，名为设计、编码和发送 HTML 电子邮件：初学者生存指南，这是一个开始了解这些内容的绝佳起点。
快速提示！
- 请记住使用**完整路径**指向图像，而不是相对路径。（例如 http://www.yourserver.com/email/images/logo.gif）。此外，请从您自己的服务器链接到图像，而不是其他人的服务器。
- 在开始发送数千封电子邮件之前，请**咨询您的 ISP**，他们可能会认为您是垃圾邮件发送者。
- 反复测试、测试、再测试，尽可能使用各种不同的电子邮件客户端。你肯定需要测试主要的在线客户端，如 Gmail、Yahoo 和 Hotmail，但也一定要检查 Outlook、Mail.app 和尽可能多的其他桌面客户端。
- 宽度不要超过 600px。即使这样也有些勉强。如果你的设计可以处理，440px 更接近理想值。
- 将你可能使用的任何额外 CSS 视为向上兼容。如果你愿意，可以始终包含一些标题样式 CSS，但将其视为使用支持它的电子邮件客户端的用户的一项额外福利。然后完全关闭它，并确保设计仍然合理。
- 尽量避免看起来像垃圾邮件。 这一点很明显，但编写良好的代码和诚实的文案应该可以让你远离此类风险。你的 HTML 电子邮件绝对不是发布伟哥笑话的地方。
- 就像网页设计一样，考虑折叠以上内容 并没有坏处。也就是用户在必须滚动之前看到的内容。
- 像页脚一样使用你的页脚。这是一个放置许多内容的好地方，包括电话号码和地址、关于信息、取消订阅选项，以及可能提醒读者此电子邮件是什么以及他们为何出现在列表中的内容。
- 遵守法律。 《反垃圾邮件法案 (CAN-SPAM)》 于 2004 年 1 月 1 日生效。它规定了作为商业电子邮件发送者必须执行的许多事项。重点基本上是不要欺骗，并且你**必须**包含一个物理邮寄地址以及一个有效的取消订阅链接。
示例。
我认为所有这些都是相当有效的示例。必胜客 (Papa John’s) 发送电子邮件的频率过高，但他们的电子邮件通常非常诱人。
祝你好运！
我可能会在快速提示中添加，如果要使用图像，请确保使用 alt 标签。我知道在 Gmail 和 Outlook 中，除非你是受信来源，否则它不会显示图像，直到你选择显示图像。因此，你很可能会看到一个空白区域，如果没有其他内容吸引用户，他们就会直接删除。
这是一个非常好的观点，也很重要，Benjamin。由于你是第一个评论的人，我认为人们会阅读它，我不会修改帖子。
你最好更新帖子，并通过一个滚动到他评论的链接向他表示感谢 :)
你关于图像的说法是正确的，但是将这些图像附加到电子邮件中怎么样？Gmail 和 Thunderbird 会自动显示附加的图像（我不知道其他邮件用户代理 (MUA) 是如何处理的）。
不错的文章，Chris，特别是强调以最低公分母为目标。不幸的是，像 Outlook 2007 和 Gmail 这样的电子邮件客户端使得纯基于 CSS 的电子邮件几乎不可能实现，但如果你正在尝试使用少量 CSS，我测试过 所有常用电子邮件客户端支持的内容。
@Dave Greiner：很棒的链接，谢谢！那里有非常全面的研究。你提供的 PDF 特别方便。
我从事 HTML 电子邮件开发已经大约一年了，所以我可以说这里有一些非常好的建议。我一开始尝试编写干净的、无表格的代码，让我告诉你：这并不值得麻烦。使用表格。不要在其他地方使用它们，但在电子邮件中使用它们。
而且我想强调：考虑折叠以上内容**非常**重要……而且你没有想象中那么多的折叠以上空间。请记住，很多人依赖预览窗格来查看他们的电子邮件……或者考虑雅虎 (Yahoo) 在每条传入消息上方放置了多少广告。在折叠以上区域，你大约有 300 个可用的像素。
我知道这篇文章很旧了，但我希望在有人阅读你的评论时回复它。无表格布局是“新的”标准，但这并不意味着表格不再需要了。
有一种情况你绝对应该每次都使用表格……而且我惊讶地发现新手设计师有多么频繁地不做这件事。当尝试显示制表数据时，请使用表格！！拜托！！不要用 div 模拟表格！！
好吧，在可能不会被阅读的评论中贡献了两分钱……但是，我读了它。
关于如何创建出色的 HTML 电子邮件的精彩文章
啊呀呀呀呀，我讨厌 HTML 电子邮件……
但是，它们确实有其用途。我所知道的最佳技巧是创建简单的 HTML 电子邮件，保持简单 (KISS)。
查看 Emogrifier，我们开发的一个 PHP 实用程序，它将 HTML 和 CSS 转换为 Gmail 友好的电子邮件。你可以在网站上使用它，或者可以下载 PHP 代码以用于你的应用程序。我们决定将其开源，以帮助像我们这样的开发人员，他们一直在努力使电子邮件在 Gmail 中看起来正确。
Gmail，你为何抛弃我们？！
我还最终发布了一个 CSS 到内联转换器，它可能是一个均衡的解决方案。它以网页表单或你可以下载的 PHP 脚本的形式提供。不过，我不想立即开源它！
它比 Premailer 更简单，比 Emogrifier 更强大。它只需要你的 CSS 和 HTML，然后输出你的新代码。它还遵守 CSS 多规则（逗号分隔）声明、排序和优先级。
查看 1 美元的完整功能试用版。
我们在向客户发送通知邮件时，希望在邮件中添加展开和折叠按钮，并根据点击显示文本。这是否可以使用样式来实现？请提供必要的帮助。
谢谢。
一些浏览器和邮件客户端（基于浏览器的和基于桌面的）将以不同的方式支持你的需求。
由于你需要使用伪选择器来获得所需的结果，因此支持将是不稳定的，主要是因为伪选择器必须在块或嵌入式样式表中声明。
点击此评论中的我的姓名查看我的博客，如果你想了解更多信息，请给我留言。
我花了一段时间才找到这个关于电子邮件浏览器中支持的 CSS 样式的页面
http://www.campaignmonitor.com/css/