HTML邮件模板编写规则,编写邮件HTML模板

工作中遇到需要发邮件模板给客户发送凭证,踩坑踩出来一下规则:

1.所有样式必须行内,否则不起作用

大部分邮件客户端中不支持使用外置css样式,最好使用内联样式

2.所有布局必须使用table,复杂布局使用table嵌套或单元格合并

布局尽量使用table ,将页面拆分成由上到下几个模块,有几个模块用几个tr标签。

3.有的邮件客户端table默认有边框,需要在代码中取消

大部分邮件客户端table默认有边框,在行内样式中设为0即可

4.元素样式尽量拆开写,margin:0;>margin-top:0;…

元素样式拆开写,border,margin,padding,background等等

5.元素需要取消默认样式 padding-top:0…

像p标签,tr,tb标签很多都会有默认的padding和margin样式,会影响到页面布局

6.如果有上下间隔,尽量不使用padding和margin,使用空的table或tr元素

页面中所有上下间隔尽量使用空的tr标签,如果使用margin可能会造成问题

7.没有字号标签都添加font-size:0px;具体到标签再设置具体字号

页面尽量所有标签都设置字号为0,因为有的邮件客户端会塞入大量实体空格标签造成页面布局错乱

以上是我自己编写HTML邮件模板的在Outlook,Foxmail,163,QQ邮箱,阿里云企业邮箱测试踩坑得出的规则。

邮件模板中最好不使用CSS3,也不是说不能使用,比如border-radius在大部分邮箱中是有效的,但是在某些邮箱(Outlook)中不起作用。为了邮件显示不会错乱,尽量不要使用CSS3的属性用作布局等操作。


遇到的坑汇总(大家遇到其他坑也可以在评论区进行说明,说不定会帮到其他人)
坑1:

img标签的宽不用写到style里,写到外面且不需要单位,否则在outlook下会有问题

<img width="60" height="60" alt="" />
坑2:

td标签可以嵌入table标签,请不要再a标签中嵌入table标签,否则在outlook下会有问题,链接点击不会跳转,错误用法

<tr>
    <td>
        <a>
        <table>tr><td>td>tr>table>
        a>
    td>
tr>
坑3:

outlook中背景图无法显示,图片需要使用img标签


下面代码用了两个table标签布局,外层的table主要用来限制页面,内层table用来布局,按照规则2,将页面从上到下拆成几个模块,在内层tr中写页面布局。注意: 每个tr中td的数量要保持一致否则有的邮件客户端会补全


<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    head>
    <body style="margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px; padding-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;font-size:0px">
                <tr><td style="font-size:0px">td>tr>
                <tr><td style="font-size:0px">td>tr>
                <tr><td style="font-size:0px">td>tr>
        table>
    table>
body>
html>

你可能感兴趣的:(前端开发)