outlook html阅读,Html Email 邮件html页编写指南
前言
写过邮件的html的童学应该都知道,邮件的html一般都用table来布局,为什么呢?原因是大多数的邮件客户端(比如Outlook和Gmail),会过滤HTML设置,让邮件面目全非。
经过多次的邮件编写实践及度娘的指导,我发现,编写HTML Email的窍门,就是使用15年前的网页制作方法。
局部重点规则
1. Doctype
目前,兼容性最好的Doctype是XHTML 1.0 Strict,事实上Gmail和Hotmail会删掉你的Doctype,换上下面这个Doctype(不能使用HTML5的语法)
1 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2 3
4 5 HTML Email编写指南6 7 8
2. 布局
网页的布局(layout)必须使用表格(table)。首先,放置一个最外层的大表格,用来设置背景,具体内容再在里面嵌套表格(div、p等还是不要想了)。
1
2
Hello! |
7
3. 图片相关
图片是唯一可以引用的外部资源。其他的外部资源,比如样式表文件、字体文件、视频文件等,一概不能引用。
有些客户端会给图片链接加上边框,要去除边框。
需要注意的是,不少客户端默认不显示图片(比如Gmail),所以要确保即使没有图片,主要内容也能被阅读。
1 img指定width 与 height
因为在有些邮箱里,图片不是默认加载的,往往加载前需要用户的许可。那么高宽的指定可以使邮件在没有图片撑出样子前也能保持良好的大小结构,加上 alt 属性更可以明确告知图片的内容让用户选择是否下载它们。
如果因为项目需要(比如需要适配 Retina 高分屏),width 和 height 属性更是必不可少的,并且由于一些 outlook 版本的奇葩表现,width 和 height 属性一定不要加上单位!一定不要加上单位!一定不要加上单位!重要的事情说三遍。
因为加上单位会使一些版本的 OutLook 无法正确识别,导致图片显示使用实际的宽高而非我们设置的。img在outlook2013下有间距
outlook2013中,堆叠的图片会显示大概10px的间距
这个问题只在图片高度小于20px的时候出现,开心的是通过简单的小技巧就可以解决:为td设置和图片高度一样的行高或image设为display:block;
width="600" />
背景图片
style 内容里面 background 可以设置 color,但是 image 会被过滤,就是说不能通过 CSS 来设置背景图片了。但是有一个很有意思的元素属性,也叫 background,里面可以定义一个图片路径,但是功能有限,比如无法定位背景图片等。
例如要给一个单元格加一个背景,必须这样写:
margin 与 padding
Outlook 2007-2013 不支持图片的 margin 与 padding 样式,必要的时候可以尝试 hspace 和 vspace 属性:
4. 文字相关
所有的CSS规则,最好都采用行内样式。因为放置在网页头部的样式,很可能会被客户端删除。客户端对CSS规则的支持情况,请看这里。字体
在 HTML 邮件中,font-family 只支持系统字体,不支持自定义字体,也不支持 font 简写,color 尽可能也不要使用简写:
要写成这样
1
对于加粗字体,我们可以使用 b 标签而不是 CSS 的 font-weight,前文说过,HTML 标签和属性能解决的样式决不使用 CSS 样式。行高
在 OutLook 中会有个默认的行高最小值,特别是当设置 font-family 为微软雅黑时,默认的行高差不多为 Word 中的两倍行距,如果 line-height 设置的值小于默认的行高,无论你设置的是多少,则始终使用默认值,在很多情况下这是不能忍的,好在有个神奇的 mso-line-height-rule,使用行高时添加 mso-line-height-rule:exactly; 就能使行高始终等于我们所设置的值。
这只是微软的 CSS 属性,对其他客户端没影响。并且该属性只在块元素上有效,所以想在 font 和 span 中用就洗洗睡了吧。
5. W3C校验和测试工具
要保证最终的代码,能够通过W3C的校验,因为某些客户端会把不合格属性剥离。还要使用测试工具(1, 2, 3),查看在不同客户端的显示结果。
发送HTML Email的时候,不要忘记MIME类型不能使用
1 Content-Type: text/plain;
要使用
1 Content-Type: Multipart/Alternative;
6. 模板
使用别人已经做好的模板,是一个不错的选择(这里和这里),网上还可以搜到更多。
全局规则
1.页面宽度请设定在550到650px以内。
2.使用table表格来布局。
3.如果需要邮件居中显示,请在table里设定align="center"。
4、不要写
5、不要使用外链的css样式定义文字和图片(外链的css样式在邮件里将不能被读取,所以发送出去的邮件因为没有链接到样式,将会使你的邮件内容样式丢失),正确的写法:
文字。
6、不使用flash、java、javascript、frames、iframe、activeX以及DHTML,如果页面中的图片一定要动态的,请将flash文件转换成gif动画使用,但在outlook2007里,gif将不能正常显示,因为outlook2007限制gif动画。
7、不要使用
以外的body、meta和html之类的标签,部分邮箱系统会把这些过滤掉。
8、背景图片代码写法如下:
,但请注意,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. 绝对定位不能用,清除浮动用
13.如果 td 和 td 之间有间隔,使用
,这样写的话 td 之间是不会有间隔的。使用也是不会有空格的。如果 td 之间有间隙,必须用 来隔开。但是如果是 table,则里面的内容会在上下有空行。
14.少用图片,邮箱不会过滤你的img标签,但是系统往往会默认不载入陌生来信的图片,如果用了很多图片的邮件,在片没有载入的情况下,丑陋无比甚至看不清内容,没耐心的用户直接就删除了。图片上务必加上alt。
outlook 规则
1.在
里设置 margin 是无效的,不论是 margin-left、margin-right、margin-top 或者 margin-boottom 都没有效果。
2.如果要使用
标签要考虑到
标签本身自带的上下行之间的行高。
yahoo规则
1.在table里设定align="center"无法居中, 需要内联style=“margin:0 auto,width:XX”
foxmail 规则
1.foxmail中所有p标签的Margin:0; 使用p标签时需要设置margin
作者:lhweb15
outlook html阅读,Html Email 邮件html页编写指南相关推荐
- Html Email 邮件html页编写指南
前言 写过邮件的html的童学应该都知道,邮件的html一般都用table来布局,为什么呢?原因是大多数的邮件客户端(比如Outlook和Gmail),会过滤HTML设置,让邮件面目全非. 经过多次的 ...
- python如何读取outlook邮件_通过MAPI使用Python从Outlook中阅读电子邮件
通过MAPI使用Python从Outlook中阅读电子邮件 我试图编写一个简短的程序,将读取我的Exchange / Outlookconfiguration文件中的文件夹内的电子邮件内容,以便我可以 ...
- 关闭outlook express系统提示压缩邮件导致邮件丢失
From:http://www.sixcolor.com.cn/knowledge-base/jie-jue-guan-bi-outlook-expressxi-tong-ti-shi-ya-suo- ...
- android javamail获取邮件太多太慢_java 实现 email 邮件发送最简单优雅的方式(网易 163 为例)
如何使用IMAP服务? 首先介绍一些邮件发送的基础知识,如果你已经知道可以跳过. 直接到 Email 邮件发送实现的部分. IMAP是什么? IMAP,即Internet Message Access ...
- dovecot vsz_limit参造成foxmail、outlook等客户端工具接收邮件有时候报错
问题:dovecot并发数造成foxmail.outlook等客户端工具接收邮件有时候报错,关闭客户端工具后又可以了. /var/log/maillog日志有大量的报错: mail dovecot: ...
- C#发送Email邮件(实例:QQ邮箱和Gmail邮箱)
下面用到的邮件账号和密码都不是真实的,需要测试就换成自己的邮件账号.需要引用: using System.Net.Mail; using System.Text; using System.Net;程 ...
- Bella Email邮件发送模板
简介: Bella Email邮件发送模板是一款HTML5网站模板.aspku提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢. 下载地址: http://www.bytepan.com/X3 ...
- Email邮件发送设置 工具开发整理(网易邮箱、Mailgun为例) 下篇
Email邮件设置(网易邮箱.Mailgun) 下篇 说明:STMP服务邮件发送工具类,其中包括文本发送.html发送.附件发送. 1.maven pom 配置 <dependency> ...
- Outlook html 图片白色空白,outlook签名设置_解决Outlook中的签名和邮件图片都显示空白的办法_outlook邮件空白...
Outlook中的签名和邮件图片都显示空白 1.打开"文件". 2.点击"选项". 3.点击"邮件". 4.点击"编辑器选项&qu ...
最新文章
- 怎样在Red Hat Enterprise Linux 5.4版本上安装GCC?
- 2021年春季学期-信号与系统-第九次作业参考答案
- 互联网协议 — UDP 用户数据报协议
- linux统计日志,Linux一些常使用的统计日志 方法
- 应用系统日志采集解决方案
- 职称计算机考试 数量,职称计算机考试WPS基础考点:自动求和
- 它利用计算机和现代通信技术,现代通信技术复习概论
- 【2016年第5期】数据科学人才的需求与培养
- 江苏省计算机分级考试试题,江苏省计算机等级考试基础知识考题.doc
- 关于laravel模板中生成URL的几种模式总结
- 字节跳动面试经验 php,双指针算法:字节跳动初级面试题 PHP
- 【NLP】用腻了 CRF,试试 LAN 吧?
- SQL Server — 更改数据库名
- 基于python车牌号识别_python中使用Opencv进行车牌号检测——2018.10.24
- Linux目录结构+Linux快捷键+Linux安装软件+Linux常用命令
- 溢出部分用省略号表示
- react学习笔记(二)
- 822D My pretty girl Noora
- linux 时钟分频,浅析AD9522时钟分频电路原理
- windows控制台cmd乱码解决方案