最近需要发送html 格式的邮件，因为使用的是outlook，新版的outlook不支持html编辑，只能把页面内容拷贝到邮件里。发送后其他邮箱下查看邮件样式就会错乱，这里记录下趟的坑，以及代码开发的注意点。
1. 声明
目前，兼容性最好的Doctype是XHTML 1.0 Strict，事实上Gmail和Hotmail会删掉你的Doctype，换上这个Doctype。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. 语法
邮件编辑中不要使用HTML5语法，尽量不要使用语义化标签。
3. meta
使用以下meta
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
4. 样式
- 所有的CSS规则，最好都采用行内样式。因为放置在网页头部的样式，很可能会被客户端删除;
- 不要采用css 简写，例如 margin: 0 10px 要写成 margin-top :0;margin-bottom:0;margin-left:10px;margin-right:10px;
- 不要使用外部链接，img 是邮件中唯一的外部链接
- 所有的img 要设置border：0，同时width 属性和style 的width 都同时设置
- 不要使用float 和position ，对齐方式使用table 的align 和 valign
- 行间距尽量不适用margin，对间距要求严格的部分可以使用空的td 标签或者空白图片（http://edm.travelweekly-china.com/edms/edaily/img/spacer.gif）
- 样式尽量写在td上，tr 标签不要写style
- 最好所有的标签的写上width（img 和table 属性和style 同时限制width）
- a 标签上只改变字体相关，其他样式，例如padding 这种写在父级的td 上
- 尽量使用兼容性高的属性样式
4. 布局
布局必须使用table + 内联css 的方式。（因为很大部分邮件客户端不支持div + css 布局）
布局中不要使用 p / span 等标签，只用td，th这些，就当表格来操作 。
table 的标签
// 这里的table 宽度范围控制在600 - 800 之间
// 除了使用table 的width之外，style 中也要设置一下宽度
<table border="0" cellpadding="0" cellspacing="0"
width="800" align="center"
style="width:800px; margin:0 auto !important; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
看看人家的html 邮件
http://edm.travelweekly-china.com/edms/edaily/twc-edaily-191015.html
另外：
我是用outlook 发送邮件，遇到一个问题，就是编辑之后用outlook 查看没问题。但是有的客户是qq 邮箱，查看之后页面间距会变大。
因为outlook 编译后插入了很多不必要标签，这里有2种解决方案。
- 用outlook 编辑器，也就是不要使用html 邮件
- 代码保存到outlook编辑器，另存为html，之后在另存为的html 中删除不必要标签。
