HTML Email的编写

总结回顾

• 这样回答继承，面试官可能更满意
• 箭头函数和普通函数的10个区别
• html 空白汉字占位符
• 我想了解更多判断数组的方式

1、HTML Email的编写开发场景

• 你下单 可能 电商会给你发一份 详情邮件
• 招行可能给你发下你的帐单邮件
• 生日了给你发个邮件
• 转正了给你发个邮件
• 入职周年邮件

2、遇到的问题

Email的兼容性不好

邮件内容所在上下文或者说所在外部容器（如下简称环境）都是由邮箱服务商决定的，不一样的邮件服务商对前端样式布局支持都存在在一些差异。这就要求邮件内容须要在任何一种状况下都要正常兼容显示。

Email容器不一样

你写的邮件前端代码可能被放在一个iframe中，那你的内容是被放在body里面的；可能放在一个div中，你的内容就被放在这个div里面。

Email自带设置

邮箱软件自己设置设置了些css，他可能对你产生未知的影响。可能根本没有申明doctype，即便申明了，也不是你想要的doctype。

避免被嵌套在不正确的容器里

由于容器多是body或div，咱们邮件内容不该该是一个完整的html。因此邮件内容应该是以div为根节点的html片断。

3、环境（外部容器）

咱们写的邮件代码在不用的邮件服务商下，对应的外部容器不太同样。

QQ邮箱：本身编写的内容被嵌套在一个div中

outlook邮箱：本身编写的内容不知道被嵌套什么元素里了，它自己的元素加上我编写的元素被混在一块儿了

其余的邮箱大家能够本身测试一下

4、开发的Doctype

一个文档类型标记是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。

兼容性最好的Doctype是XHTML 1.0 Strict，事实上Gmail和Hotmail会删掉你的Doctype，换上这个Doctype。使用这个Doctype，也就意味着，不能使用HTML5的语法。

5、开发的布局

• 网页的布局（layout）推荐使用表格（table）
• css内嵌，不能在head标签中写style，也不能外联。
• 不能用浮动的方式定位。position：absolute;float:left;等都不行，float在qq邮箱客户端中能够识别，可是在outlook中没法识别。
• 为了保证兼容性，须要把邮件的宽度设置为600px，最大600px；

  

网页的布局（layout）必须使用表格（table）。首先，放置一个最外层的大表格，用来设置背景。 在内层，放置第二个表格。用来展现内容。第二个table的宽度定为600像素，防止超过客户端的显示宽度。

6、开发的样式

• 避免css冲突或被覆盖
• 尽可能使用div、span等无语义标签。
• 尽可能避免CSS属性值的简写形式
• font-size:0; 很重要，不然qq邮箱 会自动填写不少空格，影响布局
• 减小没必要要的间隙和空格等存在，影响页面美感

错误的写法
<div style="font: 8px/14px Arial, sans-serif; margin: 1px 0;"> 

推荐写法
<div style="margin-top: 1px; margin-bottom: 1px; margin-left: 0; margin-right: 0;">
复制代码

全部的CSS规则，最好都采用行内样式。由于放置在网页头部的样式，极可能会被客户端删除。客户端对CSS规则的支持状况 另外，不要采用CSS的简写形式，有些客户端不支持。由于环境中可能已经设置了css，好比一些reset、一些.class。 因此咱们只能使用行内style来确保咱们的效果，而且在内容根节点上设置基础style，而且尽可能使用div、span等无语义标签。

7、开发图片

• 少用img，邮箱不会过滤你的img标签，可是系统每每会默认不载入陌生来信的图片
• 须要img的话，必定要写好alt和title；
• Outlook中img最高1728px，超过1728 的部分会被截掉
• Outlook可能自动缩小img，使其最高位1728px，（上次测试没缩放，直接裁了）
• 建议剪裁img，堆叠在一块儿
• 有些客户端会给img连接加上边框，要去除边框。

<img border="0" style="display:block; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; border:none;"> 
复制代码

图片是惟一能够引用的外部资源。其余的外部资源，好比样式表文件、字体文件、视频文件等，一律不能引用。 有些客户端会给图片连接加上边框，要去除边框。 须要注意的是，很多客户端默认不显示图片（好比Gmail），因此要确保即便没有图片，主要内容也能被阅读。

8、开发的background

• 少用background 推荐尽量使用切割的img
• Gmail也不支持css里面的背景图
• 在outlook200七、Outlook2010中，背景图片将没法显示

  

图片是惟一能够引用的外部资源。其余的外部资源，好比样式表文件、字体文件、视频文件等，一律不能引用。 有些客户端会给图片连接加上边框，要去除边框。 须要注意的是，很多客户端默认不显示图片（好比Gmail），因此要确保即便没有图片，主要内容也能被阅读。

9、email兼容总结

• 最好使用TABLE标签布局 ，经过tr td来控制距离 空白区域等
• 每一个标签设置：margin:0;padding:0;font-size:0;（注意拆开写）
• 设置 width, height
• 少用img ,少用background
• 邮件不支持js，a标签慎用
• 在使用行高前建议添加mso-line-height-rule:exactly
• margin:0; padding: 0;colspan="1" height="375" 顺序不可换

客户端：foxmail outlook QQ邮箱 为了应付Email的怪癖，花了不少时间测试，确保搞定了全部Outlook的坑洼沟洄 可是....仍是不可避免有兼容问题 若是你只要兼容 Foxmail and qq邮箱，那你几乎能够像写web同样写邮件。 因为邮件客户端对css支持各有不一样，因此必定要多测试再发送，保证样式的正确。若是出现了不兼容的状况，必定要耐心的使用最简单的方式进行兼容，尽可能少用特殊标签及比较复杂的属性。

来源：团队平常总结分享