[转载] Html Email 邮件html页编写指南
Html Email 邮件html页编写指南
前言
写过邮件的html的童学应该都知道，邮件的html一般都用table来布局，为什么呢？原因是大多数的邮件客户端（比如Outlook和Gmail），会过滤HTML设置，让邮件面目全非。
经过多次的邮件编写实践及度娘的指导，我发现，编写HTML Email的窍门，就是使用15年前的网页制作方法。
自制兼容outlook与foxmail邮件模版
局部重点规则
1. Doctype
目前，兼容性最好的Doctype是XHTML 1.0 Strict，事实上Gmail和Hotmail会删掉你的Doctype，换上下面这个Doctype（不能使用HTML5的语法）
1 2 3 4 5HTML Email编写指南 6 7 8
2. 布局
网页的布局（layout）必须使用表格（table）。首先，放置一个最外层的大表格，用来设置背景，具体内容再在里面嵌套表格（div、p等还是不要想了）。
1 2
| Hello! | 5
3. 图片相关
图片是唯一可以引用的外部资源。其他的外部资源，比如样式表文件、字体文件、视频文件等，一概不能引用。
有些客户端会给图片链接加上边框，要去除边框。
需要注意的是，不少客户端默认不显示图片（比如Gmail），所以要确保即使没有图片，主要内容也能被阅读。
1
- img指定width 与 height
因为在有些邮箱里，图片不是默认加载的，往往加载前需要用户的许可。那么高宽的指定可以使邮件在没有图片撑出样子前也能保持良好的大小结构，加上 alt 属性更可以明确告知图片的内容让用户选择是否下载它们。
如果因为项目需要（比如需要适配 Retina 高分屏），width 和 height 属性更是必不可少的，并且由于一些 outlook 版本的奇葩表现，width 和 height 属性一定不要加上单位！一定不要加上单位！一定不要加上单位！重要的事情说三遍。
因为加上单位会使一些版本的 OutLook 无法正确识别，导致图片显示使用实际的宽高而非我们设置的。
- img在outlook2013下有间距
outlook2013中，堆叠的图片会显示大概10px的间距
这个问题只在图片高度小于20px的时候出现，开心的是通过简单的小技巧就可以解决：为td设置和图片高度一样的行高或image设为display：block；
- 背景图片
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. 模板
使用别人已经做好的模板，是一个不错的选择（这里和这里），网上还可以搜到更多。
自己开发的话，可以参考HTML Email Boilerplate和Emailology。
全局规则
1.页面宽度请设定在550到650px以内。
2.使用table表格来布局。
3.如果需要邮件居中显示，请在table里设定align="center"。
4、不要写