编写Outlook html邮件

最近1个月的时间，都在研究和实现怎么将HTML基于Outlook邮件发送和接收。
整个开发过程下来，只想说一句，我真的太难了~~

如果是第一次编写邮件html，并将其通过Outlook等邮箱应用发送给指定的收件人，你会惊讶的发现自己写好的html怎么在邮箱里显示就完全乱套了？！写好的布局和样式怎么很多都没有被正确的渲染出来？？明明在浏览器打开自己写的html页面是没有任何问题的呀！所以，怎么样才能让邮件应用正确的渲染我们的html代码呢？

由于公司用的邮件是Outlook, 所以这篇笔记是针对“在Outlook邮箱里编写html邮件。如果是其他邮箱的需求，个人觉得也是可以借鉴一下的~~

首先，不建议在接到需求以后，立马开始编写相关代码。

因为编写邮件html和平常写的html并非一样。因为很多html用法是不能被识别的。下面列出一些大佬写的文章，建议在自己动手编写邮件html前，花一些时间耐心阅读一下，熟悉编写的规则，一定会给你节省很多时间，避免采坑~

HTML 邮件兼容问题与解决方案
EDM制作要点
Outlook HTML渲染引擎
布局自适应_HTML 文件在PC&移动端完美自适应布局的技巧

看完上面的链接，你会了解大部分的编写规则。接下来是示例demo，可以根据自己的需求选择阅读相应的示例:
响应式 HTML 邮件制作之三个实例

如果你的需求是要编写响应式的html邮件，可以阅读：

制作简单的响应式HTML邮件
Creating a Future-Proof Responsive Email Without Media Queries

这上面将讲解地更详细，会讲到ghost table的概念：幽灵table，即：只能被outlook桌面客户端识别的table语法，该语法将无法被outlook移动客户端和网页浏览器识别。

对应响应式的邮件来说，这点非常重要，简单总结来说就是：

outlook桌面客户端：无法识别div、float、display实现左右浮动效果，使用ghost table来实现；
outlook网页端：无法识别ghost table，但能使用div、float、display可以实现；如果你使用F12查看一些别人网站的代码，你也是查看不见ghost table语法的，但实际上人家很可能就是用了的！
outlook移动客户端：无法识别ghost table，但能使用div、float、display可以实现；还能识别媒体查询语法！

可以将上面的语法结合一起使用，就能开发响应式的html邮件了！

列出几个常见的注意事项：

1.HTML 邮件中几乎只有这几个元素——table / tr / td / span / img / a。尽量避免使用 div / p 或是其他标签。而且并不是所有邮箱都支持 colspan / rowspan 属性，所以所有布局都需要使用 table 嵌套解决。
2.使用行内样式
3.float、position 等 CSS 都会被过滤，甚至 margin: 0 auto; 都不起作用.display、backgroud-image、margin和padding、position、trans开头、text-indent没用，但padding可以用在td上。
4.img标签使用属性“width”和“height”定义长和宽。如：

<img width="10" height="10" src="*.png" />

6.字体属性分开写。

line-height: 14px;
font-size: 12px;
font-family: "微软雅黑", Arial, sans-serif;
color: #999999;

7.table使用以下属性：

width
height
bgcolor
align
valign

8.修改默认行高，添加“mso-line-height-rule: exactly”：

<td style="mso-line-height-rule: exactly; line-height: 36px;"><!-- ... -->
</td>

9.有一些小间隙会使用空白图片占位。
10.使用ghost table 居中邮件html

<!DOCTYPE html>
<html lang="en" xmlns="https://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="x-apple-disable-message-reformatting"><!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge" /><!--<![endif]--><title></title><!--[if mso]><style type="text/css">table {border-collapse:collapse;border-spacing:0;margin:0;}div, td {padding:0;}div {margin:0 !important;}</style><noscript><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml></noscript><![endif]-->
</head>
<body style="margin:0;padding:0;word-spacing:normal;background-color:#ffffff;"><div role="article" aria-roledescription="email" lang="en" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#ffffff;"><table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"><tr><td align="center">[content goes here]</td></tr></table></div>
</body>
</html>