前言
html邮件的开发一定不要像平时写html一样，咔咔写完才拿到邮件里测试！！！有很多标签和布局在邮件里面是不生效的，并且由于不同邮箱的邮件显示页面大小不同，也会导致效果差异。如有错误，敬请指正。
开发思路
想测试自己写的页面是否正常？可以把代码复制到qq邮箱的html编辑器，再发到其他邮箱（如：谷歌邮箱）看看邮件的效果。
样式限制
- 使用内联样式，即每个标签的样式都直接写到各自的style里，不能用类选择器、id选择器等
- 不能用简写，如不能直接写font，要分开写font-size、font-family、font-weight
- 不能用position、float等，如flex会无效
布局限制
由于样式限制，因此不能像平时一样进行页面布局，为了实现居中、左右等布局，可以把要展示的内容都放到table标签里，而不是像往常一样直接用div，各部分能用table的就用table，估计是HTML邮件里最友好的了，而且也可以table里面再加table实现更复杂的页面布局，具体可参考下面的代码示例。
<body>
<table border="0" style="width: 100%; height: 100%;">
<tr>
<td align="center" style="vertical-align: middle">
<table>
<tr>
<td style="width: 252px; height: 64px">
<h1>Hello</h1>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
居中
由于flex布局 和 calc() 等是不生效的，导致许多常规的水平垂直居中方法不可用，可以使用单元格的如下属性居中布局
<td align="center" style="vertical-align: middle">
除此之外，还可以通过如下代码实现（较常见）
style="margin: auto;"
标签限制
可以使用的：div，table，tr，td，img，a，br（不全，仅为自己使用过的）
不能 or 不建议用的：p
字体限制
只能使用系统字体，不能用自定义 or 引入外部字体
扫一扫
122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
