Email页面代码书写建议及规范

众所周知，Email是一项最古老的互联网应用之一。

因此，不少邮件系统还是会采用一些比较古老的处理方式，导致前端方面很多新的技术、新的特性无法被支持。

而且各个邮箱系统以及客户端的差异，也会使email的最终呈现出现很大的偏差。比如某些系统是把email文档整个放在页面的一个DIV容器中，而另外一些系统使用页面中的iframe包含email文档，同样的email页面在这两种容器中就会有天壤的差别。
HTML细节就目前来说，如果要做一个email页面，为了保证最大的兼容性，有以下几点需要注意：
对于纯文本邮件：

• 邮件标题不要超过18个字；
• 每行不要超过34个字。

对于HTML邮件：

• 邮件标题不要超过18个字；
• HTML代码和图片尽量不要超过50kb；
• 页面宽度推荐500px，最大不要超过600px；
• 避免使用边缘的、非主流的HTML技术；
• 不使用css来布局，应该使用表格来布局；
• 不使用外联的css样式，而使用font标签来定义样式，定义链接颜色时也是如此，写法如下：
  <font style="font-family:arial,helvetica; font-size:10pt; color:#000000">
  
  ...
  </font>
• 不使用Flash、Java、Javascript、frames、i-frames、ActiveX 以及 DHTML ；
• body和meta之类的标签是可以无视的，因为在很多邮箱系统里它会被过滤；
• 如果整个邮件有用到背景色或背景图，建议用以下方式处理：
  <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
  
  <tr>
  
  <td width="100%" height="100%" bgcolor=".....">
  
  <!--- 邮件内容 -->
  
  </td>
  
  </tr>
  
  </table>
• 有背景图片的时候，我们要采用这种写法：
  <table background="background.gif" cellspacing="0" cellpadding="0">

图片屏蔽由于图片可以用来侦测邮件的打开率和email地址的有效性。

不少邮件客户端都会默认把邮件中的图片屏蔽，用户需要再点一下才能显示图片。
一旦图片被屏蔽，整个邮件就会变得面目全非，这里有以下一些建议：

• 重要内容尽量避免使用图片，比如标题、链接等；
• 制作一份和邮件内容一样的web页面，然后在邮件顶部写一句话，类似：“如果您无法查看邮件内容，请点击这里查看”；
• 所有图片都要加上alt属性；
• 所有的图片都要定义高和宽；
• 通知收件人把你的发件地址加入白名单。

Outlook 2007的限制由于outlook 2007使用了word的渲染引擎来展现邮件内容，所以很多HTML属性没法得到支持了，比如：

• 背景图片
• css浮动和定位(这个没啥用)
• 自定义列表项的图像(这个也没啥用)
• Flash(反正不放的)
• GIF动画
• 图片的alt属性
• 表单