创建和发送HTML电子邮件的新手指南
快速突击测验：网络开发人员用来创建你每天访问的网站结构的语言名称是什么？撇开聪明和过度聪明的答案不谈，超文本标记语言（HTML）是一个常青的标准，在网络诞生之初就存在。然而，这并不只适用于网页。你的收件箱是HTML电子邮件设计的肥沃土壤。
如果你考虑到你几乎每小时都会在你的电子邮件中看到多少图片、GIF、视频和品牌内容，这就很有意义。虽然你可以提供纯文本的电子邮件，但HTML版本将提供更多的好处，给你更多的机会来塑造和推销你自己和你的业务。
在这篇文章中，我们将讨论如何创建和发送HTML电子邮件，以及为什么你应该这样做。在某些地方，我们会深入探讨如何编写电子邮件的代码，但你不需要这些知识来创建自己的电子邮件。
一、什么是HTML电子邮件？
进入你的收件箱的电子邮件可能有两种方式：
纯文本：这几乎是现代的电报。没有造型或最低限度的格式，收件人看到的是文字，而不包含其他东西。
HTML：与纯文本相比，它是一个爆炸性的设计，而且是重在设计。它使用HTML代码来展示电子邮件，尽管正如我们将要讨论的，它并不总是利用现代网络标准。
例如，如果你收到的是纯文本电子邮件，你就会知道，因为它看起来完全是一个纯文本文件。相比之下，HTML电子邮件看起来与现代网页几乎一样（给或不给一些风格和格式问题）。
--浏览器内的HTML电子邮件。
在大多数情况下，HTML电子邮件不会努力提供最终的互动性或动态参与。这也是我们稍后要讨论的问题，但从标准上来说，HTML电子邮件已经落后于网络了。因此，HTML更像是一种设计驱动的工具，而不是帮助提供一种体验的工具。这就带来了一个问题，如果唯一的原因是视觉，你为什么要使用HTML电子邮件？我们将在接下来回答这个问题。
二、为什么你要使用HTML邮件而不是纯文本格式？
由于一些原因，你很少会看到一个企业的纯文本电子邮件。然而，纯文本本身并没有错，更多的是它没有提供HTML电子邮件格式化的好处。比如说：
你可以利用固有的视觉元素，帮助将注意力集中在你的电子邮件内容的各个部分。
推而广之，HTML电子邮件是一种呈现你的内容的丰富格式。这意味着你可以利用用户期望参与的元素，如图片、视频等。
这两个方面结合起来，可以为你提供一个极好的机会，使你的内容品牌化，就像你的主网站一样。
然而，决定使用HTML电子邮件并不是你想象中的完美无缺。也有一些弊端需要考虑。首先，你必须考虑用户的体验，就像你设计一个网站时那样。这可能不仅包括浏览器--很多用户也喜欢在专门的客户端阅读电子邮件。
更重要的是，你还必须考虑一些主导网络发展的隐私和安全问题。如果你想加入JavaScript，你拉入第三方字体，以及其他方面，这一点尤其重要。
正因为如此，你必须在比网络更多的战线上进行可及性和标准之争。要创建一个跨浏览器和客户端的HTML电子邮件是有一些困难的。当然，这是有可能做到的，我们将在未来的章节中介绍技术方面的问题。现在，你要把你的电子邮件的各种元素确定下来，然后寻求实现它们。
三、HTML电子邮件的基本要素（和典型做法）
本文将在很多地方提到网页设计，因为有内在的相似之处。提供类似工作流程的一个方面是如何决定你的HTML电子邮件的结构部分。
和网页一样，有一些元素对于你的电子邮件来说实际上是没有商量余地的。当然，你需要内容。这里有几个典型的元素需要考虑。
你的标题很重要，因为这是你的电子邮件提供给读者的第一印象。
就像网页设计一样，考虑在折页上方显示哪些元素也会有好处。
主体内容至关重要，因为这毕竟是读者会订阅你的电子邮件的原因。
你的HTML电子邮件的页脚也为你和你的订阅者提供了很多价值，它可能是你的电子邮件中一个被低估的元素。
这里有几个要点我们可以进一步触及。首先，考虑到emojis在我们日常的网络使用中渗透了多少。虽然它们不是一个严格的HTML元素，但有品位地应用表情符号可以为你的内容创造奇迹，特别是你的标题。
---标题中使用的一些表情符号。
页脚也是一些基本法律信息的最佳位置。与电子邮件有关的两个最大问题是垃圾邮件和电子邮件是否进入正确的收件箱（如果有的话）。这一点我们将在后面的章节中讨论，因为这是创建和发送HTML电子邮件的一个重要部分。
HTML电子邮件的一些典型做法
当涉及到你在设计和布局中使用的一些最理想的做法时，与电子邮件营销有很多交叉的地方。有一个是你想包括的，几乎是没有商量余地的元素。双重选择。
最大的电子邮件营销黑客之一是你想把你的电子邮件带给读者。换句话说，在网站上提供一个选择加入的表格，因为这有很大的转换率。然而，它不应该是你唯一要求确认的时间。以电子邮件的形式发送第二次选择加入，是一个很好的做法。
--- 一个双重选择的电子邮件。
这有几个原因：
第一，它与你的读者建立了信任，因为你得到了明确的许可向他们发送电子邮件。
推而广之，在垃圾邮件转介的情况下，你也有明确的同意（后面会有更多的介绍）。
你帮助阻止他人滥用电子邮件和垃圾邮件，因为他们必须特别选择订阅你的电子邮件。
事实上，由于双重选择涉及到你向有关地址发送电子邮件，这是验证电子邮件地址的最佳方式。
还有其他一些好的做法也要考虑。然而，以下内容更多的是可选的，即你会得到奇妙的结果，但也会有你不想遵循这些准则的时候。
我们的主题行应该是完美的，而你的邮件内容应该是有针对性的。鉴于移动浏览的出现和现在的主导地位，这一点尤其重要。
说到这一点，你要确保你的HTML邮件在小屏幕上读起来毫无障碍--这意味着没有过度的横幅或过大的标志。
如果你在每封邮件中都包含一个强有力的行动呼吁（CTA），你就会有一个很好的机会来提高用户参与度。
追踪是一个有争议的问题，但这将帮助你了解你的用户在你向他们发送邮件时做了什么。一些供应商将一套可靠的分析方法作为标准。
与你如何展示和设置你的电子邮件同样重要的是，如何创建设计和布局。在接下来的几个部分中，我们将研究如何建立一个HTML电子邮件，然后以一些发送技巧来结束。
四、创建HTML电子邮件所需的技术方法
如果你有一些网络开发经验，你无疑会使用HTML5作为你的标记语言。这与以前的HTML和XHTML有天壤之别，包括更多的样式（其中有效的元素几乎为零）和结构之间的划分。
对于后者的一个例子，HTML5提供了许多不同的标签来定义网站的内容区域。
--- 一些HTML结构标签
然而，电子邮件的HTML和网页是不同的，因为它在某种程度上已经落后于时代。因此，你要使用所有那些旧的HTML5表格和内联风格来创建你的布局。至于为什么会这样，你需要和电子邮件客户端的开发人员谈谈，因为他们通常会在HTML邮件进入你的收件箱时进行修改。最常见的行为之一是，出于安全原因（包括其他原因），将CSS和JavaScript从电子邮件中剥离。
这意味着你需要提供另一种方式来为你的HTML电子邮件添加样式--内联是兼容性的唯一选择。说到兼容性，这是一个重要的考虑因素。你必须平衡独特的造型和最终用户的电子邮件客户端的能力。因此，还有一些其他的技术考虑，你要注意。
使用系统字体而不是第三方字体将为你节省一个HTTP请求，为用户快速加载电子邮件，并提供一个外观一致的电子邮件。
你可以更进一步，为那些不能在客户端查看HTML邮件的人提供一个纯文本版本的邮件。很多网站会提供一个HTML版本，你可以在线访问，这既是为了这个原因，也是作为一个备份。
Alt-text对于HTML邮件和网络一样重要。因此，在你添加图片到你的内容中的任何地方，都要使用alt文本，以利于访问。
在HTML电子邮件中，有一个技术方面你应该多加考虑，因为它可以跨越内联样式、CSS和其他因素之间的界限。让我们简单地讨论一下 "条件"。
使用条件语句
HTML电子邮件的一个遗留问题，曾经是老的HTML网站开发人员的工具包，那就是条件式。这是指你指定哪个浏览器将使用一个特定的代码段。
说实话，这几乎总是一个基于微软的问题。对于网页开发者来说，Internet Explorer（IE）是恶魔般的浏览器产儿。然而，对于HTML电子邮件，它是Outlook。在不同的版本之间，你可能会看到你的造型以一种你意想不到的方式呈现出来。
正因为如此，你可以在你的代码中添加条件块，并定义这些元素。例如，你可以同时针对基于Word和基于IE的Outlook版本。
首先是Word。
对于Internet Explorer，使用一个不同的标签:
如果你的目标浏览器是基于WebKit的（如苹果的Safari浏览器、PlayStation浏览器、亚马逊的Kindle等等），你可以使用媒体查询来提供特定的造型。
.html-email-webkit {
display: none;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
..html-email-webkit {
display: block !important;
}
}
这为你提供了一个稍好的方法，使你的HTML电子邮件适应最终用户的显示。总的来说，电子邮件的HTML风格设计并不完美，但每个电子邮件客户端的引擎下都有足够的动力来帮助你创建一些令人惊叹的布局。
五、构建HTML电子邮件的选择
上面我们已经讨论过，你有很多灵活的选择来帮助你创建HTML电子邮件。例如，你可以使用一个漂亮的文本编辑器和HTML从头开始建立。
然而，还有其他的选择，我们可以考虑：
你可以使用一个专门的服务，如电子邮件营销应用程序，来创建你的电子邮件。很多应用程序将提供一个视觉构建器，但也给你写自己的代码，并创建自己的模板的范围。
说到这一点，你可以为你的HTML电子邮件下载一个模板。这很像WordPress的主题，因为它为你的其他设计提供一个基础。从那里，你可以根据你的喜好进行定制。这是在编码和构建选项之间的一个很好的中间地带。
稍后，我们将使用HTML建立我们的电子邮件。然而，在此之前，让我们看看一些你可能要考虑的电子邮件服务提供商，无论你选择何种方法来创建你的电子邮件。
六、3个非常适合创建HTML电子邮件的电子邮件服务提供商
因为这篇文章的重点是创建HTML电子邮件，所以在谈到电子邮件服务提供商时，我们不需要太深入。即便如此，有一些你可能会考虑。
我们不可能把它们都包括在内，所以我们要提到三个最受欢迎的。让我们把它们集中起来。
Mailchimp
这个电子邮件服务提供商是一个首选的解决方案--对许多人来说几乎是一个膝跳决定。在许多人眼里，Mailchimp
它包括很多典型的功能，你会在许多其他类似的应用程序中发现。
在推广业务时有很多帮助，如营销自动化、受众管理工具等。
你有一套顶级的创意工具来帮助你建立HTML电子邮件。
当然，我们在这里要看的是后者。创意助手是Mailchimp了解你的品牌并帮助你建立和个性化你的电子邮件的一种方式。你还可以连接第三方应用程序，如Adobe Photoshop，以帮助你建立完美的电子邮件。
是电子邮件营销应用程序的黄金标准，这有很多好的理由。
使用现有的HTML也很直接，特别是如果你使用Mailchimp的经典生成器。不管怎么说，如果你需要，你确实有办法导入HTML模板。
AWeber
对于一些人来说，AWeber代表了电子邮件营销的巅峰。它是一个神奇而强大的平台，并且包括一个可以说比Mailchimp更集中的功能集。
它包括一些你发送电子邮件所需的基本功能。
能够自动和安排信息、活动和更多。
你有很好的组织工具，如订阅者标签和细分。
AWeber还可以让你自动为你的电子邮件创建内容。例如，你可以用最少的工作量将博客文章变成邮件发送。
当谈到创建你的电子邮件时，AWeber有一些技巧。它使用一个拖放式的视觉构建器，并包括一个自定义的模板库来启动你。更重要的是，你可以将AWeber连接到你的Canva账户，使用后者来帮助设计你的电子邮件。
3. Constant Contact
说到电子邮件服务提供商，Constant Contact是一个异类，但它更像是一个秘密武器。它提供了一系列奇妙的特性和功能，并且在你需要的时候还能让你用HTML来工作。
与AWeber一样，Constant Contact专注于电子邮件营销而不是其他以商业为中心的领域。因此，它有
一个你会喜欢的功能集。
你有客户名单管理工具和营销自动化功能。
有广泛的报告选项。
你能够整合来自Facebook、Instagram和谷歌的广告项目。
有很多方法可以吸引新的订阅者加入你的名单。
七、建立一个HTML电子邮件的内容
在你开始建立你的HTML电子邮件之前，你需要一些工具和技能在手。以下是你在敲打你的指关节并开始之前应该安排的事情。
你要使用一个你觉得舒服的代码编辑器，因为它需要在这个过程中支持你。如果你不知道该选哪一个，很多用户选择Visual Studio Code，尽管Brackets是这项特殊任务的理想选择。我们将使用Onivim2，它是一个基于VS Code核心架构的Vim风格的编辑器。
虽然你需要HTML技能，但你不需要与现代网络开发者一样的知识集（尽管这并不影响你的前景）。
你需要一种方法来测试你的邮件--MailHog是我们在Kinsta博客的其他地方介绍的一种解决方案。
虽然我们不打算使用预制模板，但你可能想在未来使用其中的一个。
你还需要一个电子邮件提供商，因为你需要某种方式来发送你的成品HTML电子邮件。
所有这些都准备好了，你就可以打开一个文本编辑器，开始工作了。接下来，我们将通过这个过程来创建一个基本的HTML电子邮件。
八、如何从头开始创建一个HTML电子邮件
在我们开始之前，值得注意的是，我们不打算使用一个专门的服务，如Mailchimp或AWeber。相反，我们将从头开始创建一个简单的模板，你可以在你需要的地方导入。
我们将把这个过程分成几个不同的部分，因为虽然HTML电子邮件只是相对于网站而言的，但仍然有很多东西需要考虑。
1.为HTML电子邮件打下基础
从你的电子邮件模板的框架开始，这是一个好主意。这将遵循一般HTML的一些典型做法。
这里有几件事情我们应该提到。首先，我们为Transitional XHTML 1.0指定了一个 "doctype"，这是电子邮件开发者的一个常见做法。从那里，我们指定了一个XML命名空间，这在后面会很重要。
你还会注意到一些元标签，这些标签定义了字符集，以及浏览器应该如何在其视口中渲染后面的HTML。
框架的其余部分很简单--有标题和正文标签，我们接下来会用到。
2. 为电子邮件模板添加结构
回顾我们关于使用什么HTML标签的讨论，你会记得我们不希望使用
一切都将从正文中的一组简单的
我们在
| Header |