简体中文

准备 HTML 邮件的提示

关于图像

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

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

<img src="images/banner.jpg" alt="Banner" />

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

预设设定下,邮件客户端会禁止显示图像。

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

关于 <td> 标签

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

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

<td>

<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" 相对稳妥一点。你可以在 <p> 标签里加上 "margin-bottom" 去控制段落之间的距离。

了解更多有关在 HTML 邮件中的 "margin" 和 "padding" 属性的提示