北京网站推广|网站制作|网络推广|网站建设,建设银行杭州分行网站,wordpress分类随机文章,网站开发liucheng前言
写过邮件的html的童学应该都知道#xff0c;邮件的html一般都用table来布局#xff0c;为什么呢#xff1f;原因是大多数的邮件客户端#xff08;比如Outlook和Gmail#xff09;#xff0c;会过滤HTML设置#xff0c;让邮件面目全非。
经过多次的邮件编写实践及度…前言
写过邮件的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 xmlnshttp://www.w3.org/1999/xhtmlheadmeta http-equivContent-Type contenttext/html; charsetUTF-8 /titleHTML Email编写指南/titlemeta nameviewport contentwidthdevice-width, initial-scale1.0//head
/html
2. 布局
网页的布局layout必须使用表格table。首先放置一个最外层的大表格用来设置背景具体内容再在里面嵌套表格div、p等还是不要想了。 body stylemargin: 0; padding: 0;table border1 cellpadding0 cellspacing0 width100%tr td Hello! /td/tr/table/body
3. 图片相关
图片是唯一可以引用的外部资源。其他的外部资源比如样式表文件、字体文件、视频文件等一概不能引用。
有些客户端会给图片链接加上边框要去除边框。
需要注意的是不少客户端默认不显示图片比如Gmail所以要确保即使没有图片主要内容也能被阅读。 1 img border0 styledisplay:block;outline:none;text-decoration:none,-ms-interpolation-mode:bicubic;border:none;
img指定width 与 height
因为在有些邮箱里图片不是默认加载的往往加载前需要用户的许可。那么高宽的指定可以使邮件在没有图片撑出样子前也能保持良好的大小结构加上 alt 属性更可以明确告知图片的内容让用户选择是否下载它们。
如果因为项目需要比如需要适配 Retina 高分屏width 和 height 属性更是必不可少的并且由于一些 outlook 版本的奇葩表现width 和 height 属性一定不要加上单位一定不要加上单位一定不要加上单位重要的事情说三遍。
因为加上单位会使一些版本的 OutLook 无法正确识别导致图片显示使用实际的宽高而非我们设置的。
img width10px height10px src*.png /
img在outlook2013下有间距
outlook2013中堆叠的图片会显示大概10px的间距
这个问题只在图片高度小于20px的时候出现开心的是通过简单的小技巧就可以解决为td设置和图片高度一样的行高或image设为displayblock
td width600 height80 styleline-height: 80px; img height80 srchttp://www.website.com/images/Nature_01.jpgwidth600 /
/td
背景图片
style 内容里面 background 可以设置 color但是 image 会被过滤就是说不能通过 CSS 来设置背景图片了。但是有一个很有意思的元素属性也叫 background里面可以定义一个图片路径但是功能有限比如无法定位背景图片等。
例如要给一个单元格加一个背景必须这样写
td background*.png!-- ... --
/tdmargin 与 padding
Outlook 2007-2013 不支持图片的 margin 与 padding 样式必要的时候可以尝试 hspace 和 vspace 属性
img vspace10 hspace10 src*.png /
4. 文字相关
所有的CSS规则最好都采用行内样式。因为放置在网页头部的样式很可能会被客户端删除。客户端对CSS规则的支持情况请看这里。
字体
在 HTML 邮件中font-family 只支持系统字体不支持自定义字体也不支持 font 简写color 尽可能也不要使用简写
p stylefont: 8px/14px Arial, sans-serif;/p
要写成这样 1 p stylefont-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 stylemso-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里设定aligncenter。 4、不要写style标签、不要写class所有CSS都用style属性什么元素需要什么样式就用style写内联的CSS。 5、不要使用外链的css样式定义文字和图片外链的css样式在邮件里将不能被读取所以发送出去的邮件因为没有链接到样式将会使你的邮件内容样式丢失正确的写法td stylefont-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 backgroundbackground.gif cellspacing0 cellpadding0/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 styleclear:both/table 13.如果 td 和 td 之间有间隔使用td styleborder-bottom:10px solid #fff/td这样写的话 td 之间是不会有间隔的。使用td stylemargin-bottom: 10px/td也是不会有空格的。如果 td 之间有间隙必须用td/tdtd height10pxnbsp;/tdtd/td来隔开。但是如果是 table则table styleborder-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里设定aligncenter无法居中 需要内联style“margin0 autowidthXX”foxmail 规则 1.foxmail中所有p标签的Margin:0; 使用p标签时需要设置margin
