重温“像老板一样编码”：HTML 电子邮件入门

ahad1020

大家好！距离我们最初的“像老板一样编码”系列文章发布已经有一段时间了，其中一些文章仍然是我们网站上访问量最大的页面。鉴于最近这段时间人气很旺，我想是时候对这个系列进行一些新的尝试了，更新和扩展我们原来的内容，并添加一些新内容。这次我们将重点介绍如何开始使用 HTML 电子邮件。

你可能会问：“但我的营销自动化平台有一个所见即所得的编辑器，我为什么要关心它呢？” 嗯，这些编辑器通常会对电子邮件的布局方式有所限制，不允许将特定样式应用于某些元素，或者创建的电子邮件在 Outlook 中无法正常工作。有时，你可以采用巧妙的变通方法来克服这些限制，但通常情况下，你需要放弃所见即所得的编辑器，亲自动手编写实际代码。这看起来可能很困难，但一旦你掌握了窍门，你很快就能写出代码了。

那么，事不宜迟，让我们开始吧！

（注意：我假设您已经熟悉 Web 开发的基础知识；如果不熟悉，请在继续之前参考我们的编码语言 CliffsNotes 帖子。来吧，我会等的！）

HTML 电子邮件入门：创建框架
您的（文档）类型是什么？
每个 HTML 文档，无论是电子邮件还是网页，都以一个声明开头，突尼斯电话号码库 它告诉电子邮件客户端或浏览器它要处理什么以及如何正确呈现它，这就是文档类型声明。多年来，人们使用了各种各样的文档类型；如果您以前看过 HTML 代码，您可能见过像 HTML 4.01 Strict 或 Transitional，或者 XHTML 1.0 Transitional 这样的文档类型。现在，您应该使用 HTML5 文档类型，它如下所示：



为什么要使用它？因为它是 HTML 的最新版本，并且在各个电子邮件客户端上都得到了出色的支持。事实上，有些电子邮件客户端只支持 HTML5 文档类型，所以这是现代代码更适合电子邮件开发的少数​​情况之一；稍后会详细介绍。

定义基本结构
好了！搞定这些之后，我们就可以创建电子邮件的其余基本框架了。在 doctype 之后，是 HTML 起始标签，它启动了包含除 doctype 之外的整个文档的容器，并告诉电子邮件客户端或浏览器它正在查看 HTML 内容（是的，即使我们刚刚让 doctype 做了同样的事情，但这仍然是必需的）。最好在 HTML 标签中包含“lang”属性，以便电子邮件客户端或浏览器知道文档中使用的是什么语言；您可以在 MDN 上阅读更多相关信息。我们将语言设置为英语：



用你的头脑
现在我们有了容器，接下来需要往里面添加内容。首先要添加的是head元素，它包含文档的附加信息，包括元标签（关于数据的数据）、标题、样式等等；换句话说，就是“重要内容”。在下面的示例中，您可以看到我添加了head 元素，以及其中的几个标签：



首先，有一个元标记将电子邮件使用的字符集定义为 UTF-8；这可能因您在电子邮件中使用的语言而异。
其次，元标记定义了视口；这对于确保您的电子邮件在较小的屏幕（例如智能手机）上正确显示非常重要。这里的标记内容确保电子邮件最初以设备屏幕的宽度显示，而不应用任何缩放。关于这些标记是否对电子邮件客户端有帮助存在一些争议，但添加它总是有益的。
最后，标题标签；虽然它不会在电子邮件客户端中显示，但如果电子邮件在网络浏览器中显示，则会显示，因此最好添加它。建议您将其设置为电子邮件的主题行。
我们可以在这里添加其他有用的元标记以及 CSS 样式，但这些将在另一篇文章中介绍；今天我们将重点介绍基础知识。

锻炼身体
现在我们已经定义了标题，我们可以处理电子邮件的内容，并将所述内容放入正文标签中。

之前我提到过，HTML5 文档类型是少数现代代码更适合电子邮件开发的例子之一。可惜的是，电子邮件的编码标准在很大程度上还停留在 1990 年代末/2000 年代初，这很大程度上要归咎于 Microsoft Outlook，这意味着table标签既会成为你的朋友，也会成为你的敌人，也会成为你形影不离的伙伴。

附注：很长一段时间以来，Outlook 一直使用 Microsoft Word 的 HTML 渲染引擎，坦白说，该引擎对内容的显示方式有着自己独到的、颇具创意的诠释，并且避开了现代 HTML 编码标准。虽然表格始终受支持，但 div 标签等元素，以及最重要的，用于控制其大小的特定 CSS 规则，却未受支持。这导致电子邮件开发人员感到沮丧，因为他们不得不绕过这些限制才能正常显示电子邮件。虽然微软最终在 2022 年开始使用更现代的渲染引擎，但仍然有足够多的用户在使用旧版本的 Outlook，因此我们仍然需要使用这些方法。

保持朋友间的亲密，并拉近彼此的距离
如果您已经有一段时间没有使用表格标签了，下面是有关其结构的快速提醒：



从高层次上讲，每个表格都以一个table标签开始，用于定义整体容器。然后，使用tr标签定义一行或多行。最后，使用td标签定义行中的一列或多列，这些标签定义单个单元格（您也可以使用th标签，但目前我们只讨论前者）。表格必须包含这三个组件，并且必须使用相应的结束标签来结束打开的任何元素。