Email页面代码书写建议及规范

时间  2019-11-29
标签 email 页面 代码 书写 建议 规范 繁體版
原文   原文链接

前几天看到口碑网的朋友写了一篇《如何编写兼容各主流邮箱的HTML邮件》，很不错。
在这里，我也要把个人经验和你们分享一下。css

众所周知， Email是一项最古老的互联网应用之一。
所以，很多邮件系统仍是会采用一些比较古老的处理方式，致使前端方面不少新的技术、新的特性没法被支持。
并且各个邮箱系统以及客户端的差别，也会使email的最终呈现出现很大的误差。
HTML 细节
就目前来讲，若是要作一个 email页面，为了保证最大的兼容性，有如下几点须要注意：
对于纯文本邮件：
  1. 邮件标题不要超过18个字；
  2. 每行不要超过34个字。
对于 HTML邮件：
  1. 邮件标题不要超过18个字；
  2. HTML代码和图片尽可能不要超过50kb；
  3. 页面宽度推荐500px，最大不要超过600px；
  4. 避免使用边缘的、非主流的HTML技术；
  5. 不使用css来布局，应该使用表格来布局；
  6. 不使用外联的css样式，而使用font标签来定义样式，定义连接颜色时也是如此，写法以下： <font style=" font-size:10pt; color:#000000">
    ...
    </font>
  7. 不使用Flash、Java、Javascript、frames、i-frames、ActiveX 以及 DHTML ；
  8. body和meta之类的标签是能够无视的，由于在不少邮箱系统里它会被过滤；
  9. 若是整个邮件有用到背景色或背景图，建议用如下方式处理：<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
    <tr>
    <td width="100%" height="100%" bgcolor=".....">
    <!--- 邮件内容 -->
    </td>
    </tr>
    </table>
  10. 有背景图片的时候，咱们要采用这种写法：<table background="background.gif" cellspacing="0" cellpadding="0">
图片屏蔽
因为图片能够用来侦测邮件的打开率和 email地址的有效性。
很多邮件客户端都会默认把邮件中的图片屏蔽，用户须要再点一下才能显示图片。

Blocking Issue
AOL v. 6.0-9.0
Gmail
Hotmail
Yahoo!
Outlook 2000/XP
Outlook 2003
Outlook Express w/SP2
Outlook Express w/o SP2
外链的图片是否默认被屏蔽
Yes
Yes
No
No
No
Yes
Yes
No
用户可否设置是否屏蔽图片
Yes
No
Yes
Yes
Yes
Yes
Yes
Yes
能不能让用户点击某个按钮就显示邮件中的图片
Yes
Yes
Yes
No
No
Yes
Yes
N/A
当发件人在用户的联系人列表里时是否默认显示图片
Yes
No
Yes
No
Yes
Yes
Yes
Yes
发件人在 ISP白名单中时能不能默认显示图片(国内好像没这个概念)
Yes
N/A
Yes
No
N/A
N/A
N/A
N/A
图片被屏蔽时是否显示 alt属性
No
Yes
No
No
No
No
No
N/A
预览时显示 windows的主题样式
No
No
No
No
Yes
Yes
Yes
Yes

来源： EmailLabs, 2004。国内用户经常使用的Foxmail彷佛没有屏蔽邮件内图片的功能，我也找不到相关设置的地方。
一旦图片被屏蔽，整个邮件就会变得面目全非，这里有如下一些建议：
  1. 重要内容尽可能避免使用图片，好比标题、连接等；
  2. 制做一份和邮件内容同样的web页面，而后在邮件顶部写一句话，相似：“若是您没法查看邮件内容，请点击这里查看”；
  3. 全部图片都要加上alt属性；
  4. 全部的图片都要定义高和宽；
  5. 通知收件人把你的发件地址加入白名单。
Outlook 2007 的限制
因为 outlook 2007使用了word的渲染引擎来展示邮件内容，因此不少HTML属性无法获得支持了，好比：
  • 背景图片(这一点很重要！)
  • css浮动和定位(这个没啥用)
  • 自定义列表项的图像(这个也没啥用)
  • Flash(反正不放)
  • GIF动画
  • 图片的alt属性(值得注意)
  • 表单(反正不放)
