发送html内容的email(转)

html中无法使用css, js。你发送一个<div>片断就好了,不用写整个html页面,因为即使写了,邮件客户端也会删除body之外(包括<body>这个标签)的内容,只留下<body>标签内部的东西

原文:http://www.jb51.net/web/23842.html

参考:https://segmentfault.com/q/1010000000115371

http://groundwire.org/labs/email-publishing/using-css-and-html-in-email-newsletters/

https://litmus.com/blog/html-email-coding-101-infographic/email-coding-101

由于HTML邮件不是独立的HOST在本站的页面,是寄人篱下的。所以编写HTML邮件与编写HTML页面有很大的不同。因为,各面向网民的主流邮箱都或多或少的会对它们接收到的HTML邮件在后台进 行过滤。毫无疑问,JS代码是被严格过滤掉的,包括所有的事件监听属性,如onclick、onmouseover,这是基于邮件安全性的考虑。不仅如此,CSS代码也会被部分过滤。本人要讲的就是如何编写不被各大主流邮箱过滤的,能正常显示的HTML邮件。

首先,我们先来看看邮箱是如何展现HTML邮件的。我本人没有做过邮件系统,况且各大邮箱后台的过滤算法也不是那么容易可以让外人知道的。所以,我们只能 通过前端展现,来推测哪些是被邮箱接受的写法,而哪些又是会被过滤掉的。通过对gmail、hotmail、163、sohu、sina几个邮箱的分析, 我把邮箱分为两类:

第一类包括gmail、hotmail、sohu,这类邮箱,邮件内容是被布局在整个邮箱页面中的某个div中。如图:

第二类,包括163、sina,这类邮箱,邮件内容被布局在独立的iframe中。如图:

速达软件北京销售中心62416361

【点击进入】

优秀的团队为您提供专业的速达咨询服务! 飞鸿至达 18611850591

查 看

熟悉HTML的朋友都知道,iframe内容是作为独立的document,与父页面的元素和CSS是互不相干的,几乎可以作为一个独立的页面来对 待。而如果如果邮件内容是在div中,那么邮件内容是作为整个邮箱页面的一个组成部分。显然,以iframe作为展现方式的邮箱,对邮件内容就会宽容许 多,因为它给了你一个足够独立的表现空间。而div就不是那么客气了。试想一下,如果你在你的邮件里写上这么一句CSS,是不是整个邮箱的展现页面上字体 都变成20px而因此乱了套:
<style type=”text/css”>
body {font-size:20px}
</style>
我们需要写兼容各邮箱的统一邮件模板,那么必然就要避开以上这种外联CSS写法,另外类似于float、position等成非正常内容流的style也会被过滤,假如你写了,很可能会影响到外部邮箱的表现。

下面我列出一些编写原则:
1、全局规则之一,不要写<style>标签、不要写class,所有CSS都用style属性,什么元素需要什么样式就用style写内联的CSS。

2、全局规则之二,少用图片,邮箱不会过滤你的img标签,但是系统往往会默认不载入陌生来信的图片,如果用了很多图片的邮件,在片没有载入的情况下,丑陋无比甚至看不清内容,没耐心的用户直接就删除了。图片上务必加上alt。

3、不要在style里面写float、position这些style,因为会被过滤。那么如何实现左右布局或者更复杂的布局呢?用table。

4、style内容里面background可以设置color,但是img会被过滤,就是说不能通过CSS来设置背景图片了。但是有一个很有意思的元素 属性,也叫background,里面可以定义一个图片路径,这是个不错的替代方案,虽然这样功能有限,比如无法定位背景图片了,有总比没有好。例如要给 一个单元格加一个背景,必须这样写:
<td background=”http://image1.koubei.com/images/common/logo_koubei.gif”></td>

5、div模式的邮箱不支持flash,iframe模式的有待验证。

最后提一句,sohu的邮箱很怪异,会在每个文本段后面加一个空格,导致原本正常的排版一行放不下而换行,从而使某些布局错乱。所以,如果你要兼容sohu邮箱的话,遇到一些紧凑的布局就要格外小心了,尽量减少文本段的数量,留足宽度。

时间: 2024-10-05 06:16:21

发送html内容的email(转)的相关文章

python之发送HTML内容的邮件

1 # 发送html内容的邮件 2 import smtplib, time, os 3 from email.mime.text import MIMEText 4 from email.header import Header 5 6 7 def send_mail_html(file): 8 '''发送html内容邮件''' 9 # 发送邮箱 10 sender = '[email protected]' 11 # 接收邮箱 12 receiver = '[email protected]

phpMailer 发邮件例子、乱码、发送html内容介绍

//phpmailer代码工具类以及传到我的csdn"我的资源"中,可以带这里去下载</span> echo '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">'; require_once("class.phpmailer.php"); //下载的文件必须放在该文件所在目录 $mail = new PHPMailer

redis源码分析(4)——发送响应内容

前一篇介绍了redis处理请求的过程,接下来是如何发送响应内容. 在请求处理完之后,进行响应时,需要调用addReplyXXX族函数,具体包括: void addReply(redisClient *c, robj *obj) void addReplySds(redisClient *c, sds s) void addReplyString(redisClient *c, char *s, size_t len) 这几个函数又会被封装成addReplyBulk等函数.这里以addReply为

Python发送多个附件和支持HTML及纯文本内容的 Email 实现

由于工作中经常需要收发电子邮件,例如每日(周)的工作报告,测试报告,监控告警,定时提醒等等,大都已电子邮件的形式发送.本文将实现一个 Python 的电子邮件发送类,支持发送多个附件(目录),HTML或纯文本内容,抄送收件人,多个接收者等功能. 代码实现 #!/usr/bin/env python # -*- coding: utf-8 -*- ''' Copyright (C) 2015 By Thomas Hu. All rights reserved. @author : Thomas H

发送指内容的短信

#import "ViewController.h" #import <MessageUI/MessageUI.h> @interface ViewController ()<MFMessageComposeViewControllerDelegate> @end @implementation ViewController - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIE

解决关闭socket之前,提交socket发送缓冲内容的问题

经过长时间的调整,测试,今天终于解决了web服务器关闭socket时,缓冲中未发送的内容被抛弃的问题. 公司让我开发一个小的服务器支撑系统,我使用C++编写了一个小的httpd服务器,以便能够打造自己的服务器,扩充自己想要的各种功能(如各种统计功能.扩展接口功能).在开始的简单网页测试时,没有发现问题:但是,在系统部署上线后,偶尔出现IE界面长时间转圈圈,就是不显示页面的内容.有时通过点击刷新几次,系统又正常.因为这个系统比较小,使用也不是很频繁,所以系统将就着使用. 过了一段时间,乘着系统升级

初探JS-html5移动端发送指定内容短信到指定号码

原理:利用a标签跳转指定网址: sms://[号码]?body=[内容] //安卓 sms://[号码]&body=[内容] //IOS 首先简单的做两个input,一个用于输入内容,一个用于输入发送的号码.再加一个a标签. 代码如下 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>发送短信</t

使用jmeter使用Jenkins发送自定义消息内容

Jenkins运行成功后,需要发送消息给用户,自己封装了一个rtx的方法,进行发送,配置方法如下: 1.在windows下选择 execute windows batch command,执行我的python文件, 注意,在liunx系统中要使用 execute shell 自定义的消息内容为: 我的消息内容读取的是生成文件的html, 代码如下: #!/usr/bin/env python # -*- coding: utf-8 -*- # @Author: User # @Date : 20

Zabbix 调整告警发送的内容格式

在配置动作区域 可以设置报警内容格式进行调整 原先告警内容 修改内容为: 后显示效果 原文地址:https://www.cnblogs.com/nodchen/p/9438821.html