html编写邮件发送_如何编写HTML电子邮件通讯

html编写邮件发送

This article was first published in 2006, then updated in 2015.

本文于2006年首次发表，然后于2015年更新。

HTML email newsletters have come a long way since this article was first published back in 2006. HTML email is still a very successful communications medium for both publishers and readers. Publishers can track rates for email opens, forwards, and clickthroughs, and measure reader interest in products and topics; readers are presented with information that’s laid out like a web page, in a way that’s more visually appealing, and much easier to scan and navigate, than plain text email.

自从2006年首次发布该文章以来，HTML电子邮件新闻通讯已经走了很长一段路。HTML电子邮件对于发布者和读者来说仍然是一种非常成功的通信媒介。 发布者可以跟踪电子邮件打开，转发和点击的速率，并衡量读者对产品和主题的兴趣； 与纯文本电子邮件相比，向读者显示的信息像网页一样，在视觉上更具吸引力，并且更易于扫描和导航。

Coding an HTML email is a fun, practical problem for programmers to solve. Unlike coding a web page, HTML emails need to display well on old email software — think Outlook or Mac Mail, as well as adapt to phone and tablet screens. I’ll show you how to create HTML emails that display well on any device, plus ideas to adapt your current HTML email code to display on phones and tablets.

对HTML电子邮件进行编码是程序员解决的一个有趣而实际的问题。 与编写网页代码不同，HTML电子邮件需要在旧的电子邮件软件上很好地显示-例如Outlook或Mac Mail，并适应手机和平板电脑的屏幕。 我将向您展示如何创建可在任何设备上正常显示HTML电子邮件，以及使您当前HTML电子邮件代码适应在手机和平​​板电脑上显示的想法。

HTML电子邮件基础 (HTML Email Fundamentals)

The biggest pain when coding HTML email is that so many different software tools are available to read email, from desktop software such as Eudora, Outlook, AOL, Thunderbird, and Lotus Notes, to web-based email services such as Yahoo!, Hotmail, and Google Mail, to email apps on phones and tablets. The software used to render HTML for each email software tool determines what HTML and CSS code works and doesn’t work.

对HTML电子邮件进行编码时，最大的麻烦是，从台式机软件(例如Eudora，Outlook，AOL，Thunderbird和Lotus Notes)到基于Web的电子邮件服务(例如Yahoo！，Hotmail，和Google Mail，以便通过电子邮件发送手机和平板电脑上的应用。 用于为每个电子邮件软件工具呈现HTML的软件确定哪些HTML和CSS代码有效，哪些无效。

If you thought it was difficult to ensure the cross-browser compatibility of your web sites, be aware that this is a whole new game — each of these email software tools can display the same email in vastly different ways. And even when these tools do display an HTML email properly, accounting for variances in, for example, the widths at which readers size their windows when reading emails makes things even trickier.

如果您认为很难确保网站的跨浏览器兼容性，请注意这是一个全新的游戏-这些电子邮件软件工具中的每一个都可以以完全不同的方式显示同一封电子邮件。 即使这些工具确实能够正确显示HTML电子邮件，例如，考虑到阅读器在阅读电子邮件时调整窗口大小的宽度上的差异，也会使事情变得更加棘手。

Whether you choose to code your HTML email by hand (my personal preference) or to use an existing template, there are two fundamental concepts to keep in mind when creating HTML email:

无论您选择手动编写HTML电子邮件(我个人喜好)还是使用现有模板，创建HTML电子邮件时都需要牢记两个基本概念：

1. Use HTML tables to control the design layout and some presentation. You may be used to using pure CSS layouts for your web pages, but that approach just won’t hold up in an email environment.
   使用HTML表格控制设计布局和一些演示。 您可能习惯于在网页上使用纯CSS布局，但是这种方法只会在电子邮件环境中停滞不前。
2. Use inline CSS to control other presentation elements within your email, such as background colors and fonts.
   使用内联CSS来控制电子邮件中的其他表示元素，例如背景颜色和字体。

The quickest and easiest way to see how HTML tables and inline CSS interact within an HTML email is to download some templates from Campaign Monitor and MailChimp. When you open up one of these templates, you’ll notice a few things we’ll discuss in more detail later:

查看HTML表格与HTML电子邮件中的内联CSS交互方式的最快，最简单的方法是从Campaign Monitor和MailChimp下载一些模板。 当您打开这些模板之一时，您会注意到一些我们稍后将更详细讨论的内容：

• CSS style declarations appear below the body tag, not between the head tags.

  CSS样式声明显示在body标签下方，而不是head标签之间。

• No CSS shorthand is used: instead of using the abbreviated style rule font: 12px/16px Arial, Helvetica, you should instead break this shorthand into its individual properties: font-family, font-size, and line-height.

  没有使用CSS速记：不要使用缩写样式规则font: 12px/16px Arial, Helvetica ，而应将此速记分解成其各个属性： font-family ， font-size和line-height 。

• spans and divs are used sparingly to achieve specific effects, while HTML tables do the bulk of the layout work.

  很少使用span和div来实现特定效果，而HTML表则负责大部分布局工作。

• CSS style declarations are very basic, and do not make use of any CSS files.
  CSS样式声明是非常基本的，并且不使用任何CSS文件。

My Code HTML Email site also has actual HTML emails I’ve downloaded and formatted so you can study to see how others created email.

“我的代码HTML电子邮件”网站还提供了我已下载并格式化的实际HTML电子邮件，因此您可以研究一下其他人如何创建电子邮件。

步骤1：使用HTML表格进行布局 (Step 1: Use HTML Tables for Layout)

That’s right: tables are back, big time! Web standards may have become the norm for coding pages for display in web browsers, but this isn’t the Web, baby. A few email software clients are light years behind the eight-ball in terms of CSS support, which means we must resort to using tables for layout if we really want our newsletters to display consistently for every reader (see the reading list at the end of this article for some excellent resources on CSS support in mail clients).

没错：桌子又回来了，很开心！ Web标准可能已经成为编码页面以在Web浏览器中显示的规范，但这不是Web，宝贝。 在CSS支持方面，一些电子邮件软件客户比八球落后了很短的几年，这意味着如果我们真的希望我们的通讯对每个读者一致地显示，我们就必须使用表格进行布局(请参阅本手册末尾的阅读清单)。本文提供了一些有关邮件客户端中CSS支持的优秀资源)。

