其实网上有关于邮件模板开发的文章其实不少，但是都是面向开发人员的，对于非技术的同事有一定的门槛，因此我将邮件模板系列分为三个部分，以便朋友们能更快的找到自己需要的。前两篇文章 “科普篇”、“基础篇”分别面向产品设计同事和零基础的使用邮件模板的同事，下面的“开发篇”主要是面向邮件模板的前端开发的同事。“开发篇”参考了不少网上的文章，结合我在开发中遇到的一些坑，做了一些汇总：
html:
1、!Doctype声明：为了向前兼容和避免某些浏览器的怪癖，使用html5的!doctype声明，格式如下：<!DOCTYPE HTML>
2、不需要考虑DOM节点的精简和结构的优化。 以完成设计样式为最优先。必要时，不必吝啬使用表格嵌套，不必吝啬使用空的表格元素来占据空间。
3、主体页面，包括细节处理，尽量使用<table>布局。
4、不允许在<tr>元素上定义CSS样式，请将样式尽量定义在<td>元素上。（Gmail等邮件客户端会过滤<tr>上的属性）
5、禁止使用<style type=”text/css”>来处理主要样式，所有的Web邮件系统都会过滤该标签。因此邮件模板中不能使用伪类（pseudo class）和伪元素（pseudo elements），以及高级选择符。
6、禁止使用<link>来加载外联CSS
7、可以使用<div>来实现细节的，具有典型块级元素(block)的布局样式。而尽量避免使用<p>，因为我们不容易清除<p>在不同浏览器的默认样式
8、注意定义图片的替换文字（alt），及替换文字的颜色。
css：
1、充分利用表格的私有属性来布局。width, height, bgcolor, background, align, valign等
2、在编写html的时候，请思考当你页面的所有图片都被屏蔽时，是否用户还能了解页面的主要内容。 请务必在所有要设置背景图片的元素上，定义背景颜色。
3、文字的处理。font-* 族的CSS属性不允许使用缩写，请分别定义 font-size, font-weight, line-height, font-family(font-family有可能被过滤)
4、注意表格不会继承外部的font等属性，请务必，在每个<td>元素上都定义字体属性和颜色。
5、背景的处理 不允许使用style=”background:url(http://…)”，请使用<td>的属性(attribute) background=“http://…”。（由于CSS背景图片是一种会影响页面渲染速度的定义，因此大多数Web邮件系统会过滤它。） 背景颜色，也请使用表格的bgcolor属性。实际使用中，尽可能不要出现背景图，上面有文字的处理结构。建议将文字合成到图片上，再加载到<img>标签上。
6、避免尝试让两个table-cell的元素对齐，如果, 一个元素是用具体的宽度定义（width=”100″），另一个元素是用百分比来定位( width=”50%”)
7、避免使用list-style来处理列表样式，请使用 “ • ” 字符来替代。
8、禁止使用 position, background, float
9、margin: margin的使用要非常谨慎，不允许使用margin作为重要的布局依据，不允许使用负margin，避免使用非零和非auto的margin属性。
10、<a> 在 body上定义style=”width:apx; margin:auto”。注意，在Web邮件中，会自动为你生成一个<div style=”width:apx; margin:auto”> 的元素在最外层。(可以有效利用这一特性，定义背景颜色等样式，和实现其他可能的事情) 而不要尝试自己在邮件模板最外层添加一个带有margin:auto的<div>元素。 <b> 使用<center>
11、要使用完整的6个完整的十六进制编码，如果使用三个简写字符，不总是有效