附：Email客户端的CSS支持状况
本资料来自国外某邮件营销公司，因此缺少国内邮件客户端的数据。
<style> 标签

 
gmail
Hotmail
Yahoo
Live Mail
Outlook/OE
AOL
Lotus Notes
Thunderbird
Mac Email
Entourage
Eudora
<head>中的 <style>标签
No
No
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
<body>中的 <style>标签
No
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No

<link> 标签

 
gmail
Hotmail
Yahoo
Live Mail
Outlook/OE
AOL
Lotus Notes
Thunderbird
Mac Email
Entourage
Eudora
<head>中的 <link>标签
N o
No
No
No
Yes
Yes
Yes
Yes
Yes
Yes
No
<body>中的 <link>标签
No
No
No
No
Yes
Yes
Yes
Yes
Yes
Yes
No

CSS 选择器

 
gmail
Hotmail
Yahoo
Live Mail
Outlook/OE
AOL
Lotus Notes
Thunderbird
Mac Email
Entourage
Eudora
*
No
No
No
No
Yes
Yes
Yes
Yes
Yes
Yes
No
e
No
No
No
No
Yes
Yes
Yes
Yes
Yes
Yes
No
e > f
No
No
Yes
No
No
No
No
Yes
Yes
Yes
No
e:link
No
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
e:active,
e:hover
No
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
e:focus
No
No
Yes
No
No
No
No
Yes
Yes
Yes
No
e + f
No
Yes
Yes
No
No
No
No
Yes
Yes
No
No
e [foo]
No
Yes
Yes
No
No
No
No
Yes
Yes
No
No
e.className
No
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
e#id
No
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
e:first-line
No
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
e:first-letter
No
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No

CSS 属性

 
gmail
Hotmail
Yahoo
Live Mail
Outlook/OE
AOL
Lotus Notes
Thunderbird
Mac Email
Entourage
Eudora
background-color
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
background-p_w_picpath
No
Yes, but
Yes
No
Yes *
Yes
Yes
Yes
Yes
Yes
No
background-position
No
No
No
No
Yes *
Yes
No
Yes
Yes
Yes
No
background-repeat
No
Yes
Yes
No
Yes *
Yes
No
Yes
Yes
Yes
No
border
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
border-collapse
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
No
No
border-spacing
Yes
No
Yes
No
No
No
No
Yes
Yes
No
No
bottom
No
Yes
Yes
No
Yes
Yes
No
Yes
Yes
Yes
No
caption-side
Yes
No
Yes
No
No
No
No
Yes
No
No
No
clip
No
Yes
Yes
No
Yes
Yes
No
Yes
Yes
Yes
No
color
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
No
cursor
No
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
No
No
direction
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
No
No
display
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
No
No
empty-cells
Yes
No
Yes
No
No
No
No
Yes
Yes
No
No
filter
No
No
Yes
Yes
No
No
No
No
No
No
No
float
No
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
font-family
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
No
font-size
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
No
font-style
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
No
font-variant
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
font-weight
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
No
height
No
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
left
No
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
letter-spacing
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
line-height
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
list-style-p_w_picpath
No
Yes
Yes
No
Yes
Yes
No
Yes
Yes
Yes
No
list-style-position
Yes
No
No
Yes
Yes
Yes
No
Yes
Yes
Yes
No
list-style-type
Yes
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
No
margin
Yes
No
Yes
No
Yes
Yes
No
Yes
Yes
Yes
No
opacity
No
No
Yes
Yes
No
No
No
Yes
Yes
No
No
overflow
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
padding
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
position
No
No
No
No
Yes
Yes
No
Yes
Yes
Yes
No
right
No
Yes
Yes
No
Yes
Yes
No
Yes
Yes
Yes
No
table-layout
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
text-align
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
No
text-decoration
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
No
text-indent
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
text-transform
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
top
No
Yes
Yes
No
Yes
Yes
No
Yes
Yes
Yes
No
vertical-align
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
visibility
No
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
white-space
Yes
Yes
Yes
No
No
No
No
Yes
Yes
Yes
No
width
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
word-spacing
Yes
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
No
z-index
No
Yes
Yes
No
Yes
Yes
No
Yes
Yes
Yes
No
(*) 不被 Microsoft Outlook 2007支持。
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程