So put your standards-compliant best practices and lean markup skills aside: we’re about to get our hands dirty!

因此，撇开您符合标准的最佳做法和精益的标记技巧：我们将弄脏您的双手！

The first step in creating an HTML email is to decide what kind of layout you want to use. For newsletters, single column and two-column layouts work best, because they control the natural chaos that results when a large amount of content is pushed into such a small space as an email. Single column email designs also make it easy to display well on phones and tablets.

创建HTML电子邮件的第一步是确定要使用哪种布局。 对于时事通讯，单列和两列布局效果最好，因为它们控制了将大量内容推入电子邮件等较小空间时造成的自然混乱。 单列电子邮件设计还使其易于在手机和平​​板电脑上很好地显示。

A single-column layout typically consists of:

单列布局通常包括：

1. a header, containing a logo and some (or all) of the navigation links from the parent web site to reinforce the branding and provide familiarity for site visitors
   标题，包含徽标和来自父网站的一些(或全部)导航链接，以增强品牌形象并为站点访问者提供熟悉度
2. intra-email links to stories that appear further down in the email followed by the stories and content
   电子邮件中的链接指向出现在电子邮件中更下方的故事，后面是故事和内容
3. a footer at the bottom of the email, which often contains links that are identical to the top navigation, as well as instructions for unsubscribing
   电子邮件底部的页脚，通常包含与顶部导航相同的链接，以及退订说明

Two-column emails also use a header and footer. Like a two-column web page, they typically use a narrow, side column to house features and links to more information, while the wider column holds the body content of the email. To get a two-column email layout to display well on a phone or tablet requires some code-fu, as you’ll see later in this article.

两列电子邮件还使用页眉和页脚。 就像两栏式网页一样，它们通常使用一个狭窄的侧栏来容纳功能和指向更多信息的链接，而较宽的栏将保留电子邮件的正文内容。 要使两列电子邮件布局正确显示在手机或平板电脑上，需要进行一些代码复写，正如您将在本文后面看到的那样。

Promotional emails follow similar rules but contain much less in the way of content and links. They often include one or two messages, and sometimes make use of one big image with small explanatory text and some links below the image.

促销电子邮件遵循类似的规则，但包含的内容和链接少得多。 它们通常包含一两个消息，有时会利用一个带有小解释性文字的大图像以及该图像下方的一些链接。

All of these email layout possibilities can be created easily, using HTML tables to divide up the space into rows and columns. In fact, using HTML tables is the only way to achieve a layout that will render consistently across different mail clients.

使用HTML表将空间分成行和列，可以轻松创建所有这些电子邮件布局可能性。 实际上，使用HTML表是获得可在不同邮件客户端之间一致呈现的布局的唯一方法。

No matter how your email is designed, it’s important to remember the most important content should appear at or near the top of the email, so it is visible immediately when a reader opens your email. The top left of an email message is often the first place people look when they open an email.

无论您的电子邮件是如何设计的，记住最重要的内容都应显示在电子邮件的顶部或附近，这一点很重要，因此，当读者打开您的电子邮件时，立即可见。 电子邮件的左上方通常是人们打开电子邮件时首先看到的地方。

This is the approach that I use to create HTML emails:

这是我用来创建HTML电子邮件的方法：

• For a two-column layout, create one table each for the header, the two center content columns, and the footer — that’s three tables in all. Wrap these tables into another container table. Use the same approach for single-column layouts, but give the content table one column. This approach is especially suitable if the design of your email contains images that are broken up over multiple table cells. Otherwise, a single table with td rows for its header (with colspan="2" if the design uses two columns), content, and footer should display fine in all but Lotus Notes email software.

  对于两列布局，分别为页眉，两个中心内容列和页脚分别创建一个表，即总共三个表。 将这些表包装到另一个容器表中。 对单列布局使用相同的方法，但是将内容表分配为一列。 如果您的电子邮件设计包含在多个表格单元中分解的图像，则此方法特别适合。 否则，除了Lotus Notes电子邮件软件之外，所有表中带有td行作为标题的单个表(如果设计使用两列，则为colspan="2" )，内容和页脚应显示良好。

• Use the attributes within the table and td tags to control the table’s display. For example, setting border="0", valign="top", align="left" (or center, if that suits the design), cellpadding="0", cellspacing="0", and so on. This primarily helps older email clients to display the email in a (barely) acceptable way.

  使用表和td标记内的属性来控制表的显示。 例如，设置border="0" ， valign="top" ， align="left" (或center ，如果适合设计的话)， cellpadding="0" ， cellspacing="0"等。 这主要是帮助较老的电子邮件客户端以(几乎)可接受的方式显示电子邮件。

• Even if the design of your email doesn’t include a border around your table, you might find it helpful during development to set border="1" to help with the debugging of any problems that arise with the internal alignment of tr and td tags. Change it back to border="0" for testing and production.

  即使您的电子邮件设计在表周围不包含边框，在开发过程中设置border="1"来帮助调试tr和td标签内部对齐引起的任何问题也可能会有所帮助。 。 将其更改回border="0"进行测试和生产。

While this approach might offend purists who prefer to code using the latest standards, it is the only viable approach at this point. But the fact that we’re using tables for layout doesn’t mean we need to resort to old-school methods entirely. For example, no matter how poorly Lotus Notes displays HTML email, you should never have to resort to using the font tag. And while Outlook 2007’s HTML rendering engine is less than perfect, it does display basic HTML tables just fine.

尽管这种方法可能会冒犯那些倾向于使用最新标准进行编码的纯粹主义者，但这是目前唯一可行的方法。 但是，我们使用表格进行布局的事实并不意味着我们需要完全采用传统方法。 例如，无论Lotus Notes显示HTML电子邮件有多糟糕，您都不必使用font标签。 尽管Outlook 2007HTML呈现引擎并不完美，但它确实可以很好地显示基本HTML表格。

There are some caveats, though; let’s take a look at styling our text next.

但是有一些警告。 接下来让我们看看样式。

步骤2：添加CSS样式 (Step 2: Add CSS Styles)

Did I say CSS support was poor in mail clients? Well, it is. But you can (and should) still utilize CSS for the styles in your email once your nested table layout is in place. There are just a few things to watch out for. Here are the steps that I use.

我是说邮件客户端对CSS的支持很差吗？ 好吧，是的。 但是，一旦嵌套表布局到位，您仍然可以(并且应该)将CSS用于电子邮件中的样式。 有几件事需要提防。 这是我使用的步骤。

First, use inline styles to store all of your style information, as shown here:

首先，使用内联样式存储所有样式信息，如下所示：

<p style="color: red;"></p>

This includes table, td, p, a, and so on.

这包括table ， td ， p ， a等。

Do not use the CSS style declaration in the HTML head tag, as you might when authoring web pages. Instead, place your style declaration right below the body tag — Google Mail, however, looks for any style declaration in the email and (helpfully) deletes it. Also, don’t bother using the link element to reference an external style sheet: Google Mail, Hotmail, and other email software will ignore, modify, or delete these external references to a style sheet.

请勿在HTML head标签中使用CSS style声明，就像在编写网页时一样。 取而代之的是，将您的style声明放置在body标记下方-但是，Google Mail会在电子邮件中查找任何style声明，并(有帮助地)将其删除。 另外，不要费心使用link元素来引用外部样式表：Google Mail，Hotmail和其他电子邮件软件将忽略，修改或删除这些对样式表的外部引用。

For your container table — the one that houses the header, content, and footer tables — set the table width to 98%. It turns out that Yahoo! mail needs that 1% cushion on either side in order to display the email properly. If side gutters are critical to your email’s design, set the width to 95% or even 90% to avoid potential problems. Of course, the tables inside the container table should be set to 100%.

对于您的容器表(用于容纳页眉，内容表和页脚表的容器表)，将表宽度设置为98％。 事实证明，雅虎！ 邮件需要两侧各留1％的缓冲才能正确显示电子邮件。 如果边沟对您的电子邮件设计至关重要，请将宽度设置为95％甚至90％，以避免潜在的问题。 当然，容器表内的表应设置为100％。

Put general font style information in the table td closest to the content. Yes, this can result in repetitive style declarations within multiple td cells. Put font style definitions into heading (e.g. h1, h2), p, or a tags only when necessary.

将常规字体样式信息放在最接近内容的表td 。 是的，这可能导致多个td单元中出现重复的样式声明。 把字体样式定义为标题(如h1 ， h2 )， p ，还是a只在必要时标记。

Use divs sparingly to float small boxes of content and links to the right or left inside a table’s td cell. Google Mail, for one, seems to ignore the CSS float declaration (yet Yahoo! and Hotmail cope with it just fine). Sometimes it’s better to code a more complex table layout than to rely on the float declaration. Or, since it’s all too easy to clutter up an email, ask your designer to put the floated content in the narrow side column instead. Flaky support for floats is one issue that may cause an email design to be reworked.

尽量少用div来浮动小盒内容，并在表的td单元格中向右或向左链接。 例如，Google Mail似乎忽略了CSS float声明(但Yahoo!和Hotmail可以应付它了)。 有时，编写更复杂的表布局比依靠float声明要好。 或者，由于将电子邮件弄乱很容易，因此请您的设计师将浮动内容放在窄边栏中。 对浮点数的不稳定支持是可能导致电子邮件设计被重新设计的一个问题。

While divs appear to be barely useful, spans appear to work almost every time, because they’re inline elements. In some cases, spans can be used for more than just coloring or sizing text: they can be used to position text above or below content.

尽管div几乎没有用，但span几乎每次都起作用，因为它们是内联元素。 在某些情况下， span可以用于为文本着色或调整大小：还可以用于将文本置于内容之上或之下。

Note that some email delivery services will unpack style definitions to make them more explicit and, therefore, more readable by all email software. For example, the CSS shorthand style="margin: 10px 5px 10px 0;" may be expanded into the long style declaration shown earlier. Test each email and look to see what happens to the email code. Start with CSS shorthand because, in the worst case, it appears to work well with all email software.

请注意，某些电子邮件传递服务将解压缩样式定义，以使它们更明确，从而使所有电子邮件软件更易读。 例如，CSS速记style="margin: 10px 5px 10px 0;" 可以扩展为前面显示的long样式声明。 测试每封电子邮件，并查看电子邮件代码发生了什么。 从CSS速记开始，因为在最坏的情况下，它似乎可以与所有电子邮件软件一起很好地工作。

If you’ve downloaded and studied the email templates from Campaign Monitor and MailChimp, you’ll see that they treat the container table as if it were the html body tag. The Campaign Monitor team refer to this table as the “BodyImposter,” which is a great way to think about the frame or wrapper table. From a CSS perspective, the container table does what the html body element would do if services like Google Mail didn’t disable or ignore the body tag.

如果您已经从Campaign Monitor和MailChimp下载并研究了电子邮件模板，您将看到它们将容器表视为html body标记。 Campaign Monitor团队将该表称为“ BodyImposter”，这是考虑frame或wrapper表的好方法。 从CSS角度来看，如果像Google Mail这样的服务未禁用或忽略body标签，容器表将执行html body元素。

步骤3：采用最佳做法 (Step 3: Adopt Best Practices)

Knowing that you’ve created valid HTML email using the guidelines I’ve suggested is only part of the solution — there are several best practices that you should follow to ensure that your email is well received.

