背景

工作中需要编辑一份邮件，通过后端自动发送到指定成员。其中邮件的内容需要有图片、文字及表格，并通过HTML结构进行书写。了解到邮件HTML与平时写的HTML不完全相同，邮件中很多HTML的用法不能被识别，因此对其常用且基本的使用方法进行梳理。

基本规则

  1. 使用 table 布局
    邮件HTML几乎只支持以下元素：table / tr / td / img / a；
    由于各个邮箱对 div 布局的解析问题较大，因此老式的 table 布局较为稳妥；
    table的td元素有1px的白边，需要使用border-collapse: collapse进行移除。
  2. 样式通过行内式进行书写
    邮件HTML不支持外部的style文件；由于部分邮箱会移除style标签，故也不要试图使用style标签书写样式；
    建议始终使用内联style属性进行样式书写。
  3. 尽量使用属性而非样式
    邮箱不支持以下样式：float / position / display / background-image / margin / padding / trans... / text-indent；
    使用常见属性如下：width / height / bgcolor / align / valign。
  4. 样式单独指定
    大部分邮箱无法完整继承父元素样式，且邮箱的默认样式会对整体效果造成一定影响，故每个元素的样式需要单独指定，即使它十分繁琐。
    例如：
<!-- 不能写成： -->
<p style="margin: 1px 0;">
<!-- 需要写成 -->
<p style="margin-top: 1px; margin-right: 0; margin-bottom: 1px; margin-left: 0;">
  1. 背景图片
    background-image会被过滤，故无法通过css设置背景图。
  2. 文字
    font-family仅支持系统字体；
    不支持font简写，color也尽量不使用简写；
    加粗尽量使用b标签而非font-weight；
    文字不自动换行。
  3. 行高
    修改默认行高，添加 mso-line-height-rule: exactly;
  4. body 之外的内容几乎没用
    包括 DOCTYPE、html、head、body 标签
  5. 图片
    图片是唯一可以引用的外部资源，其他的外部资源，例如样式文件、字体文件、视频文件等均不能引用。
    部分客户端默认不显示图片，因此建议确保没有图片主要内容也可以被阅读。
    太高的图片会被剪切，图片不能超过1728px。
    不支持带动画的gif。
    图片设置border=0，并尽量同时设置宽和高，以防止在不同分辨率下图片变形的问题。

其他注意点

  1. 放弃JavaScript
    邮箱本身存在严重的信息欺骗、机密泄漏、病毒入侵等风险，因此不要抱着邮箱允许注入脚本的希望。
  2. 模板
    可以在网上查找邮件的html模板，简化开发。
  3. 样式相关
    a. 居中使用：align=center。
    b. 尽量减少百分比和auto的使用。

OUTLOOK查看邮件HTML方法

操作 -> 其他动作 -> 查看原文件

邮件HTML调试方法

方法一：使用OUTLOOK
OUTLOOK版本：2016

  1. 文件 - 选项 - 自定义功能区：勾选开发工具
  2. 开发工具 - 宏安全性 - 为所有宏提供通知
  3. 开发工具 - Visual Basic - 工具：勾选Microsoft Word 16.0 Object Library
  4. 开发工具 - 宏：自定义名称创建，并在弹窗的 Sub HtmlTest() 和 End Sub 之间插入如下代码(其中E:\Outlook\test.html为需要读取的HTML的绝对路径)
Dim insp As Inspector
Set insp = ActiveInspector
If insp.IsWordMail Then
Dim wordDoc As Word.document
Set wordDoc = insp.WordEditor
wordDoc.Application.Selection.InsertFile "E:\Outlook\test.html", , False, False, False
End If
  1. 新建邮件 - 开发工具 - 宏：选择新建的宏即可

详细操作可参考【参考资料2】

方法二：使用QQ邮箱
在书写邮件的文本框上部依次点击：格式 -> </>；再将html代码赋值到文本框即可。

其他问题

  • 问题描述：
    在设置背景色的区域中，使用 table > tr > td 的格式写了一些文本，但是在邮件中打开后有时会在文字下出现白线，且随分辨率变化，白线时隐时现。
  • 问题解决
    给外层的 table 标签添加如下两条样式
<table style="border-collapse: collapse; padding: 0;">...</table>