HTML邮件内容也是HTML，但与我们在网页上使用的HTML不同。处理，不会按照你写的原始HTML显示。在桌面和移动设备上呈现电子邮件的方式可能有上百万种不同的组合。尤其是大名鼎鼎的OutLook，从OutLook2007开始，就使用WordHTML引擎进行渲染。为了安全起见，整封邮件都被退回到了2000年前。为了电子邮件兼容性，您必须使用许多过时的标签和属性。并且会持续无数年，因为虽然一切都会结束，但OutLook永远存在。“我们将继续使用Word来创建电子邮件，因为我们认为它是电子邮件的最佳选择。”-Outlook团队说。因为微软一向特立独行，让OutLook成为最难啃的骨头。因为OutLook支持的标签和属性很少，只要兼容OutLook，其他邮件客户端基本没有问题。如果您开始开发HTML邮件并计划致力于其跨邮箱的兼容性，那么以下建议将非常有用。基本规则布局使用table，这几乎是HTML邮件和普通HTML页面最大的区别，因为每个邮箱在解析div+css的布局（比如float/position等css都会被过滤掉，甚至margin:0auto;不起作用），基本上所有主要邮箱都会被混淆地解析，所以老式的表格布局是最好的选择。这意味着HTML邮件中几乎只有这些元素——table/tr/td/span/img/a，尽量避免使用div/p或其他标签。而且并不是所有的邮箱都支持colspan/rowspan属性，所以所有的布局都需要使用表格嵌套来解决。使用表格布局带来的最直接的问题就是会产生额外的空白像素，所以需要养成给每个表格添加边框、单元格内边距、单元格间距、边框折叠属性的习惯。这些属性：正文外的内容isalmostUseless我们知道完整的HTML包括DOCTYPE声明，html和head标签及其内容，body标签，对于在iframe中显示邮件内容的邮箱来说是可以的，上面的结构会被保留，但是有些邮件（比如Gmail）直接包含在div中，对安全性要求极高。为了安全起见，邮箱默认会删除上面的结构，写了几乎没用。如果可能，尽量把内容写在正文中。甚至建议从表格开始写，直接抛弃DOCTYPE/html/head/body标签。使用内联样式与开发普通的HTML页面是一样的。HTML电子邮件仍然离不开CSS。HTML电子邮件不支持外部样式文件。上面说了head标签很有可能被删除，所以不要试图在head标签里面写style标签。.那么在正文中写样式标签安全吗？不是！一个典型的Gmail邮箱会去除HTML邮件中的所有样式标签，这意味着只有内联样式属性中的CSS是唯一可靠的样式信息。如果可以使用属性，请不要使用样式。使用样式属性是不安全的。很多邮箱会强行修改特定标签的属性。比如在OutLook中，这样设置图片的宽高是无效的：正确的设置方法：所以在有属性可以实现样式效果的情况下尽量使用属性.常用的属性有：widthheightbgcoloralignvalign...所有的样式都是单独指定的，在写页面的时候使用CSS的继承会给我们带来很多方便，但是涉及到HTML邮件，一切都必须说NO！其实继承规则还是有效的，只是大部分邮件不能完全继承样式，邮箱默认的样式也会给邮件干扰带来一些头疼。比如font-family，如果要在OutLook中改变字体，至少要在每个表格中指定font-family，而在QQ邮箱中，甚至要为每个td设置font-family才能生效。所以需要为每个标签单独指定样式，尽量不要依赖继承，即使这样很繁琐。脚本？想都别想！如标题(￣▽￣)》背景图片相关样式内容的内容中，背景可以设置颜色，但是图片会被过滤掉，也就是说背景图片不能通过设置CSS.不过有一个很有意思的元素属性，也叫background，里面可以定义图片路径，但是功能有限，比如不能定位背景图片等，比如给背景添加背景一个单元格，你必须这样写：当然，不使用背景图是最好的选择╮(╯-╰)╭指定width和height属性是因为在一些邮箱中，图片默认是不加载的，加载前往往需要用户的许可。所以high指定width可以让邮件在没有图片之前保持良好的尺寸结构使其看起来像，并且alt属性可以清楚地告知图片的内容，以便用户选择是否下载。如果项目需要（比如需要适配Retina高分屏），宽高属性就更加必不可少，而且由于某些outlook版本的怪异表现，宽高属性必须不加单位！一定不要加单位！一定不要加单位！重要的事说三遍。否则你想要这样的东西：它实际上看起来像这样：添加单位会导致某些版本的OutLook无法正确识别，导致显示的是图片的实际宽高，而不是我们设置的。当然，在正规的项目中，设置的宽高要尽量和实际的宽高保持一致。marginandpaddingOutlook2007-2013不支持图片的margin和padding样式，需要的时候可以试试hspace和vspace属性：或者图片本身添加额外的空间（这个太LOW了，不推荐）文本相关字体HTML邮件中，font-family只支持系统字体，不支持自定义字体，不支持字体缩写。颜色尽量不要使用缩写：font:12px/14pxArial,sans-serif;颜色：#999；需要写成：line-height:14px;字体大小：12px；font-family:"MicrosoftYahei",Arial,sans-serif;颜色：#999999；对于粗体，我们可以使用b标签代替CSSfont-weight。如前所述，CSS样式永远不能用于可以通过HTML标记和属性解析的样式。行高在OutLook中会有一个默认的最小行高，特别是当font-family设置为微软雅黑时，默认行高几乎是Word中行间距的两倍，如果line-height设置值小于默认值行高，无论你设置多少，始终使用默认值。在许多情况下，这是无法忍受的。幸运的是，有一个神奇的mso-line-height-rule，在使用行高height-rule:exactly时加上mso-line-；可以让行高一直等于我们设置的值。这只是一个MicrosoftCSS属性，对其他没有影响客户。而且这个属性只在块元素上有效，所以如果你想在font和span上使用它，就去睡觉吧。使用前：使用后：不过这个实现方式有点瑕疵，就是会导致大字体无法垂直居中，大家可以自行选择（lll￢ω￢）参考Word2007HTMLandCSSOutlook2007中的呈现功能制作HTML的要点你应该知道的EDMOutlookHTML呈现引擎
