HTML 和 CSS：电子邮件编码概念
Posted: Thu Jan 16, 2025 3:52 am
如果您从未接触过编码，那么进入编码世界似乎是一件令人望而生畏的事情。尤其是电子邮件编码，它有自己的一套规则。如果您是编码新手，在直接进入电子邮件的 HTML 和 CSS 之前，请考虑以下几点。
我需要对我的电子邮件进行编码吗？
如果您没有编码经验，从头开始编写电子邮件可能不适合您，而且这当然不是必需的。VerticalResponse 提供多种适合移动设备的模板，并提供 易于使用的编辑器 ，以便您可以使用自己的内容自定义我们现成的模板。
如果您确实有使用或学习 HTML 的经验和一定程度的适应性，那么编写自定义电子邮件模板可能是一个不错的选择。与编写网页一样，您仍需要考虑浏览器和设备行为。此外，还要考虑 Gmail、Yahoo、Outlook 等数十个电子邮件客户端的独特样式默认值。如果您习惯使用 HTML 编写网页并应用外部 CSS 样式表，则需要习惯在内部和内联中使用 CSS，以便您的样式不会被这些电子邮件客户端默认值覆盖。
需要了解的词汇
如果您对编码完全陌生，那么您需要了解有关 HTML 和 CSS 的知识：
HTML 是一种用于构建和描述内容的语言。HTML 代表超文本标记语言。当您使用 HTML 编码时，您会使用标签来标记内容，这些标签会告诉网络浏览器如何在网页上显示图像和文字等信息。
CSS 是一种影响内容呈现的语言。使用 CSS，您可以为 HTML 元素分配样式。CSS 代表层叠样式表。层叠一词很重要，因为样式声明或规则将按照出现的顺序执行。如果您对同一元素进行两次声明，则后者将被执行，因为它会覆盖之前的声明。
以下是将 CSS 与 HTML 绑定的方法：
外部 CSS： 使用 HTML 文件中引用的外部样式表（通常名为 style.css 的文件）。这对网站非常有用，因为如果您有 100 个跨 100 个页面的通用元素，则可以使用单个 CSS 声明一次性更改它们。
内部 CSS，又称嵌入式 CSS： 将 CSS 代码包含在 HTML 文件顶部的 <style> 标签内。在编写电子邮件时，这种方法非常适合分配适用于常见元素的通用样式。但是，电子邮件并不总是支持这种方法。
内联 CSS： 将 CSS 代码直接附加到 HTML 代码中的单个 HTML 元素。在电子邮件编码中，此方法可确保某些样式不会被浏览器和电子邮件客户端默认设置覆盖。
如果您习惯于在外部或内部设置 CSS，则可以通过这种方式构建它，然后使用 内联工具（例如 PutsMail 提供的内联工具） 将您的样式转换为内联 CSS。
HTML 和 CSS 之间的关系
为了更好地了解 HTML 和 CSS 之间的关系以及如何将 CSS 从 HTML 中分离出来以释放 HTML 的呈现能力，请访问奇妙而著名的网站 CSS Zen Garden，在那里您可以查看由著名设计师编写的具有截然不同的 CSS 的相同 HTML 标记。
接近电子邮件编码
从头编写电子邮件时，请尽量保持简单。使用纯文本编辑器，例 哥斯达黎加 WhatsApp 如 TextWrangler、Notepad 或 Sublime，远离 Dreamweaver 等可视化编辑器，因为它们可能会在您的代码中添加不必要的内容。
对于布局，请尝试采用移动优先的方法。这意味着要为小屏幕进行设计，然后逐步完善。随着移动浏览的不断增加，确保您的电子邮件在手机和平板电脑上看起来不错比以往任何时候都更加重要；没有理由创建仅在桌面上看起来不错的复杂设计。保持您的信息和设计足够简单以适应最小的设备也将更容易编码，它将可供所有设备的用户访问，并将您的读者的注意力集中在主要的行动号召上。
布局和编码完成后，请务必使用 Litmus 或 VerticalResponse 的 HTML 编辑器收件箱预览等工具 来预览电子邮件在各种浏览器和电子邮件客户端上的显示效果，以便您在发送之前排除任何问题。
从哪里开始学习
网上有许多教程，您可以亲自学习如何详细编写电子邮件代码。深入研究电子邮件代码的一个好方法是找到一个您喜欢的简单模板，然后花一些时间检查代码。首先熟悉 <body>、<head> 和 <div> 等主要标签，然后注意标签有时如何进一步定义为 ID 或类，例如 <div class=”half-column”>。请注意，优质 HTML 模板中的命名将清晰且合乎逻辑，因此当它出现在 CSS 中时更容易分辨出发生了什么。
如果您已准备好接受循序渐进的课程，请查找最近的教程（去年内）。编码方法不断被重新考虑。例如，在过去几年中越来越流行的一种移动友好方法是流动/混合方法。Envato Tuts+ 的这个 流动/混合教程 非常适合那些已经对 HTML 有所了解的人。对于初学者， Lynda.com 提供许多针对电子邮件的编码课程。好的课程将引导您完成编码练习，并提供可下载的示例项目文件，您可以将其用作参考。
我需要对我的电子邮件进行编码吗？
如果您没有编码经验，从头开始编写电子邮件可能不适合您，而且这当然不是必需的。VerticalResponse 提供多种适合移动设备的模板，并提供 易于使用的编辑器 ，以便您可以使用自己的内容自定义我们现成的模板。
如果您确实有使用或学习 HTML 的经验和一定程度的适应性，那么编写自定义电子邮件模板可能是一个不错的选择。与编写网页一样，您仍需要考虑浏览器和设备行为。此外，还要考虑 Gmail、Yahoo、Outlook 等数十个电子邮件客户端的独特样式默认值。如果您习惯使用 HTML 编写网页并应用外部 CSS 样式表，则需要习惯在内部和内联中使用 CSS，以便您的样式不会被这些电子邮件客户端默认值覆盖。
需要了解的词汇
如果您对编码完全陌生，那么您需要了解有关 HTML 和 CSS 的知识：
HTML 是一种用于构建和描述内容的语言。HTML 代表超文本标记语言。当您使用 HTML 编码时，您会使用标签来标记内容，这些标签会告诉网络浏览器如何在网页上显示图像和文字等信息。
CSS 是一种影响内容呈现的语言。使用 CSS，您可以为 HTML 元素分配样式。CSS 代表层叠样式表。层叠一词很重要，因为样式声明或规则将按照出现的顺序执行。如果您对同一元素进行两次声明，则后者将被执行，因为它会覆盖之前的声明。
以下是将 CSS 与 HTML 绑定的方法：
外部 CSS： 使用 HTML 文件中引用的外部样式表（通常名为 style.css 的文件）。这对网站非常有用，因为如果您有 100 个跨 100 个页面的通用元素，则可以使用单个 CSS 声明一次性更改它们。
内部 CSS，又称嵌入式 CSS： 将 CSS 代码包含在 HTML 文件顶部的 <style> 标签内。在编写电子邮件时，这种方法非常适合分配适用于常见元素的通用样式。但是，电子邮件并不总是支持这种方法。
内联 CSS： 将 CSS 代码直接附加到 HTML 代码中的单个 HTML 元素。在电子邮件编码中，此方法可确保某些样式不会被浏览器和电子邮件客户端默认设置覆盖。
如果您习惯于在外部或内部设置 CSS，则可以通过这种方式构建它，然后使用 内联工具（例如 PutsMail 提供的内联工具） 将您的样式转换为内联 CSS。
HTML 和 CSS 之间的关系
为了更好地了解 HTML 和 CSS 之间的关系以及如何将 CSS 从 HTML 中分离出来以释放 HTML 的呈现能力，请访问奇妙而著名的网站 CSS Zen Garden，在那里您可以查看由著名设计师编写的具有截然不同的 CSS 的相同 HTML 标记。
接近电子邮件编码
从头编写电子邮件时，请尽量保持简单。使用纯文本编辑器，例 哥斯达黎加 WhatsApp 如 TextWrangler、Notepad 或 Sublime，远离 Dreamweaver 等可视化编辑器，因为它们可能会在您的代码中添加不必要的内容。
对于布局，请尝试采用移动优先的方法。这意味着要为小屏幕进行设计，然后逐步完善。随着移动浏览的不断增加，确保您的电子邮件在手机和平板电脑上看起来不错比以往任何时候都更加重要；没有理由创建仅在桌面上看起来不错的复杂设计。保持您的信息和设计足够简单以适应最小的设备也将更容易编码，它将可供所有设备的用户访问，并将您的读者的注意力集中在主要的行动号召上。
布局和编码完成后，请务必使用 Litmus 或 VerticalResponse 的 HTML 编辑器收件箱预览等工具 来预览电子邮件在各种浏览器和电子邮件客户端上的显示效果，以便您在发送之前排除任何问题。
从哪里开始学习
网上有许多教程，您可以亲自学习如何详细编写电子邮件代码。深入研究电子邮件代码的一个好方法是找到一个您喜欢的简单模板，然后花一些时间检查代码。首先熟悉 <body>、<head> 和 <div> 等主要标签，然后注意标签有时如何进一步定义为 ID 或类，例如 <div class=”half-column”>。请注意，优质 HTML 模板中的命名将清晰且合乎逻辑，因此当它出现在 CSS 中时更容易分辨出发生了什么。
如果您已准备好接受循序渐进的课程，请查找最近的教程（去年内）。编码方法不断被重新考虑。例如，在过去几年中越来越流行的一种移动友好方法是流动/混合方法。Envato Tuts+ 的这个 流动/混合教程 非常适合那些已经对 HTML 有所了解的人。对于初学者， Lynda.com 提供许多针对电子邮件的编码课程。好的课程将引导您完成编码练习，并提供可下载的示例项目文件，您可以将其用作参考。