创建您自己的 HTML 电子邮件的完整指南
Posted: Sun Mar 02, 2025 5:28 am
开发 HTML 电子邮件就像蝌蚪蜕变成青蛙的过程，从概念到最终交付经历了许多变化。电子邮件营销人员确定目的后，文案撰写人会根据线框起草电子邮件。然后，电子邮件设计师根据线框创建设计。设计获得批准后，电子邮件开发人员将 PSD、AI 或 PDF 文件转换为像素完美的 HTML 电子邮件。该文件上传到 ESP 并在经过全面测试后进行部署，以确保完美呈现。
由于HTML 电子邮件的创建需要多人参与，因此即使是很小的更改也需要很长时间才能解决。开发电子邮件模板通常需要 4-6 小时，而流程的复杂性也会增加时间。虽然网上有免费的HTML 电子邮件模板，但定制的电子邮件往往效果更好。
在本文中，我们将指导您如何使用简单的电子邮件模板 HTML 代码创建电子邮件模板，您可以将其用作电子邮件模板 HTML 代码的基本故障排除的参考。
HTML 基础知识：如何创建简单的 HTML 电子邮件模板？
基本的 HTML 电子邮件模板包括两部分：
标题部分：位于 <head> 和 </head> 之间的任何代码都称为标题部分。印度尼西亚手机号码列表 所有媒体查询、样式和 CSS 动画均在此部分中指定。
正文：<body> 和 </body> 之间的任何代码都是正文部分，渲染引擎使用该代码来创建 HTML 电子邮件结构。
步骤 1：如何准备 HTML <head> 模板？
简单的 HTML 电子邮件模板的头部部分如下所示。
邮件标题写在<title>标签之间，当订阅者点击“在线查看”时，邮件标题就会显示在浏览器标签页上。
响应式电子邮件设计
第 2 步：如何设计你的电子邮件 HTML 样式？
您计划在电子邮件中实现的任何样式，例如文本格式、图像大小和媒体查询，都应作为不同的类放置在 <style> 标记之间。添加 <style> 标记的基本格式是 <style type=”text/css”>，其中“text/css”指定媒体类型为 CSS。放置 <style> 标记可能很棘手，因为 36 个电子邮件客户端中有 6 个不支持 <head> 中的 <style> 标记，而 Gmail 不支持在电子邮件正文中使用它们。
文本格式
如果您需要为任何文本添加集中格式化条件，您可以在基本 HTML 电子邮件模板的特定类中指定属性。
例如，您可以通过以下方式禁用文本装饰。
复制代码
.em_defaultlink a {
color: inherit !important;
text–decoration: none !important;
}
媒体查询
如果您正在编写响应式电子邮件模板，则需要按照以下格式添加媒体查询。
复制代码
@media only screen and (min–width: ___px) and (max–width: ___px)
{
.(class_name)
{
(attributes to be implemented)
}
}
例如，考虑电子邮件 HTML 代码中的以下媒体查询：
复制代码
@media only screen and (min–width:481px) and (max–width:699px) {
.em_main_table {
width: 100% !important;
}
.em_wrapper {
width: 100% !important;
}
.em_hide {
display: none !important;
}
.em_img {
width: 100% !important;
height: auto !important;
}
.em_h20 {
height: 20px !important;
}
.em_padd {
padding: 20px 10px !important;
}
}
当在屏幕宽度介于 481 到 699px 之间的设备上查看 HTML 电子邮件设计时：
由于“width: 100% !important;”属性，电子邮件（em_main_table）的宽度设置为 100%。
由于“display: none !important;”属性，带有 em.hide 类的部分被隐藏。
由于“height: 20px !important;”属性，带有 em.h20 类的部分具有固定高度 20px。
具有 em_padd 类的元素在水平方向上具有固定的 20px 填充，在垂直方向上具有固定的 10px 填充。
PS：！important 强制渲染引擎不对媒体查询进行任何更改。
电子邮件的交互性
如果您想发送具有交互功能的 HTML 电子邮件，请确保在关闭 <head> 部分之前添加 CSS 代码。
编写 HTML 电子邮件中的交互性代码是一项挑战，需要进行大量测试才能确保在电子邮件客户端上完美呈现。虽然您可以在网上找到 HTML 代码示例，但构建交互式电子邮件仍然需要大量的编码专业知识。有关更多信息，请查看我们的交互式电子邮件设计元素信息图。
由于HTML 电子邮件的创建需要多人参与，因此即使是很小的更改也需要很长时间才能解决。开发电子邮件模板通常需要 4-6 小时，而流程的复杂性也会增加时间。虽然网上有免费的HTML 电子邮件模板，但定制的电子邮件往往效果更好。
在本文中，我们将指导您如何使用简单的电子邮件模板 HTML 代码创建电子邮件模板，您可以将其用作电子邮件模板 HTML 代码的基本故障排除的参考。
HTML 基础知识：如何创建简单的 HTML 电子邮件模板？
基本的 HTML 电子邮件模板包括两部分：
标题部分：位于 <head> 和 </head> 之间的任何代码都称为标题部分。印度尼西亚手机号码列表 所有媒体查询、样式和 CSS 动画均在此部分中指定。
正文：<body> 和 </body> 之间的任何代码都是正文部分，渲染引擎使用该代码来创建 HTML 电子邮件结构。
步骤 1：如何准备 HTML <head> 模板？
简单的 HTML 电子邮件模板的头部部分如下所示。
邮件标题写在<title>标签之间，当订阅者点击“在线查看”时，邮件标题就会显示在浏览器标签页上。
响应式电子邮件设计
第 2 步：如何设计你的电子邮件 HTML 样式？
您计划在电子邮件中实现的任何样式，例如文本格式、图像大小和媒体查询，都应作为不同的类放置在 <style> 标记之间。添加 <style> 标记的基本格式是 <style type=”text/css”>，其中“text/css”指定媒体类型为 CSS。放置 <style> 标记可能很棘手，因为 36 个电子邮件客户端中有 6 个不支持 <head> 中的 <style> 标记，而 Gmail 不支持在电子邮件正文中使用它们。
文本格式
如果您需要为任何文本添加集中格式化条件，您可以在基本 HTML 电子邮件模板的特定类中指定属性。
例如，您可以通过以下方式禁用文本装饰。
复制代码
.em_defaultlink a {
color: inherit !important;
text–decoration: none !important;
}
媒体查询
如果您正在编写响应式电子邮件模板，则需要按照以下格式添加媒体查询。
复制代码
@media only screen and (min–width: ___px) and (max–width: ___px)
{
.(class_name)
{
(attributes to be implemented)
}
}
例如，考虑电子邮件 HTML 代码中的以下媒体查询：
复制代码
@media only screen and (min–width:481px) and (max–width:699px) {
.em_main_table {
width: 100% !important;
}
.em_wrapper {
width: 100% !important;
}
.em_hide {
display: none !important;
}
.em_img {
width: 100% !important;
height: auto !important;
}
.em_h20 {
height: 20px !important;
}
.em_padd {
padding: 20px 10px !important;
}
}
当在屏幕宽度介于 481 到 699px 之间的设备上查看 HTML 电子邮件设计时：
由于“width: 100% !important;”属性，电子邮件（em_main_table）的宽度设置为 100%。
由于“display: none !important;”属性，带有 em.hide 类的部分被隐藏。
由于“height: 20px !important;”属性，带有 em.h20 类的部分具有固定高度 20px。
具有 em_padd 类的元素在水平方向上具有固定的 20px 填充，在垂直方向上具有固定的 10px 填充。
PS：！important 强制渲染引擎不对媒体查询进行任何更改。
电子邮件的交互性
如果您想发送具有交互功能的 HTML 电子邮件，请确保在关闭 <head> 部分之前添加 CSS 代码。
编写 HTML 电子邮件中的交互性代码是一项挑战，需要进行大量测试才能确保在电子邮件客户端上完美呈现。虽然您可以在网上找到 HTML 代码示例，但构建交互式电子邮件仍然需要大量的编码专业知识。有关更多信息，请查看我们的交互式电子邮件设计元素信息图。