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

最新推荐文章于 2024-08-09 08:05:32 发布
最新推荐文章于 2024-08-09 08:05:32 发布
阅读量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
关注
专栏目录
html邮件模板
Junzizhiai的博客
12-22 1094
<!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语言写邮件,使用HTML编写简单的邮件模版
weixin_34094559的博客
05-30 1535
今天，我想写一个"低技术"问题。话说我订阅了不少了新闻邮件(Newsletter)，比如JavaScript Weekly。每周收到一封邮件，了解本周的大事。有一天，我就在想，是不是我也能做一个这样的邮件？然后，就发现这事不那么容易。抛开后台和编辑工作，单单是设计一个Email样板，就需要不少心思。因为这种带格式的邮件，其实就是一张网页，正式名称叫做HTML Email。它能否正常显示，完全取决于...
前端怎么写HTML邮件模版
不定时分享最优质的网络技术与教程，满满的干货。
09-07 879
邮件模板是outlook等邮件系统支持html解析格式的条件下，利用前端技术通过编写HTML文件生成期望的邮件页面，从而辅助编写邮件的邮件编辑方式。
html邮件发送模板
04-30
邮件发送模板,纯HTML可扩展应用，适用于站点注册通知,登录通知,操作通知等，源码为纯HTML需用功能需配合后端开发!
React Email 项目教程
gitblog_00924的博客
08-09 308
React Email 项目教程 react-email???? Build and send emails using React项目地址:https://gitcode.com/gh_mirrors/re/react-email 项目介绍 React Email 是一个用于构建和发送电子邮件的 React 库。它提供了一组标准的组件，帮助开发者无需处理复杂的表格布局和维护过时的标记，就能创建出令人...
邮件模板html
01-14
邮件模板html格式 html电子邮件模板代码 适用于web开发
【html】html写邮件模板
前端代码小白的日常博客
08-16 4132
纯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模板是一款简单的减肥商品推广应用邮件模板html下载 .rar
02-21
邮件模板采用HTML（超文本标记语言）编写，这是一种用于创建网页的标准标记语言。HTML允许开发者添加文本、图像、链接、表格等各种元素，并控制它们在邮件中的布局和样式。在邮件营销中，HTML模板通常包括吸引人的...
Bojler是一个电子邮件模板和HTML代码编写指南
08-08
Bojler是一个电子邮件模板和HTML代码编写指南，可以在每个最受欢迎的电子邮件客户端中正确呈现。
电子邮件营销模板（6份）
01-28
电子商务邮件营销的模板 仅供参考修改使用
基础express & mongodb编写的邮件模板在线编辑系统.zip
08-03
mongodb编写的邮件模板在线编辑系统"项目涵盖了Node.js服务器端开发、数据库设计与操作、前端界面实现以及Web应用的完整生命周期管理等多个关键知识点。对于学习Node.js和MongoDB的开发者来说，这是一个很好的实践...
HTML | 分享几个HTML邮件样式模板
热门推荐
拾年之璐
01-19 3万+
最近在写一个项目，要个用户发送验证码、通知等信息。 但是，以往只是文字堆砌，偶尔加个换行br。略显粗糙。 然后，偶然间看到了一些平台的通知邮件，然后就把他们的邮件扒出来，用一下哈哈哈… 注：以下两个模板，是从腾讯企业邮箱的通知邮件中抠出来的。 1. 两个Demo截图 第1个demo截图 .
分享一个好看的邮件html模板
美奇软件开发工作室
07-14 6933
代码】分享一个好看的邮件html模板。
html-邮件模板(适合电商推送邮件)
程序猿开发日志【学习永无止境】
07-05 3914
代码如下 <!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 1520
邮件模版布局flex - 布局简单方便 兼容性差table - 优点 就是兼容性好，其他没有优点。
如何实现一个 Email HTML 邮件模板
weixin_44181180的博客
09-07 1万+
文章目录前言一、开始探索二、浪子回头总结 前言 我们也许会发现，我们在生活中收到的邮件，经常不是单纯地文字，往往会非常的丰富精彩，就像一个网页一样，是的，这就叫 Email HTML 一、开始探索 害，工欲善其事必先利其器，从设计那里拿设计图后，当时心想应该很简单，也就普通的html实现就好了，但避免有没有注意的东西，就先谷歌一波，查查看有木有啥要注意的，所以开始我就先查查了email html的实现，这一查就发现不得了~~~ 先看的就是大佬HTML Email 编写指南 - 阮一峰的网络日志的文..
使用邮件模板，发送到qq邮箱
最新发布
09-14
在编程中，使用邮件模板发送到QQ邮箱是一个常见的需求，特别是在需要自动化处理邮件发送任务时。邮件模板通常包含静态的HTML代码，可以通过变量替换动态生成最终的邮件内容。在实现时，你需要使用邮件发送库，比如Python中的`smtplib`，以及HTML模板引擎如`jinja2`或者`mako`等。以下是一个简单的示例步骤： 1. 首先，你需要准备一个邮件模板文件，通常是HTML格式，里面包含变量占位符，比如`{{ name }}`。 2. 然后，编写代码来读取邮件模板，将占位符替换为实际需要发送的信息，如用户名、邮件主题等。 3. 接着，使用邮件发送库如`smtplib`来配置SMTP服务器的连接信息（QQ邮箱SMTP服务器地址、端口、登录账号和密码等）。 4. 最后，通过SMTP服务器发送邮件，并确保邮件的头部信息（如发件人、收件人、主题等）设置正确。 以下是一个使用Python语言和`smtplib`库发送邮件的示例代码框架： ```python import smtplib from email.mime.text import MIMEText from email.header import Header # 邮件发送者和接收者 sender = 'your_email@qq.com' receiver = 'receiver_email@qq.com' # 邮件主题和内容 subject = '邮件主题' html = """<html> <head></head> <body> <h1>邮件正文</h1> <p>这里是邮件内容...</p> </body> </html>""" # 使用smtplib发送邮件 try: # 创建SMTP对象 server = smtplib.SMTP_SSL('smtp.qq.com', 465) # QQ邮箱SMTP服务器地址和端口 server.login(sender, 'your_password') # 登录邮箱 server.sendmail(sender, receiver, html) # 发送邮件 server.quit() # 断开连接 print("邮件发送成功") except Exception as e: print(f"邮件发送失败: {e}") ``` 请注意，使用QQ邮箱发送邮件时需要开启SMTP服务，并且获取授权码来代替密码进行身份验证。另外，确保在发送邮件时遵守相关法律法规，不要发送垃圾邮件。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值