EDM 文件编写规范及注意事项

EDM 是营销过程中比较重要的一种方式，而且在很多软件系统中，也经常会与用户进行电子邮件（Email）的沟通过程。本文档定义了电子邮件（Email）编码规范，便于前端开发工程师为邮件编写 HTML 模板的时候使用。

Web 页面一般使用的是浏览器来进行渲染，而电子邮件多使用的是邮件客户端，如：Outlook、Foxmail、手机客户端APP等。所以，电子邮件要适配这些终端的渲染方式，因此标准和我们平时开发的规范有所不同。

可使用标签

因为邮件过滤机制，只容许表格的布局模式，书写时候多加注意不要使用 flex 或者 block 的布局模式，可通过过滤机制的标签如下：<table>、<img>、<span>

注意事项

1. 使用表格布局，使用 <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 都会裂开，所以需要设置一个背景颜色优化一下页面。

此外注意:

1. 在线地址的长度，不能超过 255 个字符，会导致无法追踪或链接错误。
2. 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 不能使用负边距，如果真的很想达到那个效果，请使用图片裁取的方式或者利用 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 祝您新年快乐”，请使用 “百度祝您新年快乐”

---

参考文章：

1. EDM文件编写规范及注意事项
2. EDM电子邮件CSS和HTML编码规范