Html Email 邮件html页编写指南

前言

写过邮件的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),所以要确保即使没有图片,主要内容也能被阅读。

 1 <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>

要写成这样

 1 <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类型不能使用

 1  Content-Type: text/plain; 

要使用

 1 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247474.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue父组件异步获取动态数据传递给子组件获取不到值

原理&#xff1a; 在父组件中使用axios获取异步数据传给子组件&#xff0c;但是发现子组件在渲染的时候并没有数据&#xff0c;在created里面打印也是空的&#xff0c;结果发现一开始子组件绑定的数据是空的&#xff0c;在请求数据没有返回数据时&#xff0c;子组件就已经加载了…

MAC 下配置JavaEE开发环境

1、安装jdk&#xff0c;官网下载 路径&#xff1a;http://www.oracle.com/technetwork/java/javase/downloads/index.html 选择合适的版本下载即可。 2、配置Java环境变量 &#xff08;1&#xff09;commandspace 输入termimal 打开终端 &#xff08;2&#xff09;在终端中输…

微服务深入浅出(7)-- 网关路由Zuul

Zuul用于构建边界服务&#xff0c;致力于动态路由&#xff0c;过滤&#xff0c;监控&#xff0c;弹性伸缩和安全等方向。 1、ZuulRibbonEureka结合&#xff0c;可以实现智能路由和负载均衡 2、网关将所有服务的API接口统一聚合统一暴露 3、网关统一爆率接口后&#xff0c;可以做…

判断JavaScript对象为null或者属性为空

首先说下null与undefined区别&#xff1a; 对已声明但未初始化的和未声明的变量执行typeof&#xff0c;都返回"undefined"。 null表示一个空对象指针&#xff0c;typeof操作会返回"object"。 一般不显式的把变量的值设置为undefined&#xff0c;但null相…

font face如何导入自定义字体

首先&#xff0c;浏览器支持什么字体取决于用户系统里安装了什么字体&#xff0c;比如CSS中这么写&#xff1a; font-family:"微软雅黑","黑体","宋体"; 那么浏览器会尝试按照从左到右的顺序依次应用&#xff0c;假设用户电脑上没有安装微软雅黑…

Python中_,__,__xx__方法区别

_xx 单下划线开头 Python中没有真正的私有属性或方法,可以在你想声明为私有的方法和属性前加上单下划线,以提示该属性和方法不应在外部调用.如果真的调用了也不会出错,但不符合规范. 方法就是以单下划线开头命名定义了&#xff0c;这种定义不会被*导入&#xff08;from module …

利用@media screen实现网页布局的自适应

利用media screen实现网页布局的自适应 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加media screen属性,根据浏览器宽度判断并输出不同的长宽值 1280分辨率以上&#xff08;大于1200px&#xff09; media screen and (min-width:1200px){#p…

C# webkit内核 网页填表

比如我要操作的是下面的input 用到的方法是 调用如下&#xff1a; webkit.StringByEvaluatingJavaScriptFromString("document.getElementsByClassName(login_i_con_li_ipt name)[0].valueThis is a Demo."); 类似这种div在webkit中好像是无法通过常规方法模拟的 这时…

p字间距 html段落内文字设置字间距间隔

只对段落p内文字设置字间距&#xff0c;段落<p>是html段落标签&#xff0c;以<p>开始&#xff0c;以</p>结束&#xff0c;通常文章分段使用p标签&#xff0c;而有时小局部布局也可以使用p来布局。通过css设置其样式实现排版目的。 这里针对p设置字间距&…

基本数据类型

上节回顾 1.循环打印数列1&#xff0c;3&#xff0c;5&#xff0c;.........&#xff0c;99 for i in range(100):if i%21:print (i) 2.turtle 库 # penup 抬笔 # pendown 落笔 # pensize 画笔大小 # pencolor 画笔颜色## 画笔运动函数 # fd 前进 # bk 后退 # goto 到达指定的坐…

修改系统默认 alert 弹框样式

修改默认 alert 弹框&#xff0c;思路很简单&#xff0c;定义一个 alert(e) 函数&#xff0c;加载最开头即可。 css部分&#xff1a; <style>#msg{width:266px;position: fixed;z-index:999;top: 49%;margin-top:-80px;left:50%;margin-left:-133px;background:#fff;bo…

Code Review的重要性

这几天一直在搞一家客户的产品升级动作&#xff0c;数据的转移已经完成大部分&#xff0c;因为升级主要的目标是处理性能问题&#xff0c;所以我针对性的对将要升级的版本进行了一些操作性能检查&#xff0c;真是不做不知道&#xff0c;一做吓一跳&#xff0c;有一个查询选择人…

Myeclipse快捷键总结大全

Myeclipse快捷键 Ctrl1 快速修复 CtrlD: 删除当前行 CtrlQ 定位到最后编辑的地方 CtrlL 定位在某行 CtrlO 快速显示 OutLine CtrlT 快速显示当前类的继承结构 CtrlW 关闭当前Editer CtrlK 快速定位到下一个 CtrlE 快速显示当前Editer的下拉列表 CtrlJ 正向增量查找(按…

秋蝉鸣泣之时

奇怪的题目背景 所误入的 是回忆的教室 所响起的 是通向绝望的计时器 所到达的 是开始的结束 你 能相信吗? 题目背景 最近礼奈酱学会了线段树和树状数组两种数据结构 由于礼奈酱上课听的很认真&#xff0c;所以她知道 树状数组常见的操作是 单点加区间求和 线段树常见的操作是…

对浅拷贝与深拷贝的研究

浅拷贝只复制指向某个对象的指针&#xff0c;而不复制对象本身&#xff0c;新旧对象还是共享同一块内存。 浅拷贝的实现方式 Object.assign()&#xff1a;需注意的是目标对象只有一层的时候&#xff0c;是深拷贝Array.prototype.concat()Array.prototype.slice()深拷贝就是在拷…

:nth-child(n)与:nth-of-type(n)为啥显示不对呢

首先是二者的区别 :nth-child(n) 是选择父元素的第n个子元素。 :nth-of-type(n) 是选择父元素的第n个同类型的子元素 举个例子&#xff1a; <div class"read"><h1>title</h1><p>paragraph1</p><p>paragraph2</p> <!…

css3 box-shadow阴影(内外阴影与发光)讲解

基础说明&#xff1a; 外阴影&#xff1a;box-shadow: X轴 Y轴 Rpx color; 属性说明&#xff08;顺序依次对应&#xff09;&#xff1a; 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值&#xff08;大小&#xff09; 阴影的颜色 内阴影&#xff1a;b…

Apress Pro Android 2

Apress Pro Android 2转载于:https://www.cnblogs.com/gavinhughhu/archive/2010/03/21/1690792.html

Query意图分析:记一次完整的机器学习过程(scikit learn library学习笔记)

所谓学习问题&#xff0c;是指观察由n个样本组成的集合&#xff0c;并根据这些数据来预测未知数据的性质。 学习任务&#xff08;一个二分类问题&#xff09;&#xff1a; 区分一个普通的互联网检索Query是否具有某个垂直领域的意图。假设现在有一个O2O领域的垂直搜索引擎&…

使用 vue-cli 开发多页应用

修改的webpack配置文件 全局配置 修改 webpack.base.conf.js 打开 ~\build\webpack.base.conf.js &#xff0c;找到entry&#xff0c;添加多入口 entry: {app: ./src/main.js,app2: ./src/main2.js,app3: ./src/main3.js, }, 运行、编译的时候每一个入口都会对应一个Chunk …