HTML邮件制作规范

以下内容有些是别人总结的,有些是自己在工作中总结的。

模板最佳尺寸:显示宽度550px-750px,模板高度控制在一屏以内。

1、 table css方式构建模板

  Div css布局不完全被邮件客户端支持,所以无法使用div css布局。

2、 可以使用editplues,或者UltraEdit等工具制作html,但务必使用可视化工具检查嵌套情况推荐Dreamweaver

3、 插入的图片要定义宽度,高度,针对(editpluesUltraEdit等工具更要注意这一点)

4、 严禁使用背景图片

  在outlook2007中,背景图片将无法显示,其他邮件客户端可正确显示背景图片。

  Gmail也不支持css里面的背景图,

5、 严禁使用map标记形式

  造成后期可视化统计困难

6、 不使用word转换的html文件作为模板

7、 不要用外部链接的css文件

  <link rel="stylesheet" rev="stylesheet" type="text/css" href="/css/new/common.css" media="all" />
  这样是抓取不到css的,要写在html,head里面

8、网站或者论坛客户自己有服务器的涉及上传模板文件的按照这个格式

  http://www.abc.com/file/0902_tr/edm.html

  http://www.abc.com/file/0902_tr/edm_online.html

  这样的格式系统无法抓取

  http://www.abc.com/file/0902_tr/

9、模板中的图片请使用绝对路径,完整的URl

  <img src="http://www.abc/123.jpg" width="140" height="123" border="0" ></img>

  <img src="http://www.abc/456.jpg" width="140" height="123" border="0" ></img>

10、一个td里面不要放多个图片,请放在不同td里面,

  <table width="136" border="0" cellspacing="0" cellpadding="0">

    <tr>

    <td><img src="http://www.abc/123.jpg" width="140" height="123" border="0" ></img></td>

    <td><img src="http://www.abc/456.jpg" width="140" height="123" border="0" ></img></td>

    </tr>

  </table>

11、<img src="http://444/edm1_03.jpg" width="570" height="52"      border="0" />

12、不规范的换行会让图片丢失

=========================以下是我自己总结的===========================

1、 在outlook里面很多css属性不支持(比如:margin,overflow,text-overflow等)

  这是查看各种邮箱属性支持情况的网站

  https://www.campaignmonitor.com/css/

2、在outlook上不能用背景图片,不能用网络图片加载。

3、在outlook上图片设置的宽高是不管用的

4、在outlook上实现dom结构居中要用align=center

5、outlook会自动加大行距间距

6、页面元素之间有间距可能是html里面混入了$nbsp;(也就是空格字符)

7、align=center在不同的浏览器的不同的邮箱解读代码是不一样的,纠错能力也不一样,

8、 邮件里文字的居中就用text-align,dom的居中就用align=center

9、Foxmail里面要想实现超出的文本不折行,超出部分显示省略号,建议不要直接把文本放到td下面,而是在td下面创建a标签,把内容放到a标签下,然后相应样式写在a标签里。

10、Foxmail不支持https的图片路径

11、有些邮箱上页面结构显示不正确的问题如果和以上内容无关的话建议采用别的dom结构来试试。

12、outlook邮箱中,多个连续的” ”或&nbsp;符号不受宽度样式的限制,会一直往后延伸。

  目前前端没有找到解决办法。

 

PS:

在浏览器里面浏览正常的模板,不一定正常!!!,要用发送系统抓取模板新建任务,发送到邮箱用浏览或者用客户端查看,邮件客户端软件和邮箱服务商的html解析水平基本停留在table布局阶段,而且出于安全考虑也有很多禁忌,请使用table css布局,用Dreamweaver修改模板后还要查看html代码部分,空连接,怪异的或者过多的alt,title值(建议不超过30个汉字),没有宽高的图片都会造成邮件显示错误.

建议的测试环境,操作系统xp,win7,邮件客户端outlook2007,outlookexpre,foxmail6.0以上

Ie下的qq邮箱,126邮箱,hotmail邮箱,搜狐邮箱,新浪邮箱等等

