Email 邮件模板
带格式的邮件，其实就是一张网页，正式名称叫做HTML Email。它能否正常显示，完全取决于邮件客户端。
大多数的邮件客户端（比如Outlook和Gmail），会过滤HTML设置，让邮件面目全非。
编写HTML Email的窍门，就是使用20年前的网页制作方法。下面就是我整理的编写指南。
1. Doctype
- 目前，兼容性最好的Doctype是XHTML 1.0 Strict，事实上Gmail和Hotmail会删掉你的Doctype，换上这个Doctype。
- 使用这个Doctype，也就意味着，不能使用HTML5的语法
<!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" />
<title>HTML Email编写指南</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
</html>2. 布局
- 网页的布局（layout）必须使用表格（table）。首先，放置一个最外层的大表格，用来设置背景。
- 表格的 border 属性等于1, 是为了方便开发。正式发布的时候，再把这个属性设为0。
- 在内层，放置第二个表格。用来展示内容。第二个table的宽度定为600像素，防止超过客户端的显示宽度。
- 一般宽度在600px 或者 700px 左右
- 邮件内容有几个部分，就设置几行（row）。
1、一定要记住 只能使用 table 布局,table布局，table布局
2、背景图或者文字，可以一起切成图片,再转成 base64;因为在outlook中设置背景图始终无效
3、能直接先 table中属性的 就尽量不要写到style中 如 <td width="100px" style="width:100px">
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
<tr>
<td> Row 1 </td>
</tr>
<tr>
<td> Row 2 </td>
</tr>
<tr>
<td> Row 3 </td>
</tr>
</table>3. 图片
- 图片是唯一可以引用的外部资源。其他的外部资源，比如样式表文件、字体文件、视频文件等，一概不能引用。
- 有些客户端会给图片链接加上边框，要去除边框。
- 需要注意的是，不少客户端默认不显示图片（比如Gmail），所以要确保即使没有图片，主要内容也能被阅读。
- 图片可以转换成 base64 放在页面中
img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
a img {border:none;}
<img border="0" style="display:block;">4. 行内样式
如果想表达
<p style="margin: 1em 0;">
要写成下面这样：
<p style="margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0;">例子：
<table border="0" cellpadding="0" cellspacing="0" width="730" style="margin-left: auto;margin-right: auto; border-collapse: collapse;font-family:'微軟正黑體',Helvetica,Arial,sans-serif">
<tbody>
<tr>
<td style="padding-top:10px;">
<!-- 1、收款单信息头部 -->
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;line-height:1.3;border-bottom: 1px solid #404040;font-family:'微軟正黑體',Helvetica,Arial,sans-serif">
<tbody style="width:100%;">
<tr style="text-align: right;font-size:14px;">
<td colspan="4">
<p style="margin:0px;text-align: right;font-size:18px;color:#00a1e9;"> 旅客必須取得印花收據，方可獲得『旅遊業賠償基金』保障 </p>
<p style="margin:0px;text-align:right;"> Travellers must obtain receipts with levy stamps to have </p>
<p style="margin:0px;text-align:right;"> protection by the Travel Industry Compensation Fund. </p>
</td>
</tr>
<tr>
<td colspan="4">
<img style="border:none" src="" alt="">
</td>
</tr>
<tr style="font-size:14px;">
<td colspan="4" style="padding-bottom:20px; text-align: right;color:#89898a;border-bottom: 1px solid #404040;">
<span> ☐ 客人存本 </span>
<span> ☐ 分行存本 </span>
<span> ☐ 財務存本 </span>
</td>
</tr>
<tr>
<td colspan="4" style="padding-top:10px;padding-bottom: 10px;font-weight: bold;font-size: 18px;">
付款人 <span class="pl5"> 李冰 </span>
</td>
</tr>
<tr style="line-height:32px;width:100%;">
<td colspan="4" height="35px" style="width:100%;background-color:#606060;">
<span style="font-size:18px;font-weight: bold;color:#fff;padding-top: 5px;padding-bottom: 5px;padding-left: 5px;"> 收款单信息 </span>
</td>
</tr>
<tr style="font-size:14px;border-bottom: 1px solid #404040;">
<td width="25%;" height="35px" style="font-weight: bold;"> 收款編號 </td>
<td width="25%;" height="35px"> H00000076 </td>
<td width="25%;" height="35px" style="font-weight: bold;"> 总社查询热线 </td>
<td width="25%;" height="35px" > 2108 8888 </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td> 第二部分内容 <td>
</tr>
......
<tr>
<td> 第N部分内容 <td>
</tr>
.......
</tbody>
</table>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
