制作符合Mail格式的HTML

2017-03-14

我们在做报表类方案的时，我们通过web页面进行了数据展示，此时期望能够把这个网页通过邮件客户端发送到用户邮箱中，如果我们为了保持页面和邮件内的样式的统一，就很期望做到页面内容的复用，不再为邮件内容单独制定一套模板，当用户的内容样式谁内容而不同时，无法通过单一的模板来解决，是否可以通过复用页面的html内容来达到目的呢？

比如我们的页面结构是模块化的，每一个模块内的内容可能都随着模块的不同而呈现出不同的样式，如下图：
http://ata2-img.cn-hangzhou.img-pub.aliyun-inc.com/85c79200d05ddb180dbb9c9e13d4faa7.png

如果我们让用户一键拷贝内容，在一键发送邮件，既可以做到页面内容的复用，也可以简化用户复制粘贴以及启动邮件客户端的繁琐任务。

问题来了，在我们实践过程中，为了支持足够美观的模块，使用了CSS3、HTML5等一些新特性，但是在内容复制到邮件客户端进行发送后，收到的邮件随着客户端的不同而呈现出不同的样式（当然，是样式错乱），这里面发生了什么呢？

经过查询一番资料，发现，不同的邮件客户端有不同的HTML过滤规则，我们需要遵循HTML Email规范。

html email基本原则：

只能从外部引用图片，没有外部样式表，字体，视频（html5开始改变这一点）等。
在电子邮件客户端（电子邮件客户端=为Outlook，Gmail，Hotmail，Yahoo等）中对CSS元素的支持有限。您可以查看一个对比表格，什么客户端支持什么的样式功能。
表格最常用于布局html电子邮件。
测试，你需要测试你的邮件在不同的电子邮件客户端下。

html email 文档类型申明：

目前，兼容性最好的Doctype是XHTML 1.0 Strict，事实上Gmail和Hotmail会删掉你的Doctype，换上这个Doctype。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
　<head>
　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
　　<title>HTML Email编写指南</title>
　　<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
　</head>
</html>

使用table代替css布局

由于电子邮件无法支持标准，是不可使用div、section或article——替代的是使用table。此外，你需要使用大量的表格嵌套，因为HTML电子邮件既不支持colspan和rowspan属性。

这是多个table容器，并且使用嵌套table格式。我们一般会在最外面设置一个table（#backgroundTable），充当排序的容器，它指定了电子邮件客户端中的可见空间的宽度。因为一些客户端任意地限制区域呈现，不设置可能导致奇怪对齐的内容。然后我们再在内部设置一个table，用来作为真正内容的容器，第二个table最好设置一定的宽度，防止超过客户端的显示宽度。

<table cellpadding="0" cellspacing="0" border="0" style="margin:0; padding:0; width:100% !important; line-height: 100% !important;">
    <tr>
        <td valign="top"> 
        	<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
        	<tr><td>邮件内容</td></tr>
        	</table>
        <td>
    </tr>
</table>

第一个table设置的样式表有助于重置某些电子邮件客户端特定的格式。

table自适应？
table 在 bootstrap panel中无法宽度自适应，解决办法是使用固定表格：table-layout:fixed;

Max-Width都支持？
并不是所有邮箱客户端都支持max-width。为了让邮件兼容Outlook和Lotus Notes 8 & 8.5，我们要把每个table放在条件语句里，这样就会有一个固定宽度table。这种方法针对IE（Lotus Notes使用IE内核）和Microsoft Outlook。

<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <![endif]-->
            <table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td>
                        Hello!
                    </td>
                </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]>
        </td>
    </tr>
</table>
<![endif]-->

奇怪的是，苹果邮箱客户端（通常非常先进）也不支持max-width属性。但它支持media queries，所以只要viewport是600px宽的屏幕，我们可以在’content’样式里添加固定宽度。

<style type="text/css">
@media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}
}
</style>

多列布局：
我们在进行多列布局的时候，不能把列宽度给占满了，需要预留一定的空间，比较好的实践是：预留25px的空间来防止Outlook堆叠你的table。因为Outlook会在边框宽度上占用一定的宽度。

如何达到预留空间的方式呢？通过使用table的align属性实现。

使用表格代替段落

同样，由于缺乏对标准的支持，使用标准的标签，如h1,h2,h3或p并不是一个好主意。我发现这些渲染在电子邮件客户端存在相当大的麻烦。
你最好选择将每一块文本放在息的单元格中，并且将行内样式应用于这个单元格。

CSS行内样式代替样式表

所有的CSS规则，最好都采用行内样式。因为放置在网页头部的样式，很可能会被客户端删除。客户端对CSS规则的支持情况，请看这里，可以看到很多css的伪标签都是不被支持的。
不要忘记：你不能将多个类应用于HTML电子邮件，因为它不支持的这些。每个元素最多可以有一个类。

也不要忘记：你不能用简短的样式缩写如font-size（例如：style=”font:8px/14px Arial,sans-serif”），因为HTML电子邮件不支持它，你需要展开单独写，margin也不例外。

简化开发框架：

我们可以参考 https://github.com/seanpowell/Email-Boilerplate 这里的要求，然后填充我们自由的邮件。
https://webdesign.tutsplus.com/articles/build-an-html-email-template-from-scratch--webdesign-12770 这里给出了我们如何使用table一步一步创建出期望的HTML Email，以供参考。

参考：

http://www.ruanyifeng.com/blog/2013/06/html_email.html
http://www.campaignmonitor.com/blog/post/3317/correct-doctype-to-use-in-html-email/
http://articles.sitepoint.com/article/code-html-email-newsletters
http://dennisdeacon.wordpress.com/2008/06/09/top-10-email-best-practices/http://www.catswhocode.com/blog/best-practices-for-coding-html-emails
https://webdesign.tutsplus.com/zh-hans/articles/creating-a-simple-responsive-html-email--webdesign-12978
https://webdesign.tutsplus.com/articles/build-an-html-email-template-from-scratch--webdesign-12770