前言

我们也许会发现，我们在生活中收到的邮件，经常不是单纯地文字，往往会非常的丰富精彩，就像一个网页一样，是的，这就叫 Email HTML

一、开始探索

害，工欲善其事必先利其器，从设计那里拿设计图后，当时心想应该很简单，也就普通的html实现就好了，但避免有没有注意的东西，就先谷歌一波，查查看有木有啥要注意的，所以开始我就先查查了email html的实现，这一查就发现不得了~~~

先看的就是大佬的文章，赶紧拜读一波，读后大呼，还好有事先准备，原来考虑到兼容性，Emial HTML在很多邮件客户端上会显示异常。 需要用到很多的技巧

tabel布局 Doctype 行内样式等等

这么一看下来，不得了呀，这可真麻烦呀！在继续看了好几篇文章，终于看到想要的，使用工具，人类的智慧在于偷懒呀，这么麻烦的事，谁去干呀，肯定会有人站出来的，结果就有各种各样的工具帮我们实现的,当时就选择了一个，轻轻松松的完成了。 最后在一键生成，堪称完美。大体如下编译后的结果：

二、浪子回头

看看就觉得工具真的伟大，要我写那这样的玩意那可真难受呀，回头自信慢慢的发给导师过眼（还好没有直接发给项目管理的大佬，也没有直接发给后端，不然估计，一个提刀找我，还有个在找刀~~~~），结果导师傻眼了，会被打，会被打，会被打~~~~~~~~

哈哈哈哈，回头导师发我了一个，之前同样需求的模板，大呼，妙呀，马上改好，给导师看后，完美通过，再给项目主管，收获一个赞，在给后端，赞加一。会被打，会被打，会被打

内心直呼吓死了~~~下面分享给大家吧，基本完成基本的需求和框架的：

如图的效果： 后端只需要把模拟的数据的部分，更改为传递的值的就可以啦！！！其实随着时代的发展，早已今非昔比了，当时还和我导师说，我看的文章就是说要这么写呀，她叫我去看看那篇文章的时间，害，已经五年前的东西了~~~

三、注意点

a标签有时候在客户端是不能跳转识别的，还需要加上 target 标签。 在有些邮件客户端中，a标签的 herf 可能会失效，可以改为下面的方式（当时测试说不生效都啥了）

<a class="links_btn" onclick="window.open({
           
    {issueAccessUrl}})">查看详情</a>

还有个大坑，就是邮件的客户端不支持markdown 的格式的，在一个emial HTML中要加入markdown解析也不大可能。注意了，具体解决方案还没有，大伙看看这效果，惨不忍睹： 还有些 邮件客户端不支持 header样式，只支持 内联样式 Gmail不支持flex布局。邮件中的样式尽量写css2的不要用css3

总结

学海无涯~~~