一、初见

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>

二、了解

基本格式

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属性

三、悟道

邮件设计

  • 电子邮件的设计过程是非常纠结的，为了美还得考虑制作过程的煎熬
保持简单
  • 当设计一个HTML电子邮件时，请记住保持简单，编码的时候考虑坚持两列布局，这样能为您省去很多麻烦的事情
减少图像的使用甚至避免使用
  • 记住你的设计不能太花哨，因为Outlook不支持背景图像
窄屏最好
  • 因为电子邮件客户端预览窗口通常只是一小部分屏幕宽度，你最好上你的电子邮件的宽度设计在大约600px。没有人喜欢水平滚动条
保持一致
  • 记住，我们使用固定的元素属性cellpadding和cellspacing设置单元格的边距和单元格的间距。这样保持元素之间的间距一致性是正确的与谨慎的

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

邮件制作

  • 电子邮件的制作过程是非常煎熬的，一不小心就乱了、乱了。

邮件测试

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

最后

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

从零制作edm邮件，需要了解的一些规则相关推荐

  1. 如何制作EDM邮件的内容

    制作EDM邮件一般来说,要运用到网页三剑客之一的Dreamweaver,这个跟设计网页的原理是一样的.那么,如何制作EDM邮件的内容呢?有什么需要注意的呢? 有明显的利好信息 有明显的转化区域 内容美 ...

  2. 制作EDM 邮件规范

    邮件模板最主要是保证兼容性,很多邮箱的过滤规则不同,因此邮件页面要使用最简单原始的代码实现内容展现. 一,采用table嵌套布局,避免用div布局,因为DIV布局会用到float等浮动样式,一些邮箱会 ...

  3. EDM邮件营销之如何制作模板

    在进行EDM邮件营销时,设计和制作模板也是一项很重要的工作,虽然可能不比EDM数据收集来的重要,但是也是不可忽视的.下面来讲解下在EDM邮件营销时如何制作模板. 1,模板编码语言选择 模板编码设定与使 ...

  4. 【html】edm 邮件制作指南

    专业的 edm 邮件发送,是有严格的制作要求的,本指南从格式编码.文字.图片及链接四个方面给出指引,请逐条按照本指南制作您的 edm 邮件模板. 格式编码 1.页面宽度请设定在 600px 到 800 ...

  5. 推荐一款EDM在线制作HTML制作工具，从此制作营销邮件不用愁。

    相信很多做营销的小伙伴,都会试过邮件营销,但由于营销邮件制作不方便,兼容性要求高,往往会放弃.这里我推荐大家一款在线制作EDM营销邮件工具拉易网,功能强大,制作也非常简单.有需要的同学可以去看看.

  6. 如何解决EDM邮件营销中的图片难题

    随着互联网的高速发展,已然进入到了读图时代,EDM邮件营销尤为注重图片的运用.纯文本的邮件太枯燥,巧借图片,可以提高内容的可读性,吸引用户注意力.然而,我们却常常不得不面对这样的尴尬:打开邮件,文图不 ...

  7. EDM邮件群发如何高效获取邮件列表？

    为什么80%的码农都做不了架构师?>>>    EDM邮件营销以成本低.见效快.制作简单.传播迅速等优点,受到广大的企业推广人员所喜爱.而对于做EDM邮件群发的人来说,如何获得有效的 ...

  8. 编写html邮件/EDM邮件注意事项

    专业的EDM邮件(Email Direct Marketing 电子邮件营销)发送,是有严格的制作要求的,本指南从格式编码.文字.图片及链接四个方面给出指引,请逐条按照本指南制作您的EDM邮件模板. ...

  9. 跨境电商独立站卖家如何做EDM邮件营销？

    对于跨境电商独立站卖家来说,要想与消费者建立联系,吸引潜在消费者,推广新产品或者促销活动,电子邮件营销(EDM)是非常有效的营销渠道.独立站 EDM 营销并没有想的那么复杂,遵循以下三个步骤,能帮助你 ...

最新文章

  1. tcp port numbers reused出现原因_python socket（tcp 线程）实现简单聊天室
  2. linux ssl 证书服务器,Linux下Nginx安全证书ssl配置方法
  3. AtCoder Regular Contest 058
  4. 039_MySQL_多表查询
  5. OCA第6部分中的Java难题
  6. 史上最全的常用事件：移动端事件及PC端：鼠标/键盘/表单事件
  7. oracle建表唯一约束语句,oracle 详细建表语句
  8. python菜鸟教程lambda_jQuery(菜鸟教程)
  9. 如何在工具类中注入Service
  10. POSIX线程优先级设置
  11. AMS1117稳压芯片介绍
  12. scl 转换gcc版本
  13. Representing Long-Range Context for Graph Neural Networks with Global Attention
  14. ffmpeg给视频加水印
  15. python爬虫之——爬取煎蛋网图片
  16. android中bmob云存储,Android中的Bmob移动后端云服务器功能
  17. OLED显示与LCD相比的优缺点都有哪些
  18. EPSON RC+ 7.0 使用记录一
  19. vb标准（一）：用户界面的设计
  20. Lect2 线性分类

热门文章

  1. 热评云厂商：金蝶云19.12亿元，SaaS大势汤汤，顺之者昌
  2. win10粘贴复制不好使，重新启动之后过一段时间又坏了，rdpclip.exe
  3. “知法犯法”？华宇软件董事长被立案调查并留置，赵晓明能否挑起“法律科技第一股”的大梁...
  4. android－mp3
  5. 微信小程序开发日志——面向对象的JS编程
  6. 在netlify上部署golang web应用
  7. Java处理图像之正片叠底
  8. js观察者模式和发布订阅者模式
  9. twitteR 实例
  10. 颜色表——十六进制颜色值——RGB