Html Email 邮件html页编写指南

Myth丶恋晨 2021-09-16 23:34 593阅读 0赞

**前言**

写过邮件的html的童学应该都知道，邮件的html一般都用table来布局，为什么呢？原因是大多数的邮件客户端（比如Outlook和Gmail），会过滤HTML设置，让邮件面目全非。

经过多次的邮件编写实践及度娘的指导，我发现，编写HTML Email的窍门，就是使用15年前的网页制作方法。

[自制兼容outlook与foxmail邮件模版][outlook_foxmail]

**局部重点规则**

### 1. Doctype ###

目前，兼容性最好的Doctype是XHTML 1.0 Strict，事实上Gmail和Hotmail会删掉你的Doctype，换上下面这个Doctype（不能使用HTML5的语法）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     　<head>
     　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     　　<title>HTML Email编写指南</title>
     　　<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     　</head>
    </html>

### 2. 布局 ###

网页的布局（layout）必须使用表格（table）。首先，放置一个最外层的大表格，用来设置背景，具体内容再在里面嵌套表格（div、p等还是不要想了）。

<body style="margin: 0; padding: 0;">
     　<table border="1" cellpadding="0" cellspacing="0" width="100%">
     　　<tr> 
     　　　<td> Hello! </td>
     　　</tr>
     　</table>
     </body>

### 3. 图片相关 ###

图片是唯一可以引用的外部资源。其他的外部资源，比如样式表文件、字体文件、视频文件等，一概不能引用。

有些客户端会给图片链接加上边框，要去除边框。

需要注意的是，不少客户端默认不显示图片（比如Gmail），所以要确保即使没有图片，主要内容也能被阅读。

1 <img border="0" style="display:block;outline:none;text-decoration:none,-ms-interpolation-mode:bicubic;border:none;">

*  **img指定width 与 height**

因为在有些邮箱里，图片不是默认加载的，往往加载前需要用户的许可。那么高宽的指定可以使邮件在没有图片撑出样子前也能保持良好的大小结构，加上 `alt` 属性更可以明确告知图片的内容让用户选择是否下载它们。

如果因为项目需要（比如需要适配 Retina 高分屏），`width` 和 `height` 属性更是必不可少的，并且由于一些 outlook 版本的奇葩表现，`width` 和 `height` 属性一定不要加上单位！一定不要加上单位！一定不要加上单位！重要的事情说三遍。

因为加上单位会使一些版本的 OutLook 无法正确识别，导致图片显示使用实际的宽高而非我们设置的。

*  **img在outlook2013下有间距**

outlook2013中，堆叠的图片会显示大概10px的间距

这个问题只在图片高度小于20px的时候出现，开心的是通过简单的小技巧就可以解决：为td设置和图片高度一样的行高或image设为display：block；

*  **背景图片**

`style` 内容里面 `background` 可以设置 `color`，但是 `image` 会被过滤，就是说不能通过 CSS 来设置背景图片了。但是有一个很有意思的元素属性，也叫 `background`，里面可以定义一个图片路径，但是功能有限，比如无法定位背景图片等。

例如要给一个单元格加一个背景，必须这样写：

*  **margin 与 padding**

Outlook 2007-2013 不支持图片的 `margin` 与 `padding` 样式，必要的时候可以尝试 `hspace` 和 `vspace` 属性：

### 4. 文字相关 ###

所有的CSS规则，最好都采用行内样式。因为放置在网页头部的样式，很可能会被客户端删除。客户端对CSS规则的支持情况，请看[这里][Link 1]。

*  **字体**

在 HTML 邮件中，`font-family` 只支持系统字体，不支持自定义字体，也不支持 `font` 简写，`color` 尽可能也不要使用简写：

要写成这样

1 <p style="font-size: 8px;font-family: Arial, sans-serif;"></p>

对于加粗字体，我们可以使用 `b` 标签而不是 CSS 的 `font-weight`，前文说过，HTML 标签和属性能解决的样式决不使用 CSS 样式。

*  **行高**

在 OutLook 中会有个默认的行高最小值，特别是当设置 `font-family` 为微软雅黑时，默认的行高差不多为 Word 中的两倍行距，如果 `line-height` 设置的值小于默认的行高，无论你设置的是多少，则始终使用默认值，在很多情况下这是不能忍的，好在有个神奇的 `mso-line-height-rule`，使用行高时添加 `mso-line-height-rule:exactly;` 就能使行高始终等于我们所设置的值。

这只是微软的 CSS 属性，对其他客户端没影响。并且该属性只在块元素上有效，所以想在 `font` 和 `span` 中用就洗洗睡了吧。

