Html Email 邮件html页编写指南

时间：2021-08-18 13:29:39

前言

写过邮件的html的童学应该都知道，邮件的html一般都用table来布局，为什么呢？原因是大多数的邮件客户端（比如Outlook和Gmail），会过滤HTML设置，让邮件面目全非。

经过多次的邮件编写实践及度娘的指导，我发现，编写HTML Email的窍门，就是使用15年前的网页制作方法。

自制兼容outlook与foxmail邮件模版

局部重点规则

1. Doctype

目前，兼容性最好的Doctype是XHTML 1.0 Strict，事实上Gmail和Hotmail会删掉你的Doctype，换上下面这个Doctype（不能使用HTML5的语法）

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 　<head>
 　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 　　<title>HTML Email编写指南</title>
 　　<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 　</head>
 </html>

2. 布局

网页的布局（layout）必须使用表格（table）。首先，放置一个最外层的大表格，用来设置背景，具体内容再在里面嵌套表格（div、p等还是不要想了）。

 <body style="margin: 0; padding: 0;">
 　<table border="1" cellpadding="0" cellspacing="0" width="100%">
 　　<tr>
 　　　<td> Hello! </td>
 　　</tr>
 　</table>
 </body>

3. 图片相关

图片是唯一可以引用的外部资源。其他的外部资源，比如样式表文件、字体文件、视频文件等，一概不能引用。

有些客户端会给图片链接加上边框，要去除边框。

需要注意的是，不少客户端默认不显示图片（比如Gmail），所以要确保即使没有图片，主要内容也能被阅读。

<img border="0" style="display:block;outline:none;text-decoration:none,-ms-interpolation-mode:bicubic;border:none;">

  • img指定width 与 height

因为在有些邮箱里，图片不是默认加载的，往往加载前需要用户的许可。那么高宽的指定可以使邮件在没有图片撑出样子前也能保持良好的大小结构，加上 alt 属性更可以明确告知图片的内容让用户选择是否下载它们。

如果因为项目需要（比如需要适配 Retina 高分屏），width 和 height 属性更是必不可少的，并且由于一些 outlook 版本的奇葩表现，width 和 height 属性一定不要加上单位！一定不要加上单位！一定不要加上单位！重要的事情说三遍。

因为加上单位会使一些版本的 OutLook 无法正确识别，导致图片显示使用实际的宽高而非我们设置的。

<img width="10px" height="10px" src="*.png" />
  • img在outlook2013下有间距

outlook2013中，堆叠的图片会显示大概10px的间距

这个问题只在图片高度小于20px的时候出现，开心的是通过简单的小技巧就可以解决：为td设置和图片高度一样的行高或image设为display：block；

<td width="600" height="80" style="line-height: 80px;" >
    <img height="80" src="http://www.website.com/images/Nature_01.jpg"
        width="600" />
</td>
  • 背景图片

style 内容里面 background 可以设置 color，但是 image 会被过滤，就是说不能通过 CSS 来设置背景图片了。但是有一个很有意思的元素属性，也叫 background，里面可以定义一个图片路径，但是功能有限，比如无法定位背景图片等。

例如要给一个单元格加一个背景，必须这样写：

<td background="*.png">
    <!-- ... -->
</td>
  • margin 与 padding

Outlook 2007-2013 不支持图片的 margin 与 padding 样式，必要的时候可以尝试 hspace 和 vspace 属性：

<img vspace="10" hspace="10" src="*.png" />

4. 文字相关

所有的CSS规则，最好都采用行内样式。因为放置在网页头部的样式，很可能会被客户端删除。客户端对CSS规则的支持情况，请看这里。

  • 字体

在 HTML 邮件中，font-family 只支持系统字体，不支持自定义字体，也不支持 font 简写，color 尽可能也不要使用简写：

<p style="font: 8px/14px Arial, sans-serif;"></p>

要写成这样

<p style="font-size: 8px;font-family: Arial, sans-serif;"></p>

对于加粗字体，我们可以使用 b 标签而不是 CSS 的 font-weight，前文说过，HTML 标签和属性能解决的样式决不使用 CSS 样式。

  • 行高

在 OutLook 中会有个默认的行高最小值，特别是当设置 font-family 为微软雅黑时，默认的行高差不多为 Word 中的两倍行距，如果 line-height 设置的值小于默认的行高，无论你设置的是多少，则始终使用默认值，在很多情况下这是不能忍的，好在有个神奇的 mso-line-height-rule，使用行高时添加 mso-line-height-rule:exactly; 就能使行高始终等于我们所设置的值。

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

