脆弱的HTML邮件模板

在开展咱们的项目时，在一些方面，如：注册确认、营销推广等，都须要以给用户发邮件的方式，进行沟通，可是咱们编写的HTML邮件，不少主流邮箱都会或多或少的过滤掉一些东西，因此就要考虑如何编写才是能兼容各类。

本文原创发表于所问数据HT前端团队：ht.askingdata.com/article/5b9…

模板问题

1. iframe为表明的模版不支持特殊标签包括html5新特性：如：button、nav、footer，这些会被过滤掉。
2. div为模板，不支持定义style类名的方式写样式，会被过滤掉
3. 没法使用@media作自适应布局
4. 没法引入外联样式，好比bootstrap。
5. css3样式大部分不支持

解决思路：

先从总体布局方式提及，常见的两种方式就是iframe和div。 首先iframe它其实已是一个被废弃了，可是在16三、sina等这类邮箱，它是在用iframe的。至于为何会用iframe……

1. iframe可以原封不动的把嵌入的网页展示出来。
2. 若是有多个网页引用iframe，那么你只须要修改iframe的内容，就能够实现调用的每个页面内容的更改，方便快捷。
3. 网页若是为了统一风格，头部和版本都是同样的，就能够写成一个页面，用iframe来嵌套，能够增长代码的可重用。
4. 若是遇到加载缓慢的第三方内容如图标和广告，这些问题能够由iframe来解决。

第二种布局table，为何要用table代替div缘由以下：

1. Div+css布局不彻底被邮件客户端支持
2. Div+css邮件的机制很容易致使css不能正常解析

由于head里面的内容会被过滤掉的缘由，咱们不要写<style>标签、不要写class，全部CSS都用style属性，什么元素须要什么样式就用style写内联的CSS。因此说能够的话，就用标签的自带属性，也是比较方便的。table属性是咱们整个邮件的重要部分，因此它的一些自带属性，你们能够去网上搜索一下，都是比较基础的，在这里就不一一列举了。

回到样式上，其实直接写内联样式的话，是比较麻烦的，因此，咱们在写样式的时候，能够先以class的方式书写，其后使用：tonny-zhang.github.io/pages/css_f… 将内联样式转换成嵌入样式。

没法使用@media，主要认为是@media是全局的，而咱们须要改变的东西是局部的，因此说不适合用。 没法引入bootstrap等外联样式，由于上面说过的，它会把head过滤掉，因此说引入了也是没有用的。 至于它不支持大部分CSS3属性，就是不支持，也不知道为何，嘿嘿。 并且它对背景图片的支持也不太理想，还有就是图片要写上alt属性，由于就算图片不出来，至少还有个提示嘛。 若是有比较复杂的布局，不要用float，position之类的，由于也会被过滤，咱们就用table就能够的。

模板封装

在项目中会有各类邮件的发送，可是有些产品信息，公司信息是不会改变的，因此说，将邮件封装成模板。

<table width="100%" border="0" cellpadding="10" cellspacing="0" bgcolor="#fff" collapse>
    <tr>
          <td valign="middle" style="color:#333">
                <table width="600" cellpadding="0" cellspacing="0" bgcolor="#ffffff" border="0" align="center" class="border-collapse">
                    ……
                </table>
          </td>
    </tr>
</table>
复制代码

总体的大table能够像如上这样写。 对于像字体、间距、行高，咱们可写一个公共类，到时候用前面我给予的网站去转换一下就行了。

最后

一个邮件的样子也是很是重要的，它也是项目的一部分，而且做为一个可研究的东西，也是很是有价值的。 奋斗吧，猿们。