编写Outlook html邮件

Outlook HTML邮件编写指南

最新推荐文章于 2025-06-20 09:30:10 发布

原创最新推荐文章于 2025-06-20 09:30:10 发布 · 7.5k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

前端学习日记专栏收录该内容

2 篇文章

订阅专栏

本文分享了在Outlook中编写HTML邮件的经验，强调编写前应先了解特殊规则。介绍了邮件的兼容问题、响应式设计的注意事项，以及Outlook桌面、网页和移动客户端的渲染差异。同时列出编写邮件HTML时的常见注意事项，包括使用表格布局、行内样式等。

部署运行你感兴趣的模型镜像

最近1个月的时间，都在研究和实现怎么将HTML基于Outlook邮件发送和接收。
整个开发过程下来，只想说一句，我真的太难了~~

如果是第一次编写邮件html，并将其通过Outlook等邮箱应用发送给指定的收件人，你会惊讶的发现自己写好的html怎么在邮箱里显示就完全乱套了？！写好的布局和样式怎么很多都没有被正确的渲染出来？？明明在浏览器打开自己写的html页面是没有任何问题的呀！所以，怎么样才能让邮件应用正确的渲染我们的html代码呢？

由于公司用的邮件是Outlook, 所以这篇笔记是针对“在Outlook邮箱里编写html邮件。如果是其他邮箱的需求，个人觉得也是可以借鉴一下的~~

首先，不建议在接到需求以后，立马开始编写相关代码。

因为编写邮件html和平常写的html并非一样。因为很多html用法是不能被识别的。下面列出一些大佬写的文章，建议在自己动手编写邮件html前，花一些时间耐心阅读一下，熟悉编写的规则，一定会给你节省很多时间，避免采坑~

HTML 邮件兼容问题与解决方案
 EDM制作要点
 Outlook HTML渲染引擎
 布局自适应_HTML 文件在PC&移动端完美自适应布局的技巧

看完上面的链接，你会了解大部分的编写规则。接下来是示例demo，可以根据自己的需求选择阅读相应的示例:
响应式 HTML 邮件制作之三个实例

如果你的需求是要编写响应式的html邮件，可以阅读：

制作简单的响应式HTML邮件
 Creating a Future-Proof Responsive Email Without Media Queries

这上面将讲解地更详细，会讲到ghost table的概念：幽灵table，即：只能被outlook桌面客户端识别的table语法，该语法将无法被outlook移动客户端和网页浏览器识别。

对应响应式的邮件来说，这点非常重要，简单总结来说就是：

outlook桌面客户端：无法识别div、float、display实现左右浮动效果，使用ghost table来实现；
outlook网页端：无法识别ghost table，但能使用div、float、display可以实现；如果你使用F12查看一些别人网站的代码，你也是查看不见ghost table语法的，但实际上人家很可能就是用了的！
outlook移动客户端：无法识别ghost table，但能使用div、float、display可以实现；还能识别媒体查询语法！

可以将上面的语法结合一起使用，就能开发响应式的html邮件了！

列出几个常见的注意事项：

1.HTML 邮件中几乎只有这几个元素——table / tr / td / span / img / a。尽量避免使用 div / p 或是其他标签。而且并不是所有邮箱都支持 colspan / rowspan 属性，所以所有布局都需要使用 table 嵌套解决。
2.使用行内样式
3.float、position 等 CSS 都会被过滤，甚至 margin: 0 auto; 都不起作用.display、backgroud-image、margin和padding、position、trans开头、text-indent没用，但padding可以用在td上。
4.img标签使用属性“width”和“height”定义长和宽。如：

<img width="10" height="10" src="*.png" />

6.字体属性分开写。

line-height: 14px; 
font-size: 12px; 
font-family: "微软雅黑", Arial, sans-serif; 
color: #999999;

7.table使用以下属性：

width
height
bgcolor
align
valign

8.修改默认行高，添加“mso-line-height-rule: exactly”：

<td style="mso-line-height-rule: exactly; line-height: 36px;">
    <!-- ... -->
</td>

9.有一些小间隙会使用空白图片占位。
10.使用ghost table 居中邮件html

<!DOCTYPE html>
<html lang="en" xmlns="https://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="x-apple-disable-message-reformatting">
    <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--<![endif]-->
    <title></title>
    <!--[if mso]>
    <style type="text/css">
        table {border-collapse:collapse;border-spacing:0;margin:0;}
        div, td {padding:0;}
        div {margin:0 !important;}
    </style>
    <noscript>
    <xml>
        <o:OfficeDocumentSettings>
            <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
    </noscript>
    <![endif]-->
</head>
<body style="margin:0;padding:0;word-spacing:normal;background-color:#ffffff;">
    <div role="article" aria-roledescription="email" lang="en" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#ffffff;">
        <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation">
            <tr>
                <td align="center">
                    [content goes here]
                </td>
            </tr>
        </table>
    </div>
</body>
</html>