邮件模板开发

最新推荐文章于 2022-12-03 20:35:47 发布

fukaiit

最新推荐文章于 2022-12-03 20:35:47 发布

阅读量1k

点赞数 1

分类专栏：其它文章标签：邮件模板

本文链接：https://blog.csdn.net/fukaiit/article/details/100800058

版权

其它专栏收录该内容

7 篇文章 0 订阅

订阅专栏

开发一个邮件模板，为了保证兼容网页版（包括电脑和手机）、电脑客户端、移动端APP等，还是有很多需要注意的地方。
估计以后也不会经常开发邮件模板，简单总结一下。

一、基本规则

基本模板
为了保证良好兼容性，使用Doctype XHTML 1.0，不可使用html5

<!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>邮件模板</title>
　　<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
　</head>
</html>

几乎全部使用table布局，即使div和p标签等也尽量少用，使用table嵌套、合并等各种繁琐操作进行布局

<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td></td>
    </tr>
</table>

所有样式使用style行内样式定义
能使用标签或属性呈现的样式就不要使用style，比如加粗用b标签，而不用font-weight
设置行高

<td style="mso-line-height-rule: exactly; line-height: 36px;">
</td>

各种间隔使用空的table、tr、td实现，使用padding可能存在兼容性问题，少用margin、padding
各种样式尽量不要写简写，比如不写margin，写margin-left
添加图片，宽高使用属性，而不使用样式，不写单位（符合第4条）

<img width="60" height="60" alt="" />

二、edm 邮件制作指南

请参考：【html】edm 邮件制作指南
在制作完成后，按照该指南检查。

三、模板

自己从头编写可能费时费力，可以下载一些邮件模板直接修改，或者有一些可定制邮件模板的工具网站可以使用。

RocketWay
这个网站的邮件模板非常漂亮，可在网页编辑器中直接通过傻瓜方式编辑自己的邮件模板，然后下载html格式。
Benchmark
这个是收费的，要注册试用。

references：

https://www.cnblogs.com/yjzhu/archive/2012/11/05/2755155.html
https://www.cnblogs.com/keang001/p/9184771.html
https://blog.csdn.net/w20101310/article/details/80616457