最好的理解方式就是从零开始，自己动手。今天，我们所要做的就是设计一封电子邮件，并从头开始构建一个HTML电子邮件模板。
根据该方法，制作了一个公司的html邮件模板，亲测效果很好，很稳定。0 0!
做一些事情
首先，值得一提的是我使用的一些资源。
可爱的2D图标是由Dribbble上的Pierre Borodin提供 使用的字体是Oil Can、Source Sans Pro和Mission Script提供 社交媒体图标来自于Metrize Icons。正如我们在前面的教程中所讨论的，HTML邮件需要XHTML文档类型:
Demystifying Email Design接下来，我们可以开始建造结构的其余部分。
创建正文和正文表
首先，我们将为我们的电子邮件添加一个整体结构，从标签开始。我们将标记的边距和填充设置为0，以避免意外的空。
我们还将添加一个宽度为100%的表格。这是我们电子邮件的真正主体，因为标签并不被完全支持。如果你想给你的邮件正文添加背景色，你需要把它应用到大表格标签而不是正文标签。
将单元格边距和单元格间距设置为0，以避免不必要的空空格。
注意:我们为表格设置了border="1 ",这样我们就可以看到框架的布局。最后，我们将使用查找和替换来删除它们。
如果属性存在于HTML中，它可以用来替换CSS的样式。
现在，在表格容器中放置一个宽度为600px的表格，并使其居中。600px是一个安全的最大宽度，在大多数屏幕分辨率下，在桌面和网络邮件客户端显示您的邮件是最舒适的。
使用width的属性而不是CSS来设置此宽度。HTML邮件开发的黄金法则是:如果HTML中存在一个属性，绝对使用tag属性而不是CSS样式。
我们将用这种形式代替我们的标题“你好！”：
你可能会有点头晕。用上面的表格代替标题“你好！”在第一个表中。？？广阔的沙漠
整体代码如下:
创建结构和标题
在我们的设计中，我们可以看到电子邮件被分为三个逻辑部分，所以为每个部分创建一行。
让我们复制这些行，这样总行数就是三行。我已经更改了行中的文本内容，以便我们可以更容易地识别每一行。
现在根据设计给它们上色。Bgcolor是有效的HTML属性。我们使用这个属性来设置背景色，而不是CSS的背景色属性。永远记住使用六个完整的十六进制代码。如果使用三个短字符，并不总是有效。
好了，接下来把重点放在第一行。我们调整单元格的填充，然后插入我们需要的图像。
使用内部填充
在电子邮件中使用填充时，必须始终指定每个值(上、右、下和左)，否则可能会得到不可预知的结果。我发现还是可以用缩写的，比如:padding:10px 10px 8px 5px，但是如果遇到麻烦，就需要单独写出来，比如:padding-top:10px；右填充:10px填充-底部:8px左填充:5px。
如果你在使用填充时遇到更多麻烦(例如，如果你发送邮件的平台已经删除了所有CSS样式)，就不要使用填充。只需使用空的单元格创建空的间距。单元格中不需要使用空的gif文件，只要确保添加inline style style = " line-height:0；Font-size:0 "，并填充一个单元格，为其设置一个净高度或净宽度。这里有一个例子:
因此，我们将使用一些内联CSS来为单元格添加填充。然后，我们将插入我们的图片，添加alt属性文本和style = " display:block；"，这是一些邮件客户端图片下常用来修复空空白的。我们通过将align="center "添加到td标签来使图像居中。我们还将添加一个重要的alt标签，因为在我们的电子邮件加载后，大多数情况下，图片是关闭的。
注:如果你脑袋里的内容很重要，不要只用脑袋里的一个图像。请记住，大多数电子邮件客户端关闭图像，所以如果你的电子邮件很重要，不要加载图像。在这个例子中，我们的头是非常多余的。
创建内容区域
首先，我们将在中间的单元格中添加一些填充。根据我们的设计，桌子周围有一些空的空间。
现在我们在主要内容上加一个三线表？？一行是标题，一行是内容介绍，一行包含两列。我们将表格的宽度设计为100%，而不是使用固定的像素值。因为这有助于我们实现回复邮件。如果你总是为所有东西的宽度设置特定的像素，你需要在媒体查询中包含更多的样式。如果嵌套表格的宽度是基于百分比的，那么当您调整父元素的宽度时，所有内容都会相应地调整。
现在，我们将添加内容，并添加一些填充到中间的单元格。
现在，我们将向第三行添加两列。因为我们要在两个单元格之间设置边距，但是我们都知道表格不支持边距，所以我们需要创建一个三列表格，在两列之间放一个空的单元格。
虽然我非常喜欢坚持百分比，但是当你有一定大小的内容时，很难将其转换为百分比(在这个例子中，将列设置为48.1%可能会造成混乱)。出于这个原因，我们有两个宽度为260px的图像，我们将创建一个宽度为260px的列，并在两列之间创建一个宽度为20px的空单元格。总共是540px，因为我们的总宽度是600px，减去两边填充的30px内部空间。确保在间隔单元格中将字体(字体大小)和行高设置为0，并插入空白色字符。
我们还将向这两个单元格添加valid = "top ",以便内容在顶部垂直对齐。单元格垂直方向的默认值是中间。
| 第二栏 |
现在向这些列添加图像和内容。我们需要嵌套一个多行表，因为我们不能使用任何colspan或rowspan标记。我们将在图像和内容之间添加一些内部空间，并将它们复制到另一列。
|
|
脚
现在让我们给脚的线条添加一个内边距。
在这个单元格中，我们将嵌套一个两列表格。
| 第二栏 |
接下来，为社交媒体图标创建另一个小表格。设置他的父元素cell align="right "。确保这些链接的图片设置了border="0 "(以避免链接的蓝色边框)，并且不要忘记给图片添加display:block；。
 |  |
