HTML Email
HTML Email
从头建立一个 HTML Email 模板，用来发邮件的。
有几个需要注意的点
Doctype
目前，兼容性最好的 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML Email编写指南</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
</html>
使用这个 Doctype，也就意味着，不能使用 HTML5 的语法。
布局
网页的布局（layout）必须使用表格（table）。首先，放置一个最外层的大表格，用来设置背景。
<body style="margin: 0; padding: 0;">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td> Hello! </td>
</tr>
</table>
</body>
表格的 border 属性等于 1, 是为了方便开发。正式发布的时候，再把这个属性设为 0。
在内层，放置第二个表格。用来展示内容。第二个 table 的宽度定为 600 像素，防止超过客户端的显示宽度。
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
<tr>
<td> Row 1 </td>
</tr>
<tr>
<td> Row 2 </td>
</tr>
<tr>
<td> Row 3 </td>
</tr>
</table>
图片
图片是唯一可以引用的外部资源。其他的外部资源，比如样式表文件、字体文件、视频文件等，一概不能引用。
有些客户端会给图片链接加上边框，要去除边框。
img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
a img {border:none;}
<img border="0" style="display:block;">
需要注意的是，不少客户端默认不显示图片（比如 Gmail），所以要确保即使没有图片，主要内容也能被阅读。
行内样式
所有的 CSS 规则，最好都采用行内样式。因为放置在网页头部的样式，很可能会被客户端删除。客户端对 CSS 规则的支持情况，请看这里。
另外，不要采用 CSS 的简写形式，有些客户端不支持。比如，不要写成下面这样：
style="font: 8px/14px Arial, sans-serif;"
如果想表达
<p style="margin: 1em 0;">
要写成下面这样：
<p style="margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0;">
W3C 校验和测试工具
要保证最终的代码，能够通过 W3C 的校验，因为某些客户端会把不合格属性剥离。还要使用测试工具（1, 2, 3），查看在不同客户端的显示结果。
发送 HTML Email 的时候，不要忘记 MIME 类型不能使用
Content-Type: text/plain;
而要使用
Content-Type: Multipart/Alternative;
发送工具可以考虑使用 MailChimp 和 Campaign Monitor 。
本文参考：http://www.ruanyifeng.com/blog/2013/06/html_email.html
更多 HTML 搜索
通过查看前端开发者在搜索引擎里的搜了哪些 HTML 内容，可以知道他们实际工作使用了什么技术或者什么地方薄弱；
你可以通过点击 HTML 常见搜索 来查看前端开发者都在搜哪些内容；
注：这里仅收录了常见搜索，并不是无论搜索什么都记录在里面的；
如果你是为了面试做准备的，那么推荐你查看 HTML面试题，这里基本包涵了市场上的所有 HTML 方面的面试题，让你更加牢固的掌握 HTML 知识
