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中。如图：

熟悉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邮箱的话，遇到一些紧凑的布局就要格外小心了，尽量减少文本段的数量，留足宽度。

发送html内容的email（转）的更多相关文章

  1. python之发送HTML内容的邮件

    # 发送html内容的邮件 import smtplib, time, os from email.mime.text import MIMEText from email.header import ...

  2. 【python】使用python发送文本内容邮件

    下面提供了一个使用python做的发送文本内容的邮件代码,能够在邮件内容中设置文字颜色,大小,换行等功能. #auther by zls #_*_coding:utf-8_*_ import sys ...

  3. java调用html模板发送html内容的邮件

    在项目需要发送邮件,普通内容的邮件觉得太单调.太丑,没逼格,所以说直接把用到的邮件内容做成一个html模板,发送之前将对应参数替换掉,发送html内容的高逼格邮件. 首先需要引用jar包,这就不多说了 ...

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

    原理:利用a标签跳转指定网址: sms://[号码]?body=[内容] //安卓 sms://[号码]&body=[内容] //IOS 首先简单的做两个input,一个用于输入内容,一个用于 ...

  5. JAVA 发送邮件代码---发送文本内容： 内容使用\n 进行换行

    依赖包:mail.jar JAR链接地址: http://pan.baidu.com/s/1o8LNl0Y 密码: ja52 package mail; import java.util.Proper ...

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

    Jenkins运行成功后,需要发送消息给用户,自己封装了一个rtx的方法,进行发送,配置方法如下: 1.在windows下选择 execute windows batch command,执行我的py ...

  7. Python 爬虫监控女神的QQ空间新的说说,实现秒赞,并发送说说内容到你的邮箱

    这个文章主要是在前一篇文章上新增了说说秒赞的功能 前一篇文章可以了解一下 那么,这次主要功能就是 监控女神的 QQ空间,一旦女神发布新的说说,马上点赞,你的邮箱马上就会收到说说内容,是不是想了解一下 ...

  8. Java SpringBoot使用126邮箱发送html内容邮件，带附件

    package mail.demo; import org.junit.Test; import org.junit.runner.RunWith; import org.springframewor ...

  9. JAVA 发送邮件代码---发送HTML内容

    依赖包:mail.jar JAR链接地址: http://pan.baidu.com/s/1o8LNl0Y 密码: ja52 package com.dava; import java.util.Pr ...

随机推荐

  1. Linux ping 命令

    ping命令用来测试与目标主机的连通性,常见用法如下: [root@localhost ~]$ ping www.baidu.com # 对目标主机域名进行连通性测试 [root@localhost ...

  2. [Command] wc

    wc 命令可以打印目标文件的换行.单词和字节数.其中换行数 = 总行数 - 1,单词数则按照空格分隔的英文单词数进行统计,也就是说连续的汉字(短语.句子)都视作一个单词. NAME wc - 打印每个 ...

  3. [Win32]一个调试器的实现（五）调试符号

    一个调试器应该可以跟踪被调试程序执行到了什么地方,显示下一条将要执行的语句,显示各个变量的值,设置断点,进行单步执行等等,这些功能都需要一个基础设施的支持,那就是调试符号. 什么是调试符号 我们知道, ...

  4. Delphi应用程序的调试（六）步进式代码调试

    步进式代码调试(Stepping Through Your Code) 步进式代码调试是最基本的调试操作之一,但仍要在此讲述.人们常常容易犯只见树木不见森林的错误.经常复习基本的知识有助于读者了解以前 ...

  5. sublime--package control的配置与插件安装

    自动配置: 准备一个安装好的 sublime text .这里我的是版本3: 1. 快捷键:ctrl + ~:调出控制台,因为我的是版本3,所以在控制台中输入下边这段代码: import urllib ...

  6. H.264 White Paper学习笔记（一）总览

    H.264 White Paper对于264编码器的原理讲的比较透彻,在阅读学习的时候收获很大,这份文献网上有很多了,也有不少人翻译,不过想要理解更清楚我觉得还是得看英文原版的. 首先看一下白皮书里给 ...

  7. LeetCode 15 3Sum（3个数求和为0的组合）

    题目链接 https://leetcode.com/problems/3sum/?tab=Description   Problem: 给定整数集合,找到所有满足a+b+c=0的元素组合,要求该组合不 ...

  8. 【咸鱼教程】JsZip压缩与解压教程

    引擎版本3.0.6 教程目录一 为什么要用jszip二 如何使用jszip    2.1 下载jszip库    2.2 导入jszip库    2.3 加载和解压zip代码三 Demo源码下载 一 ...

  9. OPENQUERY (Transact-SQL)，跨数据库操作。

    在指定的链接服务器上执行指定的传递查询. 该服务器是 OLE DB 数据源. OPENQUERY 可以在查询的 FROM 子句中引用,就好象它是一个表名.OPENQUERY 也可以作为 INSERT. ...

  10. phantomjs试玩

    简单来说,phantomjs就是一个运行在node上的webkit内核,支持DOM渲染,css选择器,Canvas,SVG等,在浏览器上能做的事情,理论上,phantomjs 都能模拟做到. phan ...