EDM 是营销过程中比较重要的一种方式，而且在很多软件系统中，也经常会与用户进行电子邮件（Email）的沟通过程。本文档定义了电子邮件（Email）编码规范，便于前端开发工程师为邮件编写 HTML 模板的时候使用。
Web 页面一般使用的是浏览器来进行渲染，而电子邮件多使用的是邮件客户端，如：Outlook、Foxmail、手机客户端APP等。所以，电子邮件要适配这些终端的渲染方式，因此标准和我们平时开发的规范有所不同。
可使用标签
因为邮件过滤机制，只容许表格的布局模式，书写时候多加注意不要使用
flex
或者
block
的布局模式，可通过过滤机制的标签如下：
<table>
、
<img>
、
<span>
注意事项
1. 使用表格布局，使用
<table>
标签
<table>
因为大多邮件客户端对 CSS 的支持度不高，特别是
<p>
和
<div>
标签，有些邮箱就会把这些标签直接过滤掉，而 90% 邮箱客户端对
<table>
的兼容性很好，而以上的并不能得到很好的兼容，所以一定要用
<table>
。
同理，也不要使用
flex
和
block
这些布局模式，在一些电子邮件客户端，对这些元素的支持不好，容易展示错乱。
建议书写格式：
<table
width="720px"
border="0"
cellspacing="0" // 表格单元格间距
cellpadding="0"
style="background: red;">
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
2. 必须使用内联的样式
CSS 样式不能使用嵌入和外联方式，一定要使用内联方式。
3. 记得使用 utf-8 的编码方式
你没办法知道用户使用的邮件接收方式，这完全是一个黑盒，所以不能依赖用户使用的邮件客户端，一定要自己设置编码方式，以免错乱，字体乱码等。
4. 文件大小不要超出 15k
我们肯定是希望邮件被扔在垃圾箱，当
HTML
代码超过 15k 时候，容易被扔进垃圾箱里面。为了达到这个目的，我们的图片也需要压缩。
5. 图片的注意事项
5.1 背景图要使用在线地址或者是
baes64
如果是相对地址，EDM 时候是找不到对应的资源的，需要转为在线地址或者
base64
的格式，当然也需要考虑图床是否稳定的问题。另外，避免背景图图裂或者不识别的问题，记得设置一个类似的背景色，不然布局会展示很奇怪。
因为 EDM 还是很大概率会被扔进垃圾桶的，书写时候需要多加注意扔进垃圾桶后的展示效果。以发送到谷歌邮箱被扔进垃圾桶为例，图片都会直接裂开，无论是
img
还是
background
都会裂开，所以需要设置一个背景颜色优化一下页面。
此外注意:
- 在线地址的长度，不能超过 255 个字符，会导致无法追踪或链接错误。
- outlook 对背景图片不识别。
建议书写格式：
background: url('https://xxxxxxxx');
background: url('')
5.2. 图片使用添加
alt
属性
这个操作也是为了避免图裂也能让用户知道这个图是什么，试想一下，同样是扔进垃圾箱，如果图一有展示
alt
属性说明是什么内容，图二什么都没有展示只有一个图裂的样式，你会选择打开哪一个？
建议书写格式：
<img src="http://xxxxx/xxx.jpg" alt="这个图的解释" >
5.3. 如果只有一张图，建议开 2-3 张图展示
有可能因为只有一张图，直接过滤掉扔进垃圾桶了，可以拆封 2-3 张图，中间混杂一些文字会好一点。
5.4. 不要使用 png 格式的图，请使用 jpg 或者是 gif 格式的图
如果一定要动态的效果，请使用
gif
，不要使用 FLas、frames.
5.6. 记得加上
vertical-align: bottom;
不然图片可能位置乱跑，达不到想要的效果哦！
5.7. 图片名称不要带有
ad
的字样，否则会被识别成过滤的广告。
**6. 不要使用
position
,
margin
**
position
margin
-
position
邮件客户端兼容性不高，比方说谷歌邮箱这里不生效。 -
margin
不能使用负边距，如果真的很想达到那个效果，请使用图片裁取的方式或者利用
table
的
tr
或者
td
来达到效果。 -
margin
部分邮件
margin-top
，
margin-bottom
是不生效的，像垂直方向的定位问题，建议还是利用
table
表格的方式来实。
7. 超链接注意事项
邮件会自己识别链接和邮件，即使在书写
HTML
代码的时候没有书写
<a>
标签，还是会自动转为超链接，样式为蓝色+下划线。
如果对这部分的样式有额外的要求，一开始就书写成超链接的形式，避免样式覆盖哦！
建议书写格式：
<a
style="color: #2ac877; text-decoration: none;"
href="https://xxxxxxxxx"
target="_blank">
https://xxxxxxx
</a>
// 如果不想另外打开一个页面，只是单纯让他为文本的话，建议这么书写
<a
style="color: #000000; text-decoration: none;cursor:default;"
href="javascript:return false;">
http://xxxxxxxxxx
</a>
8. 其他需要注意事项
-
换行请使用
<br/>
,不要使用
<div>
、
<p>
-
不要使用
XHTML
,请使用
HTML
- 内联样式的书写格式，不要使用属性简写
建议书写格式：
<span style="font-size: 12px; font-weight: bold;">超级无敌小湾娘</span>
- 邮件主题控制 18 字内，避免使用————!.. 符号，以免乱码。同时也不要加入网站地址的信息，比方说，“www.baidu.com 祝您新年快乐”，请使用 “百度祝您新年快乐”
参考文章：