HTML邮件基本使用方法

时间：2023-01-30 22:02:03

背景

  • 问题：
    工作中需要编辑一份邮件，通过后端自动发送到指定成员。其中邮件的内容需要有图片、文字及表格，并通过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. 样式单独指定
    大部分邮箱无法完整继承父元素样式，且邮箱的默认样式会对整体效果造成一定影响，故每个元素的样式需要单独指定，即使它十分繁琐。

  5. 背景图片
    background-image会被过滤，故无法通过css设置背景图。

  6. 文字
    font-family仅支持系统字体；
    不支持font简写，color也尽量不使用简写；
    加粗尽量使用b标签而非font-weight；
    文字不自动换行。

  7. 行高
    修改默认行高，添加 mso-line-height-rule: exactly;

  8. body 之外的内容几乎没用
    包括 DOCTYPE、html、head、body 标签

  9. 图片
    太高的图片会被剪切，图片不能超过1728px。
    不支持带动画的gif。

OUTLOOK邮件HTML调试方法

  • 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】

参考文档

【参考资料1】
【参考资料2】

原文地址

【个人博客】

标签：

相关文章