最近一个月，我们正在研究并实现基于HTML的收发Outlook邮件的方法。
在整个开发过程中，我只想说一件事，我真的很难~~。
如果是第一次创建邮件的html，并将其发送给在邮箱APP (如Outlook )中指定的收件人，您会惊讶于自己写的html是如何出现在邮箱中的。 写的布局和风格为什么很多东西都没有被正确渲染呢？ 明明用浏览器打开自己写的html页面没有问题啊！ 那么，邮件APP如何才能正确呈现我们的html代码呢？
因为公司使用的邮件是Outlook，所以这个笔记是“在Outlook邮箱里编写html邮件如果是其他邮件地址的需求，我个人也觉得很有参考价值~~。
我们不建议首先接受需求，然后立即编写相关代码。 邮件的html和平时写的html http://www.Sina.com/http://www.Sina.com /下面列出了大伟写的文章。 建议在自己编写邮件的html之前，花点时间耐心阅读一下。 如果你熟悉制定的规则，一定能节省很多时间。 可以避免挖洞~
HTML邮件兼容性问题及解决方案
EDM制作要点
Outlook HTML渲染引擎
布局适应_HTML文件在PC移动端完全适应布局的技巧
看看上面的链接，你就知道了大多数的创建规则。 下面是并非一样，根据需要可以阅读合适的样品：
响应型HTML邮件创建的三个实例
如果需要创建响应型html邮件，请阅读创建简单的响应型html邮件
creatingafuture-proofresponsiveemailwithoutmediaqueries
这个会更详细地说明。 介绍很多html用法是不能被识别的的概念。 幽灵table，即只能通过示例demo识别的table语法，无法通过ghost table和http://识别
对于回应式邮件，这非常重要。 简单地说，通过无法识别outlook桌面客户端:div、float、display来实现左右浮动效果，通过http://www.Sina.com/来实现。 无法识别http://www.Sina.com/: http://www.Sina.com /，但可以通过div、float、display实现； 使用F12查看别人网站的代码，虽然看不到ghost table语法，但实际上很可能有人在使用。虽然不能识别http://www.Sina.com/: http://www.Sina.com/outlook移动客户端语法也能识别！ 将上述语法组合使用，可以开发应答式的html邮件！
列举几个一般注意事项。 1.HTML邮件中几乎只有这些元素——table/tr/td/span/img/a。 请尽量避免使用div/p或其他标签。 此外，并非所有邮箱都支持colspan/rowspan属性，因此必须在table嵌套中解析所有布局。
2 .使用内嵌样式
3.CSS (例如浮点、定位等)被过滤以获得边距： 0自动； 它们都不起作用。 display、backgroud-image、margin和padding、position、trans的开头、text-indent不起作用，但padding在td中可用。
4.img标签使用属性“width”和“height”定义长度和宽度。 例如：
imgwidth=' 10 ' height=' 10 ' src=' *.png '/6 .分开书写字体属性。
line-height: 14px； 字体大小： 12px； font-family : ' Microsoft Yahoo '，Arial，sans-serif； color: #999999； 7.table使用以下属性：
widthheightbgcoloralignvalign 8.修改默认行高并添加" MSO-line-height-rule 3360 exactly " :
TD style=' MSO-line-height-rule : exactly； line-height: 36px；' ！ ----/TD9 .有一个使用空白图像占位符的小间隙。
10 .使用ghost table将邮件的html居中
！ doctypehtmlhtmllang=' en ' xmlns=' https://www.w3.org/1999/xtml ' xmlns : o=' urn :方案- Microsoft-com : office : office ' headmetacharset=' utf-8 ' metaname=' vtaname ' --[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 边距：0； } div，td {padding:0； } div {margin:0！ 导入； (/stylenoscriptxmlo : officedocumentsettingso : pixelsperinch 96/o : pixelsperinch/o 3360 officedocumentsettings/xxxxxxxxetings 垫：0； 乱码：正规； background-color:#ffffff；' div role=' article ' aria-role description=' email ' lang=' en ' style='-WebKit-text-size-adjust 360100 %； -ms-text-size-adjust:100%； background-color:#ffffff；' table width=' 100 % ' align=' center ' border='0' cell padding='0' cellspacing='0' role=' presentation ' trtd add