HTML邮件模板编写规则，编写邮件HTML模板

工作中遇到需要发邮件模板给客户发送凭证，踩坑踩出来一下规则：

1.所有样式必须行内，否则不起作用

大部分邮件客户端中不支持使用外置css样式，最好使用内联样式

2.所有布局必须使用table，复杂布局使用table嵌套或单元格合并

布局尽量使用table ，将页面拆分成由上到下几个模块，有几个模块用几个tr标签。

3.有的邮件客户端table默认有边框，需要在代码中取消

大部分邮件客户端table默认有边框，在行内样式中设为0即可

4.元素样式尽量拆开写，margin:0;>margin-top:0;…

元素样式拆开写，border，margin，padding，background等等

5.元素需要取消默认样式 padding-top:0…

像p标签，tr，tb标签很多都会有默认的padding和margin样式，会影响到页面布局

6.如果有上下间隔，尽量不使用padding和margin，使用空的table或tr元素

页面中所有上下间隔尽量使用空的tr标签，如果使用margin可能会造成问题

7.没有字号标签都添加font-size:0px;具体到标签再设置具体字号

页面尽量所有标签都设置字号为0，因为有的邮件客户端会塞入大量实体空格标签造成页面布局错乱

以上是我自己编写HTML邮件模板的在Outlook，Foxmail，163，QQ邮箱，阿里云企业邮箱测试踩坑得出的规则。

邮件模板中最好不使用CSS3，也不是说不能使用，比如border-radius在大部分邮箱中是有效的，但是在某些邮箱（Outlook）中不起作用。为了邮件显示不会错乱，尽量不要使用CSS3的属性用作布局等操作。

遇到的坑汇总(大家遇到其他坑也可以在评论区进行说明，说不定会帮到其他人)
坑1:

img标签的宽不用写到style里，写到外面且不需要单位，否则在outlook下会有问题

> ``` ###### 坑2: > td标签可以嵌入table标签，请不要再a标签中嵌入table标签，否则在outlook下会有问题,链接点击不会跳转，错误用法 > ```
> ``` ###### 坑3: > outlook中背景图无法显示，图片需要使用img标签

下面代码用了两个table标签布局，外层的table主要用来限制页面，内层table用来布局，按照规则2，将页面从上到下拆成几个模块，在内层tr中写页面布局。注意： 每个tr中td的数量要保持一致否则有的邮件客户端会补全

<!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>
	<body style="margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px; padding-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;">
		<table border="0" cellpadding="0" cellspacing="0" width="100%">
			<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;font-size:0px">
				<tr><td style="font-size:0px"></td></tr>
				<tr><td style="font-size:0px"></td></tr>
				<tr><td style="font-size:0px"></td></tr>
		</table>
	</table>
</body>
</html>

chaos-fe

posted @   一颗小行星-  阅读(935)  评论(0)  编辑  收藏  举报
相关博文：
· Html与CSS布局技巧
· sublime Text 3 emmet自定义HTML模板
· 邮件页面为何只能Table写及注意事项
· HTML Email 编写指南 (阮一峰)
· HTML / CSS – Email Marketing HTML Template
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