知道您已使用我建议的指南创建了有效HTML电子邮件，但这只是解决方案的一部分-您应遵循几种最佳做法，以确保您的电子邮件得到良好的接收。

The next step is to test your HTML email in a variety of email clients. Often this will identify problems that require workarounds.

下一步是在各种电子邮件客户端中测试HTML电子邮件。 通常，这将确定需要解决方法的问题。

The first test tools to use are the Firefox and Internet Explorer web browsers. If the email displays well or perfectly in both browsers, there’s a good chance testing the email in Outlook, Yahoo!, Google Mail, and other services will reveal only minor problems. If possible, I’d also recommend testing your email in Internet Explorer 6 — this should give you a good indication of how your email will render in Outlook 2003 (refer to the list of resources at the end of this article for information on running Internet Explorer 6). Finally, to test how email will look on an iPhone or iPad, check your HTML email in a Safari web browser.

首先使用的测试工具是Firefox和Internet Explorer Web浏览器。 如果电子邮件在两个浏览器中均显示良好或完美，则很有可能在Outlook，Yahoo！，Google Mail和其他服务中测试电子邮件将仅显示较小的问题。 如果可能的话，我还建议您在Internet Explorer 6中测试您的电子邮件-这应该可以很好地表明您的电子邮件在Outlook 2003中的呈现方式(有关运行Internet的信息，请参阅本文结尾处的资源列表)。资源管理器6)。 最后，要测试电子邮件在iPhone或iPad上的外观，请在Safari Web浏览器中检查HTML电子邮件。

Once the email appears fine in those two web browsers, use an email delivery service to send the email to a range of test email accounts. Ideally, this should include accounts with the Yahoo!, Hotmail, and Google Mail services. The test accounts you use should, of course, be determined by the domain names in the mailing list of people who will receive the email. For example, if there are no AOL subscribers on this list, it’s probably a waste of time and money to set up, and test with, an AOL email account.

一旦电子邮件在这两个Web浏览器中正常显示，请使用电子邮件传递服务将电子邮件发送到一系列测试电子邮件帐户。 理想情况下，这应该包括使用Yahoo！，Hotmail和Google Mail服务的帐户。 当然，您使用的测试帐户应由接收电子邮件的人员的邮件列表中的域名确定。 例如，如果此列表上没有AOL订阅者，则设置和测试AOL电子邮件帐户可能会浪费时间和金钱。

Here are the most common code tweaks that I’ve found necessary during this test phase:

以下是在此测试阶段发现的最常见的代码调整：

• Sometimes, a switch from percentage widths to fixed widths is needed. While this is not ideal — because readers can and do resize their email windows while reading — sometimes, using a fixed width is the only way to have a layout display properly in multiple email clients.
  有时，需要从百分比宽度切换到固定宽度。 尽管这并不理想-因为读者可以并且确实在阅读时调整电子邮件窗口的大小-有时，使用固定宽度是在多个电子邮件客户端中正确显示布局的唯一方法。

• If there’s a spacing issue with the columns in the email design, first tweak the cellpadding and cellspacing attributes of the HTML tables. If that doesn’t work, apply CSS margin and padding attributes. HTML spacing works better with older email software.

  如果电子邮件设计中的列存在间距问题，请首先调整HTML表格的cellpadding和cellspacing属性。 如果这样不起作用，请应用CSS margin和padding属性。 HTML间距与较旧的电子邮件软件配合使用效果更好。

• Image displacement can occur when a td cell is closed right below an img tag. This is an ancient HTML problem. Putting the </td> tag right after (on the same line as) the img tag eliminates the annoying and mystifying 1-pixel gap.

  当关闭img标签正下方的td单元时，可能会发生图像移位。 这是一个古老HTML问题。 将</td>标签放在img标签之后(与img相同)，可以消除令人讨厌且神秘的1像素间隙。

In addition, the following best practices are recommended:

此外，建议以下最佳做法：

• Avoid using JavaScript. Most email software will disable it anyway.
  避免使用JavaScript。 大多数电子邮件软件都会禁用它。
• If an image is sliced up and spread across several HTML table cells, test the email using many test accounts. Sometimes, it might look great in Outlook but be shifted by one or more pixels in Hotmail and other services. Also consider making the image a background image on a new HTML table that encases all of the table rows and columns that would display parts of your background image; this often achieves the same effect as slicing an image up, but uses less code and can provide better results (see below). Note that Outlook 2007 does not display background images; be sure to test your email code with your target email software.
  如果将图像切成薄片并散布在多个HTML表格单元格中，请使用许多测试帐户来测试电子邮件。 有时，它在Outlook中看起来不错，但在Hotmail和其他服务中却偏移了一个或多个像素。 还可以考虑将图像作为新HTML表格上的背景图像，该表格封装了所有表格行和列，这些表格将显示背景图像的一部分； 这样通常可以达到与分割图像相同的效果，但是使用更少的代码并可以提供更好的结果(请参见下文)。 请注意，Outlook 2007不显示背景图像。 请务必使用目标电子邮件软件测试您的电子邮件代码。

• For background images, use the table’s background attribute instead of using CSS. This works more consistently across email software than other potential solutions.

  对于背景图像，请使用表格的background属性，而不要使用CSS。 与其他潜在解决方案相比，这在电子邮件软件中更一致地工作。

• Store the email images on a web server — preferably in a folder that’s separate from your web site’s images (for example, in a folder called /images/email), and don’t delete them. Some people open emails weeks or months later, the same way people use bookmarks to return to web sites.

  将电子邮件图像存储在Web服务器上-最好存储在与网站图像分开的文件夹中(例如，在名为/images/email的文件夹中)，并且不要删除它们。 有些人在数周或数月后打开电子邮件，就像人们使用书签返回网站一样。

