邮件页面为何只能Table写及注意事项

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

编写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来设置背景图片了。

 

相关文章
|
12月前
|
JSON 前端开发 数据格式
bootstrap table表格的点击详情按钮操作
bootstrap table表格的点击详情按钮操作
97 1
|
4月前
|
小程序 API 数据库
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
80 0
|
6月前
|
SQL 数据处理 调度
Dataphin常见问题之创建视图后查询找不到table怎么解决
Dataphin是阿里云提供的一站式数据处理服务,旨在帮助企业构建一体化的智能数据处理平台。Dataphin整合了数据建模、数据处理、数据开发、数据服务等多个功能,支持企业更高效地进行数据治理和分析。
原生php实现大案例(特色:不登录不能使用功能 注册 登录 文件上传 发帖 列表页 详情页 )提供sql
原生php实现大案例(特色:不登录不能使用功能 注册 登录 文件上传 发帖 列表页 详情页 )提供sql
|
前端开发 JavaScript Java
Bootstrap Table批量(全选)删除
Bootstrap Table批量(全选)删除
99 1
移除MagenTo自动发送邮件中网址的多余部分?___store=id
移除MagenTo自动发送邮件中网址的多余部分?___store=id
|
JavaScript
el-table分页数据+回显+勾选状态+记录数据(map实战)
el-table分页数据+回显+勾选状态+记录数据(map实战)
902 0
Confluence 如何查看页面 ID
Confluence 如何查看页面 ID
474 0
Confluence 如何查看页面 ID
WordPress发布文章/页面时自动添加默认的自定义字段
如果你每篇文章或页面都需要插入同一个自定义字段和值,可以考虑在WordPress发布文章/页面时,自动添加默认的自定义字段
1479 0