使用HTML编写简单的邮件模版

最新推荐文章于 2024-06-25 07:28:07 发布
最新推荐文章于 2024-06-25 07:28:07 发布
阅读量1.8w 收藏 2
点赞数
分类专栏： 环境搭建 日常 文章标签： html 邮件

转载自http://www.jb51.net/web/355537.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 </td>  
　</tr>  

　<tr>  
　　<td> Row 3 </td>  
　</tr>  

</table>

邮件内容有几个部分，就设置几行（row）。

3. 图片

图片是唯一可以引用的外部资源。其他的外部资源，比如样式表文件、字体文件、视频文件等，一概不能引用。
有些客户端会给图片链接加上边框，要去除边框。

　　img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}   

　　a img {border:none;}   

　　<img border="0" style="display:block;">

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

4. 行内样式

所有的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;">

5. W3C校验和测试工具

要保证最终的代码，能够通过W3C的校验，因为某些客户端会把不合格属性剥离。还要使用测试工具（1, 2, 3），查看在不同客户端的显示结果。
发送HTML Email的时候，不要忘记MIME类型不能使用

Content-Type: text/plain;

而要使用

Content-Type: Multipart/Alternative;
A-W
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html邮件模板
Junzizhiai的博客
12-22 1070
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.= w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=3D"http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <meta http-equiv="X
邮件模板html
01-14
邮件模板html格式 html电子邮件模板代码 适用于web开发
vue3+antd vue 低代码自定义配置邮件模板并实现邮件群发兼容
u013776700的博客
01-29 1322
低代码开发，自定义表单
在邮箱中用html写邮件
weixin_45669156的博客
05-09 7178
使用html制作邮件模板
一个免费的简单响应式 HTML 电子邮件模板
最新发布
stqer的博客
06-25 917
<!doctype html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Simple Transactiona
html邮件发送模板
04-30
邮件发送模板,纯HTML可扩展应用，适用于站点注册通知,登录通知,操作通知等，源码为纯HTML需用功能需配合后端开发!
【html】html写邮件模板
前端代码小白的日常博客
08-16 3971
纯html写模板邮件
Webpower html邮件模版
02-06
Webpower html邮件模版 Webpower html邮件模版 Webpower html邮件模版 Webpower html邮件模版 Webpower html邮件模版
C#.NET采用HTML模板发送电子邮件完整实例
09-04
最后，我们需要编写邮件发送函数。这里我们定义了一个`SendEmail`方法，它接收发件人邮箱`email_from`、收件人邮箱`email_to`、抄送人邮箱列表`email_cc`以及前面提到的三个替换变量`userName`, `name`, `myName`。...
HTML邮件模板Promotional Email Template Orange
10-19
HTML邮件模板是用于在电子邮件中展示精美设计的一种方式，它结合了HTML代码和相关资源，如图片，以创建视觉上吸引人的营销或促销信息。"Promotional Email Template Orange" 是一个专为促销目的设计的HTML邮件模板，...
Bojler是一个电子邮件模板和HTML代码编写指南
08-08
Bojler是一个电子邮件模板和HTML代码编写指南，可以在每个最受欢迎的电子邮件客户端中正确呈现。
电子邮件营销模板（6份）
01-28
电子商务邮件营销的模板 仅供参考修改使用
HTML邮件模板Promotional Email Template Green
10-19
HTML邮件模板是用于创建具有丰富视觉效果和交互性电子邮件的工具，特别适合用于推广活动、产品销售或品牌宣传。"Promotional Email Template Green" 标题中的“Green”可能指的是设计风格以绿色为主调，旨在传达清新...
通信信息订阅邮件模板
01-22
通信信息订阅邮件模板是用于向用户发送定期更新或通知的电子邮件设计。在互联网时代，通信信息订阅服务已经成为企业和个人与受众保持联系的重要手段。通过创建一个吸引人的邮件模板，可以提高打开率，增加用户粘性，...
HTML | 分享几个HTML邮件样式模板
热门推荐
拾年之璐
01-19 3万+
最近在写一个项目，要个用户发送验证码、通知等信息。 但是，以往只是文字堆砌，偶尔加个换行br。略显粗糙。 然后，偶然间看到了一些平台的通知邮件，然后就把他们的邮件扒出来，用一下哈哈哈… 注：以下两个模板，是从腾讯企业邮箱的通知邮件中抠出来的。 1. 两个Demo截图 第1个demo截图 .
分享一个好看的邮件html模板
美奇软件开发工作室
07-14 6869
代码】分享一个好看的邮件html模板。
html-邮件模板(适合电商推送邮件)
程序猿开发日志【学习永无止境】
07-05 3896
代码如下 <!DOCTYPE html> <html> <head> <title>Push Email</title> </script> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <style type...
html实现邮件模版布局-flex布局&table布局-demo
JackieDYH的博客
09-11 1479
邮件模版布局flex - 布局简单方便 兼容性差table - 优点 就是兼容性好，其他没有优点。
JAVA通过邮件模板生成html邮件
03-29
1. 首先，需要准备好邮件模板，可以使用HTML代码编写，例如： ``` <!DOCTYPE html> <html> <head> <title>邮件模板</title> </head> <body> <h1>欢迎来到我的网站</h1> <p>尊敬的用户，您好！</p> <p>这是一封测试邮件。</p> <p>请点击下面的链接激活您的账号：</p> <p><a href="https://www.example.com/activate">激活账号</a></p> <p>谢谢您的支持！</p> </body> </html> ``` 2. 在Java中，可以使用JavaMail API来发送邮件。首先，需要创建一个Session对象，用于配置SMTP服务器和邮件发送的属性，例如： ``` Properties props = new Properties(); props.put("mail.smtp.host", "smtp.example.com"); props.put("mail.smtp.port", "465"); props.put("mail.smtp.auth", "true"); props.put("mail.smtp.ssl.enable", "true"); Session session = Session.getInstance(props, new Authenticator() { protected PasswordAuthentication getPasswordAuthentication() { return new PasswordAuthentication("username", "password"); } }); ``` 其中，需要替换smtp.example.com为实际的SMTP服务器地址，username和password为SMTP服务器的用户名和密码。 3. 然后，需要创建一个MimeMessage对象，用于表示邮件内容。可以设置邮件的发送者、接收者、主题等属性，例如： ``` MimeMessage message = new MimeMessage(session); message.setFrom(new InternetAddress("sender@example.com")); message.setRecipient(Message.RecipientType.TO, new InternetAddress("recipient@example.com")); message.setSubject("测试邮件"); ``` 其中，需要替换sender@example.com和recipient@example.com为实际的发件人和收件人邮箱地址。 4. 接下来，需要将邮件模板转换为HTML格式，并设置为MimeMultipart对象的一部分，例如： ``` String template = "<!DOCTYPE html><html>...</html>"; MimeBodyPart htmlPart = new MimeBodyPart(); htmlPart.setContent(template, "text/html; charset=utf-8"); MimeMultipart multipart = new MimeMultipart(); multipart.addBodyPart(htmlPart); ``` 其中，需要将template替换为实际的邮件模板内容。 5. 最后，将MimeMultipart对象设置为MimeMessage对象的内容，并发送邮件，例如： ``` message.setContent(multipart); Transport.send(message); ``` 完整的Java代码示例： ``` import java.util.Properties; import javax.mail.*; import javax.mail.internet.*; public class SendHtmlEmail { public static void main(String[] args) throws Exception { String template = "<!DOCTYPE html><html><head><title>邮件模板</title></head><body><h1>欢迎来到我的网站</h1><p>尊敬的用户，您好！</p><p>这是一封测试邮件。</p><p>请点击下面的链接激活您的账号：</p><p><a href=\"https://www.example.com/activate\">激活账号</a></p><p>谢谢您的支持！</p></body></html>"; Properties props = new Properties(); props.put("mail.smtp.host", "smtp.example.com"); props.put("mail.smtp.port", "465"); props.put("mail.smtp.auth", "true"); props.put("mail.smtp.ssl.enable", "true"); Session session = Session.getInstance(props, new Authenticator() { protected PasswordAuthentication getPasswordAuthentication() { return new PasswordAuthentication("username", "password"); } }); MimeMessage message = new MimeMessage(session); message.setFrom(new InternetAddress("sender@example.com")); message.setRecipient(Message.RecipientType.TO, new InternetAddress("recipient@example.com")); message.setSubject("测试邮件"); MimeBodyPart htmlPart = new MimeBodyPart(); htmlPart.setContent(template, "text/html; charset=utf-8"); MimeMultipart multipart = new MimeMultipart(); multipart.addBodyPart(htmlPart); message.setContent(multipart); Transport.send(message); } } ``` 运行该程序，即可发送一封包含邮件模板的HTML邮件。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值