邮件浅述邮件渲染原理简述一、电子邮件收发原理电子邮件收发协议：SMTP、POP3 和 IMAP、MIME SMTP:

邮件渲染原理简述

一、电子邮件收发原理

电子邮件收发协议：`SMTP`、`POP3` 和 `IMAP`、`MIME`

SMTP:发送电子邮件的协议，一种属于TCP/IP协议族的应用层协议，它使用由TCP提供的可靠的数据传输服务把邮件消息从发信人的邮件服务器传送到收信人的邮件服务器；

POP3 和 IMAP:接收电子邮件的协议;

POP3(Post Office Protocol)第三个版本,也叫邮局协议，使用客户服务器的工作方式，接收邮件的用户 PC 机中必须运行 POP 客户程序，而在用户所连接的 ISP 的邮件服务器中则运行 POP 服务器程序，它是一个非常简单、但功能有限的邮件读取协议；
IMAP(Internet Message Access Protoco)，现在较新的是版本 4，即 IMAP4,联机协议,是按客户服务器方式工作
MIME(Multipurpose Internet Mail Extensions)，多用途互联网邮件扩展,它是当前广泛应用的一种电子邮件技术规范，SMTP协议的扩充，MIME规定了通过SMTP协议传输非文本电子邮件附件的标准；允许包含任意类型的文件：比如文本，图像，声音等

二者的区别：

IMAP总是与邮件服务器同步，以便在邮件客户端（微软Outlook，Thunderbird）中做出的任何更改都会立即出现在Webmail收件箱中。
在POP（邮局协议）中，邮件客户端帐户和邮件服务器不同步。这意味着在邮件客户端中对电子邮件帐户进行的任何更改都不会被转移到Webmail收件箱。
POP3 更容易丢失邮件或多次下载相同的邮件
POP3从服务器下载邮件到邮件客户端，并可以配置消息的状态（删除服务器上的消息，或者在指定时间在服务器上保留）。
IMAP，由于能够在邮件客户端和服务器之间同步消息和文件夹，这在多台计算机和设备上特别有用。比如，在手机上可以查看邮件，在PC上也可以查看邮件，跟踪消息状态。

总结：

（1）IMAP：电子邮件存储在服务器上，发送的消息存储在服务器上，消息可以在多个设备上同步和访问。

（2）电子邮件存储在一个设备上，发送的消息存储在单个设备上，电子邮件只能从单个设备访问

MIME:在其邮件首部中说明了邮件的数据类型(如文本、声音、图像、视像等)，使用MIME，可以在电子邮件中传送多个协议

二、电子邮件系统组成：`MUA` 、`MTA`、`MDA`、`MRA`

MUA（Mail User Agent）：接收邮件所使用的邮件客户端，使用IMAP或POP3协议与服务器通信；Client端用户都需要通过各个操作系统提供的MUA才能够使用邮件系统；

MTA（Mail Transfer Agent）：“邮件传送代理”，MUA是用在Client端的软件，而MTA是用在邮件主机上的软件，它也是主要的邮件服务器。MTA负责发送邮件，中转邮件，当然也要接收邮件；

MDA（Mail Delivery Agent）：：“邮件投递代理”主要的功能就是将MTA接收的信件依照信件的流向（送到哪里）将该信件放置到本机账户下的邮件文件中（收件箱），或者再经由MTA将信件送到下个MTA。如果信件的流向是到本机，这个邮件代理的功能就不只是将由MTA传来的邮件放置到每个用户的收件箱，它还可以具有邮件过滤（filtering）与其他相关功能；

MRA（Mail Receive Agent）：负责实现IMAP与POP3协议，与MUA进行交互；相当于让你的邮件账户支持离线邮件收取，而不是电脑打开才能收取邮件。

从上图可以看出，邮件收发的整个过程如下：

用户利用MUA寄信到MTA。配置MUA时要配上smtp服务器域名,然后发送邮件。比如使用网易账户发送邮件就要在配置smtp.163.com,这样邮件就发送到网易MTA。

MTA检查收件人服务器如果不是自己则传递到下一跳MTA，直到传递到目的MTA。

目的MTA收到邮件后将邮件存储到MDA中，MDA对邮件进行垃圾过滤，病毒查杀。

MRA把邮件从MDA收取到用户的收件箱中。

MUA收取邮件，此时收取邮件只是将MRA中的邮件下载到本地

举个🌰：使用Node 进行邮件发送

HTML邮件

`欢迎来到邮件设计地狱！！！`

一、邮件渲染令人痛苦

