将HTML和CSS应用于您的电子邮件会对您给潜在客户的印象产生巨大影响 - 在过去几年中，电子邮件客户端中的HTML支持已经取得了长足的进步。
然而，由于电子邮件客户端的数量庞大，很难为每个客户端提供完美的服务，因此，过时的做法可能会被迫开发人员强制执行。您可能已经意识到确保网站跨浏览器兼容性的重要性 - 但确保您的电子邮件在所有客户端看起来正确是一个完全不同的球赛！
要了解的事情
HTML中涉及到细微差别通讯设计。它可能很烦人，在某些情况下，非常令人沮丧。在我们开始实施，编码或设计模板之前，值得研究一下在创建HTML和CSS电子邮件时适用的一些基本原则。
在技术方面，大多数电子邮件客户端不支持CSS浮动，因此需要使用表格进行布局。许多客户还会删除HTML，head和body标签，包括其中的任何CSS样式。这意味着您的所有CSS都应该内联。
在设计方面，您应该保持600px或更小的电子邮件，以适应电子邮件客户端预览窗格的常见宽度。许多电子邮件客户端默认也会阻止图像，因此如果您依赖图像处理内容，则收件人可能看不到它。一个好的经验法则是内容越重要，就越有可能使用文本来显示内容。最后，即使您遵循所有正确的方法，您的创建也会在某些时候中断 - 如果您有20,000个电子邮件订阅者，则可以保证电子邮件无法正确显示每个邮件的最后一个。
因此，HTML电子邮件可能不一致且有些变幻无常 - 但仍然可以使用它们来为您和您的客户实现有效的营销。有了上述思想根深蒂固，让我们开始吧。我们将从头开始创建一封电子邮件，这意味着我们不会使用任何模板或第三方服务 - 只需HTML和CSS，Photoshop就可以使用图形。
基本结构
首先，我们将设置一个简单的HTML文件。一定要支撑自己，因为如上所述，用HTML和CSS制作的电子邮件似乎违背了您认为良好做法的一切：
到目前为止，我们拥有电子邮件的基本结构：我们已正确指定并填充所有相应的元标记，并为我们的内容添加样式。现在我们需要用内容填充我们的电子邮件。
添加内容
让我们添加我们的内容。我们将使用HTML表格，从简单的文本行开始，使用户能够在浏览器中预览电子邮件。在以下插入之间插入以下内容标签：在这里，我们添加了第一个表格，并使用了它 在为电子邮件设计图形时，请记住宽度是一个真正的约束 - 所以想一想。对于我们的图形，我们将创建一个600x400px的Photoshop文档（称之为Header.jpg并且，在画布中，只需包含您要显示的顶部图形。在本文中，我们将简单地在底部包含带阴影边框的图像和一些文本。重复上述过程，但这次调用图形Middle.jpg并使用您的电子邮件正文填充它。 接下来我们将创建两个图形，每个图形作为页脚的一侧;例如，我们将建立一个链接到网站的左侧和一个链接到Twitter页面的右侧。为此，请创建两个空白画布，一个宽度为300像素，宽度为200像素页脚，l.jpg和另一个相同的大小叫页脚，r.jpg。 在这里，我们使用HTML表格将每个图像放置在正确的位置，然后添加指向页脚图像的链接。您应该注意到我们为HTML电子邮件使用表格的原因之一：您可以将图像放置在您想要的位置。 无论位置如何，桌子都可以让您更容易布置图像。然后，您可以将它们链接到特定位置，这是创建HTML电子邮件的基本动机。 当归结为发送您的电子邮件时，事情归结为您正在使用的客户端 - 这里我们将介绍三种流行的桌面选项： HTML电子邮件过时且使用旧技术的主要原因是电子邮件必须遵守这样的一系列客户端。此外，电子邮件客户端的目的不是成为Web浏览器，也不是呈现HTML文档：它是（主要）显示文本 - 因此在开发客户端时，HTML兼容性通常不是首要任务。当包含兼容性时，它通常是有限的，并没有利用该语言的最新进展。 希望本文能让您了解可以在哪些方面进行增强。无论您是否认为应该使用HTML电子邮件，它们都是现代客户经常被忽视的致命弱点。它不像客户端开发人员那么关心，而且HTML本身被低估了。这种情况需要改进，否则将继续强迫开发人员使用过时的技术 - 让他们没有时间专注于最重要的事情：内容。标记用内容行（在本例中为文本）填充它，然后关闭表。如果您要保存HTML文件并在浏览器中打开它，您会发现一个简单的文本行 - 可以在没有任何表格的情况下完成 - 但您会明白为什么它们对于电子邮件来说非常重要片刻。 这封电子邮件看起来有点模糊吗？ 在浏览器中查看。 设计图形
创建我们的图形后，我们现在需要将它们放置在电子邮件中。为了实现这一点，我们将创建各种表，然后相应地填充它们，在封闭表标记下面添加以下代码（）：
2.0的新功能
发送电子邮件
为什么这么过时？
话题