准备 HTML 邮件的提示


关于图像

提示 1:<img> 标签需要有 width 和 height 属性

为了确保在邮件客户端里渲染正确,请在 <img> 标签中定义 widthheight 属性。

Don't<img src="images/banner.jpg" alt="SalesCatalysts.com">

Do<img src="images/banner.jpg" width="600" height="50" alt="SalesCatalysts.com">


提示 2:<img> 标签里的 width 和 height 属性需要与图像的原始大小相同

一些邮件平台如 Outlook 2007Outlook 2010 会忽略了你在 HTML 代码里指定的图像的宽度和高度,而显示图像的 原始大小

这经常破坏了整个邮件的设计。因此如果你想调整图像的大小,请不要只是在<img>标签中修改它的大小属性。

你应该用Photoshop或者其他图像编辑软件调整图片的大小。


提示 3:<img> 标签需要有属性 border="0"

如果你添加超链接至图像,而没有 border="0" 属性,Internet Explorer 会自动添加一个 蓝色边框 在图片的周围。

为了避免这种情况,一个很简单的方法就是,在每个 <img> 标签里添加属性 border="0"

Don't<img src="images/banner.jpg" width="600" height="50" alt="SalesCatalysts.com">

Do<img src="images/banner.jpg" width="600" height="50" border="0" alt="SalesCatalysts.com">


提示 4:<img> 标签应该要有属性 style="display: block;"

如果你设计 HTML 邮件时使用了很多放置于<td> 中的切片图像,请添加 style="display: block;" 至每一个 <img> 标签。

如果没有这个属性,当在 GmailHotmail(现在是 Outlook.com)Yahoo! 或其他邮件平台查看邮件时,在图像之间会出现未知的空隙。

Don't<img src="images/banner.jpg" width="600" height="50" border="0" alt="SalesCatalysts.com">

Do<img style="display: block;" src="images/banner.jpg" width="600" height="50" border="0" alt="SalesCatalysts.com">


提示 5:图像不应该高于1728像素

Outlook 2007 和 2010 会裁切高于 1728 像素的图像的顶部。

更多细节,请查看 为什么在 Outlook 2007 和 Outlook 2010 里邮件被裁切?


提示 6:避免在你的邮件中使用背景图片

Outlook 2007 和 2010 不会显示背景图片,因此避免在你的邮件中使用背景图片。

如果你必须使用,请规定一个候补背景颜色给 Outlook 2007 和 2010。


提示 7:为 <img> 标签添加 alt 属性

默认设置下,邮件客户端会禁止显示图像。

当图像被禁止显示时,在 alt 属性中的信息依然能够显示,以提供给你的收件人基本的文本信息。


关于 <td> 标签

提示 1:每个 <td> 标签都应该有 width 属性

这是确保你的邮件能够正确显示的一个简单方法。

Don't<td>

Do<td width="60">

如果可能的话,也请设置 height 属性。然而,有时 <td> 的 height 属性受文本内容长度的影响而有所不同。在这种情况下,你不应该定义一个固定的高度。

注意: <table> 标签和 <tr> 标签都没有 height 属性。


关于CSS

提示 1:始终使用内联 CSS

一些邮件平台会忽略定义在 HTML 文档中 <head> 部分的 CSS。因此请始终使用内联 CSS。


提示 2:避免使用 CSS 定位元素

避免使用 CSS 定位元素。大部分网络邮件平台不支持 “float” 和 “position”。


提示 3:使用 “margin-bottom” 代替 “margin” 或 “margin-top”

避免使用 “margin” 和 “margin-top”,因为 Hotmail(现在为 Outlook.com) 会忽略它们。

使用 “margin-bottom” 相对稳妥一点。你可以添加 “margin-bottom” 给 <p> 标签去控制段落之间的距离。

更多有关在 HTML 邮件中的 margin 和 padding 属性的提示,请看 这里