本文主要包含HTML,邮件等相关知识,佚名 希望在学习及工作中可以帮助到您
今天,我想写一个"低技术"问题。
话说我订阅了不少了新闻邮件(Newsletter),比如JavaScript Weekly。每周收到一封邮件,了解本周的大事。
有一天,我就在想,是不是我也能做一个这样的邮件?
然后,就发现这事不那么容易。抛开后台和编辑工作,单单是设计一个Email样板,就需要不少心思。
因为这种带格式的邮件,其实就是一张网页,正式名称叫做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>
表格的 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 </