转：写HTML邮件的建议及规范

http://www.ncxd.com/blog/article/1.html

 

 

由于工作需要,要做几个html格式的邮件页面.由于各大邮箱服务网站对源码过滤的不同.需要让页面尽量兼容.

通过俺们伟大的百度,搜到了两篇文章:

• 如何编写兼容各主流邮箱的HTML邮件By 大米 2008.4.28
• Email页面代码书写建议及规范 2008.4.30

 这里摘录一下重点:

 对于纯文本邮件：

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

对于HTML邮件：

1. 邮件标题不要超过18个字。
2. HTML代码和图片尽量不要超过50kb。
3. 页面宽度推荐500px，最大不要超过600px。
4. 避免使用边缘的、非主流的HTML技术。
5. body和meta之类的标签是可以无视的，因为在很多邮箱系统里它会被过滤
6. 不使用css来布局，应该使用表格来布局。
7. 不要用外联样式表，不要写<style>标签、不要写class，所有CSS都用style属性，什么元素需要什么样式就用style写内联的CSS。
8. 不要在style里面写float、position这些style，因为会被过滤。那么如何实现左右布局或者更复杂的布局呢？用table。
9. 少用图片，邮箱不会过滤你的img标签，但是系统往往会默认不载入陌生来信的图片，如果用了很多图片的邮件，在片没有载入的情况下，丑陋无比甚至看不清内容，没耐心的用户直接就删除了。图片上务必加上alt。
10. 不使用Flash、Java、Javascript、frames、i-frames、ActiveX 以及 DHTML
11. style内容里面background可以设置color，但是img会被过滤，就是说不能通过CSS来设置背景图片了。但是有一个很有意思的元素属性，也叫background，里面可以定义一个图片路径，这是个不错的替代方案，虽然这样功能有限，比如无法定位背景图片了，有总比没有好。例如要给一个单元格加一个背景，必须这样写：
    <td background=”http://image1.koubei.com/images/common/logo_koubei.gif”></td>
12. div模式的邮箱不支持flash，iframe模式的有待验证。

最后提一句，sohu的邮箱很怪异，会在每个文本段后面加一个空格，导致原本正常的排版一行放不下而换行，从而使某些布局错乱。所以，如果你要兼容sohu邮箱的话，遇到一些紧凑的布局就要格外小心了，尽量减少文本段的数量，留足宽度。
 

图片屏蔽规则

Blocking Issue	AOL v. 6.0-9.0	Gmail	Hotmail	Yahoo!	Outlook 2000/XP	Outlook 2003	Outlook Express w/SP2	Outlook Express w/o SP2
外链的图片是否默认被屏蔽	Yes	Yes	No	No	No	Yes	Yes	No
用户能否设置是否屏蔽图片	Yes	No	Yes	Yes	Yes	Yes	Yes	Yes
能不能让用户点击某个按钮就显示邮件中的图片	Yes	Yes	Yes	No	No	Yes	Yes	N/A
当发件人在用户的联系人列表里时是否默认显示图片	Yes	No	Yes	No	Yes	Yes	Yes	Yes
发件人在ISP白名单中时能不能默认显示图片(国内好像没这个概念)	Yes	N/A	Yes	No	N/A	N/A	N/A	N/A
图片被屏蔽时是否显示alt属性	No	Yes	No	No	No	No	No	N/A
预览时显示windows的主题样式	No	No	No	No	Yes	Yes	Yes	Yes

国内用户常用的Foxmail似乎没有屏蔽邮件内图片的功能，我也找不到相关设置的地方。

一旦图片被屏蔽，整个邮件就会变得面目全非，这里有以下一些建议：

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

Outlook 2007的限制

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

1. 背景图片(这一点很重要！)
2. css浮动和定位(这个没啥用)
3.  自定义列表项的图像(这个也没啥用)
4.  Flash(反正不放)
5. GIF动画
6.  图片的alt属性(值得注意)
7.  表单(反正不放)
    

上面的信息都是08年上半年做的总结。随着互联网的发展，可能以上信息的正确性会有所改变，不过目前来说注意这些就够了。

比方说我写了一份外联远程css文件的html邮件。发往126跟tom的邮箱。126过滤掉了css。tom就没有。但是通过foxmail接收126这封邮件的时候，外联样式表又有了