### 5. W3C校验和测试工具 ###

要保证最终的代码，能够通过[W3C][]的校验，因为某些客户端会把不合格属性剥离。还要使用测试工具（[1][], [2][], [3][]），查看在不同客户端的显示结果。

发送HTML Email的时候，不要忘记MIME类型不能使用

1 　Content-Type: text/plain;

要使用

1 Content-Type: Multipart/Alternative;

### 6. 模板 ###

使用别人已经做好的模板，是一个不错的选择（[这里][Link 2]和[这里][Link 3]），网上还可以搜到[更多][Link 4]。

自己开发的话，可以参考[HTML Email Boilerplate][]和[Emailology][]。

**全局规则**  
  
1.页面宽度请设定在550到650px以内。  
  
2.使用table表格来布局。  
  
3.如果需要邮件居中显示，请在table里设定align="center"。  
  
4、不要写<style>标签、不要写class，所有CSS都用style属性，什么元素需要什么样式就用style写内联的CSS。  
  
5、不要使用外链的css样式定义文字和图片（外链的css样式在邮件里将不能被读取，所以发送出去的邮件因为没有链接到样式，将会使你的邮件内容样式丢失），正确的写法：<td style="font-family:arial;font-size:12px;color:black">文字</td>。  
  
6、不使用flash、java、javascript、frames、iframe、activeX以及DHTML，如果页面中的图片一定要动态的，请将flash文件转换成gif动画使用，但在outlook2007里，gif将不能正常显示，因为outlook2007限制gif动画。  
  
7、不要使用<table></table>以外的body、meta和html之类的标签，部分邮箱系统会把这些过滤掉。  
  
8、背景图片代码写法如下：<table background="background.gif" cellspacing="0" cellpadding="0"></table>，但请注意，outlook对背景图片不识别。  
  
9.font-family属性不能为空，否则会被QQ屏蔽为垃圾邮件。  
  
10.若邮件模板内侧边或者上下有空白间距，不要用 padding，必须得用标准的 td 来设定空白间距，否则会导致各个邮箱解析不同。  
  
11、在 yahoo 邮箱里定义 line-height 的注意事项：需在块级元素里定义 line-height。如果 td 里有 p 标签，则 line-height 也必须在 p 中定义。无论是 td 还是 p，如果有超链接，则都必须在 a 标签里定义 line-height。如果只是在 td 或者 p 里面定义 line-height 的话，那 yahoo 邮箱将无法识别 a 里面的行高。  
  
12.少用float, margin,padding. 绝对定位不能用，清除浮动用<table style="clear:both"></table>  
  
13.如果 td 和 td 之间有间隔，使用<td style="border-bottom:10px solid \#fff"></td>，这样写的话 td 之间是不会有间隔的。使用<td style="margin-bottom: 10px"></td>也是不会有空格的。如果 td 之间有间隙，必须用<td></td><td height="10px">&nbsp;</td><td></td>来隔开。但是如果是 table，则<table style="border-top:10px solid \#ffffff; border-bottom:20px solid \#ffffff"></table>里面的内容会在上下有空行。  
  
14.少用图片，邮箱不会过滤你的img标签，但是系统往往会默认不载入陌生来信的图片，如果用了很多图片的邮件，在片没有载入的情况下，丑陋无比甚至看不清内容，没耐心的用户直接就删除了。图片上务必加上alt。  
  
**outlook 规则**  
  
1.在<td>里设置 margin 是无效的，不论是 margin-left、margin-right、margin-top 或者 margin-boottom 都没有效果。  
  
2.如果要使用<P>标签要考虑到<P>标签本身自带的上下行之间的行高。  
  
**yahoo规则**  
  
1.在table里设定align="center"无法居中， 需要内联style=“margin：0 auto，width：XX”  
  
**foxmail 规则**  
  
1.foxmail中所有p标签的Margin:0; 使用p标签时需要设置margin

[outlook_foxmail]: https://github.com/laneyhui/html-email/tree/master
[Link 1]: https://www.campaignmonitor.com/css/
[W3C]: http://validator.w3.org/
[1]: https://mailchimp.com/features/inbox-preview/
[2]: https://www.emailonacid.com/
[3]: https://litmus.com/
[Link 2]: https://mailchimp.com/features/email-templates/
[Link 3]: https://www.campaignmonitor.com/email-templates/
[Link 4]: https://www.google.com.hk/search?q=email+template&gws_rd=ssl
[HTML Email Boilerplate]: https://github.com/seanpowell/Email-Boilerplate
[Emailology]: http://www.emailology.org/#1