编写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. cell重用的几种方式

    1.使用xib重用 //ios6 之后推荐大家使用的重用方式 //动态的使用self获得当前类名,来作为唯一的标示 NSString * identifier = NSStringFromClass( ...

  2. Flex Viewer

    一.Flex Viewer简介 Flex Viewer是ESRI公司推出的可以高效开发基于WEB的地理信息应用系统的一种完全免费的应用程序框架.业务人员使用该框架可以无需任何额外的编程就能够通过简单配 ...

  3. SharePoint 2013 Error - File names can't contain the following characters: & " ? < > # {} % ~ / \.

    错误截图: 错误信息: --------------------------- Message from webpage --------------------------- File names ...

  4. SharePoint大容量文档库整体搬迁的解决方案（SharePoint document library migration）

    今天客户提出了一个需求,有一个文档库,里面有500多个文档,有word,excel还有pdf文档,想要把文档搬迁到一个新的站点上面去,新的文档库和原文档库有这同样的列,客户要求文档在迁移过程中属性要带 ...

  5. Java Android HTTP实现总结

    Java Android HTTP实现总结 Http(Hypertext Transfer Protocol)超文本传输协议,是一个基于请求/响应模式的无状态的协议,Http1.1版给出了持续连接的机 ...

  6. Android之滑屏动画和自定义控件

    滑屏动画 在Android系统中,通过手势识别切换界面时,通常会在界面切换时加入动画,以提高用户的体验效果,这种动画一般都采用平移动画,下一个界面进入时,上一个界面移除屏幕. 图中标识的均为左上角坐标 ...

  7. 开发者账号续期后，itunes停止付款了

    开发者账号过期后,没有及时续期,等再续期后,itunes停止付款到公司银行账户了.过了一个多月了还是没有收到itunes的付款.然后开始联系苹果客服和技术支持,他们都说只能通过itunes的“联系我们 ...

  8. Android Studio 2.2新功能预览

    升级SDK可用Background 多加了个按钮,可用一边写代码一边下载SDK Instant Run 修改代码一秒启动 APK analyzer 分析任何的APK 查看APK下载包的大小,解压后的实 ...

  9. GHOST WIN7系统64位经典优化版 V2016年

    来自系统妈:http://www.xitongma.com 深度技术GHOST win7系统32,64位经典优化版 V2016年3月 系统概述 深度技术ghost win7系统64位经典优化版适用于笔 ...

  10. Android点击空白处，隐藏软键盘

    在做登陆或者注册的时候,软键盘经常可能会挡住一些界面.我们需要在输入完成之后隐藏软键盘. 在我们点击空白处或者非EditText的地方来隐藏软键盘. public class HomeActivity ...