传统上，对于网页设计师来说，设计和开发 HTML 邮件有着最坏的体验。就像乘坐时光机返回充满表格布局，内联样式，非语义标签，和客户端 hack 技巧的地狱般的 90 年代。

这只是一小部分 HTML 邮件痛苦的原因：

没有标准。当然，我们使用 HTML 和 CSS，但不像网页，邮件客户端没有真正的标准存在，这是一些杂乱的代码存在的原因。
邮件客户端。邮件客户端，比如 Outlook 和 Gmail，经常以不同的方式渲染 HTML 和 CSS，而且总是这么离谱。从而导致……
许多 hack。即使是设计良好的邮件广告也需要针对不同的客户端 hack 来保证质量。
没有 JavaScript。电子邮件中 web 中最受欢迎的语言在电子邮件丝毫没有地位，因为电子邮件客户端会（正当地）出于安全因素而禁用它。这样就没有交互性了。

二、html邮件模板优势

排版复杂
可复用
兼容性

三、HTML邮件的原理

HTML 邮件基于三样东西：表格，HTML 属性，内联样式。在写 HTML 邮件的时候，由于电子邮件客户端渲染引擎的限制，我们只能使用 HTML 与 CSS 中非常有限的一部分子集。Campaign Monitor 在维护一份有关大多数主流邮件客户端所支持的 CSS 属性的非常好的图表

`表格`

许多 Web 开发者喜欢使用 div、header、section、article、nav 和 footer 这样的标签来构建 Web 页面的架构。不幸的是，电子邮件开发者没有闲工夫去使用语义化标签。相反，你必须使用表格来给你的电子邮件布局。这些表格会嵌套的非常……深。

设置表格的基本样式会用到许多人平常不会用到的属性：width、height、bgcolor、align、cellpadding、cellspacing 和 border。结合像 padding、width和 max-width 这样的属性，设计者可以构建出更健壮的邮件布局。

一个编码良好的表格示例在邮件中是看起来是这样的：

<table border="0" cellpadding="0" cellspacing="0" width="100%">
	<tr>
		<td bgcolor="#333333">
			<div align="center" style="padding: 0px 15px 0px 15px;">
				<table border="0" cellpadding="0" cellspacing="0" width="500" class="wrapper">
					<tr>
						<td>…Content…</td>
					</tr>
				</table>
			</div>
		</td>
	</tr>
</table>

嵌套表格并且使用 border、cellpadding 和 cellspacing 属性来确保设计中没有多余的空隙。在表格单元层中使用比 background 和 background-color 更可靠的 bgcolor 属性（尽管 background-color 也很有地位）。

有一个有趣的事情是，div 标签被用来剧中表格并且给内容提供内边距。虽然表格应该承担大部分的结构，但是偶尔使用 div 标签给内容定位，提供内边距和设置一些基本样式是非常实用的。无论如何，因为大多数邮件客户端解析盒子模型都有一些问题，所以在邮件中使用 div 构建主要架构会使邮件布局变得非常不可靠。

图片

在邮件中使用图片与在 Web 页面是使用图片非常类似，但是有一个警告：大多数邮件客户端默认禁用图片导致许多订阅者只能看到些无意义占位图。

图片被禁用的邮件:虽然没有办法自动显示那些图片，可以使用提示文字（ alt-text ）来改善一下现有情况。我们甚至可以通过给 img 标签设置内联样式来给提示文字设置样式来维持与原设置的相似外观。

<img src="img/fluid-images.jpg" width="240" height="130" style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 130px;" alt="Fluid images" border="0" class="img-max">

通过使用上述代码可以使缺失的图片现在看起来有了一定意义

交互性

HTML 邮件的主要优势之一就是可以使用超链接。HTML 邮件允许你使用又大又优美的按钮取缔传统的副本链接来吸引订阅者。

许多邮件营销人员使用图片作为链接按钮。然而，如果使用 Bulletproof buttons，即使是在图片被禁用的情况下也可以允许设计人员通过代码来渲染出可靠的跨平台按钮。

下面是一个用纯 HTML 制作的按钮，这个按钮通过边框来确保整个按钮不光是文字，而是整个按钮都是可以点击的:

<table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
	<tr>
		<td align="center"><a href="http://alistapart.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #666666; text-decoration: none; background-color: #5D9CEC; border-top: 15px solid #5D9CEC; border-bottom: 15px solid #5D9CEC; border-left: 25px solid #5D9CEC; border-right: 25px solid #5D9CEC; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="mobile-button">Learn More →</a></td>
	</tr>
</table>