• Be sure all your images use the alt, height, and width attributes. Setting values for these attributes improves results in Google Mail, as well as maintaining your layout when a reader has their images turned off. Note, however, that Outlook 2007 does not recognize the alt attribute.

  确保所有图像都使用alt ， height和width属性。 设置这些属性的值可改善Google Mail的结果，并在阅读器的图像关闭时保持布局。 但是请注意，Outlook 2007无法识别alt属性。

• Use the target="_blank" attribute for the a tags, so that people who read with webmail services don’t have the requested page appear within their webmail interface.

  对a标签使用target="_blank"属性，以便使用网络邮件服务阅读的人不会在其网络邮件界面中看到所请求的页面。

• While a 1×1-pixel image can be used to force spacing to create a precise email layout, spammers often use 1×1-pixel images to determine if their email has been opened. Using this practice will increase the likelihood that your email is classified as spam.
  虽然可以使用1×1像素的图像来强制间隔以创建精确的电子邮件布局，但垃圾邮件发送者经常使用1×1像素的图像来确定其电子邮件是否已打开。 使用此做法将增加您的电子邮件被归类为垃圾邮件的可能性。
• Similarly, avoid using a large image “above the fold” in the email. This is another classic spammer practice and may cause your email to be interpreted as spam.
  同样，请避免在电子邮件中使用“折页上方”的大图像。 这是另一种经典的垃圾邮件发送者做法，可能会使您的电子邮件被解释为垃圾邮件。

It’s important to make sure your HTML email displays acceptably with images turned off. Many email applications set the display of images to “off” by default. For example, if you use a background image to provide a background color with white font color over it, make sure the default background color for that part of the HTML table is dark, not white.

确保HTML电子邮件在关闭图像的情况下可以正常显示很重要。 许多电子邮件应用程序默认将图像显示设置为“关闭”。 例如，如果使用背景图像在其上提供白色字体颜色的背景色，请确保HTML表格的该部分的默认背景色是深色而不是白色。

When I’m testing how an email displays with images off, I usually use my text editor to replace each image’s src attribute with a unique combination of characters such as “xsrcx”, and then revert it back again after the test.

在测试如何显示不显示图像的电子邮件时，通常使用文本编辑器将每个图像的src属性替换为字符的唯一组合，例如“ xsrcx”，然后在测试后再次还原。

Once the HTML email has been tweaked so that it displays well in your test email accounts, the next step is to go through a checklist. For example, verify the following:

对HTML电子邮件进行了调整后，它可以很好地显示在您的测试电子邮件帐户中，下一步就是检查清单。 例如，验证以下内容：

• Does the From address display properly (as a name, not a bare email address)?
  发件人地址是否正确显示(作为名称，而不是裸电子邮件地址)？
• Is the subject line correct?
  主题行正确吗？
• Is the contact information correct and visually obvious?
  联系人信息正确且在视觉上明显吗？
• Does the top of the email display the text, “You received this email because … Unsubscribe instructions are at the bottom of this email.”?
  电子邮件顶部是否显示以下文字：“您收到此电子邮件是因为……退订说明位于此电子邮件的底部。”？
• Does your email contain text asking readers to add your From address to their email address book?
  您的电子邮件中是否包含文本，要求读者将您的“发件人”地址添加到他们的电子邮件地址簿中？
• Does the top of your email include a link to the web version of the message?
  电子邮件顶部是否包含指向该邮件的网络版本的链接？

Many email delivery services include the ability to see how your HTML email displays in a wide range of email software. It helps you identify what code tweaks are needed before sending.

许多电子邮件传递服务都具有查看HTML电子邮件在各种电子邮件软件中的显示方式的功能。 它可以帮助您在发送之前确定需要进行哪些代码调整。

步骤4：为Google Mail，Lotus Notes和Outlook 2007编写代码 (Step 4: Code for Google Mail, Lotus Notes, and Outlook 2007)

Google Mail, Lotus Notes, and Outlook 2007 present their own unique coding challenges. Outlook 2007, believe it or not, has significantly less support for CSS than previous versions of Outlook!

Google Mail，Lotus Notes和Outlook 2007提出了自己独特的编码挑战。 不管您相信与否，Outlook 2007对CSS的支持远少于早期版本的Outlook！

Google Mail’s lack of support is a little more forgiveable — because the application runs in a browser, it cannot control the contents of the emails it displays. Consequently, Google’s engineers have had to take steps to ensure their application displays properly regardless of the quality of the HTML or CSS in which emails are written.

Google Mail缺乏支持的情况可以原谅-因为该应用程序在浏览器中运行，因此无法控制其显示的电子邮件的内容。 因此，无论编写电子邮件HTML或CSS的质量如何，Google的工程师都必须采取措施以确保其应用程序正确显示。

As a result, Google Mail acts like an artifact of the early 1990s, when web standards were primitive. It takes some work, but it is possible to crack open a Google Mail page and see just how convoluted their approach to rendering HTML email actually is.

结果，Google Mail就像是1990年代早期的人工制品，当时Web标准是原始的。 这需要一些工作，但是可以打开Goog​​le Mail页面并查看他们呈现HTML电子邮件的方法实际上是多么复杂。

For one thing, Google Mail deletes the CSS styles contained between any style tags, no matter where they appear in the email. And fonts displayed within HTML tables — the only alternative to using styles — have the odd habit of appearing larger than intended, no matter how the HTML email is structured.

一方面，Google Mail删除任何样式标签之间包含CSS样式，无论它们在电子邮件中出现的位置如何。 而且，HTML表格中显示的字体(使用样式的唯一替代方法)具有奇怪的习惯，即无论HTML电子邮件的结构如何，字体看起来都超出预期。

The good news, however, is that if you code to account for the oddities of these three email applications, your HTML email code is likely to display well in most, if not all, email clients. Here are some techniques that appear to work well in Google Mail and other older email software:

不过，好消息是，如果您编写代码来说明这三个电子邮件应用程序的特殊性，则HTML电子邮件代码可能会在大多数(如果不是全部)电子邮件客户端中很好地显示。 以下是一些似乎可以在Google Mail和其他较旧的电子邮件软件中正常工作的技术：