这只是微软的 CSS 属性，对其他客户端没影响。并且该属性只在块元素上有效，所以想在 font 和 span 中用就洗洗睡了吧。

5. W3C校验和测试工具

要保证最终的代码，能够通过W3C的校验，因为某些客户端会把不合格属性剥离。还要使用测试工具（1, 2, 3），查看在不同客户端的显示结果。

发送HTML Email的时候，不要忘记MIME类型不能使用

　Content-Type: text/plain;

要使用

Content-Type: Multipart/Alternative;

6. 模板

使用别人已经做好的模板，是一个不错的选择（这里和这里），网上还可以搜到更多。

自己开发的话，可以参考HTML Email Boilerplate和Emailology。

全局规则

1.页面宽度请设定在550到650px以内。

2.使用table表格来布局。

3.如果需要邮件居中显示，请在table里设定align="center"。

4、不要写<style>标签、不要写class，所有CSS都用style属性，什么元素需要什么样式就用style写内联的CSS。

5、不要使用外链的css样式定义文字和图片（外链的css样式在邮件里将不能被读取，所以发送出去的邮件因为没有链接到样式，将会使你的邮件内容样式丢失），正确的写法：<td style="font-family:arial;font-size:12px;color:black">文字</td>。

6、不使用flash、java、javascript、frames、iframe、activeX以及DHTML，如果页面中的图片一定要动态的，请将flash文件转换成gif动画使用，但在outlook2007里，gif将不能正常显示，因为outlook2007限制gif动画。

7、不要使用<table></table>以外的body、meta和html之类的标签，部分邮箱系统会把这些过滤掉。

8、背景图片代码写法如下：<table background="background.gif" cellspacing="0" cellpadding="0"></table>，但请注意，outlook对背景图片不识别。

9.font-family属性不能为空，否则会被QQ屏蔽为垃圾邮件。

10.若邮件模板内侧边或者上下有空白间距，不要用 padding，必须得用标准的 td 来设定空白间距，否则会导致各个邮箱解析不同。

11、在 yahoo 邮箱里定义 line-height 的注意事项：需在块级元素里定义 line-height。如果 td 里有 p 标签，则 line-height 也必须在 p 中定义。无论是 td 还是 p，如果有超链接，则都必须在 a 标签里定义 line-height。如果只是在 td 或者 p 里面定义 line-height 的话，那 yahoo 邮箱将无法识别 a 里面的行高。

12.少用float, margin,padding. 绝对定位不能用，清除浮动用<table style="clear:both"></table>

13.如果 td 和 td 之间有间隔，使用<td style="border-bottom:10px solid #fff"></td>，这样写的话 td 之间是不会有间隔的。使用<td style="margin-bottom: 10px"></td>也是不会有空格的。如果 td 之间有间隙，必须用<td></td><td height="10px">&nbsp;</td><td></td>来隔开。但是如果是 table，则<table style="border-top:10px solid #ffffff; border-bottom:20px solid #ffffff"></table>里面的内容会在上下有空行。

14.少用图片，邮箱不会过滤你的img标签，但是系统往往会默认不载入陌生来信的图片，如果用了很多图片的邮件，在片没有载入的情况下，丑陋无比甚至看不清内容，没耐心的用户直接就删除了。图片上务必加上alt。

outlook 规则

1.在<td>里设置 margin 是无效的，不论是 margin-left、margin-right、margin-top 或者 margin-boottom 都没有效果。

2.如果要使用<P>标签要考虑到<P>标签本身自带的上下行之间的行高。

yahoo规则

1.在table里设定align="center"无法居中， 需要内联style=“margin：0 auto，width：XX”

foxmail 规则

1.foxmail中所有p标签的Margin:0; 使用p标签时需要设置margin

