Html Email 邮件html页编写指南

HTML 邮件内容虽然也是 HTML，但是和我们在网页上使用的 HTML 不同，因为安全原因，各大邮箱服务商及邮件客户端都会对邮件内容进行一定程度上的处理，不会按照你写的原本 HTML 展示。

在桌面和移动端渲染电子邮件大约有上百万种不同的组合方式。

尤其是鼎鼎大名的 OutLook，从 OutLook2007 开始便使用 Word HTML 引擎进行渲染，为了它的安全性从而使得整个邮件倒退回了 2000 年前，为了邮件的兼容性你不得不使用很多废弃的标签、属性，并且这一状况将会维持无数个

年头，因为虽然万事终有尽头，但 OutLook 始终存在。

因为微软一向地特立独行，使得 OutLook 成为了最难啃的骨头。因为 OutLook 支持的标签和属性少得可怜，所以只要兼容了 OutLook，其他邮箱客户端基本都不会有什么问题。

使用tableb布局

这几乎是 HTML 邮件与普通 HTML 页面最大的区别，因为各个邮箱对 div + css 这一套布局的解析问题很大（如 float / position 等 CSS 都会被过滤，甚至 margin: 0 auto都不起作用），基本各大邮箱都会解析混乱，所以老式的 table 布局是上乘之选。这就意味着 HTML 邮件中几乎只有这几个元素——table / tr / td / span / img / a，尽量避免使用 div / p 或是其他标签。

而且并不是所有邮箱都支持 colspan / rowspan 属性，所以所有布局都需要使用 table 嵌套解决。

1.Doctype

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

使用这个Doctype，也就意味着，不能使用HTML5的语法。

2.布局

网页的布局（layout）必须使用表格（table）。首先，放置一个最外层的大表格，用来设置背景。

基本html

3.图片

图片是唯一可以引用的外部资源。其他的外部资源，比如样式表文件、字体文件、视频文件等，一概不能引用。

有些客户端会给图片链接加上边框，要去除边框。

需要注意的是，不少客户端默认不显示图片（比如Gmail），所以要确保即使没有图片，主要内容也能被阅读。

4.行内样式

所有的CSS规则，最好都采用行内样式。因为放置在网页头部的样式，很可能会被客户端删除。客户端对CSS规则的支持情况，请看这里。

另外，不要采用CSS的简写形式，有些客户端不支持。比如，不要写成下面这样：

如果想表达

要写成下面这样：

相关文章

HTML 邮件兼容问题与解决方案

首先，我们先说一下如何制作图文HTML邮件。

有两种方法或途径可以制作图文HTML邮件。

一、自己写代码

自己写代码是终极的方法，但如果不是专业人员，自己写制作图文邮件的代码，那就太难了，反正有很多坑，不再细说。

非专业人员，建议不要尝试这种方法，不但时间和成本都很高，而且经常乱码和错位，造成邮件无法使用。

二、使用现成的平台

最有效的方法是：使用别人做好的现成的平台来写HTML邮件，这种方法做邮件就很简单了，可以说人人都会。这种方法使用现成的模板，只需要将文字或图片修改为自己的，生成代码后就制作好了邮件，更重要的是还可以在原来的基础上再次重新设计和布局，从而制作自己的独具特色和结构布局的专业邮件。

这种方法不但跳过了写代码这一步，而且其模板都是经过复制测试，兼容性很高，不会出现乱码和错位的情况。具体怎么做，请自行百度搜索“图文并茂+邮件”，很快就能找到的制作方法了。

其次，我们来说一下如何发送HTML邮件。

发送图文HTML邮件也很简单，发送方法如下：

首先，复制邮件代码，然后打开自己的邮箱，将内容区转换为代码输入方式，粘贴代码，就可以发送邮件了。详见下图（图1为QQ邮箱，图2为163邮箱）。

---