近期由于项目需要，第一次编写邮件html模板，发现各种邮箱兼容问题，尤其是windows自带的邮箱outlook兼容性极差，在此简单做下记录。
-
使用越垃圾的样式越好，绝大部分css3不兼容，不要使用高级布局，例如flex布局等。
-
通篇使用table编写，即尽量只使用table、tbody、tr、td
-
图片路径不可以使用base64，会加载不出来，宽高也不可限制，alt都会不予显示
-
邮件一定要给最外层最小高度，否则在个别邮箱中会出现滚动条
-
不要写js事件会被过滤，链接跳转使用<a.>标签代替onclick事件，outlook邮箱客户端连<a.>都不支持，只能在后面写上文字叙述（或复制链接至浏览器查看）
-
只能写行内样式（style），能用属性尽量全部用属性，同时在style里面再写一次，比如图片宽高，可以直接用height=‘20’,width=‘20’，注意不要写单位，同时在style=“height:20px,width:20px”
-
table中td仅支持padding，tr既不支持padding、也不支持margin
-
所有可以连写的样式全部拆开写，例如padding：10px 20px，要写成padding-top:10px;padding-bottom:10px;padding-left:20px;padding-right:20px
-
行数很多的文本记得加上word-break:break-all
-
outlook不能识别!important
-
为了去掉单元格之间的间隙以及边框，记得在table标签上加上cellpadding="0"和 cellspacing="0"属性，在行内样式中加上border-collapse: collapse; border-spacing: 0;
-
一个单元格内有多段文本时，尽量使用 br标签
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css"
rel="stylesheet"
<title>成绩通知</title>
</head>
<table
cellpadding="0"
cellspacing="0"
style="
max-width: 700px;
margin: 0 auto;
border-collapse: collapse;
border-spacing: 0;
border-left: 1px solid #e6e8ee;
border-right: 1px solid #e6e8ee;
border-bottom: 1px solid #e6e8ee;
<tbody>
<tr style="height: 40px; width: 100%; background-color: #20242c">
<td style="padding-top: 9px; padding-bottom: 5px; padding-left: 20px">
height="22"
style="height: 22px"
src="https://img0.baidu.com/it/u=3072371240,760127611&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281"
alt="Error"
style="
width: 100%;
text-align: right;
vertical-align: middle;
padding-right: 20px;
height="16"
style="height: 16px"
src="https://img2.baidu.com/it/u=1053999863,2498083417&fm=253&fmt=auto&app=120&f=GIF?w=607&h=500"
colspan="2"
style="
font-size: 18px;
font-weight: bold;
color: #2d2d2d;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 20px;
padding-right: 20px;
colspan="2"
style="
font-size: 12px;
color: #2d2d2d;
padding-left: 20px;
line-height: 17px;
尊敬的学生家长，您好！
colspan="2"
style="
font-size: 12px;
color: #2d2d2d;
padding-top: 10px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
word-break: break-all;
line-height: 17px;
vertical-align: text-top;
感谢您对学校的支持，点击以下“查看详情”链接可访问具体内容，或复制链接至浏览器查看(http://www.baidu.com)。
colspan="2"
style="padding-bottom: 60px; padding-left: 20px; height: 30px"
href="http://www.baidu.com"
style="text-decoration: none; display: block; width: 100px"
target="_blank"
<table>
<tbody>
height="30"
width="100"
style="
color: #fff !important;
font-size: 12px;
background: linear-gradient(
315deg,
#4bbfec 0%,
#7c3cf3 47%,
#c136ec 100%
cursor: pointer;
width: 100px;
height: 30px;
text-align: center;
vertical-align: middle;
line-height: 30px;
</tbody>
</table></a
colspan="2"
style="
color: #2d2d2d;
padding-bottom: 15px;
padding-left: 20px;
font-size: 12px;
line-height: 17px;
本邮件由系统自动发送，请勿直接回复
<td colspan="2" style="padding-left: 20px; padding-right: 20px">
<hr style="border-top: #eff0f5; margin: 0" />
style="padding-left: 20px; padding-top: 16px; padding-bottom: 20px"
style="height: 60px; width: 60px"
height="60"
width="60"
src="https://img2.baidu.com/it/u=1340460595,2858602922&fm=253&fmt=auto&app=138&f=GIF?w=511&h=500"
alt="code"
style="
font-size: 12px;
padding-top: 16px;
vertical-align: text-top;
color: #2d2d2d;
line-height: 20px;
padding-left: 10px;
感谢您的信任
<br />
扫描二维码联系我们
<br />
xxxxx学校
colspan="2"
height="4"
style="
width: 100%;
height: 4px;
background: linear-gradient(
315deg,
#4bbfec 0%,
#7c3cf3 47%,
#c136ec 100%
</tbody>
</table>
</body>
</html>
最近1个月的时间，都在研究和实现怎么将HTML基于Outlook邮件发送和接收。
整个开发过程下来，只想说一句，我真的太难了~~
如果是第一次编写邮件html，并将其通过Outlook等邮箱应用发送给指定的收件人，你会惊讶的发现自己写好的html怎么在邮箱里显示就完全乱套了？！写好的布局和样式怎么很多都没有被正确的渲染出来？？明明在浏览器打开自己写的html页面是没有任何问题的呀！所以，怎么样才能让邮件应用正确的渲染我们的html代码呢？
由于公司用的邮件是Outlook,
今天分享下”前端html小技巧—邮件模板教程“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 今天，我想写一个"低技术"问题。
话说我订阅了不少了新闻邮件（Newsletter），比如 JavaScript Weekly。每周收到一封邮件，了解本周的大事。
有一天，我就在想，是不是我也能做一个这样的邮件？
然后，就发现这事不那么容易。抛开后台和编辑工作，单单是设计一个Email样板，就需要不少心思。
因为这种带格
最近在写一个项目，要个用户发送验证码、通知等信息。
但是，以往只是文字堆砌，偶尔加个换行br。略显粗糙。
然后，偶然间看到了一些平台的通知邮件，然后就把他们的邮件扒出来，用一下哈哈哈…
注：以下两个模板，是从腾讯企业邮箱的通知邮件中抠出来的。
1. 两个Demo截图
第1个demo截图
一、开始探索
害，工欲善其事必先利其器，从设计那里拿设计图后，当时心想应该很简单，也就普通的html实现就好了，但避免有没有注意的东西，就先谷歌一波，查查看有木有啥要注意的，所以开始我就先查查了email html的实现，这一查就发现不得了~~~
先看的就是大佬HTML Email 编写指南 - 阮一峰的网络日志的文..
HTML 邮件内容虽然也是 HTML，但是和我们在网页上使用的 HTML 不同，因为安全原因，各大邮箱服务商及邮件客户端都会对邮件内容进行一定程度上的处理，不会按照你写的原本 HTML 展示。
在桌面和移动端渲染电子邮件大约有上百万种不同的组合方式。
尤其是鼎鼎大名的 OutLook，从 OutLook2007 开始便使用 Word HTML 引擎进行渲染，为了它的安全性从而使得整个邮件倒退回了 2000 年前，为了邮件的兼容性你不得不使用很多废弃的标签、属性，并且这一状况将会维持无数个
年头，因为虽然万
1. 响应式设计：移动端屏幕尺寸不同，需要根据不同的屏幕尺寸进行响应式设计，以适应不同的设备。
2. 页面加载速度：移动端网络环境相对不稳定，需要尽可能减少页面加载时间，提高用户体验。
3. 触摸事件：移动端用户主要通过触摸屏幕进行操作，需要考虑触摸事件的响应和处理。
4. 浏览器兼容性：不同的移动设备使用的浏览器不同，需要进行兼容性测试，确保页面在不同的浏览器上都能正常显示。
5. 界面简洁明了：移动端屏幕相对较小，需要尽可能简化界面，减少用户操作的复杂度。
希望以上几点能够帮助您更好地编写 H5 移动端页面。