有精力的话可以再在火狐下面再用以上邮箱测试测试

很多人用outlook2007,所以要着重测试.

参考资料

1、http://blog.csdn.net/sykent/article/details/8584637


更多专业前端知识,请上 【猿2048】www.mk2048.com

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

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

相关文章

Oracle学习:新建表空间

1. 以 sysdba 身份登入Oracle sqlplus / as sysdba; 2. 创建表空间 create tablespace (空间名)fwptfs (数据文件存放路径)datafile D:\xxx (初始大小)size 500m (自动扩容&#xff0c;每次200m)autoextend on next 200m; 3. 创建用户 create user (用户名)fwptfs…

在Jersey 2中进行集成测试自定义验证约束

我最近加入了一个团队&#xff0c;试图将一个单一的遗留系统转换为Java中的RESTful服务集。 他们决定使用最新的2.x版本的Jersey作为REST容器&#xff0c;这对我来说不是首选&#xff0c;因为我不是JSR- *规范的忠实拥护者。 但是现在我必须承认&#xff0c;JAX-RS 2.x的运行正…

mysql什么实务_MysQL是什么类型的据库?

【单选题】【听力题】Listen to the interview with Ajay, someone from India. Are the following statements true or false? (6.0分)【听力题】Listen to the talk about the changing of the guard ceremony in London. Then fill in the details in the process. (8.0分)…

tomcat7使用dbcp连接池遇到的坑

项目部署在tomcat后每隔一段时间便会报错 Cause: java.sql.SQLException: Could not retrieve transation read-only status server ; SQL []; Could not retrieve transation read-only status server; nested exception is java.sql.SQLException: Could not retrieve transa…

纯CSS实现3D照片墙

HTML部分&#xff1a; <body><div class"photo-wrap"> <!-- 舞台 --><div class"container"> <!-- 容器 --><div class"img">我是中心</div><div class"img img01"><img src&q…

Neo4j Backup:在Mark Needham上存储副本和一致性检查

我上周写的有关 Neo4j在线备份工具的鲜为人知的事情之一是&#xff0c;从概念上讲&#xff0c;它包含两个部分&#xff1a; 将商店文件复制到您选择的位置 验证这些存储文件是否一致。 默认情况下&#xff0c;这两个命令都在您运行“ neo4j-backup”脚本时运行&#xff0c;但…

Guava之RangeMap

在Guava官方API上面可以得知&#xff1a;RangeMap是一种集合类型( collection type)&#xff0c;它将不相交、且不为空的Range&#xff08;key&#xff09;映射给一个值&#xff08;Value&#xff09;。和RangeSet不一样&#xff0c;RangeMap不可以将相邻的区间合并&#xff0c…

sqoop遇到mysql字段为保留字_关于在sqoop 导出数据到mysql数据库的过程对于空字符的处理。...

今天在做sqoop的导入和导出的操作。在导出数据到mysql数据库的时候一直有问题&#xff0c;在导入空字段的时候就出现下面这个错误。WARN hdfs.DFSClient: Caught exceptionjava.lang.InterruptedExceptionat java.lang.Object.wait(Native Method)at java.lang.Thread.join(Thr…

CSS3新增的伪类选择器

伪类选择器的作用&#xff1a;对已有选择器做进一步的限制&#xff0c;对已有选择器能匹配的元素做进一步的过滤。CSS 3提供的伪类选择器主要分为以下三类&#xff1a; 结构性伪类选择器UI元素状态伪类选择器其他伪类选择器 1、结构性伪类选择器 Selector:root&#xff1a;匹…

签名SOAP消息–生成封装的XML签名

数字签名是使数字内容真实可信的一种广泛使用的机制。 通过为某些内容生成数字签名&#xff0c;我们可以让另一方能够验证该内容。 通过此验证&#xff0c;它可以保证在我们签名后不会更改。 通过这个示例&#xff0c;我将分享如何为SOAP信封生成签名。 但是&#xff0c;这当然…

2019 The 19th Zhejiang University Programming Contest

感想&#xff1a; 今天三个人的状态比昨天计院校赛的状态要好很多&#xff0c;然而三个人都慢热体质导致签到题wa了很多发。最后虽然跟大家题数一样(6题)&#xff0c;然而输在罚时。 只能说&#xff0c;水题还是刷得少&#xff0c;看到签到都没灵感实在不应该。 题目链接&#…

openvas安装和基本使用

OpenVAS是开放式漏洞评估系统&#xff0c;也可以说它是一个包含着相关工具的网络扫描器。OpenVAS是开放式漏洞评估系统&#xff0c;也可以说它是一个包含着相关工具的网络扫描器。其核心部件是一个服务器&#xff0c;包括一套网络漏洞测试程序&#xff0c;可以检测远程系统和应…

修改mysql编码方式centos_CentOS下修改mysql数据库编码为UTF-8(附mysql开启远程链接和开放3306端口)...

楼主在配置好linux云服务器的jdk,tomcat,mysql后&#xff0c;当要开始部署项目是&#xff0c;忽然意识到一个很严重的问题&#xff0c;那就是数据库的编码问题&#xff0c;自安装完成后并未修改数据库的额编码。。。。下面就来讲说linux下修改mysql的编码问题吧。。有一个问题网…

Java 8 Lambda表达式的函数式编程– Monads

什么是monad &#xff1f;&#xff1a; monad是一种设计模式概念&#xff0c;用于大多数功能编程语言&#xff08;如Lisp&#xff09;或现代世界的Clojure或Scala中。 &#xff08;实际上&#xff0c;我会从scala复制一些内容。&#xff09;现在&#xff0c;为什么它在Java中变…

srtvlet filter

Filter&#xff0c;过滤器&#xff0c;顾名思义&#xff0c;即是对数据等的过滤&#xff0c;预处理过程。为什么要引入过滤器呢&#xff1f;在平常访问网站的时候&#xff0c;有时候发一些敏感的信息&#xff0c;发出后显示时 就会将敏感信息用*等字符替代&#xff0c;这就是用…

mysql怎么合并行_mysql怎么合并行

mysql合并行的方法&#xff1a;使用函数【GROUP_CONCAT()】&#xff0c;代码为【SELECT am.activeId,GROUP_CONCAT(m.modelName SEPARATOR ‘,’) modelName】。【相关学习推荐&#xff1a;mysql学习】mysql合并行的方法&#xff1a;一个字段可能对应多条数据&#xff0c;用mys…

ubuntu 14 编译ARM g2o-20160424

1. 安装eigen sudo apt-get install libeigen3-dev sudo apt-get install libsuitesparse-dev sudo apt-get install libqglviewer-dev 对于ARM版本&#xff0c;可以下载http://eigen.tuxfamily.org&#xff0c;之后放置在toolchain可以找到的三方库位置处&#xff0c;我使用的…

将旧项目从Ant迁移到Maven的4个简单步骤

一段时间以来&#xff0c;我们一直在考虑将构建从蚂蚁移植到Maven。 它发生在上个月&#xff0c;实际上比我们预期的要简单。 根据我的经验&#xff0c;这里简要介绍了我们遵循的步骤。 我们的应用程序是一个具有多个框架和技术的企业Web应用程序构建&#xff0c;并作为单个WAR…

浅谈servlet与jsp的关系

servlet是用java语言编写的&#xff0c;是一个java类。主要功能是用来接受、处理客户端的请求&#xff0c;并把处理结果返回到客户端显示。Jsp是servlet发展后期的产物。在没有jsp之前&#xff0c;servlet利用输出流动态生成整个HTML页面&#xff0c;输出内容包括每一个HTML标签…

折腾Java设计模式之建造者模式

博文原址&#xff1a;折腾Java设计模式之建造者模式 建造者模式 Separate the construction of a complex object from its representation, allowing the same construction process to create various representations. 将复杂对象的构造与其表现分离&#xff0c;允许相同的构…