编写HTML邮件与编写HTML页面有很大的不同。因为，各面向网民的主流邮箱都或多或少的会对它们接收到的HTML邮件在后台进行过滤。毫无疑问，JS代码是被严格过滤掉的，包括所有的事件监听 属性，如onclick、onmouseover，这是基于邮件安全性的考虑。不仅如此，CSS代码也会被部分过滤。

一些编写原则：

1.使用table布局而非div,由于css在众多邮件系统中支持差异性，建议table布局，可以省去很多布局样式；

2. 不要在<body>中写样式；因为这个标签在很多邮件系统中是被过滤，甚至被替换成各个邮件系统中默认的标签和样式；CSS只可使用内联样式表 ，如：style="margin:0;"

3.设计之初遵循： 图上无文本，文本后无底纹 的规则

4.所有图片使用IMG标签，如：<img style="style="display:block" "src="" />,最好加上title=””,alt=””

5.多用<br />换行而非<p>

6.整体最佳宽度为：550-600px

7.不使用Javascript

全局规则:

1、全局规则之一，不要写<style>标签、不要写class，所有CSS都用style属性，什么元素需要什么样式就用style写内联的CSS。

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

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

4、style内容里面background可以设置color，但是img会被过滤，就是说不能通过CSS来设置背景图片了。

邮件页面为何只能Table写及注意事项的更多相关文章

  1. 有强迫症的我只能自己写一个json格式化工具

    缘由 为什么博客园的markdown解析出问题了啊?好奇怪啊! 一直以来在编码规范界有2大争论不休的话题,一个是关于是用空格缩进还是tab缩进的问题,一个是花括号是否换行的问题,笔者是tab缩进和花括 ...

  2. 模仿 SWPU邮件页面

    模仿SWPU邮件页面 要求 参考swpu 邮件主页,编写一个新闻后台登录页面,并用Js静态验证用户名密码是否为空,用户名为tom 密码为 123跳转到另一个页面 http://mail.swpu.ed ...

  3. 12 Servlet_04 Servlet增删改查 静态页面与动态页面 EL表达式 table表格的一些样式

    今天学习了servlet的增删改查: 存储数据 setAttribute(String name,Object obj );获取数据 getAttribute(String name);删除数据 re ...

  4. jquery选择器玩得不6啊，只能慢慢写判断了，唉..........................

    jquery选择器玩得不6啊,只能慢慢写判断了,唉..........................

  5. 以前写SpringMVC的时候，如果需要访问一个页面，必须要写Controller类，然后再写一个方法跳转到页面，感觉好麻烦，其实重写WebMvcConfigurerAdapter中的addViewControllers方法即可达到效果了

    以前写SpringMVC的时候,如果需要访问一个页面,必须要写Controller类,然后再写一个方法跳转到页面,感觉好麻烦,其实重写WebMvcConfigurerAdapter中的addViewC ...

  6. 01-编写CMS注意事项

    原文:01-编写CMS注意事项 1.将ThinkPHP核心文件放在项目目录,将下载的扩展包放在在ThinkPHP目录下的Extend文件夹中 2.设置整个项目的编码为utf-8 3.创建Public公 ...

  7. java web 自定义错误页面 完整jsp错误页面代码（同时写错误日志） error.jsp

    1.首先配置web.xml  添加一下代码 <error-page> <error-code>500</error-code> <location>/e ...

  8. 解决微信授权回调页面域名只能设置一个的问题 [php]

    最终的解决方案是:https://github.com/liuyunzhuge/php_weixin_proxy,详细的介绍请往下阅读. 在做项目集成微信登录以及微信支付的时候,都需要进行用户授权.这 ...

  9. Microsoft Dynamics CRM 解决数据大于5000时，页面上只能导出5000+数据。

    页面显示: update [MSCRM_CONFIG].[dbo].[DeploymentProperties] set IntColumn=10000 --调整成10000+   页面导出: 一.在 ...

随机推荐

  1. 封装Nvelocity的渲染方法

    public class CommonHelper { /// <summary> /// 用data数据填充templatename模板,渲染返回html返回 /// </summ ...

  2. SharePoint 2013 showModalDialog 弹出模式窗口

    1. SharePoint 弹出框 本文讲述SharePoint 2013 中使用 SP.UI.ModalDialog.showModalDialog时 showModalDialog  未定义的问题 ...

  3. 自定义有监听器的ScrollView

    public class ObservableScrollView extends ScrollView { public ObservableScrollView(Context context) ...

  4. Android 视频播放器 VideoView 的使用，播放本地视频 和 网络 视频

    1.布局文件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:and ...

  5. HandlerThread

    一.概念     1.Android中Handler的使用,一般都在UI主线程中执行,因此在Handler接收消息后,处理消息时,不能做一些很耗时的操作,否则将出现ANR错误. 2.HandlerTh ...

  6. Android Material design

    1.Material Design:扁而不平 2.Android Support Design 库 之 Snackbar使用及源码分析 3.十大Material Design开源项目,直接拿来用!

  7. iOS开发--关于TableViewCell的可视化设置细节

    由于时间问题,本篇博文很简略. 1.关于设置Cell的边距问题

  8. [转载]50个Demo展示HTML5无穷的魅力

    Flash和HTML5的比较已经成为现在最热门的主题之一,我们不去争论哪个好哪个不好.和HTML5在很酷的动画和简单的游戏等方面一样,除非HTML5在未来几年有一些重大发展,否则Flash在富内容网页 ...

  9. 自定义可视化调试工具（Microsoft.VisualStudio.DebuggerVisualizers）vs.net开发工具

    背景: 话说:使用CYQ.Data时,会经常断点MDataTable的对象,为了查看表格的数据内容,在监视里会常ToDataTable(),然后借可DataTable的可视化方式查看表格. 近日:心中 ...

  10. WPF学习之路（五） 实例：写字板（续）

    WordPad 2.0 上一期实现了一虽然建议但是功能比较全面的Wordpad程序,但是程序代码略显繁琐,这一期更新改进版. MainWindows.xaml 添加 <Window.Comman ...