现在让我们添加文本并设置单元格的宽度。虽然他们以前有很多空白色，但是为了安全起见，设置一个单元格宽度为75%，其他单元格宽度为25%。
立即取消订阅此时事通讯
至此，我们的整块布就完成了。
确认
我们通过W3C validator进行验证，以确保我们的代码没有问题。如果你的代码没有问题，它会说你通过了验证。
接下来，我们将通过Litmus进行测试，以确保我们的电子邮件可以正常工作。以下是我测试的总结:
文本样式
我们的第一行是一个标题，我们将使用标签来创建粗体文本，因为众所周知，HTML属性可以解决的样式永远不会使用CSS样式。
我还将向其他单元格添加内联样式来美化文本:
style="color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;"接下来，我们需要样式页脚文本，我们也将整理我们的退订链接。我们使用CSS样式和HTML标签来装饰退订链接。最好使用这两种方法来确保你的链接永远不会以默认的蓝色出现。
立即取消订阅此时事通讯
一切都在这里了，是时候清一清边界，让他看起来更美了。通过编辑器的“查找/替换”功能，将border="1 "替换为border="0 "。
看起来像是浮在白底空上，很难看，所以我们用600px把下面的加到第一张表上:
style="border: 1px solid #cccccc;"现在看起来不漂移了。最后，我在第一个单元格底部加了一个30px的内边距，防止我们的邮件在某些邮件客户端(比如Apple Mail)突然停止，在顶部加了一个10px的内边距，让我们的页眉顶部有点空。
就是这样！你只需要做最后的测试。
综上
从今天开始，如果你使用了任何评论，请删除它们。有了评论，有些邮件客户端会让你窒息，所以最明智的做法是不要在你的文件的任何地方显示不必要的代码。
现在你可以进行最后的测试，然后，你的HTML邮件就可以发送了！
demo downloadadminjs.cn是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 Adminjs.cn还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 在Adminjs.cn中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能！
本文是由"秘密武器开发者中心"本站原创整理，所有内容的版权归原作者所有。