邮件中写html代码规范,EDM电子邮件CSS和HTML编码规范

EDM是营销过程中比较重要的一种方式，而且在很多软件系统中，也经常会与用户进行电子邮件(Email)的沟通过程。本文档定义了电子邮件(Email)编码规范，便于前端开发工程师为邮件编写HTML模板的时候使用。

因为电子邮件的展现方式与一般Web页面不同，Web页面一般使用的是浏览器来进行渲染，而电子邮件多使用的是邮件客户端，如：Outlook、Foxmail、手机客户端APP等。所以，电子邮件要适配这些终端的渲染方式，因此标准就与我们之前编写的《Web前端开发规范手册》有所不同。

1 、使用

因为很多电子邮件客户端对CSS的支持都不是很好，而且对

和

标签支持比较差。如：在Outlook 2007/2013下，就不支持

和

使用padding和width。所以任何排版布局，都必须采用

注意：td尽量定义合适的宽度。

css样式不能使用嵌入和外联方式，一定要使用内联方式。不论是float属性还是清除浮动的clear都不能使用。因为在Outlook 2007/2013下，不支持clear、float、left、right、top、bottom等标签。所以像：float:left、clear:both都不能使用。

3、不能使用css shorthand(属性简写)

我们常常会在CSS的编码中如此书写：

内容

，但是在为电子邮件编写模板的时候，不能使用属性简写。要拆分成：内容这样的写法。

在一些电子邮件客户端，对块级元素的支持不好，如：p、div、h1~h6等都不建议使用，否则将可能对排版效果有着严重的影响。

图片是邮件模板排版的重要组成部分，很多邮件中的模板都会被邮件系统过滤，因此在排版之前就要考虑到如果图片无法显示，也可以让用户能够正常看到邮件排版和正常的布局。不能因为图片的缺失，造成整体排版的变形。因此与几个重要的元素必须体现：

必须设置width和height

增加必要的alt

不能使用.png格式图片，而是使用gif和jpg格式图片

设置border=”0”

设置display: block

在Outlook 2007/2013下不支持背景图片，即：background-image

图片链接必须是绝对路径，不能是相对路径

6、不能使用JavaScript

电子邮件客户端对flash、JavaScript支持都不好，甚至动态的gif也是不安全的。所以不建议在邮件模板中使用这些内容。

还有一些无法归类的问题，这里也列出来：

不要使用XHTML，请使用HTML

Doctype不是必须的

不能使用负边距，如：margin-left: -20px

换行多用
，尽量不用

最佳宽度为550~600px

不要使用postion