Description
背景
产品大大让美化下发给用户的邮件内容。还有之前写过EMD，自认为不难，但是实际做的时候发现却没那么容易。因为之前写的EDM页面都是基于公司公共页面结构，自己只是填充一些内容。不过好在会用Google，网上确实不少资源。
EDM（Email Direct Marketing）电子邮箱营销
都2022年谁还用EDM呀。国内用户手机不离手，但是海外用户难以使用短信、app通知触达。EDM是触达海外用户的重要方式。
考虑的问题
- 限制&兼容性
邮件内容最终是展示在邮箱客户端（APP，网页），邮箱客户端对HTML支持程度比较关键，遗憾是的支持都比较弱，并且兼容性还差。 - 移动端适配
限制 & 注意事项
其他博客里列举了很多，这里汇总比较重要的。
1. table布局
采用table元素布局。即：
table->tr->td作为容器；- 以
table，tr的属性实现对齐方式。
刚开始不太习惯，并且table本身也带有很多默认的属性，导致实现起来比较困难。
2. 内联样式
尽量采用内联样式。
如果要使用style标签声明样式，则最好加上!import。记得把style标签放在body里，不要放在head标签里，因为有些邮箱会忽略head标签内容。
3. 图片的使用
图片估计是唯一可以使用的外部资源了，但是需要注意的是
- 有些邮箱默认不展示图片；
- 图片地址要使用绝对地址。
实战
重置table默认样式
通常会重置table的border, cellspacing, cellpadding属性，并且指定width。
<table border="0" cellpadding="0" cellspacing="0" width="100%">
</table如果table占据整行，最好也加上min-width: 100%样式，因为目前在IOS gmail遇到table宽度完全由内容决定，即指定width="100%"无效，效果如图（期望结果：表格和按钮占据整行）：
综上最终table样式如：
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%;">
</table移动端适配
利用媒体查询@media
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>EDM</title>
<style type="text/css">
@media only screen and (max-width: 600px) {
.email-table {
width:100% !important;
height:auto !important;
box-sizing: border-box
}
}
</style>
</head>
<body>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600px" class="email-table">
<tr>
<td>
<!-- 正文 -->
</td>
</tr>
</table>
</body>
</html>但是有些邮箱并不支持媒体查询（目前测试发现有华为P20 内置邮箱）
容器居中
- 方式1：
table元素的align特性
<table align="center" />- 方式2:
div元素的align特性
<div align="center">
<table />
</div>元素对齐
td（有时也可用tr）元素的 align，valign特性。
垂直（水平）间距
-
方式1:
td指定padding
table(tbody,tr)无法指定padding的，因为表格的内容展示在td里，所以只能给td指定padding。 -
方式2: 利用空
td的高度(宽度)实现垂直（水平）间距。
注意windows版outlook会忽略空td的高度，不过可以这样写避免这个问题：
<td height="16px" style="font-size:0;"> </td>为了避免空格 高度超过单元格高度可以指定font-size:0;。
border实现
- 分割线：利用空
td制定CSSborder属性 - 容器边缘
table本身有border属性，但基本都赋值为0，如果真要实现border效果，可采用CSSborder属性。
记得在td上采用border属性控制。
border-radius实现
可以给table或者td指定border-radius样式，但如果采用table实现，则要border-collapse: separate;
很遗憾windows版outlook不支持
经验总结
display: inline-block & 圆角按钮
Outlook并不支持该属性。
内容结构不能强依赖图片
有些邮箱默认不加载图片，一定要保证图片不加载是内容结构也能正常阅读。
一定先多看看效果
网上很多针对HTML email的校验工具和发送邮件服务，但基本都收费。屌丝就发给自己看开，土豪的话可以借助工具。
多看看别人怎么写的
- 每个人的邮箱都收到不少各式各样的邮件（尤其是广告类的），使用Web邮箱打开邮件，F12下看看别人怎么做的。
- PC邮箱（如Outlook）都支持把邮件导出html格式的，可以导出看看他人怎么实现的。
奇葩的Outlook
Outlook与Word等共享HTML渲染引擎。几乎仅支持HTML2，其能力堪比IE5！
mac版Outlook表现到是很好。