从头开始构建 HTML 电子邮件模板

了解任何流程的最佳方式是自己从头开始执行。今天，我们将通过从头开始构建一个简单的 html 电子邮件模板来实现电子邮件设计。

不是你要找的东西？没问题，本教程将教你如何构建自己的！

“你越早停止与电子邮件的怪癖作斗争，你就能越早利用它们来发挥自己的优势。” ——凯蒂·G·奥康纳

我们正在构建的 HTML 电子邮件模板

这是我们将要构建的 HTML 电子邮件，请随意分叉并自己使用它。请记住，当我们通过 Web 浏览器查看此模板时，与使用电子邮件客户端相比，我们遇到问题的可能性要小得多。

See the Pen Build an HTML Email Template From Scratch by Envato Tuts+ (@tutsplus) on CodePen.

1. 开始您的 HTML 电子邮件文档

首先，值得一提的是我从哪里提取了一些资源。

可爱的 2D 图标由Justicon on Envato Elements
社交媒体图标来自Metrize Icons

现在，正如我们在上一个教程中所讨论的那样，您需要以 HTML 文档类型开始您的 HTML 电子邮件模板，并为您的订阅者选择正确的语言。在这种情况下，我们将使用 html5 文档类型，使用将我们的语言设置为英语<html>，并且还包括 XML 和 Microsoft Office 命名空间（xmlns位）。正如我将解释的那样，我们将需要这几行。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="x-apple-disable-message-reformatting">
    <title></title>
    
    <style>
        table, td, div, h1, p {font-family: Arial, sans-serif;}
        table, td {border:2px solid #000000 !important;}
    </style>
</head>
</html>

上面的代码中有很多东西，但这是确保最终电子邮件在任何地方都能精美呈现的最低要求。

首先，我们有一些meta标签来确保正确的文本编码、跨不同移动设备的视口缩放，以及一个阻止 Apple 在其邮件应用程序中以奇怪的方式调整大小的标签。

在标签下方，您会看到和<title></title>之间的一些代码。将代码放在这两个标签中意味着只有 Windows 上的 Microsoft outlook 会应用它（mso = ' Micro s oft O utlook '）。在那里，我们有少量的 XML，可以确保 PNG 图像在 Windows 上的 Outlook 中以正确的大小显示。我们放入标签中的设置可确保正确解释此代码。xlmnshtml

在它下面，我们有一个style标签，其中只有几个 css 规则。第一个设置我们所有主要元素的字体，这是为了 gmail 网络邮件的好处，除非我们包含它，否则它将覆盖我们的字体设置。如果您稍后最终更改字体，请务必在此处也进行更改。

最后，我们将包括table, td {border:2px solid #000000 !important;}哪些将为所有内容划定界限。这纯粹是为了让我们在构建时可以看到我们在做什么，最后我们会删除它。

整理好之后，我们就可以开始建造结构的其余部分了。

2.创建正文和主表

首先，我们将为我们的电子邮件添加一个整体结构，从一个<body>标签开始。在标签下方直接添加以下</head>代码：

<body style="margin:0;padding:0;">
    <table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff;">
        <tr>
            <td align="center" style="padding:0;">
                Hello!
            </td>
        </tr>
    </table>
</body>

您可以看到 body 标签上的边距和填充设置为零以避免任何意外空间。

我们还添加了一个宽度为 100% 的表格。这充当了我们电子邮件的真正正文标签，因为正文标签有时会被电子邮件客户端删除。将您想要的任何“正文”背景颜色应用于此表格标记。

我们所有的表都将设置为role="presentation". 这使它们更易于访问，因为它告诉屏幕阅读器将其视为可视表，而不是数据表。

我们已将, 和两者都设置border-collapse为0 以避免表中出现任何意外空间。collapseborderborder-spacing

您会注意到我们正在使用<td>，如果您已经熟悉 HTML，您可能想知道为什么，因为align它实际上是一个已弃用的 HTML 属性。我们使用它是因为电子邮件客户端的 CSS 支持水平差异很大，而且我们通常仍需要使用已弃用的 HTML 来确保所有内容都能正确显示。在这种情况下，这是因为 Outlook for Windows 不遵循margin:0 auto;CSS 来居中。

最后，确保您始终在内联样式中将表格单元格上的填充设置为零，例如<td style="padding:0;">，否则电子邮件客户端都会添加自己的填充量。当我们自己添加填充时，我们可以调整这个值，但如果没有填充应用于任何边，则必须明确将其设置为零。

关于使用 CSS 填充速记的注意事项

在表格单元格上使用 CSS 填充时，您可以通过三种方式可靠地编写它。要么指定一个值，例如padding:20px，它将在单元格的每一侧（顶部、右侧、底部和左侧）应用 20 像素的填充，或者指定成对填充，即padding: 10px 20px，它将向顶部和底部添加 10 像素的填充，加上左右各 20 像素。如果这些都不合适，你应该声明每一边，即 padding: 10px 10px 0 5px。在所有情况下，您都必须设置每个值，即使其中一些值为零。此外，仅指定三个值可能会在电子邮件客户端中产生不可预知的结果。

填充在所有电子邮件客户端中的表格单元格上都可以可靠地工作，但是如果您在填充方面遇到问题，则无需求助于间隔 GIF。在紧要关头，您可以使用间隔 div 或间隔单元。只需在其中包含一个不间断的空格字符 (  )，设置一个匹配的 height and line height，并确保包含 mso-line-height-rule:exactly 这将确保 Microsoft Outlook for Windows 以像素完美的大小呈现它。（如果您正在创建水平空间，则需要指定 a width 而不是高度，并且可能还需要添加 font-size:0;。）这是一个示例或行内的间隔单元格：

这是一个间隔 div：

添加主表

现在让我们在容器表中放置一个 602 像素宽的表。

600 像素是您的电子邮件在大多数屏幕分辨率下舒适地显示在大多数桌面和网络邮件客户端中的安全最大宽度，我们增加了 2 像素，因此我们可以在外部有一个 1 像素的边框，这会在两侧添加一个像素.

我们将替换我们的小“你好！” 用这张桌子打招呼。

<table role="presentation" style="width:602px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;">
    <tr>
        <td style="padding:0;">
            Hello!
        </td>
    </tr>
</table>

伟大的！现在我们有了外部表，我们的主要内容表位于内部，为一些内容行做好了准备。

3.创建 HTML 电子邮件模板结构和标题

在我们的电子邮件设计中，我们可以看到布局分为几个逻辑部分，因此我们将为每个部分创建一行。

让我们复制我们添加的最后一个表中的单行，这样我们总共有三个，方法是复制 and 之间（包括）之间的所有内容并<tr>在</tr>下面粘贴两次。

我已经改变了“你好！” 读取第 1 行、第 2 行和第 3 行的文本，因此它现在应该如下所示：

<table role="presentation" style="width:602px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;">
    <tr>
        <td style="padding:0;">
            Row 1
        </td>
    </tr>
    <tr>
        <td style="padding:0;">
            Row 2
        </td>
    </tr>
    <tr>
        <td style="padding:0;">
            Row 3
        </td>
    </tr>
</table>

从头开始构建 HTML 电子邮件模板第4张

现在我们将通过向标签添加backgroundCSS 属性来根据设计为它们着色。style永远记得使用十六进制代码的完整六个字符#ffffff，因为三个字符的简写形式#fff并不总是适用于所有电子邮件客户端。

<table role="presentation" style="width:602px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;">
    <tr>
        <td style="padding:0;background:#70bbd9;">
            Row 1
        </td>
    </tr>
    <tr>
        <td style="padding:0;">
            Row 2
        </td>
    </tr>
    <tr>
        <td style="padding:0;background:#ee4c50;">
            Row 3
        </td>
    </tr>
</table>

从头开始构建 HTML 电子邮件模板第5张

好的，接下来在我们的电子邮件设计中，我们将专注于第 1 行。在单元格上，让我们将填充从更改0为40px 0 30px 0。然后在单元格内，我们将插入我们的图像：

<td align="center" style="padding:40px 0 30px 0;background:#70bbd9;">
<img src="images/h1.png" alt="" width="300" style="height:auto;display:block;" />
</td>

始终使用 HTML 宽度属性而不是 CSS 指定图像的宽度，例如width="300"如上所示，而不是style="width:300px;". 如果您不这样做，Microsoft Outlook for Windows 将以实际大小显示您的图像。

我们还将图像设置height为auto 以避免任何挤压，并display设置为block，以防止在某些电子邮件客户端中出现间隙。

最后，如果您的图像包含电子邮件文本中未提及的重要信息，请务必将其描述添加到alt标签中，以便屏幕阅读器向使用它们的人宣布。

注意：图像并不总是加载，替代文本并不总是在视觉上显示为后备，因此任何重要信息都应始终作为实时文本包含在您的电子邮件中，而不是嵌入到图像中。

这就是我们完成的 HTML 标头！

4.创建内容区

从标题开始，现在让我们专注于 HTML 电子邮件的内容区域。首先，根据我们的设计，我们将在第 2 行的单元格中添加一些填充，以便里面的表格有一些空间，所以它现在看起来像这样：

<tr>
    <td style="padding:36px 30px 42px 30px;">
        Row 2
    </td>
</tr>

从头开始构建 HTML 电子邮件模板第7张

向中间单元格添加了填充

现在我们将用另一个表格替换“第 2 行”文本以将我们的主要内容嵌套在其中。使用表格构建 HTML 电子邮件时，我们需要嵌套它们，因为colspan电子邮件rowspan客户端并未广泛支持它们。

<table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;">
    <tr>
        <td style="padding:0;">
            Row 1
        </td>
    </tr>
    <tr>
        <td style="padding:0;">
            Row 2
        </td>
    </tr>
</table>

我们已将此表的宽度设置为 100%。使用百分比宽度而不是尽可能使用像素值是一种很好的做法，因为如果您想让您的电子邮件具有响应性，或者即使您稍后只需要调整电子邮件的宽度，这将帮助您进一步走下去。百分比宽度将自动适应新的容器大小，而像素宽度都需要单独更新。

现在我们将我们的内容添加到第一行，这是一个标题、一段文本和一个带有链接的最后一段。在这个阶段，我们根本不会为这些元素添加任何样式。

将“第 1 行”文本替换为以下内容：

<h1>Creating Email Magic</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan et dictum, nisi libero ultricies ipsum, posuere neque at erat.</p>
<p><a href="http://www.example.com">In tempus felis blandit</a></p>

接下来，我们要将两列内容添加到第 2 行。因为我们希望这两个单元格之间有一个间隙，所以我们将创建一个三列表，其中两个外部列之间有一个空单元格。有几种方法可以创建此布局，但对于我们的目的而言，这是最可靠的一种。

尽管我喜欢坚持百分比，但当您有特定大小的内容时，将其转换为百分比可能会很棘手（在此示例中，列将是 48.1%，这可能会变得混乱）。出于这个原因，由于我们的两个图像都是 260 像素宽，我们将创建也是 260 像素宽的列，中间有一个 20 像素的边距单元格。（这将总共 540 像素，这是我们表格的 600 像素宽度减去两侧 30 像素的填充。）确保将您的font-sizeand归零并在中间单元格中line-height添加一个不间断的空格字符。 

我们还将为两个单元格设置为vertical-alignto top ，以便它们垂直对齐到顶部，即使一列的文本比另一列多。默认垂直对齐方式是 middle.

用此表替换“第 2 行”：

<table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;">
    <tr>
        <td style="width:260px;padding:0;vertical-align:top;">
            Column 1
        </td>
        <td style="width:20px;padding:0;font-size:0;line-height:0;"> </td>
        <td style="width:260px;padding:0;vertical-align:top;">
            Column 2
        </td>
    </tr>
</table>

从头开始构建 HTML 电子邮件模板第10张

现在让我们将图像和内容添加到这些列中。<p>所有电子邮件客户端的标签都很好地支持边距，因此我们将在标签中包装我们的文本和图像，并在稍后添加所有文本样式时<p>调整它们之间的间距。margin

让我们将内容添加到第 1 列和第 2 列，以便整个表格现在看起来像这样：

<table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;">
    <tr>
        <td style="width:260px;padding:0;vertical-align:top;">
            <p><img src="images/left.gif" alt="" width="260" style="height:auto;display:block;" /></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, est nisi libero ultricies ipsum, in posuere mauris neque at erat.</p>
            <p><a href="http://www.example.com">Blandit ipsum volutpat sed</a></p>
        </td>
        <td style="width:20px;padding:0;font-size:0;line-height:0;"> </td>
        <td style="width:260px;padding:0;vertical-align:top;">
            <p><img src="images/right.gif" alt="" width="260" style="height:auto;display:block;" /></p>
            <p>Morbi porttitor, eget est accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed.</p>
            <p><a href="http://www.example.com">In tempus felis blandit</a></p>
        </td>
    </tr>
</table>

在这里，我们再次使用 HTML 属性设置图像的宽度width，就像我们在插入标题图像时所做的那样。

5. 为电子邮件模板页脚设置样式

现在我们将填充添加到页脚行。

<tr>

Row 3

</td></tr>

在该单元格内，我们将用另一个表格替换“第 3 行”文本，以获得两列，每列 50% 宽，左侧设置为align="left"，右侧设置为，align="right"以便将每个内容中的内容固定到这些边并给我们平衡的电子邮件设计。

<table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;">
    <tr>
        <td style="padding:0;width:50%;" align="left">
            Left Column
        </td>
        <td style="padding:0;width:50%;" align="right">
            Right Column
        </td>
    </tr>
</table>

从头开始构建 HTML 电子邮件模板第13张

页脚的两列

用一段文字替换“左栏”：

<p>® Someone, Somewhere 2021<br/>

<a href="http://www.example.com">Unsubscribe</a></p>

我们将为我们的社交媒体图标创建另一个小表格，因为它是获得最精确间距的最佳方式，可以在任何地方正确呈现。将“右栏”文本替换为下表。

您会注意到我们没有指定表格宽度，这是因为表格的宽度将由其中的单元格确定。它们每个都是 38px 宽（我们图标的宽度）加上左边 10px 的填充。

<table role="presentation" style="border-collapse:collapse;border:0;border-spacing:0;">
    <tr>
        <td style="padding:0 0 0 10px;width:38px;">
            <a href="http://www.twitter.com/"><img src="images/tw.png" alt="Twitter" width="38" style="height:auto;display:block;border:0;" /></a>
        </td>
        <td style="padding:0 0 0 10px;width:38px;">
            <a href="http://www.facebook.com/"><img src="images/fb.png" alt="Facebook" width="38" style="height:auto;display:block;border:0;" /></a>
        </td>
    </tr>
</table>

从头开始构建 HTML 电子邮件模板第14张

社交媒体图标表

我们终于得到它了; 我们的 HTML 电子邮件模板布局已完成！

6.设置文本样式

在我们的 HTML 电子邮件模板中设置文本样式是非常重要的一步。h1首先，让我们看一下带有我们的介绍性文字的第一行内容。

使用段落和标题标签时的重要注意事项

使用段落和标题标签（p、h1、h2 等）时，您必须指定顶部和底部边距设置，否则每个电子邮件客户端都会对这些元素应用自己完全不同的默认边距。如果您根本不需要任何边距，您还需要确保将顶部和底部边距设置为零，在这种情况下，您可以将标题设置为margin:0;. 如果您只想要下边距，您仍应将上边距设置为零，例如margin:0 0 10px 0;.

考虑到这一点，我们将在所有标签上设置所需的边距，并且我们还希望将文本颜色设置为#153643，我们可以将其应用于单元格，因为里面的所有内容都将继承该颜色。经过这些更改后，整个单元格如下所示：

<td style="padding:0 0 36px 0;color:#153643;">
    <h1 style="font-size:24px;margin:0 0 20px 0;font-family:Arial,sans-serif;">Creating Email Magic</h1>
    <p style="margin:0 0 12px 0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan et dictum, nisi libero ultricies ipsum, posuere neque at erat.</p>
    <p style="margin:0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;"><a href="http://www.example.com" style="color:#ee4c50;text-decoration:underline;">In tempus felis blandit</a></p>
</td>

您会在上面注意到，我们还在 font-family 每个个体h1和p元素上设置了，您可能想知道为什么我们不能只在 body 或 table 标记上设置它。这是因为如果您没有在每个段落或标题元素上将它们设置为内联，一些网络邮件客户端将覆盖您的字体。这个问题还有其他考虑和方法，但为了简单起见并确保我们的电子邮件在此阶段完美呈现在任何地方，我们将在每个元素上设置它内联。

现在，向下移动到我们的两列区域，添加color到每个 260 像素宽的单元格中，使它们看起来像这样：

如上所述，我们将为段落和链接添加一些文本样式和边距，并为整个表格设置基本字体大小。总之，表格现在看起来像这样：

<table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;">
    <tr>
        <td style="width:260px;padding:0;vertical-align:top;color:#153643;">
            <p style="margin:0 0 25px 0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;"><img src="images/left.gif" alt="" width="260" style="height:auto;display:block;" /></p>
            <p style="margin:0 0 12px 0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, est nisi libero ultricies ipsum, in posuere mauris neque at erat.</p>
            <p style="margin:0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;"><a href="http://www.example.com" style="color:#ee4c50;text-decoration:underline;">Blandit ipsum volutpat sed</a></p>
        </td>
        <td style="width:20px;padding:0;font-size:0;line-height:0;"> </td>
        <td style="width:260px;padding:0;vertical-align:top;color:#153643;">
            <p style="margin:0 0 25px 0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;"><img src="images/right.gif" alt="" width="260" style="height:auto;display:block;" /></p>
            <p style="margin:0 0 12px 0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;">Morbi porttitor, eget est accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed.</p>
            <p style="margin:0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;"><a href="http://www.example.com" style="color:#ee4c50;text-decoration:underline;">In tempus felis blandit</a></p>
        </td>
    </tr>
</table>

最后，我们将为页脚设置样式。首先，我们将在主页脚表中添加一些字体样式，在我们的红色页脚单元格内，内边距为 30px，因此它现在显示为：

<td style="padding:30px;background:#ee4c50;">
<table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;font-size:9px;font-family:Arial,sans-serif;">

在该表的左栏中，我们可以更新我们的段落和链接以包含样式和颜色：

<p style="margin:0;font-size:14px;line-height:16px;font-family:Arial,sans-serif;color:#ffffff;">
® Someone, Somewhere 2021<br/><a href="http://www.example.com" style="color:#ffffff;text-decoration:underline;">Unsubscribe</a>
</p>

在我们的社交媒体图标上，我们会将每个链接的样式设置为白色，这样如果图像未加载，任何替代文本都将在红色背景上可见。调整每个链接，使它们看起来像这样：

和

我们终于得到它了！一切都在。

7. 运行一些测试

此时，最好通过电子邮件测试服务（如Litmus或 Email on Acid ）运行您的 HTML 代码。保留所有表格和单元格的边框有助于查看每个电子邮件客户端中发生的情况。（根据您测试电子邮件的方式，您可能需要先远程托管您的图像，然后将每个图像的完整远程 URL 插入到您的代码中。请参阅您的测试服务的网站以了解如何测试您的 HTML。）

以下是我在 Acid 上的电子邮件的一些测试结果：