从头开始构建HTML电子邮件模板|环境教程+

理解任何过程的最好方法是自己从头开始。今天，我们将通过从头开始构建一个简单的HTML电子邮件模板来实现电子邮件设计。

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

这是您正在寻找的HTML电子邮件模板，您可以随意叉起笔来自己使用它。请记住，当我们通过web浏览器查看此电子邮件HTML模板时，与电子邮件客户端相比，遇到问题的可能性要小得多。

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

跳转到此HTML电子邮件模板教程中的部分：

1开始HTML电子邮件文档

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

可爱的2D图标由环境因素的理由
社交媒体图标来自公制化图标

现在，正如我们在上一教程，你需要开始你的简单HTML格式带有HTML文档类型的电子邮件模板，以及适用于订阅者的正确语言。在本例中，我们将使用HTML5 doctype，使用<html lang=“en”>，还包括XML和Microsoft Office命名空间（xml网络位）。正如我将解释的那样，我们需要把这几行写下来。

1	<!文档类型html>
2	<html 朗=“en”（英语）圣诞节="http://www.w3.org/1999/xhtml" xmlns:o文件=“urn:schemas-microsoft-com:office:office”>
三	<头部>
4	<元字符集=“UTF-8”>
5	<元姓名=“视口” 内容=宽度=设备宽度，初始刻度=1>
6	<元姓名=“x-apple-disable-message重新格式化”>
7	<标题>
8	<!--[如果是mso]>
9	<noscript>
10	＜xml＞
11	<o:OfficeDocumentSettings>
12	<o:PixelsPerInch>96像素每英寸
13	</o:办公文档设置>
14	</xml>
15	</noscript>
16	<![endif]-->
17	<样式>
18	桌子, td（时域）, div公司, 小时1, 第页 {前家族: 宋体, 无衬线;}
19	桌子, td（时域） {边境:2像素固体 #000000 !重要的;}
20	</style>
21	</头>
22	</html>

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

首先，我们有几个元标签可以确保正确的文本编码，可以在不同的移动设备上缩放视区，还可以阻止苹果奇怪地调整邮件应用程序的大小。

下面是<标题>标签，您将看到一些代码。将代码放在这两个标记中意味着只有Microsoft Outlook on Windows会应用它(深红= “M（M）微型计算机秒经常O（运行）utlook”）。在那里，我们有少量的XML，可以确保PNG图像在Outlook on Windows中以正确的大小显示。这个xlmns（xlmns）我们在html格式标记可确保正确解释此代码。

在下面，我们有一个风格标记中只包含几个CSS规则。第一个选项为简单电子邮件模板中的所有主要元素设置字体，这是为了Gmail webmail的利益，除非我们包含此选项，否则它将覆盖我们的字体设置。如果您以后更改字体，请务必在此处进行更改。

最后，我们包括表格，td{border:2px实心#000000！important；}这将为一切划定边界。这纯粹是为了让我们在构建时能够看到我们正在做什么，我们将在最后删除它。

经过整理，我们可以开始构建基本HTML电子邮件模板的其余结构。

2创建正文和主表

首先，我们将为电子邮件添加一个整体结构，从<body>标签。将下面的代码直接添加到</头>标签：

1	<车身风格=“边距：0；填充：0；”>
2	<表格角色=“演示文稿” 风格=“宽度：100%；边框塌陷：塌陷；边框：0；边框间距：0；背景：#ffffff；”>
三	<tr>
4	<td 对齐=“中心” 风格=“填充：0；”>
5	你好！
6	</td>
7	</tr>
8	</表格>
9	</body>

您可以看到body标记上的边距和填充设置为零，以避免HTML电子邮件框架中出现任何意外的空格。

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

我们所有的桌子都将设置为role=“演示”这使它们更容易访问，因为它告诉屏幕阅读器将其视为可视表，而不是数据表。

我们已经准备好了边界崩塌到崩溃，以及两者边境和边界间距设置为零，以避免表中出现任何意外的空格。

你会注意到我们正在使用<td align=“center”>，如果您已经熟悉HTML，您可能会想知道为什么，因为排列实际上是一个不推荐使用的HTML属性。我们在HTML电子邮件模板中使用它，因为电子邮件客户端的CSS支持级别差异很大，而且我们通常仍然需要使用弃用的HTML来确保所有内容都能正确显示在任何地方。在这种情况下，这是因为Outlook for Windows不遵守边距：0自动；在CSS中以使事情居中。

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

关于使用CSS填充速记的说明

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

填充在所有电子邮件客户端的表单元格上都能可靠地工作，但如果填充有问题，则无需使用间隔GIF。必要时，您可以使用间隔棒或间隔电池。只包括一个非中断空格字符(&nbsp；)在内部，设置匹配的高度和线条高度，并确保包括mso-line高度规则：准确这将确保Microsoft Outlook for Windows以像素级的完美大小呈现。（如果要创建水平空间，则需要指定宽度而不是高度，并且可能还需要添加字体大小：0；.）下面是一个示例或一行中的间隔单元格：

1	<tr><td 风格=“线条高度：10px；高度：10px；mso-line高度规则：精确；”>&nbsp；</td></tr>

这是一个间隔div：

1	<迪夫风格=“线条高度：10px；高度：10px；mso-line高度规则：精确；”>&nbsp；</div>

添加主表

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

600像素是一个安全的最大宽度，可以让您的电子邮件在大多数桌面和webmail客户端上以大多数屏幕分辨率舒适地显示，我们增加了2个像素，这样我们可以在外部设置一个1像素的边框，在两侧各增加一个像素。

我们将替换我们的小“你好！”在我们的HTML电子邮件格式示例中使用此表表示问候。

1	<表格角色=“演示文稿” 风格=“宽度：602px；边框-折叠：折叠；边框：1px实心#cccccc；边框间距：0；文本对齐：左；”>
2	<tr>
三	<td 风格=“填充：0；”>
4	你好！
5	</td>
6	</tr>
7	</表格>

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

三。创建HTML电子邮件模板结构和标题

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

让我们复制上一个添加的表中的单行，这样我们总共有三行，方法是复制<tr>和</tr>并在下面粘贴两次。

我已将“Hello！”文本改为“Row 1”、“Row 2”和“Row 3”，因此现在应该如下所示：

1	<表格角色=“演示文稿” 风格=“宽度：602px；边框-折叠：折叠；边框：1px实心#cccccc；边框间距：0；文本对齐：左；”>
2	<tr>
三	<td 风格=“填充：0；”>
4	一排
5	</td>
6	</tr>
7	<tr>
8	<td 风格=“填充：0；”>
9	第2行
10	</td>
11	</tr>
12	<tr>
13	<td 风格=“填充：0；”>
14	第3行
15	</td>
16	</tr>
17	</表格>

现在，我们将通过添加背景CSS属性设置为风格标签。始终记住使用十六进制代码的全部六个字符，如#ffffff，就像三个字符的简写一样#飞行频率并不总是适用于所有电子邮件客户端。

1	<表格角色=“演示文稿” 风格=“宽度：602px；边框-折叠：折叠；边框：1px实心#cccccc；边框间距：0；文本对齐：左；”>
2	<tr>
三	<td 风格=“填充：0；背景：#70bbd9；”>
4	一排
5	</td>
6	</tr>
7	<tr>
8	<td 风格=“填充：0；”>
9	第2行
10	</td>
11	</tr>
12	<tr>
13	<td 风格=“填充：0；背景：#ee4c50；”>
14	第3行
15	</td>
16	</tr>
17	</表格>

好的，接下来在我们的HTML电子邮件设计示例中，我们将关注第1行。在单元格上，让我们从0到40像素0 30像素0。然后在单元格内插入图像：

<td 对齐=“中心” 风格=“填充：40px 0 30px 0；背景：#70bbd9；”>

	<毫克 型钢混凝土=“图像/h1.png” alt（高度）="" 宽度="300" 风格=“高度：自动；显示：块；” />

三

</td>

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

我们还设置了图像高度到汽车避免挤压，以及显示到块这可以防止在某些电子邮件客户端中出现漏洞。

最后，如果您的图像包含电子邮件文本中未提及的重要信息，请确保在中高音标签，以便屏幕阅读器向使用它们的用户发布。

图像并不总是加载的，alt文本也不总是以可视方式显示，所以任何关键信息都应该作为实时文本包含在简单的电子邮件模板中，而不是嵌入在图像中。

这就是我们的HTML标题！

4为HTML电子邮件模板创建内容区域

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

1	<tr>
2	<td 风格=“填充：36像素30像素42像素30像素；”>
三	第2行
4	</td>
5	</tr>

现在，我们将用另一个表替换“第2行”文本，以将主要内容嵌套在其中。当使用表构建HTML电子邮件时，我们需要嵌套它们，因为科尔斯潘和行跨度在电子邮件客户端中不受广泛支持。

1	<表格角色=“演示文稿” 风格=“宽度：100%；边界塌陷：塌陷；边界：0；边界间距：0；”>
2	<tr>
三	<td 风格=“填充：0；”>
4	一排
5	</td>
6	</tr>
7	<tr>
8	<td 风格=“填充：0；”>
9	第2行
10	</td>
11	</tr>
12	</表格>

我们已将此表的宽度设置为100%。在格式化的电子邮件模板中尽可能使用百分比宽度，而不是像素值，这是一种良好的做法，因为这将有助于您进一步了解情况，如果您希望使电子邮件具有响应性，或者即使您稍后只需调整电子邮件的宽度。百分比宽度将自动适应新的容器大小，而像素宽度都需要单独更新。

现在，我们将把内容添加到顶行，它是一个标题、一段文本和最后一段，其中包含一个链接。在这个阶段，我们根本没有向这些元素添加任何样式。

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

<h1>创造电子邮件魔力</h1>

<p>Lorem ipsum悲哀坐在amet，奉献敬爱的精英。在天马崇拜的猫科动物中，坐在一个安静的地方。Morbi porttitor、eget accumsan et dictum、nisi liberto ultricies ipsum、posuere neque at erat。</p>

三

<p><a href公司="http://www.example.com">在tempus felis blandit中</a></p>

接下来，我们将把两列内容添加到第2行。因为我们希望这两个单元格之间有间隙，所以我们将创建一个三列表，在两个外列之间有一个空单元格。有几种方法可以创建这种基本的电子邮件模板布局，但对于我们的目的来说，这是最可靠的方法。

尽管我很喜欢坚持百分比，但当你有特定大小的内容时，将其转换为百分比可能很困难（在本例中，列为48.1%，这可能会变得令人困惑）。由于这个原因，由于我们的两个图像是260px宽，我们将创建260px宽度的列，中间有一个20px的边距单元格。（总共540px，这是我们表格的600px宽度减去两边30px的填充。）请确保将您的字体大小和线路高度并添加非中断空格字符&nbsp；在中间的牢房里。

我们还将设置垂直对齐到顶部这样，即使一列的文本多于另一列，它们也会垂直对齐到顶部。默认的垂直对齐方式为中间的.

用此表替换“第2行”：

1	<表格角色=“演示文稿” 风格=“宽度：100%；边界塌陷：塌陷；边界：0；边界间距：0；”>
2	<tr>
三	<td 风格=“宽度：260px；填充：0；垂直对齐：顶部；”>
4	第1列
5	</td>
6	<td 风格=“宽度：20px；填充：0；字体大小：0；线条高度：0；”>&nbsp；</td>
7	<td 风格=“宽度：260px；填充：0；垂直对齐：顶部；”>
8	第2列
9	</td>
10	</tr>
11	</表格>

现在，让我们将图像和内容添加到这些列中。保证金在以下方面得到了很好的支持<p>标记所有电子邮件客户端，因此我们将在<p>标记并使用调整它们之间的间距边缘稍后当我们添加所有文本样式时。

让我们将内容添加到第1列和第2列，使整个表如下所示：

1	<表格角色=“演示文稿” 风格=“宽度：100%；边界塌陷：塌陷；边界：0；边界间距：0；”>
2	<tr>
三	<td 风格=“宽度：260px；填充：0；垂直对齐：顶部；”>
4	<p><图像型钢混凝土=“images/left.gif” alt（高度）="" 宽度="260" 风格=“高度：自动；显示：块；” /></p>
5	<p>Lorem ipsum悲哀坐在amet，奉献敬爱的精英。在天马崇拜的猫科动物中，坐在一个安静的地方。Morbi porttitor，eget accumsan dictum，est nisi libero ultricies ipsum，位于erat的posuere mauris neque。</p>
6	<p><a href公司="http://www.example.com">Blandit ipsum volumepat sed公司</a></p>
7	</td>
8	<td 风格=“宽度：20px；填充：0；字体大小：0；线条高度：0；”>&nbsp；</td>
9	<td 风格=“宽度：260px；填充：0；垂直对齐：顶部；”>
10	<p><图像型钢混凝土=“images/right.gif” alt（高度）="" 宽度="260" 风格=“高度：自动；显示：块；” /></p>
11	<p>Morbi porttitor，eget est accumsan dictum，nisi libero ultricies ipsum，位于erat的posuere mauris neque。Lorem ipsum悲哀坐在amet，奉献敬爱的精英。在天马崇拜的猫科动物中，坐在一个安静的地方。</p>
12	<p><a href公司="http://www.example.com">在tempus felis blandit中</a></p>
13	</td>
14	</tr>
15	</表格>

这里我们使用HTML设置了图像的宽度宽度属性，就像我们插入标题图像时那样。

现在，我们将在正在创建的HTML邮件程序的页脚行中添加填充。

1	<tr>
2	<td 风格=“填充：30px；背景：#ee4c50；”>
三	第3行
4	</td>
5	</tr>

在该单元格内，我们将用另一个表替换“第3行”文本，以获得两列，每列宽50%，左侧设置为align=“左”并有权align=“右”这样，每个邮件中的内容都将固定在这些方面，并为我们提供一个平衡的电子邮件设计。

1	<表格角色=“演示文稿” 风格=“宽度：100%；边界塌陷：塌陷；边界：0；边界间距：0；”>
2	<tr>
三	<td 风格=“填充：0；宽度：50%；” 对齐=“左”>
4	左侧列
5	</td>
6	<td 风格=“填充：0；宽度：50%；” 对齐=“正确”>
7	右侧列
8	</td>
9	</tr>
10	</表格>

将“左栏”替换为一段文字：

1	<p>&注册；某人，某处2021<br/><a href公司="http://www.example.com">退订</a></p>

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

您会注意到，我们没有指定表格宽度，因此表格的宽度将由其中的单元格决定。它们的宽度为38像素（图标的宽度），左边加上10像素的填充。

1	<表格角色=“演示文稿” 风格=“border-collapse:折叠；边框：0；边框间距：0；”>
2	<tr>
三	<td 风格=“填充：0 0 0 10px；宽度：38px；”>
4	<a href公司="http://www.twitter.com（推特）/"><图像型钢混凝土=“图像/tw.png” alt（高度）=“推特” 宽度="38" 风格=“高度：自动；显示：块；边框：0；” /></a>
5	</td>
6	<td 风格=“填充：0 0 0 10px；宽度：38px；”>
7	<a href公司="http://www.facebook.com/"><图像型钢混凝土=“图像/fb.png” alt（高度）=“脸书” 宽度="38" 风格=“高度：自动；显示：块；边框：0；” /></a>
8	</td>
9	</tr>
10	</表格>

现在我们有了它；我们的HTML电子邮件模板布局已完成！

6.在简单HTML电子邮件模板中设置文本样式

在HTML电子邮件模板中设置文本样式是非常重要的一步。首先，让我们看看我们的小时1和介绍性文本。

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

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

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

1	<td 风格=“填充：0 0 36px 0；颜色：#153643；”>
2	<h1 风格=“font-size:24px；margin:0 0 20px 0；font-family:宋体，sans-serif；”>创造电子邮件魔力</h1>
三	<p 风格=边距：0 0 12px 0；字体大小：16px；线条高度：24px；字体系列：Arial，sans-serif>Lorem ipsum悲哀坐在amet，奉献敬爱的精英。在天马崇拜的猫科动物中，坐在一个安静的地方。Morbi porttitor、eget accumsan et dictum、nisi liberto ultricies ipsum、posuere neque at erat。</p>
4	<p 风格=“边距：0；字体大小：16px；线条高度：24px；字体系列：Arial，sans-serif；”><a href公司="http://www.example.com" 风格=“颜色：#ee4c50；文本分隔：下划线；”>在tempus felis blandit中</a></p>
5	</td>

您会注意到，我们还将前家族在每个人身上小时1和第页元素，您可能想知道为什么我们不能只在body或table标记上设置这个。这是因为，如果您不在每个段落或标题元素上内联设置字体，一些webmail客户端将覆盖您的字体。对于这个问题还有其他考虑因素和方法，但为了简单起见，并确保我们的HTML电子邮件设计在这个阶段可以完美地呈现在任何地方，我们将在每个元素上内联设置它。

现在，向下移动到我们的两列区域，添加颜色每个260px宽的单元格都是这样的：

1	<td（时域）风格=“宽度：260px；填充：0；垂直对齐：顶部；颜色：#153643；”>

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

1	<表格角色=“演示文稿” 风格=“宽度：100%；边界塌陷：塌陷；边界：0；边界间距：0；”>
2	<tr>
三	<td 风格=“宽度：260px；填充：0；垂直对齐：顶部；颜色：#153643；”>
4	<p 风格=“边距：0 0 25px 0；字体大小：16px；行高：24px；字体系列：Arial，sans-serif；”><图像型钢混凝土=“images/left.gif” alt（高度）="" 宽度="260" 风格=“高度：自动；显示：块；” /></p>
5	<p 风格=边距：0 0 12px 0；字体大小：16px；线条高度：24px；字体系列：Arial，sans-serif>Lorem ipsum悲哀坐在amet，奉献敬爱的精英。在天马崇拜的猫科动物中，坐在一个安静的地方。Morbi porttitor，eget accumsan dictum，est nisi libero ultricies ipsum，在erat的posuere mauris neque。</p>
6	<p 风格=“边距：0；字体大小：16px；线条高度：24px；字体系列：Arial，sans-serif；”><a href公司="http://www.example.com" 风格=“颜色：#ee4c50；文本分隔：下划线；”>Blandit ipsum volumepat sed公司</a></p>
7	</td>
8	<td 风格=“宽度：20px；填充：0；字体大小：0；线条高度：0；”>&nbsp；</td>
9	<td 风格=“宽度：260px；填充：0；垂直对齐：顶部；颜色：#153643；”>
10	<p 风格=边距：0 0 25px 0；字体大小：16px；线条高度：24px；字体系列：Arial，sans-serif><图像型钢混凝土=“images/right.gif” alt（高度）="" 宽度="260" 风格=“高度：自动；显示：块；” /></p>
11	<p 风格=边距：0 0 12px 0；字体大小：16px；线条高度：24px；字体系列：Arial，sans-serif>Morbi porttitor，eget est accumsan dictum，nisi libero ultricies ipsum，位于erat的posuere mauris neque。Lorem ipsum悲哀坐在amet，奉献敬爱的精英。在天马崇拜的猫科动物中，坐在一个安静的地方。</p>
12	<p 风格=“边距：0；字体大小：16px；线条高度：24px；字体系列：Arial，sans-serif；”><a href公司="http://www.example.com" 风格=“颜色：#ee4c50；文本分隔：下划线；”>在tempus felis blandit中</a></p>
13	</td>
14	</tr>
15	</表格>

最后，我们将设置页脚的样式。首先，我们将在带有30px填充的红色页脚单元格内的主页脚表中添加一些字体样式，以便它现在显示：

<td 风格=“填充：30px；背景：#ee4c50；”>

    <表格 角色=“演示文稿” 风格=宽度：100%；边框塌陷：塌陷；边框：0；边框间距：0；字体大小：9px；字体系列：Arial，sans-serif>

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

<p 风格=“边距：0；字体大小：14px；线条高度：16px；字体系列：宋体，无衬线；颜色：#ffffff；”>

	&注册；某人，某处2021<br/><a href公司="http://www.example.com" 风格=“颜色：#ffffff；文本分隔：下划线；”>退订</a>

三

</p>

在我们的社交媒体图标上，我们会将每个链接设置为白色，这样，如果图片没有加载，任何其他文本都会显示在红色背景上。调整每个链接，使其在电子邮件模板的HTML代码中看起来像这样：

1	<a href=“http://www.twitter.com（推特）/“style=”颜色：#ffffff；">

和

1	<a href=“http://www.facebook.com/“style=”颜色：#ffffff；">

就在这里！一切都在里面。

7.运行一些测试以确保简单的电子邮件模板有效

在这一点上，通过电子邮件测试服务运行HTML代码是一个好主意，比如石蕊，或关于Acid的电子邮件。在所有表格和单元格上留下边框有助于查看每个电子邮件客户端中发生的情况。（根据您测试电子邮件的方式，您可能需要首先远程托管图像，并将每个图像的完整远程URL插入到代码中。请参阅测试服务的网站以了解如何测试HTML邮件程序。）

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