首页 > 编程 > HTML > 正文

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

2019-10-26 17:17:36
字体:
来源:转载
供稿:网友

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

  话说我订阅了不少了新闻邮件(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。

  • <!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)。首先,放置一个最外层的大表格,用来设置背景。

  • <body style="margin: 0; padding: 0;">     
  •  <table border="1" cellpadding="0" cellspacing="0" width="100%">     
  •   <tr>      <td> Hello! </td>  
  •   </tr>     
  •  </table>     
  • </body>  
  • 发表评论 共有条评论
    用户名: 密码:
    验证码: 匿名发表