• Define the background color in a td cell with the bgcolor attribute, not the CSS style.

  使用bgcolor属性(而不是CSS样式)在td单元格中定义背景颜色。

• As noted above, use the background attribute in the td cell for background images instead of using CSS. One side-effect of this approach is that the background image can be made as tall as needed — if the content used in your email template is likely to vary in size, using an extra-tall background image in this way allows the height of the email shrink or expand, depending on the height of the copy, from one email to the next. Remember, though, that Outlook 2007 ignores background images completely.

  如上所述，请在td单元格中将background属性用于背景图像，而不要使用CSS。 这种方法的一个副作用是，可以根据需要使背景图像变高–如果电子邮件模板中使用的内容大小可能有所不同，则以这种方式使用超高背景图像可以使背景图像的高度电子邮件会根据副本的高度从一封电子邮件缩至另一封电子邮件。 但是请记住，Outlook 2007会完全忽略背景图像。

• If it works better, use the padding declaration to control margins within a td cell. The margin style does not work in these cells, but padding does.

  如果效果更好，请使用padding声明来控制td单元内的边距。 margin样式在这些单元格中不起作用，但padding 。

• If you need a border around a td cell, keep in mind that Google Mail displays a border around a td cell when it’s defined in a div, but not when it’s defined as a border style in a td tag.

  如果您需要在td单元格周围设置边框，请记住，当在div定义Google Mail时，它会在td单元格周围显示边框，但在td标签中将其定义为边框样式时，则不会显示边框。

• If you need a light-colored link against a dark background color, put the font definition in the td cell (so it applies to p and a tags equally) then add a color: style to the a tag.

  如果您需要深色背景色的浅色链接，请将字体定义放在td单元格中(这样它就同样适用于p和a标签)，然后在a标签中添加color:样式。

• If the p and a fonts appear to be different sizes, wrap the a tag in a p tag.

  如果p和a字体似乎是不同的大小，敷a标签在p标签。

• Google Mail aggressively uses the right-hand column of the Google Mail user interface, which squeezes the HTML email into the center panel. Be sure the padding style in the content tds is set to 10 pixels all round, so that text does not hit against the left and right edges.
  Google Mail积极使用Google Mail用户界面的右侧列，它将HTML电子邮件压缩到中间面板中。 确保内容tds中的填充样式全部设置为10像素，以使文本不会碰到左右边缘。

• When testing an HTML email with a Google Mail account, it’s likely that you’ll find that one or more font styles are missing in the td, h1, h2, p, a, and other tags. Inspect every font carefully to make sure Google Mail displays the fonts correctly.

  使用Google Mail帐户测试HTML电子邮件时，您可能会发现td ， h1 ， h2 ， p ， a和其他标签中缺少一种或多种字体样式。 仔细检查每种字体，以确保Google Mail正确显示字体。

Besides Google Mail, there’s another, less obvious hazard a programmer faces when creating HTML email: Lotus Notes. Many large corporations continue to support and upgrade their Notes installations.

除了Google Mail，程序员在创建HTML电子邮件时面临的另一个不太明显的危险是Lotus Notes。 许多大公司继续支持和升级其Notes安装。

Unfortunately, it’s impossible to tell which companies use Notes. The best approach is to follow the guidelines described in this article — the more primitive the code, the more likely it will work well, if not perfectly, with Notes.

不幸的是，无法确定哪些公司使用Notes。 最好的方法是遵循本文中描述的准则-代码越原始，使用Notes的可能性就越大，即使不是很好。

That said, it’s quite possible Lotus Notes will introduce to your HTML email quirks that are almost beyond belief. For example, older versions of Notes can convert images to their proprietary formats, or simply ignore flawless basic HTML in one email, but display other HTML fine in another email.

就是说，Lotus Notes很可能会在您HTML电子邮件怪癖中引入几乎无法置信的怪癖。 例如，旧版本的Notes可以将图像转换为其专有格式，或者仅在一封电子邮件中忽略无瑕的基本HTML，而在另一封电子邮件中显示其他HTML。

Here are a few tips that will help you convince Notes to display your HTML email properly:

以下是一些技巧，可以帮助您说服Notes正确显示HTML电子邮件：

• As we discussed previously, use a container table that contains all the internal layout tables (for example, for the header, content, and footer). This keeps the email together in one chunk of HTML, so pieces of the layout are less likely to wander when displayed in Notes.
  如前所述，使用包含所有内部布局表的容器表(例如，用于页眉，内容和页脚)。 这样可以将电子邮件保存在一块HTML中，因此在Notes中显示布局时，布局的几率较小。
• Create a gutter around the container table by setting the width to a percentage and/or using a cellpadding of at least 5.
  通过将宽度设置为百分比和/或使用单元格填充至少为5，在容器表周围创建装订线。

• As I mentioned earlier, avoid using a style declaration in your email’s head tag. It might be the approach that adheres to web standards, but Notes (like Google Mail) might delete your styles. Rely, instead, on inline styles within the table, td, h1, h2, p, a, and other tags.

  如前所述，请避免在电子邮件的head标签中使用style声明。 这可能是符合Web标准的方法，但是Notes(例如Google Mail)可能会删除您的样式。 而是依靠table ， td ， h1 ， h2 ， p ， a和其他标签中的内联样式。

• Use absolute URLs to images stored on a web server. You can’t do much about Notes converting images, but using remote images might help.
  使用绝对URL来存储在Web服务器上的图像。 您不能对Notes转换图像做太多事情，但是使用远程图像可能会有所帮助。
• Intra-email links, using named anchors, rarely (if ever) work in Notes. It’s simply best to avoid links that jump down the email to a specific piece of content.
  使用命名锚点的电子邮件内链接在Notes中很少(如果有的话)起作用。 最好是避免将电子邮件跳到特定内容的链接。