Html Email 邮件html页编写指南的更多相关文章

  1. HTML Email 编写指南

    今天,我想写一个"低技术"问题. 话说我订阅了不少了新闻邮件(Newsletter),比如JavaScript Weekly.每周收到一封邮件,了解本周的大事. 有一天,我就在想, ...

  2. HTML Email 编写指南（转）

      作者: 阮一峰 日期: 2013年6月16日 今天,我想写一个"低技术"问题. 话说我订阅了不少了新闻邮件(Newsletter),比如JavaScript Weekly.每周 ...

  3. Atitit mysql存储过程编写指南

    Atitit mysql存储过程编写指南 1.1. 设定参数与返回值  `obj_id` int ,,返回类型 varchar(200)1 1.2. 在语句中使用传入的obj_id参数1 1.3. 测 ...

  4. CCleaner 垃圾文件清理规则 编写指南

    以下内容的英文版本来源于 CCleaner 官方论坛,仅供参考.欢迎大家编写并分享针对常用国产软件的垃圾文件清理规则!需要说明的是规则文件(Winapp2.ini)需和程序文件放于同一文件夹下,才能被 ...

  5. Bookmarklet编写指南

    作者: 阮一峰 日期: 2011年6月11日 前一段日子,我写了两个Bookmarklet----"短网址生成"和"短网址还原". 它们用起来很方便,除了我本人 ...

  6. PE解析器与加载器编写指南

    PE解析器与加载器编写指南 最近准备去实习,看公司要求应该开发PE相关的查杀引擎,因此再回头复习一下PE格式,重新写一个PE解析器和PE加载器,再此记录下有关坑. PE解析器部分: 1)如何确定节区表 ...

  7. C&num;发送Email邮件（实例：QQ邮箱和Gmail邮箱）

    下面用到的邮件账号和密码都不是真实的,需要测试就换成自己的邮件账号. 需要引用: using System.Net.Mail; using System.Text; using System.Net; ...

  8. &lbrack;转&rsqb;C&num;发送Email邮件 （实例：QQ邮箱和Gmail邮箱）

    下面用到的邮件账号和密码都不是真实的,需要测试就换成自己的邮件账号. 需要引用:using System.Net.Mail;using System.Text;using System.Net; 程序 ...

  9. C&num; Email邮件发送，功能是密码找回或者重置功能。

    原文:C# Email邮件发送,功能是密码找回或者重置功能. 最近根据公司需求,写个邮件发送.   这里面的传入的地址信息的参数都是经过加密的.  主要是保证用户信息的安全. 帮助类   using ...

随机推荐

  1. ASP&period;NET探讨：技术的学习顺序问题

    作者: シtearシ  来源: 博客园  发布时间: 2011-09-27 08:40  阅读: 7675 次  推荐: 25   原文链接   [收藏]   摘要:很多人对于ASP.NET的入门和学 ...

  2. PowerDesigner-自定义生成WORD

    PowerDesigner-自定义生成WORD_旧梦重温 分类: web 2014-02-26 21:08 1563人阅读 评论(48) 收藏 举报   目录(?)[+] 1统一建立模型 2导出自定义 ...

  3. HDU 2034 人见人爱A-B 分类： ACM 2015-06-23 23&colon;42 9人阅读 评论&lpar;0&rpar; 收藏

    人见人爱A-B Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...

  4. 再谈 retain，copy，mutableCopy（官方SDK，声明NSString都用copy非retain）

    之前一直以为retain就是简单的计数器+1,copy就是重新开辟内存复制对象: 其实不是这样,原来之前的自己独自徘徊于糊涂之中. (官方SDK,对NSString属性的定义都是用copy,而不是re ...

  5. HTML 5 全局属性

    下面的全局属性可用于任何 HTML5 元素.HTML 5 全局属性NEW:HTML 5 中新的全局属性.属性 描述accesskey 规定访问元素的键盘快捷键class   规定元素的类名(用于规定样 ...

  6. python&lowbar;Opencv&lowbar;处理鼠标事件

    流程: 首先,创建一个鼠标事件回调函数,当鼠标事件发生时就会被执行. 鼠标事件可以是鼠标上的任何动作,比如左键按下,左键松开,左键双击等. 我们可以通过鼠标事件获得与鼠标对应的图片上的坐标. 根据这些 ...

  7. js数值转换

    先来几个题吧: var num1 = Number("123blue");var num2 = Number("");var num3 = Number([]) ...

  8. python全栈开发-re模块（正则表达式）应用（字符串的处理）

    一.概述 就其本质而言,正则表达式(或 RE)是一种小型的.高度专业化的编程语言,要讲他的具体用法要讲一本书!它内嵌在Python中,并通过 re 模块实现.你可以为想要匹配的相应字符串集指定规则:该 ...

  9. EF中关于TransactionScope的使用

    前提条件 TransactionScope类需要引用System.Transactions; 数据库环境及需求 现在假设有两个表如图:                                 ...

  10. Linux基础学习（7）--用户和用户组管理

    第七章——用户和用户组管理 一.用户配置文件 1.用户信息文件/etc/passwd: (1)用户管理简介:所以越是对服务器安全性要求高的服务器,越需要建立合理的用户权限等级制度和服务器操作规范.   ...

相关文章