邮件模板，请严格按照下面的规则执行。邮件客户端和Web页面的需求不同，在编写代码的时候，考虑的方向也不一样。
1.原则，及思维出发点
1. 不需要考虑DOM节点的精简和结构的优化。
以完成设计样式为最优先。必要时，不必吝啬使用表格嵌套，不必吝啬使用空的表格元素来占据空间。
2. 宁可冗余，也不可缺少必要定义。
3. 充分利用表格的私有属性来布局。width, height, bgcolor, background, align, valign等
4. 可替代性：
在编写html的时候，请思考当你页面的所有图片都被屏蔽时，是否用户还能了解页面的主要内容。
请务必在所有要设置背景图片的元素上，定义背景颜色。
5. 可利用Dreamweaver等工具来协助编写html，但切记，一定要时候做好每行代码的检查。
二：注意事项
1. 为了向前兼容和避免某些浏览器的怪癖，使用html5的!doctype声明，格式如下：
<!DOCTYPE HTML>
2. 主体页面，包括细节处理，尽量使用<table>布局。
3. 不允许在<tr>元素上定义CSS样式，请将样式尽量定义在<td>元素上。（Gmail等邮件客户端会过滤<tr>上的属性）
4. 禁止使用<style type="text/css">来处理主要样式，所有的Web邮件系统都会过滤该标签。因此邮件模板中不能使用伪类（pseudo class）和伪元素（pseudo elements），以及高级选择符。但是，我们仍然可以使用<style>来提升一些比较先进的邮件PC客户端的体验，比如伪类。但必须使用表格和元素样式来完成所有基本样式和布局。
5. 禁止使用<link>来加载外联CSS
6. 可以使用<div>来实现细节的，具有典型块级元素(block)的布局样式。而尽量避免使用<p>，因为我们不容易清除<p>在不同浏览器的默认样式
7. 注意定义图片的替换文字（alt），及替换文字的颜色。
8. 注意a标签在IE6下的蓝框用outline:none 去掉
三：关于样式
1. 文字的处理。
font-* 族的CSS属性不允许使用缩写，请分别定义 font-size, font-weight, line-height, font-family(font-family有可能被过滤)
2. 继承性
注意表格不会继承外部的font等属性，请务必，在每个<td>元素上都定义字体属性和颜色。
3. 背景的处理
不允许使用style="background:url(http://...)"，请使用<td>的属性(attribute) background=“http://...”。（由于CSS背景图片是一种会影响页面渲染速度的定义，因此大多数Web邮件系统会过滤它。）
背景颜色，也请使用表格的bgcolor属性。
4. 对于复杂样式的处理，可以大胆地、大块地切图。
5. 避免尝试让两个table-cell的元素对齐，如果, 一个元素是用具体的宽度定义（width="100"），另一个元素是用百分比来定位( width="50%")
6. 避免使用list-style来处理列表样式，请使用 “ • ” 字符来替代。
7. 避免使用<img>元素拼接的方式，来实现背景大图的分割，尽量使用表格的background
我们知道，在<img>元素下4px空白的问题。
*禁用的，和不建议使用的CSS样式
这些样式，大都是可能引起元素偏移到容器外的样式
禁止使用 position, background, float
特别说明：
margin: margin的使用要非常谨慎，不允许使用margin作为重要的布局依据，不允许使用负margin，避免使用非零和非auto的margin属性。
五：常见问题
1. 如何让邮件在Gmail等Web页面中居中
有几种方式：
a> 在 body上定义style="apx; margin:auto"。注意，在Web邮件中，会自动为你生成一个<div style="apx; margin:auto"> 的元素在最外层。(可以有效利用这一特性，定义背景颜色等样式，和实现其他可能的事情)
而不要尝试自己在邮件模板最外层添加一个带有margin:auto的<div>元素。
b> 使用<center>
当然，不符合标准网页设计的理念,不赞成使用。
2. 如何在邮件的布局中占据空白
请使用空白的<td>元素，设置height属性来起到站位的作用。
六、神奇的补充
在实践中 同事邓小鱼发现在ie67下 这样图片下方会出现3px空隙
<tr> <th height="136" style="background-color:red; overflow:hidden; padding:0;margin:0;"> <img src="img/header.png" height="136" border="0" style="vertical-align:top;display:block;" /> </th> </tr>
当我们把display:block去掉反而消除了空隙，百思不得姐。。。
当我突然想起以前遇到一个bug的时候 我做出如下修改： .
<tr>
<th height="136" style="background-color:red; overflow:hidden; padding:0;margin:0;"><img src="img/header.png" height="136" border="0" style="vertical-align:top;display:block;margin:0;padding:0;" /></th> </tr>
3px空隙神奇的消失了。。。其实 这个是换行符造成的空隙，解决的办法是同一行写完
附：既然说到这个 那就总结一下要解决IE 浏览器图片下方的空隙的三种方法。
1.最简单的也是推荐的一种方法，可以定义 img 标签的属性为：display:block；
http://www.cnblogs.com/cuoreqzt/archive/2013/03/18/2965924.html
2.还有种方法是可以设置图片的父容器字体大小为零，即：font-size:0；
3.最后一种方法，可以定义 img 标签的 vertical-align 属性值为：vertical-align:top | bottom |middle |text-bottom; 中的任意一种即可。
六、关于EDM设计
1、 宽度保持在600到800px（像素）范围
2、 html布局请使用表格布局，居中排版
3、 不要使用滤镜和任何js脚本
4、 html文件大小大概控制在15k以内，不宜过大
5、 html编码请使用gb2312简体中文，国外邮件可用utf-8
6、 不要在文件中包含flash/java script/
7、图片上的链接尽量不要使用地图功能（map），此功能会使邮件被多数邮箱划分为 垃圾邮件！
8、 文件中的链接的长度不能超过255个字符，会导致无法追踪或链接错误
9、 链接地址或图片地址不要包含空格
10、设计上不要使用过多的文字，版面尽量清晰，让主题更加吸引阅读者，以达到更高 的点击率
六、其他注意事项
1、 设计时尽量避免过多的敏感文字，比如：免费、优惠、低价
2、 主题不要太长，尽量18个字左右，并且不要使用—— ! ……等符号，容易产生乱码
3、 可以使用图片实现某些敏感文字的屏蔽，但是图片应切为小图，避免下载时间过长
4、内容和主题能经常更换，如果同一个内容和主题被发送超过200万封，应考虑更换设计。
5、 一些屏蔽关键字 免费 优惠 特惠 特价 地价 便宜 廉价 视频 赚钱 群发 发财 致富 代开 薪水 交友 支付 商机 法宝 宝典 秘密 情报 机密 保密 绝密 神密 秘决