• Avoid colspans in your HTML tables. Notes — especially its earlier versions — can deal only with basic table layouts.

  避免在HTML表格中使用colspan 。 Notes(尤其是其早期版本)只能处理基本的表格布局。

• Be sure that your td cell widths are accurate. Unlike web browsers, which automatically set all cells to the widest-defined width, Notes sizes each td cell based on its defined width.

  确保您的td单元格宽度正确。 与Web浏览器自动将所有单元格设置为最宽定义的宽度不同，Notes根据其定义的宽度为每个td单元格调整大小。

• Centering an email layout usually won’t work in Notes. Email layouts generally have to be left-aligned.
  在Notes中通常无法使电子邮件布局居中。 电子邮件布局通常必须左对齐。

Using these techniques to achieve a successful render in Google Mail and Lotus Notes will ensure that your emails also display fine in Outlook 2007, which uses an older HTML rendering engine. Microsoft has published details about what their email software will and won’t display properly; more details can be found in the Resources section at the end of this article).

使用这些技术在Google Mail和Lotus Notes中成功呈现效果将确保您的电子邮件在使用旧版HTML呈现引擎的Outlook 2007中也能正常显示。 微软已经发布了有关其电子邮件软件将正常显示和不能正常显示的详细信息。 有关更多详细信息，请参见本文末尾的“参考资料”部分。

Campaign Monitor, an email delivery service, has a comprehensive list of CSS elements support for every popular mobile, web and desktop email client.

电子邮件传递服务Campaign Monitor具有针对每个流行的移动，Web和桌面电子邮件客户端CSS元素支持的完整列表 。

步骤5：为手机和平板电脑编码 (Step 5: Coding for Phones and Tablets)

An amazing number of people read HTML email on their smart phones and tablets, as well as their desktop email software. Adapting your HTML tables to display well on these devices turns out to be somewhat easy. It helps CSS support is very good for the HTML rendering engines used on new phones and tablets.

大量的人在智能手机和平板电脑以及台式机电子邮件软件上阅读HTML电子邮件。 调整您HTML表使其在这些设备上良好显示很容易。 它有助于CSS支持，对于新手机和平板电脑上使用HTML渲染引擎非常有用。

The solution is to use the CSS @media definition to target the HTML table TD cells and boost the font sizes needed to display well. For example, fonts on an iPhone need to be 13 pixels to be legible. The best part? Webmail and desktop email software will either strip out or ignore your @media definitions while your phone and tablet will read the code and display everything perfectly.

解决方案是使用CSS @media定义以HTML表TD单元为目标，并提高显示效果所需的字体大小。 例如，iPhone上的字体必须为13像素才能清晰可见。 最好的部分？ 网络邮件和桌面电子邮件软件将删除或忽略您的@media定义，而手机和平板电脑将读取代码并完美显示所有内容。

Here’s a sample set of @media definitions to display a one-column layout HTML table for phones and tablets:

这是一组@media定义示例，用于显示用于手机和平板电脑的单列布局HTML表：

@media only screen and (max-width: 480px) {
  /* mobile-specific CSS styles go here */
  table[class=email], table[class=email-content] { 
    clear: both;
    width: 320px !important;
    font-size: 13px !important;
  }
}

Place this @media code directly below your body tag class="email" to your table definition and class="email-content" to your TD cells. When your HTML email is viewed with a device (or web browser horizontally re-sized) less than 480 pixels, these definitions will activate.

将此@media代码直接放在body tag class="email"下方的table定义中，并将class="email-content"放入TD单元的正下方。 使用小于480像素的设备(或水平调整大小的网络浏览器)查看HTML电子邮件时，这些定义将被激活。

The secret to coding a two-column HTML email to adapt to small phone and tablet screens? Put each column into its own table. Next, for each HTML table, use inline CSS to float: left and HTML align="left" to float and align each content column table to the left. Then add class="email" to your table definition and class="email-content" to your TD cells.

对两列HTML电子邮件进行编码以适应小型手机和平板电脑屏幕的秘诀？ 将每一列放入自己的表中。 接下来，对于每个HTML表，使用内联CSS进行float: left ，使用HTML align="left"进行浮动，并将每个内容列表格向左对齐。 然后将class="email"添加到table定义中，并将class="email-content"到TD单元中。

With the @media code above, for screens less than 480 pixels wide, this will set the column tables, your left and right columns, the same width as the left content column and slides under the main column.

使用上面的@media代码，对于宽度小于480像素的屏幕，这将设置列表，左列和右列，其宽度与左内容列相同，并在主列下滑动。

This approach can be used to target any layout design changes to work with phones and/or tablets.

此方法可用于确定任何布局设计更改以与手机和/或平板电脑一起使用。

This solution comes from an excellent guide from Campaign Monitor, Responsive Email Design, which has even more details and ideas about how to make HTML email responsive to different screen sizes.

该解决方案来自Campaign Monitor的出色指南，即响应式电子邮件设计 ，其中提供了有关如何使HTML电子邮件响应不同屏幕尺寸的更多详细信息和想法。

摘要 (Summary)

Many people who receive email prefer HTML over text for a number of reasons. For programmers, though, the task of creating an HTML email that will display consistently appears both simple and horribly complex. This article has described many of the issues and strategies for creating markup that will work across email software.

由于许多原因，许多收到电子邮件的人都喜欢HTML而不是文本。 但是，对于程序员而言，创建将始终显示HTML电子邮件的任务看起来既简单又极其复杂。 本文介绍了创建可在电子邮件软件中使用的标记的许多问题和策略。

What’s the best idea to take away from this article? If there’s a choice to be made between a simple email design and a more complex solution, simplicity is always the safest bet.

从本文中摘取的最佳主意是什么？ 如果要在简单的电子邮件设计和更复杂的解决方案之间做出选择，那么简单总是最安全的选择。

进一步阅读 (Further Reading)

These resources offer valuable information that will help you if you want to learn more about coding HTML email.

这些资源提供了有价值的信息，如果您想了解有关编码HTML电子邮件的更多信息，将对您有所帮助。

