本文最初于2006年首次发表，然后于2015年更新。
> 自从本文于2006年首次发表以来，
如果您认为很难确保网站的跨浏览器兼容性，请注意这是一个全新的游戏 - 这些电子邮件软件工具中的每一个都可以以截然不同的方式显示相同的电子邮件。即使这些工具确实正确显示了HTML电子邮件，例如，在阅读电子邮件时，读者在窗口大小的宽度中考虑了宽度。
您是选择手工编码HTML电子邮件（我的个人喜好）还是使用现有模板，在创建HTML电子邮件时，有两个基本概念要牢记：>
> CSS样式声明出现在主体标签下方，而不是头标签之间。
>
因此，将符合标准的最佳实践和精益标记技能放在一边：我们即将弄脏手！>
单列布局通常包括：
>>两列电子邮件还使用标头和页脚。像两列网页一样，他们通常使用狭窄的侧列来容纳功能并链接到更多信息，而较宽的列则包含电子邮件的身体内容。要获取两列电子邮件布局以在手机或平板电脑上很好地显示需要一些代码FU，正如您在本文稍后会看到的。
>促销电子邮件遵循类似的规则，但内容和链接的包含更少。它们通常包括一两个消息，有时会使用一个带有小解释性文本的大图像和图像下方的一些链接。>所有这些电子邮件布局的可能性都可以轻松创建，使用HTML表将空间划分为行和列。实际上，使用HTML表是实现将在不同邮件客户端中持续呈现的布局的唯一方法。
>无论您的电子邮件是如何设计的，重要的是要记住最重要的内容应该出现在电子邮件顶部或附近，因此当读者打开您的电子邮件时，可以立即可见。电子邮件的左上角通常是人们打开电子邮件时首先要看的地方。
>这是我用来创建HTML电子邮件的方法： >
>
>
>
> div似乎几乎没有用，但跨度几乎每次都起作用，因为它们是内联元素。在某些情况下，跨度不仅可以用于着色或尺寸文本：它们可用于将文本放置在内容上方或下方。
>
第一个使用的测试工具是Firefox和Internet Explorer Web浏览器。如果电子邮件在两个浏览器中都很好地显示，则很有可能在Outlook，Yahoo！，Google Mail和其他服务中测试电子邮件，并且只会显示次要问题。如果可能的话，我还建议您在Internet Explorer 6中测试您的电子邮件 - 这应该可以很好地指出您的电子邮件将如何在Outlook 2003中呈现（请参阅本文末尾的资源列表，以获取有关运行Internet的信息资源管理器6）。最后，要测试电子邮件在iPhone或iPad上的外观，请在Safari Web浏览器中查看您的HTML电子邮件。 >一旦电子邮件出现在这两个网络浏览器中，请使用电子邮件交付服务将电子邮件发送到一系列测试电子邮件帐户。理想情况下，这应该包括使用Yahoo！，Hotmail和Google Mail Services的帐户。
当然，您使用的测试帐户应由会收到电子邮件的人的邮件列表中的域名确定。例如，如果此列表中没有AOL订阅者，则可能是浪费时间和金钱要设置，并与AOL电子邮件帐户进行测试。 这是我在此测试阶段发现必要的最常见的代码调整：
>
一方面，Google邮件删除了任何样式标签之间包含的CSS样式，无论它们在电子邮件中出现如何。 HTML表中显示的字体（使用样式的唯一替代方案）具有比预期更大的奇怪习惯，无论HTML电子邮件如何结构。
但是，好消息是，如果您为这三个电子邮件应用程序的奇怪性进行编码，那么您的HTML电子邮件代码可能在大多数（如果不是全部）电子邮件客户端中显示得很好。以下是一些在Google邮件和其他较旧的电子邮件软件中效果很好的技术： 也就是说，Lotus的笔记很可能会介绍您的HTML电子邮件怪癖，这些怪癖几乎是不可信的。例如，旧版本的笔记可以将图像转换为其专有格式，或者简单地忽略一封电子邮件中完美无瑕的基本HTML，但在另一封电子邮件中显示其他html。
步骤5：编码手机和平板电脑 >有很多人在智能手机和平板电脑以及桌面电子邮件软件上阅读HTML电子邮件。调整您的HTML表以在这些设备上很好地显示，这一点很容易。它可以帮助CSS支持非常适合用于新手机和平板电脑上使用的HTML渲染引擎。 >这是一组@Media定义的示例，用于显示手机和平板电脑的单列布局HTML表：
>将此@media代码直接放在您的身体标签下方，并将其放在表格定义和TD单元格上。当您的HTML电子邮件使用设备（或Web浏览器水平重新尺寸）查看小于480像素时，这些定义将激活。 >编码两列HTML电子邮件以适应小手机和平板电脑屏幕的秘诀？将每一列放入自己的表中。接下来，对于每个HTML表，请使用内联CSS进行浮动：左和HTML Align =“左”以浮动并对齐每个内容列表，向左对齐。然后添加到您的表定义和TD单元格中。 >使用上面的@Media代码，对于宽度小于480像素的屏幕，这将设置列表，左右列，宽度与左侧列列相同，并在主列下面滑动。 该方法可用于针对任何布局设计更改以与手机和/或平板电脑一起使用。
>从本文中获取的最佳主意是什么？如果在简单的电子邮件设计和更复杂的解决方案之间可以选择，那么简单始终是最安全的赌注。 进一步阅读
电子邮件标准项目可能是确切理解HTML和CSS的最佳起点。该网站还维护了一个酸测试，可用于比较跨电子邮件软件的合规性，并且您可以通过几种方式参与来帮助改善网络标准的电子邮件支持。>
>
这两种电子邮件交付服务都随着时间的推移与不同的电子邮件客户端积极测试模板。但是，每种方法都存在细微的差异 - 广告系列监视器将样式声明放置在Head Tag中，而MailChimp则没有。请务必使用电子邮件列表的收件人使用的任何电子邮件客户端使用任何电子邮件客户端测试您的最终html代码。> 纯文本电子邮件设计指南 测试HTML电子邮件 >关于 mailChimp：html电子邮件模板入门指南
有关HTML电子邮件的各个方面的许多重要信息，包括垃圾邮件过滤器的工作方式。包括一些可以使过程更容易的工具。>
>
其中一些信息是古老的，但提供了莲花笔记的好文章。>
>
这种仅CSS的HTML电子邮件的方法是由列表分开发布的。注意：作者写了本文的更新，该文章发布在活动监视器博客上，优化了HTML电子邮件中的CSS演示文稿。
>
一个不错的概述，描述了不同的电子邮件服务如何查看您在HTML电子邮件中包含的HTML。您无法直接解决每个问题（例如，在电子邮件的html和电子邮件版本之间创建一个明确的边界是您的电子邮件服务提供商的问题，如果您使用一个问题），但它有助于知道发生了什么。
>初学者的6步电子邮件营销指南
以下是电子邮件营销指南，该指南比可访问的标题所建议的更完全涵盖了主题，它包括一部分良好的信息，以从构建电子邮件模板时将从您将做出的设计决策中获得最佳结果。它是从2020年底开始的 >>如何在2020年创建博客（并赚钱）：立即开始博客的轻松指南 >我可以在我的HTML电子邮件通讯中使用Web字体吗？ 如何将图像添加到我的HTML电子邮件通讯中？ > >我可以在我的HTML电子邮件新闻通讯中使用JavaScript吗？ JavaScript在您的HTML电子邮件通讯中。这是因为许多电子邮件客户端不支持JavaScript，或者出于安全原因默认情况下将其禁用。相反，请坚持使用您的电子邮件设计的HTML和CSS。 我如何在HTML电子邮件通讯中添加背景颜色？ 🎜>可以在HTML电子邮件通讯中添加背景颜色，可以使用CSS完成。您可以使用背景色属性为整个电子邮件设置背景颜色，也可以为表或表单元格（如表或表单元格）设置背景颜色。但是，请记住，并非所有电子邮件客户都支持背景颜色。对于那些不这样的人，您应该使用html中的bgcolor属性提供后备颜色。 可以使用标签完成新闻通讯。您可以链接到网站，电子邮件地址或电话号码。要链接到网站，请使用网站的完整URL使用HREF属性。要链接到电子邮件地址，请在HREF属性中使用MailTo：协议。要链接到电话号码，请使用TEL：协议中的HREF属性中的协议。 >在您的HTML电子邮件中添加社交媒体图标可以使用图像和链接完成新闻通讯。您将对图像图像使用
>这种方法可能会冒犯更喜欢使用最新标准编码的纯粹主义者，但这是目前唯一可行的方法。但是，我们正在使用表进行布局的事实并不意味着我们需要完全求助于老式的方法。例如，无论Lotus Notes显示HTML电子邮件多么糟糕，您都不必求助于使用字体标签。虽然Outlook 2007的HTML渲染引擎并不完美，但它确实显示了基本的HTML桌子。
但是，有一些警告。让我们看一下下一个文本样式。
首先，使用内联样式存储您的所有样式信息，如下所示：下一步是在各种电子邮件客户端中测试您的HTML电子邮件。通常，这将确定需要解决方法的问题。
>
>一旦对HTML电子邮件进行了调整，以使其在您的测试电子邮件帐户中很好地显示，下一步就是浏览清单。例如，验证以下内容：
>许多电子邮件交付服务都可以查看您的HTML电子邮件如何在各种电子邮件软件中显示。它可以帮助您在发送之前确定需要进行哪些代码调整。>的代码
Google Mail，Lotus Notes和Outlook 2007提出了自己独特的编码挑战。信不信由你，Outlook 2007对CSS的支持明显少于Outlook的先前版本！
的可能性就越大，即使不是完美的可能性也越好。
正如我们之前讨论的那样，使用包含所有内部布局表的容器表（例如，对于标题，内容和页脚）。这将电子邮件保留在一大块的HTML中，因此在注释中显示时，布局的一部分不太可能徘徊。
>解决方案是使用CSS @Media定义来定位HTML表TD单元格，并提高显示屏所需的字体大小。例如，iPhone上的字体必须为13像素才能清晰。最好的部分？网络邮件和桌面电子邮件软件将剥离或忽略您的@Media定义，而您的手机和平板电脑将读取代码并完美显示所有内容。
>
<span><span><span><p</span> <span>style<span>="<span>color: red;</span>"</span></span>></span><span><span></p</span>></span></span>
许多收到电子邮件的人喜欢HTML而不是文本，原因有很多。但是，对于程序员而言，创建HTML电子邮件的任务将始终显示出来既简单又非常复杂。本文描述了创建标记的许多问题和策略。
这些资源提供有价值的信息，如果您想了解有关编码HTML电子邮件的更多信息，可以为您提供帮助。
>
电子邮件标准项目
>
本文列出了许多用于使文本电子邮件更易于扫描的简单技术。
本文探讨了多个电子邮件客户端的测试程序。 其他相关文章包括创建HTML电子邮件布局和了解多元测试。
的有关封锁电子邮件图像的文章
“> clickz和广告系列监视
从2004年开始，ClickZ文章显示了主要的电子邮件软件如何比较何时阻止图像或何时在预览窗格中查看内容。广告监视器的文章更加详细，列出了实际示例和想法如何对抗电子邮件的默认映像渲染，以及设计电子邮件以在预览窗格中看起来还可以。
> Word 2007 HTML和CSS在Outlook 2007中渲染功能
Microsoft的官方描述2007年Outlook将为HTML和CSS呈现什么。包括指向Dreamweaver工作的验证器以及Microsoft编辑工具的链接。
>“ HTML电子邮件的秘密”系列
CSS和电子邮件，在树上接吻
> HTML代码如何影响电子邮件可传递性
增长邮件列表的最佳方法之一是运行一个一致的博客。本指南是一个罕见的发现 - 它向您展示了如何快速运行有效的博客并产生结果，并削减了博客建议界的许多噪音。它还涵盖了使用您的电子邮件新闻通讯来增加您的博客受众，为您的整个操作创造了一个良性周期。
编码HTML电子邮件新闻通讯的最佳实践是什么？>编码HTML电子邮件新闻通讯可能会有些棘手，但是遵循最佳实践可以使过程变得更加顺畅。首先，始终使用表进行布局。与现代网络设计不同，电子邮件设计仍然在很大程度上依赖桌子。其次，内联CSS是必经之路。这是因为并非所有电子邮件客户端都支持嵌入或链接的CSS。第三，将HTML属性用于宽度，高度等。这样可以确保您的电子邮件在不同的电子邮件客户端中正确显示。最后，在发送电子邮件之前，请务必测试您的电子邮件。有多种在线可用的工具可让您测试您的电子邮件在不同的电子邮件客户端中的外观。>如何使我的HTML电子邮件通讯响应迅速吗？>使您的HTML电子邮件新闻通讯响应式响应率意味着从台式计算机到手机，确保在所有设备上看起来都不错。为此，您可以在CSS中使用媒体查询。媒体查询使您可以根据设备的屏幕尺寸应用不同的样式。但是，并非所有电子邮件客户都支持媒体查询，因此使用移动优先方法设计您的电子邮件很重要。这意味着首先为最小的屏幕设计，然后添加媒体查询以适应较大的屏幕。
是的，您可以在您的HTML电子邮件通讯。但是，请记住，并非所有电子邮件客户端都支持Web字体。对于那些没有的人，您应该始终提供后备字体。这通常是标准字体，如Arial或Times New Roman。要使用Web字体，您将使用 @font-face规则在CSS中包含字体文件。
> HTML电子邮件通讯可以使用
标签完成。但是，有几件事要牢记。首先，始终在您的标签中包含宽度和高度属性。这样可以确保图像正确显示。其次，将绝对URL用于图像。这意味着图像源应该是完整的URL，而不是相对路径。最后，始终包含图像的alt文本。这是图像的描述，如果无法加载图像，则会显示。>如何确保我的HTML电子邮件通讯在所有电子邮件客户端中看起来都不错？但是，您可以使用一些策略。首先，始终将表用于布局和内联CSS。这些在电子邮件客户端中得到了广泛的支持。其次，在发送发送之前，请在各种电子邮件客户端中测试您的电子邮件。有一些在线工具可让您这样做。最后，保持设计简单。您的设计越复杂，在某些电子邮件客户端中断的可能性就越大。
>如何在我的html电子邮件通讯中添加一个呼叫式操作按钮？您的HTML电子邮件通讯可以使用HTML和CSS完成。最简单的方法是使用带有CSS的标签将其像按钮一样样式。但是，要获得跨电子邮件客户端的更好兼容性，您可以使用具有单个单元格的表格和样式看起来像按钮。
>如何将链接添加到我的HTML电子邮件通讯？
>如何将社交媒体图标添加到我的html电子邮件通讯中？
>
以上是如何编码HTML电子邮件通讯和电子邮件模板的详细内容。更多信息请关注PHP中文网其他相关文章！
