从零制做edm邮件，须要了解的一些规则

1、初见

table

• <table> 标签订义 HTML 表格
• 简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成
• tr(table row) 元素定义表格行，th(table head) 元素定义表头，td(table data) 元素定义表格单元
• 更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素
• HTML table 标签

table属性

• border --- 规定表格边框的宽度
• align --- 规定表格相对周围元素的对齐方式 (left,center,right)
• valign --- 垂直，默认是valign="middle"，可是会修改成valign="top"
• cellspacing --- 规定单元格之间的空间
• cellpadding --- 规定单元边沿与其内容之间的空白
• width --- 规定表格的宽度
• height --- 规定表格的高度
• background --- 背景图像
• bgcolor --- 背景颜色

<table border="1" width="600" align="center" bgcolor="#cccccc" cellspacing="10" cellpadding="20">
<tr>
  <td>语文</td>
  <td>数学</td>
  <td>英语</td>
</tr>
</table>
复制代码

style

• width、height
• font-family
• font-size
• font-weight
• color
• line-height
• border
• background-color
• background-image
• vertical-align

标签

行内元素

• <a href="http://www.eefocus.com" target="_blank">
• <img src="http://baidu.com/hao123.png" alt="hao123图片">
• <span>我也能够是一段话，只是无法自主设置宽度而已</span>

块级元素

• <p>我是一段话...</p>

2、了解

基本格式

Area-1

• HTML 编码格式：utf-8
• 页面尽可能保持宽（600px~800px）、高（1024px），总体邮件不要太大，好比15k（各个邮箱不一样）左右，否则很容易走垃圾邮箱
• 样式使用行间样式，如：<td style="font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#000000;" >文字</td>其余的方式会被无视

Area-2

• font-family 属性不能为空
• 使用<table>布局，居中显示使用align="center
• 不使用 table 之外的 body、meta和html之类的标签，部分邮箱系统会把这些过滤掉
• 不使用 flash、java、javascript、frames、iframe、activeX 以及 dhtml
• 不要出现onmouseover、onmouseout，即便设定了，也会被过滤掉

Area-3

• 区域与区域之间的上下、左右之间的空白间隙，使用标准的<td width=15>&nbsp;</td>或<td height="15">&nbsp;</td>，不要使用padding="15px" --- 防止各个邮箱的解析不一样

图片

• 图片的每一个属性都要定义完整，如：<img src="http://www.eefocus.com/logo.png" style="vertical-align:top;display:block;" width="210" height="100" alt="logo"/>
• 定义style="vertical-align:top;" --- 防止图片之间会有缝隙、变形等显示异常的状况
• 定义display:block --- 解决Outlook电子邮件客户中图片底部增长空白间距的问题
• 限制每张图片的大小width="200 height="200"或者style="width:200px;height:200px;"
• 添加每张图片alt属性，如：alt="我是干啥的" --- 防止图片没法加载，也能够知晓这是作什么的
• 图片格式使用jpg、png，尽可能不要使用gif
• 地址使用绝对路径（以http/https开头的）
• 尽可能不使用背景图片background-image（Outlook不显示，可是能够显示背景色：bgColor="f3f3f3"），直接使用图片<img src="">
• 为了保持各个邮箱的一致性，尽可能使用图片，大图可拆分红几张小图拼接，每张图片不要太大（15K之内）

连接

• 地址绝对路径：<a href="http://www.eefocus.com">Logo Plus</a>
• 地址不可过长（超过255个字符），尽可能简短
• 数量尽可能不超过10个
• 地址不要使用特殊符号，避免解析错误
• 文字中出现连接地址，被屏蔽的风险比较高，通常是文字+连接、图片+连接
• 不要使用地图功能连接，很容易被划分为垃圾邮箱
• 为避免用户收到的邮件图片没法浏览，请制做一份和邮件内容同样的web 页面，而后在邮件顶部写一句话：“若是您没法查看邮件内容，请点击这里”， 连接到放有一样内容的web页面

Outlook邮箱规则

• 内敛元素的padding无效、vertical-align不能被识别，可定义在td
• 别想着继承的事儿，某一块的样式都单独设置，好比连接样式，文字样式等
• p标签的width不起做用，可定义在td
• 当设置 <img align="left" /> 或 <img align="right" />时，图片会脱离文档流，在其父元素设置了 margin 或 padding 的话，都没法使其下移，左移或右移

Tips

• 避免使用margin padding等属性，定义宽高的属性放在td，定义样式放在p或者span等标签内
• 通常而言，指定表格单元格宽度要比指定表格自身宽度要好
• 使用bgcolor来替找style="background:",在电子邮件客户端中HTML属性要比CSS样式更好，可是优先等级依旧是：css样式>html属性

3、悟道

邮件设计

• 电子邮件的设计过程是很是纠结的，为了美还得考虑制做过程的煎熬

保持简单

• 当设计一个HTML电子邮件时，请记住保持简单，编码的时候考虑坚持两列布局，这样能为您省去不少麻烦的事情

减小图像的使用甚至避免使用

• 记住你的设计不能太花哨，由于Outlook不支持背景图像

窄屏最好

• 由于电子邮件客户端预览窗口一般只是一小部分屏幕宽度，你最好上你的电子邮件的宽度设计在大约600px。没有人喜欢水平滚动条

保持一致

• 记住，咱们使用固定的元素属性cellpadding和cellspacing设置单元格的边距和单元格的间距。这样保持元素之间的间距一致性是正确的与谨慎的

节选自：开始制做HTML Email 之邮件设计

邮件制做

• 电子邮件的制做过程是很是煎熬的，一不当心就乱了、乱了。

邮件测试

• 电子邮件的测试过程是很是痛苦的，也是最让人奔溃的，由于你颇有可能拆了西墙补东墙

最后

咱们看一下测试邮件：效果图