使用HTML编写简单的邮件模版_html-js-css

使用HTML编写简单的邮件模版

今天，我想写一个"低技术"问题。

　　话说我订阅了不少了新闻邮件（Newsletter），比如JavaScript Weekly。

每周收到一封邮件，了解本周的大事。

　有一天，我就在想，是不是我也能做一个这样的邮件？

　　然后，就发现这事不那么容易。

抛开后台和编辑工作，单单是设计一个Email样板，就需要不少心思。

因为这种带格式的邮件，其实就是一张网页，正式名称叫做HTML Email。

它能否正常显示，完全取决于邮件客户端。

大多数的邮件客户端（比如Outlook和Gmail），会过滤HTML设置，让邮件面目全非。

　　我发现，编写HTML Email的窍门，就是使用15年前的网页制作方法。

下面就是我整理的编写指南。

　　1. Doctype

　　目前，兼容性最好的Doctype是XHTML 1.0 Strict，事实上Gmail和Hotmail会删掉你的Doctype，换上这个Doctype。

XML/HTML Code复制内容到剪贴板

<!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的语法。

　　2. 布局

　　网页的布局（layout）必须使用表格（table）。

首先，放置一个最外层的大表格，用来设置背景。

XML/HTML Code复制内容到剪贴板

　　表格的 border 属性等于1, 是为了方便开发。

正式发布的时候，再把这个属性设为0。

　　在内层，放置第二个表格。

用来展示内容。

第二个table的宽度定为600像素，防止超过客户端的显示宽度。

XML/HTML Code复制内容到剪贴板

<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>