HTML邮件制作规范

以下内容有些是别人总结的，有些是自己在工作中总结的。

模板最佳尺寸：显示宽度550px-750px，模板高度控制在一屏以内。

1、 用table+css方式构建模板

　　Div+css布局不完全被邮件客户端支持，所以无法使用div+css布局。

2、 可以使用editplues，或者UltraEdit等工具制作html，但务必使用可视化工具检查嵌套情况推荐Dreamweaver

3、 插入的图片要定义宽度，高度，针对（editplues，UltraEdit等工具更要注意这一点）

4、 严禁使用背景图片

　　在outlook2007中，背景图片将无法显示，其他邮件客户端可正确显示背景图片。

　　Gmail也不支持css里面的背景图，

5、 严禁使用map标记形式

　　造成后期可视化统计困难

6、 不使用word转换的html文件作为模板

7、 不要用外部链接的css文件

  <link rel="stylesheet" rev="stylesheet" type="text/css" href="/css/new/common.css" media="all" />

  这样是抓取不到css的，要写在html，head里面

8、网站或者论坛客户自己有服务器的涉及上传模板文件的按照这个格式

　　http://www.abc.com/file/0902_tr/edm.html

　　http://www.abc.com/file/0902_tr/edm_online.html

　　这样的格式系统无法抓取

　　http://www.abc.com/file/0902_tr/

9、模板中的图片请使用绝对路径,完整的URl

　　<img src="http://www.abc/123.jpg" width="140" height="123" border="0" ></img>

　　<img src="http://www.abc/456.jpg" width="140" height="123" border="0" ></img>

10、一个td里面不要放多个图片，请放在不同td里面，

　　<table width="136" border="0" cellspacing="0" cellpadding="0">

　　<tr>

　　　　<td><img src="http://www.abc/123.jpg" width="140" height="123" border="0" ></img></td>

　　　　<td><img src="http://www.abc/456.jpg" width="140" height="123" border="0" ></img></td>

　　</tr>

　　</table>

11、<img src="http://444/edm1_03.jpg" width="570" height="52"      border="0" />

12、不规范的换行会让图片丢失

=========================以下是我自己总结的===========================

1、 在outlook里面很多css属性不支持（比如：margin，overflow，text-overflow等）

　　这是查看各种邮箱属性支持情况的网站

　　https://www.campaignmonitor.com/css/

2、在outlook上不能用背景图片，不能用网络图片加载。

3、在outlook上图片设置的宽高是不管用的

4、在outlook上实现dom结构居中要用align=center

5、outlook会自动加大行距间距

6、页面元素之间有间距可能是html里面混入了$nbsp;(也就是空格字符)

7、align=center在不同的浏览器的不同的邮箱解读代码是不一样的，纠错能力也不一样，

8、 邮件里文字的居中就用text-align，dom的居中就用align=center

9、Foxmail里面要想实现超出的文本不折行，超出部分显示省略号，建议不要直接把文本放到td下面，而是在td下面创建a标签，把内容放到a标签下，然后相应样式写在a标签里。

10、Foxmail不支持https的图片路径

11、有些邮箱上页面结构显示不正确的问题如果和以上内容无关的话建议采用别的dom结构来试试。

12、outlook邮箱中，多个连续的” ”或&nbsp;符号不受宽度样式的限制，会一直往后延伸。

　　目前前端没有找到解决办法。

PS:

在浏览器里面浏览正常的模板，不一定正常！！！，要用发送系统抓取模板新建任务，发送到邮箱用浏览或者用客户端查看，邮件客户端软件和邮箱服务商的html解析水平基本停留在table布局阶段，而且出于安全考虑也有很多禁忌，请使用table+css布局，用Dreamweaver修改模板后还要查看html代码部分，空连接，怪异的或者过多的alt,title值（建议不超过30个汉字），没有宽高的图片都会造成邮件显示错误.

建议的测试环境，操作系统xp，win7，邮件客户端outlook2007，outlookexpre，foxmail6.0以上

Ie下的qq邮箱，126邮箱，hotmail邮箱，搜狐邮箱，新浪邮箱等等

有精力的话可以再在火狐下面再用以上邮箱测试测试

很多人用outlook2007，所以要着重测试.

参考资料

1、http://blog.csdn.net/sykent/article/details/8584637