文章目录
- 前言
- 一、开始探索
- 二、浪子回头
- 三、注意点
- 总结
前言
我们也许会发现，我们在生活中收到的邮件，经常不是单纯地文字，往往会非常的丰富精彩，就像一个网页一样，是的，这就叫 Email HTML
一、开始探索
害，工欲善其事必先利其器，从设计那里拿设计图后，当时心想应该很简单，也就普通的html实现就好了，但避免有没有注意的东西，就先谷歌一波，查查看有木有啥要注意的，所以开始我就先查查了email html的实现，这一查就发现不得了~~~
先看的就是大佬HTML Email 编写指南 - 阮一峰的网络日志的文章，赶紧拜读一波，读后大呼，还好有事先准备，原来考虑到兼容性，Emial HTML在很多邮件客户端上会显示异常。
需要用到很多的技巧
- tabel布局
- Doctype
- 行内样式等等
这么一看下来，不得了呀，这可真麻烦呀！在继续看了好几篇文章，终于看到想要的，使用工具，人类的智慧在于偷懒呀，这么麻烦的事，谁去干呀，肯定会有人站出来的，结果就有各种各样的工具帮我们实现的这篇知乎的文章,当时就选择了一个，轻轻松松的完成了。
最后在一键生成，堪称完美。大体如下编译后的结果：
二、浪子回头
看看就觉得工具真的伟大，要我写那这样的玩意那可真难受呀，回头自信慢慢的发给导师过眼（还好没有直接发给项目管理的大佬，也没有直接发给后端，不然估计，一个提刀找我，还有个在找刀~~~~），结果导师傻眼了，会被打，会被打，会被打~~~~~~~~
哈哈哈哈，回头导师发我了一个，之前同样需求的模板，大呼，妙呀，马上改好，给导师看后，完美通过，再给项目主管，收获一个赞，在给后端，赞加一。会被打，会被打，会被打
内心直呼吓死了~~~下面分享给大家吧，基本完成基本的需求和框架的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>重置您的 无敌软件的 密码</title>
<style>
body,html,div,ul,li,button,p,img,h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}
body,html {
background: #fff;
line-height: 1.8;
}
h1,h2,h3,h4,h5,h6 {
line-height: 1.8;
}
.email_warp {
height: 100vh;
min-height: 500px;
font-size: 14px;
color: #212121;
display: flex;
/* align-items: center; */
justify-content: center;
}
.logo {
margin: 3em auto;
width: 200px;
height: 60px;
}
h1.email-title {
font-size: 26px;
font-weight: 500;
margin-bottom: 15px;
color: #252525;
}
a.links_btn {
border: 0;
background: #4C84FF;
color: #fff;
width: 100%;
height: 50px;
line-height: 50px;
font-size: 16px;
margin: 40px auto;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
border-radius: 4px;
outline: none;
cursor: pointer;
transition: all 0.3s;
text-align: center;
display: block;
text-decoration: none;
}
.warm_tips {
color: #757575;
background: #f7f7f7;
padding: 20px;
}
.warm_tips .desc {
margin-bottom: 20px;
}
.qr_warp {
max-width: 140px;
margin: 20px auto;
}
.qr_warp img {
max-width: 100%;
max-height: 100%;
}
.email-footer {
margin-top: 2em;
}
#reset-password-email {
max-width: 500px;
}
#reset-password-email .accout_email {
color: #4C84FF;
display: block;
margin-bottom: 20px;
}
</style>
</head>
<body>
<section class="email_warp">
<div id="reset-password-email">
<div class="logo">
<img src="https://lf3-cdn-tos.bytescm/obj/static/xitu_juejin_web/dcec27cc6ece0eb5bb217e62e6bec104.svg" alt="logo">
</div>
<h1 class="email-title">
尊敬的<span>AAA</span>您好：
</h1>
<p>您正在为登录邮箱为如下地址的 啦啦啦 账户重置密码：</p>
<b class="accout_email">xxxx@abc</b>
<p>请注意，如果这不是您本人的操作，请忽略并关闭此邮件。</p>
<p>如您确认重置 XXXX 的账户密码，请点击下方按钮。</p>
<a class="links_btn" onclick="window.open('https:XXXXXXXXXXX')">重置密码</a>
<div class="warm_tips">
<div class="desc">
为安全起见，以上按钮为一次性链接，且仅在24小时内有效，请您尽快完成操作。
</div>
<p>如有任何疑问或无法完成注册，请通过如下方式与我们联系：</p>
<p>邮箱：support@XXX</p>
<p>微信助理：XXXXX</p>
<div class="qr_warp">
<img src="https://XXXXXXXXXXXX" alt="微信二维码图片">
</div>
<p>本邮件由系统自动发送，请勿回复。</p>
</div>
<div class="email-footer">
<p>您的智能项目助理</p>
<p>XXXXXXXX</p>
</div>
</div>
</section>
</body>
</html>
如图的效果：
后端只需要把模拟的数据的部分，更改为传递的值的就可以啦！！！其实随着时代的发展，早已今非昔比了，当时还和我导师说，我看的文章就是说要这么写呀，她叫我去看看那篇文章的时间，害，已经五年前的东西了~~~
三、注意点
-
a标签有时候在客户端是不能跳转识别的，还需要加上 target 标签。
-
在有些邮件客户端中，a标签的 herf 可能会失效，可以改为下面的方式（当时测试说不生效都啥了）
<a class="links_btn" onclick="window.open('{{issueAccessUrl}}')">查看详情</a>
-
还有个大坑，就是邮件的客户端不支持markdown 的格式的，在一个emial HTML中要加入markdown解析也不大可能。注意了，具体解决方案还没有，大伙看看这效果，惨不忍睹：
-
还有些 邮件客户端不支持 header样式，只支持 内联样式
-
Gmail不支持flex布局。邮件中的样式尽量写css2的不要用css3
总结
学海无涯~~~
更多推荐
如何实现一个 Email HTML 邮件模板
发布评论