一．规则
1. Doctype使用XHTML 1.0 Strict，或者1.0 Transitional，兼容性好
2. Email宽度最好在600-800px之间。以兼容不同的邮件客户端
3. 使用table布局，复杂情况下使用table嵌套。因为其他标签各客户端会呈现不同的样式或布局
4. Css尽量写行内样式。有些客户端会把style标签删除
5. Css不要写简写属性，比如margin:1em 0;
6. Img设置display:block;border:0; 来去除图片周围的空格；
7. 图片是唯一可以引用的外部资源。其他的外部资源，比如样式表文件、字体文件、视频文件等，一概不能引用。
8. 要在多个终端以及多个邮件客户端反复测试，避免可能出现的问题
二、相关文档
2. say hello to the html email boilerplate
3. templates.mailchimp.com/development 这个blog写的很全面
三、模板
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
* {
margin: 0;
padding: 0;
}
img {
border: 0 none;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
a img {
border: 0 none;
}
table,
td {
border-collapse: collapse;
}
table,
tr,
td {
margin: 0;
padding: 0;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
/* 合并表格的间隙，去掉单元格之间的间距，如有需要合并单元格为细线表格，可增加 border-collapse:collapse; */
td,
th,
caption,
input {
padding: 0;
border-collapse: collapse;
}
/* 去除单元格以及caption表头的padding值 */
#bodyTable {
height: 100% !important;
margin: 0;
padding: 0;
width: 100% !important;
}
</style>
</head>
<body>
<!-- 最外层table-->
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top">
<!-- 定宽table-->
<table border="0" cellpadding="0" cellspacing="0" width="700" id="emailContainer">
<tr>
<td align="center" valign="top">
<!-- 内容table-->
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top">
<!-- your content1 复杂结构 table嵌套 -->
<table width='100%' border='0' align='center' cellpadding='0' cellspacing='0'>
<tr>
<td height="60"><a href="http://www.zhaopin.com/" target="_blank"><img
src="http://zhuanti.minisite.zhaopin.com/edm/images/edmlogo.png"
alt="" border="0" style='border:none;display: block;'/></a></td>
<td width="380" style="font-size:12px;color:#dddddd"> </td>
<td style="font-size:12px">
<a href="http://rd2.zhaopin.com/portal/myrd/regnew.asp?za=2" target="_blank"
style="color:#fff;text-decoration:none;background:#566a7d;display:inline-block;padding:3px">企业登录</a>
</td>
<td style="font-size:12px">
<a href="http://mhr.zhaopin.com/mhr/register/?invmode=3&invuserid=100708&invtp=8"
target="_blank" style="color:#005aab;text-decoration:none">注册</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- your content2... -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
