编写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>

你可能感兴趣的:(前端学习日记,html,前端)