编写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 都会被过