HTML & CSS：电子邮件编码概念

已发表: 2017-08-10

如果您以前从未这样做过，那么进入编码世界似乎会让人望而生畏。 尤其是电子邮件编码，有自己的一套规则。 如果您是编码新手，那么在直接研究 HTML 和 CSS 用于电子邮件之前，需要考虑以下事项。

我需要对我的电子邮件进行编码吗？

如果您没有编码经验，从头开始编码电子邮件可能不是您的实际解决方案，当然也不是必需的。 VerticalResponse 提供多种适合移动设备的模板，并提供易于使用的编辑器，因此您可以使用自己的内容自定义我们的现成模板。

如果您确实有使用或学习 HTML 的经验和一定程度的舒适度，那么编写自定义电子邮件模板可能是一个不错的选择。 与网页编码一样，您仍然需要考虑浏览器和设备行为。 此外，请考虑 Gmail、Yahoo、Outlook 等数十个电子邮件客户端的独特样式默认设置。 如果您习惯于用 HTML 编写网页并应用外部 CSS 样式表，则需要习惯于在内部和内联方式使用 CSS，这样您的样式就不会被这些电子邮件客户端默认设置覆盖。

要知道的词汇

如果您完全是编码新手，以下是您需要了解的有关 HTML 和 CSS 的知识：

HTML是一种用于构建和描述内容的语言。 HTML 代表超文本标记语言。 当您在 HTML 中编码时，您正在使用标签标记您的内容，这些标签告诉 Web 浏览器如何在网页上显示图像和文字等信息。

CSS是一种影响内容呈现的语言。 使用 CSS，您可以为 HTML 元素分配样式。 CSS 代表层叠样式表。 级联这个词很重要，因为样式声明或规则将按照出现的顺序得到尊重。 如果您对同一个元素进行两次声明，则后者将受到尊重，因为它会覆盖之前的内容。

以下是将 CSS 绑定到 HTML 的方法：

外部 CSS：使用在 HTML 文件中引用的外部样式表（通常名为 style.css 的文件）。 这对网站来说非常有用，因为如果您有 100 个通用元素跨越 100 个页面，您可以使用单个 CSS 声明一次更改它们。

内部 CSS，又名嵌入式 CSS：在 HTML 文件顶部的 <style> 标记中包含 CSS 代码。 在对电子邮件进行编码时，这对于分配适用于常见元素的一般样式非常有用。 但是，电子邮件并不总是支持这种方法。

内联 CSS：将 CSS 代码附加到 HTML 代码中的单个 HTML 元素。 在电子邮件编码中，此方法可确保某些样式不会被浏览器和电子邮件客户端默认设置覆盖。

如果您习惯于在外部或内部设置您的 CSS，您可以通过这种方式构建它，然后使用像 PutsMail 这样的内联工具将您的样式转换为内联 CSS。

HTML与CSS的关系

为了更好地了解 HTML 和 CSS 之间的关系，以及将 CSS 与 HTML 分离如何可以释放 HTML 的呈现方式，请访问出色而著名的网站 CSS Zen Garden，在那里您可以查看具有截然不同的 CSS 的相同 HTML 标记，由著名设计师编码。

接近电子邮件编码

从头开始编写电子邮件时，请使其尽可能简单。 使用纯文本编辑器，例如 TextWrangler、Notepad 或 Sublime，并远离 Dreamweaver 等可视化编辑器，因为它们会在您的代码中添加不必要的项目。

对于布局，请尝试采用移动优先的方法。 这意味着针对小屏幕进行设计并逐步提升。 随着手机浏览量的不断增加，确保您的电子邮件在手机和平​​板电脑上看起来不错比以往任何时候都更加重要； 没有理由创建仅在桌面上看起来不错的复杂设计。 为最小的设备保持足够简单的信息和设计也将更容易编码，所有设备的用户都可以访问它，它将使读者的注意力集中在主要的行动号召上。

一旦您的布局和编码完成，请务必使用 Litmus 或 VerticalResponse 的 HTML 编辑器的收件箱预览等工具来预览您的电子邮件在各种浏览器和电子邮件客户端中的外观，以便您可以在点击发送之前解决任何问题。

从哪里开始学习

有许多在线教程，您可以在其中学习动手操作，详细介绍如何编写电子邮件。 深入研究电子邮件编码的一种好方法是找到一个您喜欢的简单模板并花一些时间检查代码。 首先熟悉 <body>、<head> 和 <div> 等主要标签，然后注意标签有时如何进一步定义为 ID 或类，例如 <div class=”half-column”>。 请注意，优质 HTML 模板中的命名将清晰且合乎逻辑，因此当它出现在 CSS 中时更容易判断发生了什么。

如果您已准备好逐步学习，请查找最近的教程（在过去一年内）。 编码方法不断被重新考虑。 例如，在过去几年中流行的移动友好方法是流体/混合方法。 这个来自 Envato Tuts+ 的流体/混合教程非常适合那些已经对 HTML 有所了解的人。 对于初学者，Lynda.com 提供了许多特定于电子邮件的编码课程。 一门好的课程将引导您完成编码练习并提供可下载的示例项目文件，您可以将其用作参考。

花更少的时间接触更多的客户

右蓝箭头 立即尝试垂直响应

（免费！）

编者注：这篇博文最初发表于 2016 年 3 月，经过修改和更新，以确保准确性和相关性。