HTML Email

🌙
手机阅读
本文目录结构
axihe

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


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang