HTML Email的编写

HTML Email的编写

总结回顾

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

一、HTML Email的编写开发场景
你下单可能电商会给你发一份详情邮件
招行可能给你发下你的账单邮件
生日了给你发个邮件
转正了给你发个邮件
入职周年邮件

二、遇到的问题

Email的兼容性很差

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

Email容器不同

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

Email自带设置

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

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

因为容器可能是body或div，我们邮件内容不应该是一个完整的html。所以邮件内容应该是以div为根节点的html片段。

三、环境（外部容器）

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

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

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

其他的邮箱你们可以自己测试一下

四、开发的Doctype

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

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

五、开发的布局

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

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

六、开发的样式

避免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等无语义标签。

七、开发图片

少用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），所以要确保即使没有图片，主要内容也能被阅读。

八、开发的background

少用background 推荐尽可能使用切割的img
Gmail也不支持css里面的背景图
在outlook2007、Outlook2010中，背景图片将无法显示