• Campaign Monitor: Guide to CSS Support in Email

  Campaign Monitor：电子邮件中CSS支持指南

• Campaign Monitor: Responsive Email Design

  Campaign Monitor：响应式电子邮件设计

• MailChimp: Email on Mobile Devices

  MailChimp：移动设备上的电子邮件

• MailChimp: Email Blueprints

  MailChimp：电子邮件蓝图

• MailChimp: Email Marketing Field Guide

  MailChimp：电子邮件营销领域指南

And here are some more…

还有更多…

Email Standards Project The Email Standards Project is probably the best starting point for understanding exactly to what degree HTML and CSS are supported by different email clients. The site also maintain an acid test that can be used to compare compliance across email software, and there are several ways in which you can participate to help improve email support of web standards.

电子邮件标准项目电子邮件标准项目可能是准确了解不同电子邮件客户端支持HTML和CSS的程度的最佳起点。 该站点还维护一个酸性测试，该测试可用于比较电子邮件软件之间的合规性，您可以通过多种方式参与其中，以帮助改善电子邮件对Web标准的支持。

Free Campaign Monitor and MailChimp HTML Email Templates Both of these email delivery services actively test their templates over time with different email clients. However, there are subtle differences in the approach that each takes — Campaign Monitor places a style declaration within the head tag, while MailChimp does not. Be sure to test your final HTML code with whatever email clients are used by recipients of your email list.

免费的Campaign Monitor和MailChimp HTML电子邮件模板这两个电子邮件传递服务都随着时间的推移积极地与不同的电子邮件客户端一起测试其模板。 但是，每种方法所采用的方法之间存在细微的差异-Campaign Monitor在head标签中放置style声明，而MailChimp则不这样做。 确保使用电子邮件列表的收件人使用的任何电子邮件客户端测试最终HTML代码。

Plain Text Email Design Guidelines This article lists a number of simple techniques for making text emails easier to scan.

纯文本电子邮件设计准则本文列出了许多使文本电子邮件更易于扫描的简单技术。

Testing HTML EmailThis article explores testing procedures across multiple email clients.  Other related articles include creating HTML email layouts and understanding multivariate testing.

测试HTML电子邮件本文探讨了跨多个电子邮件客户端的测试过程。 其他相关文章包括创建HTML电子邮件布局和理解多元测试 。

Articles about Blocked Email Images by Campaign Monitor From 2004, the ClickZ article shows how major email software compares when images are blocked or when the content is viewed in a preview pane. The Campaign Monitor article goes into greater detail, listing actual examples and ideas how to combat default image-off rendering of your emails, as well as designing your email to look okay in preview panes.

关于从Campaign Monitor阻止电子邮件图像的文章从2004年开始，ClickZ文章显示了当图像被阻止或在预览窗格中查看内容时主要电子邮件软件如何进行比较。 Campaign Monitor文章将进行更详细的介绍，列出实际示例和想法，以解决如何消除电子邮件的默认图像渲染，以及如何设计电子邮件使其在预览窗格中看起来还可以。

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 The official Microsoft description of what Outlook 2007 will and will not render for HTML and CSS. Includes a link to a validator that works in Dreamweaver, as well as Microsoft editing tools.

Outlook 2007中的Word 2007 HTML和CSS渲染功能 Microsoft对Outlook 2007将为HTML和CSS渲染的内容的正式描述。 包括指向可在Dreamweaver中使用的验证程序以及Microsoft编辑工具的链接。

MailChimp Email HTML Coding/Delivery Guide Lots of great information about all aspects of HTML email, including how spam filters work.

MailChimp电子邮件HTML编码/传递指南关于HTML电子邮件各个方面的许多重要信息，包括垃圾邮件过滤器的工作方式。

The “Secrets of HTML Email” Series Some of this information is old but a good piece on Lotus Notes is offered.

“ HTML电子邮件的秘密”系列这些信息有些陈旧，但是在Lotus Notes上提供了很好的内容。

CSS and Email, Kissing in a Tree This excellent CSS-only approach to HTML email was published by A List Apart. NOTE: The author has written an update to this article, posted at the Campaign Monitor blog, Optimizing CSS presentation in HTML emails.

CSS和电子邮件，在树上接吻这种出色HTML电子邮件纯CSS方法是由A List Apart发布的。 注意：作者已经撰写了这篇文章的更新，发布在Campaign Monitor博客上，“ 优化HTML电子邮件中CSS演示文稿” 。

How HTML Code Affects E-Mail Deliverability A decent overview that describes how different email services view the HTML you include in an HTML email. You can’t address every problem directly (for example, creating a clear boundary between the HTML and text versions of your email is a problem for your email service provider, if you use one) but it helps to know what happens.

HTML代码如何影响电子邮件的可传递性一个体面的概述，描述了不同的电子邮件服务如何查看HTML电子邮件中包含HTML。 您无法直接解决所有问题(例如，如果使用电子邮件，则在电子邮件HTML版本和文本版本之间创建清晰的边界是电子邮件服务提供商面临的问题)，但这有助于了解会发生什么。

How to Start a Blog in 2020 (and Make Money): Easy Guide to Start Blogging Today One of the best ways to grow your mailing list is to run a consistent blog. This guide is a rare find — it shows you how to get an effective blog running and producing results quickly and cuts through a lot of the noise out there in the blogging advice world. It also covers using your email newsletter to grow your blog audience, creating a virtuous cycle for your whole operation.

如何在2020年开始写博客(和赚钱)：今天开始写博客的简易指南扩大邮件列表的最佳方法之一就是运行一个一致的博客。 该指南是一个难得的发现-它向您展示了如何有效地运行博客并快速产生结果，并消除了博客建议世界中的许多噪音。 它还涵盖了使用电子邮件时事通讯来增加博客读者的数量，为整个操作创造了良性循环。

翻译自: https://www.sitepoint.com/how-to-code-html-email-newsletters/

html编写邮件发送