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

2020-04-16 08:13:57易采站长站整理

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

  话说我订阅了不少了新闻邮件(Newsletter),比如JavaScript Weekly。每周收到一封邮件,了解本周的大事。
2015712153636746.jpg (349×460)

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

  然后,就发现这事不那么容易。抛开后台和编辑工作,单单是设计一个Email样板,就需要不少心思。
2015712153840405.jpg (550×671)

因为这种带格式的邮件,其实就是一张网页,正式名称叫做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复制内容到剪贴板

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