首页 >web前端 >css教程 >如何编码HTML电子邮件通讯和电子邮件模板

如何编码HTML电子邮件通讯和电子邮件模板

Joseph Gordon-Levitt
Joseph Gordon-Levitt原创
2025-02-25 19:07:08642浏览

如何编码HTML电子邮件通讯和电子邮件模板

如何编码HTML电子邮件通讯和电子邮件模板

本文最初于2006年首次发表,然后于2015年更新。

> 自从本文于2006年首次发表以来,> 钥匙要点

>在电子邮件新闻通讯中利用HTML表进行布局设计,以确保不同电子邮件客户端的兼容性,因为与CSS相比,支持表的位置和构造内容。

>直接在HTML中应用Inline CSS,以用于字体和颜色等样式元素,因为许多电子邮件客户端不支持外部或嵌入式CSS样式表。
    >使用媒体查询等响应式技术来设计电子邮件新闻通讯,尽管在电子邮件客户端上提供了不同水平的支持,但使用媒体查询来容纳手机和平板电脑。
  • >测试HTML的电子邮件广泛跨多个电子邮件客户端和设备,以确保外观和功能一致,并利用广告系列监视器和MailChimp等工具进行测试。
  • >
  • >避免使用JavaScript和复杂的CS,例如浮点和位置,因为这些通常会被普通的电子邮件客户端剥离或不支持,从而导致潜在的布局问题。
  • 包括图像和字体的后备,以增强兼容性,并确保即使电子邮件客户端无法呈现某些元素,也可以访问新闻通讯。
  • >保持设计简单,内容清晰,以避免渲染问题并增强电子邮件新闻通讯的可读性和有效性。
  • html电子邮件基础
  • 编码HTML电子邮件时,最大的痛苦是,从桌面软件(例如Eudora,Outlook,AOL,Thunderbird和Lotus Notes)到基于Web的电子邮件服务(例如Yahoo!) ,Hotmail和Google Mail,以通过电话和平板电脑上的方式发送电子邮件。用于为每个电子邮件软件工具渲染HTML的软件确定HTML和CSS代码有效且行不通的软件。
  • >

    如果您认为很难确保网站的跨浏览器兼容性,请注意这是一个全新的游戏 - 这些电子邮件软件工具中的每一个都可以以截然不同的方式显示相同的电子邮件。即使这些工具确实正确显示了HTML电子邮件,例如,在阅读电子邮件时,读者在窗口大小的宽度中考虑了宽度。

    您是选择手工编码HTML电子邮件(我的个人喜好)还是使用现有模板,在创建HTML电子邮件时,有两个基本概念要牢记:

    >

      >使用HTML表来控制设计布局和一些演示文稿。您可能会习惯于为您的网页使用纯CSS布局,但是这种方法不会在电子邮件环境中坚持。
    1. >
    2. >使用内联CSS来控制电子邮件中的其他演示元素,例如背景颜色和字体。
    >最快,最简单的方法是查看HTML表和Inline CSS在HTML电子邮件中如何进行交互是从广告报监视器和MailChimp下载一些模板。当您打开这些模板之一时,您会注意到一些我们将在稍后进行更多详细讨论的事情:>

    > CSS样式声明出现在主体标签下方,而不是头标签之间。
      >不使用CSS速记:而不是使用缩写样式规则字体:12px/16px arial,helvetica,而是应该将此速记分解为其单独的属性:字体 - 家庭,字体大小和线条高度 -
    • 跨度和divs很少用于实现特定效果,而HTML表则大部分是布局工作的。
    • > CSS样式声明非常基本,并且不使用任何CSS文件。
    • >
    • 我的代码HTML电子邮件网站还具有我下载和格式化的实际HTML电子邮件,以便您可以研究其他人如何创建电子邮件。
    • >步骤1:使用HTML表进行布局
    是的:桌子回来了,很长时间!网络标准可能已成为用于在网络浏览器中显示的编码页面的规范,但这不是网络,宝贝。在CSS支持方面本文为邮件客户端的CSS支持提供了一些出色的资源)。

    >

    因此,将符合标准的最佳实践和精益标记技能放在一边:我们即将弄脏手!

    创建HTML电子邮件的第一步是决定要使用哪种布局。对于新闻通讯,单列和两列布局效果最好,因为它们可以控制大量内容将大量内容推入电子邮件之类的小空间时产生的自然混乱。单列电子邮件设计还可以轻松在电话和平板电脑上很好地显示。

    >

    单列布局通常包括:

    >
    1. >一个标题,其中包含一个徽标和一些(或全部)从家长网站的导航链接,以增强品牌并为网站访问者提供熟悉程度
    2. >
    3. >在电子邮件中出现在电子邮件中的故事和内容
    4. >
    5. >电子邮件底部的页脚通常包含与顶部导航相同的链接,以及取消订阅
    6. 的说明

    >两列电子邮件还使用标头和页脚。像两列网页一样,他们通常使用狭窄的侧列来容纳功能并链接到更多信息,而较宽的列则包含电子邮件的身体内容。要获取两列电子邮件布局以在手机或平板电脑上很好地显示需要一些代码FU,正如您在本文稍后会看到的。

    >促销电子邮件遵循类似的规则,但内容和链接的包含更少。它们通常包括一两个消息,有时会使用一个带有小解释性文本的大图像和图像下方的一些链接。

    >所有这些电子邮件布局的可能性都可以轻松创建,使用HTML表将空间划分为行和列。实际上,使用HTML表是实现将在不同邮件客户端中持续呈现的布局的唯一方法。

    >无论您的电子邮件是如何设计的,重要的是要记住最重要的内容应该出现在电子邮件顶部或附近,因此当读者打开您的电子邮件时,可以立即可见。电子邮件的左上角通常是人们打开电子邮件时首先要看的地方。

    >

    这是我用来创建HTML电子邮件的方法:>

    • >对于两列布局,为标头,两个中心内容列和页脚创建一个表格,这是三个表。将这些表包裹到另一个容器表中。使用相同的方法进行单列布局,但请给出内容表一列。如果您的电子邮件的设计包含在多个表单元格上分解的图像,则此方法特别适合。否则,一个带有TD行的单个表格为其标头(如果设计使用两列,则使用ColSpan =“ 2”),内容和页脚在所有莲花注释电子邮件软件中都应显示良好。>使用表和TD标签中的属性来控制表的显示。例如,设置边框=“ 0”,valign =“ top”,align =“ left”(或中心,如果适合设计),cellpadding =“ 0”,cellspacing =“ 0”,等等。这主要帮助较旧的电子邮件客户端以(几乎不可接受的)方式显示电子邮件。
    • >
    • 即使您的电子邮件的设计不包括桌子周围的边框,您可能会发现在开发过程中有助于设置边框=“ 1”,以帮助调试任何问题,而随着TR的内部对齐和TD标签。将其更改为Border =“ 0”进行测试和生产。
    • >
    >这种方法可能会冒犯更喜欢使用最新标准编码的纯粹主义者,但这是目前唯一可行的方法。但是,我们正在使用表进行布局的事实并不意味着我们需要完全求助于老式的方法。例如,无论Lotus Notes显示HTML电子邮件多么糟糕,您都不必求助于使用字体标签。虽然Outlook 2007的HTML渲染引擎并不完美,但它确实显示了基本的HTML桌子。 但是,有一些警告。让我们看一下下一个文本样式。

    >

    >步骤2:添加CSS样式

    我是否说CSS支持在邮件客户中很差?好吧,是。但是,一旦您的嵌套表布局到位后,您仍可以(并且应该)仍在电子邮件中使用CSS。有几件事要注意。这是我使用的步骤。

    首先,使用内联样式存储您的所有样式信息,如下所示:

    这包括表,TD,P,A等。

    >

    >在创作网页时可能会在HTML Head标签中使用CSS样式声明。取而代之的是,将您的样式声明放在正文标签下方 - Google Mail,但是,在电子邮件中寻找任何样式声明,并(有用)删除它。另外,不要打扰使用链接元素参考外部样式表:Google Mail,Hotmail和其他电子邮件软件将忽略,修改或删除这些外部引用到样式表。对于您的容器表(包含标头,内容和页脚表的容器表),将表宽度设置为98%。事实证明雅虎!邮件需要两边的1%缓冲件才能正确显示电子邮件。如果侧沟对于电子邮件的设计至关重要,请将宽度设置为95%甚至90%,以避免潜在的问题。当然,容器表中的桌子应设置为100%。

    >

    >将一般字体样式信息放在最接近内容的表TD中。是的,这可能会导致多个TD单元格内的重复性声明。仅在必要时将字体样式的定义放入标题(例如H1,H2),P或A标签。

    >

    >少数使用Divs浮动小盒内容,并链接到桌子的TD单元格内的右侧或向左链接。 Google Mail似乎忽略了CSS Float声明(但是Yahoo!和Hotmail Cope ant Cope都可以)。有时,比依靠浮点声明更好地编码更复杂的表布局。或者,由于很容易弄乱一封电子邮件,因此请您的设计师将浮动内容放在狭窄的侧列中。片状的片状支持是一个问题,可能会导致电子邮件设计重新设计。

    > div似乎几乎没有用,但跨度几乎每次都起作用,因为它们是内联元素。在某些情况下,跨度不仅可以用于着色或尺寸文本:它们可用于将文本放置在内容上方或下方。

    请注意,某些电子邮件交付服务将解开样式定义,以使其更明确,因此,所有电子邮件软件都可以更易读。例如,CSS速记样式=“ margin:10px 5px 10px 0;”可以扩展到前面所示的长风格声明。测试每个电子邮件并查看电子邮件代码会发生什么。从CSS速记开始,因为在最坏的情况下,它似乎与所有电子邮件软件都很好。

    >

    >如果您已经下载并研究了活动监视器和MailChimp的电子邮件模板,您会看到他们将容器表对待,就像它是HTML车身标签一样。活动监视器团队将此表称为“ BodyImpstoster”,这是考虑框架或包装桌的好方法。从CSS的角度来看,如果Google Mail(例如Google Mail)没有禁用或忽略车身标签,则容器表可以执行HTML身体元素的作用。

    步骤3:采用最佳实践

    >知道您已经使用我建议的指南创建了有效的HTML电子邮件只是解决方案的一部分 - 您应该遵循一些最佳实践,以确保您的电子邮件得到良好的接收。

    下一步是在各种电子邮件客户端中测试您的HTML电子邮件。通常,这将确定需要解决方法的问题。

    第一个使用的测试工具是Firefox和Internet Explorer Web浏览器。如果电子邮件在两个浏览器中都很好地显示,则很有可能在Outlook,Yahoo!,Google Mail和其他服务中测试电子邮件,并且只会显示次要问题。如果可能的话,我还建议您在Internet Explorer 6中测试您的电子邮件 - 这应该可以很好地指出您的电子邮件将如何在Outlook 2003中呈现(请参阅本文末尾的资源列表,以获取有关运行Internet的信息资源管理器6)。最后,要测试电子邮件在iPhone或iPad上的外观,请在Safari Web浏览器中查看您的HTML电子邮件。

    >一旦电子邮件出现在这两个网络浏览器中,请使用电子邮件交付服务将电子邮件发送到一系列测试电子邮件帐户。理想情况下,这应该包括使用Yahoo!,Hotmail和Google Mail Services的帐户。 当然,您使用的测试帐户应由会收到电子邮件的人的邮件列表中的域名确定。例如,如果此列表中没有AOL订阅者,则可能是浪费时间和金钱要设置,并与AOL电子邮件帐户进行测试。

    这是我在此测试阶段发现必要的最常见的代码调整:>

    有时,需要从百分比宽度到固定宽度的切换。虽然这不是理想的 - 因为读者可以在阅读时可以调整他们的电子邮件窗口的大小,但有时,使用固定宽度是在多个电子邮件客户端中正确显示布局的唯一方法。
      >
    • 如果电子邮件设计中的列存在间距问题,请首先调整HTML表的细胞板和细胞间隙属性。如果不起作用,请应用CSS保证金和填充属性。 HTML间距可以在较旧的电子邮件软件中效果更好。
    • 当TD单元在IMG标签下方关闭时,可能会发生
    • >图像位移。这是一个古老的HTML问题。立即将标签放在(与)IMG标签之后(在同一行上)消除烦人和神秘的1像素差距。
    • 此外,建议使用以下最佳实践:
    • >
      • 避免使用JavaScript。大多数电子邮件软件无论如何都会禁用它。
      • 如果将图像切成薄片并分布在几个HTML表单元格中,请使用许多测试帐户测试电子邮件。有时,Outlook看起来可能很棒,但是在Hotmail和其他服务中会被一个或多个像素所转移。还要考虑将图像作为背景图像在新的HTML表上,该表封闭将显示背景图像部分的所有表行和列;这通常与切片图像相同,但使用较少的代码并可以提供更好的结果(见下文)。请注意,Outlook 2007不会显示背景图像;请确保使用目标电子邮件软件测试您的电子邮件代码。
      • 对于背景图像,请使用表的背景属性,而不是使用CSS。与其他潜在解决方案相比,这在电子邮件软件之间的工作更加一致。
      • >
      • >将电子邮件图像存储在Web服务器上 - 最好在与网站映像分开的文件夹中(例如,在称为 /images /email的文件夹中),并且不要删除它们。有些人几周或几个月后打开电子邮件,就像人们使用书签返回网站一样。
      • >确保您的所有图像都使用ALT,高度和宽度属性。设置这些属性的值可改善Google邮件的结果,并在读者关闭图像时保持布局。但是请注意,Outlook 2007无法识别Alt属性。
      • >
      • >使用target =“ _ black”属性,以便使用WebMail Services读取的人没有请求的页面出现在其WebMail接口中。>
      • > 1×1像素图像可用于强制间距创建精确的电子邮件布局,但垃圾邮件发送者经常使用1×1像素图像来确定是否打开了电子邮件。使用这种练习将增加您的电子邮件归类为垃圾邮件的可能性。 同样,
      • 避免在电子邮件中使用大图“上方”。这是另一种经典的垃圾邮件练习,可能会导致您的电子邮件被解释为垃圾邮件。
      • >重要的是要确保您的HTML电子邮件显示并关闭图像。许多电子邮件应用程序默认情况下将图像显示为“关闭”。例如,如果您使用背景图像在上面提供带有白色字体颜色的背景颜色,请确保HTML表的该部分的默认背景颜色是深色的,而不是白色。
      • 测试电子邮件如何使用图像显示如何显示,我通常会使用文本编辑器将每个图像的SRC属性替换为“ XSRCX”之类的唯一组合,然后在测试后再次将其恢复回去。
      >一旦对HTML电子邮件进行了调整,以使其在您的测试电子邮件帐户中很好地显示,下一步就是浏览清单。例如,验证以下内容:

      • >从地址显示正确显示(名称,而不是裸露的电子邮件地址)?
      • >
      • 主题行是否正确?
      • 联系信息正确且视觉上明显吗?
      • >
      • >电子邮件的顶部是否显示文本:“您收到此电子邮件是因为……退订说明在此电子邮件的底部。”?
      • >
      • 您的电子邮件包含文本要求读者从地址添加您的电子邮件地址簿吗?
      • >
      • 您的电子邮件顶部是否包含了邮件的Web版本的链接?
      • >
      >许多电子邮件交付服务都可以查看您的HTML电子邮件如何在各种电子邮件软件中显示。它可以帮助您在发送之前确定需要进行哪些代码调整。

      步骤4:Google Mail,Lotus Notes和Outlook 2007

      >的代码

      Google Mail,Lotus Notes和Outlook 2007提出了自己独特的编码挑战。信不信由你,Outlook 2007对CSS的支持明显少于Outlook的先前版本! Google Mail缺乏支持的宽恕 - 因为该应用程序在浏览器中运行,因此无法控制其显示的电子邮件的内容。因此,Google的工程师必须采取步骤以确保其应用程序正确显示,而不管撰写电子邮件的HTML或CSS的质量如何 结果,当网络标准是原始的,Google邮件的作用就像1990年代初期的工件。这需要一些工作,但是可以打开一个Google Mail页面,并查看其渲染HTML电子邮件实际上是多么令人费解。

      > 一方面,Google邮件删除了任何样式标签之间包含的CSS样式,无论它们在电子邮件中出现如何。 HTML表中显示的字体(使用样式的唯一替代方案)具有比预期更大的奇怪习惯,无论HTML电子邮件如何结构。 但是,好消息是,如果您为这三个电子邮件应用程序的奇怪性进行编码,那么您的HTML电子邮件代码可能在大多数(如果不是全部)电子邮件客户端中显示得很好。以下是一些在Google邮件和其他较旧的电子邮件软件中效果很好的技术:

      >
      • >用BGColor属性定义TD单元格中的背景颜色,而不是CSS样式。
      • >如上所述,使用TD单元格中的背景属性进行背景图像,而不是使用CSS。这种方法的一种副作用是可以根据需要使背景图像高高 - 如果您的电子邮件模板中使用的内容可能会变化,则使用以这种方式使用超高的背景图像可以使得电子邮件收缩或扩展,具体取决于副本的高度,从一封电子邮件到另一封电子邮件。但是请记住,Outlook 2007完全忽略了背景图像。
      • 如果效果更好,请使用填充声明来控制TD单元内的边缘。边距样式在这些单元中不起作用,但是填充性可以。
      • >
      • 如果您需要在TD单元格周围的边框,请记住Google Mail在DIV中定义时在TD单元格周围显示一个边界,而当它在TD标签中定义为边框样式时,它不在。
      • 如果您需要针对深色背景颜色的浅色链接,请将字体定义放在TD单元格中(因此,它适用于P和A标签),然后将颜色添加到A tag。
      • 如果P和A字体似乎是不同的尺寸,请将A标签包装在p标签中。
      • Google Mail积极地使用Google Mail用户界面的右栏,该邮件将HTML电子邮件挤进了中心面板。确保内容TDS中的填充样式全程设置为10个像素,以免左右击中文本。
      • >
      • >使用Google Mail帐户测试HTML电子邮件时,您可能会发现TD,H1,H2,P,A和其他标签中缺少一种或多种字体样式。仔细检查所有字体,以确保Google Mail正确显示该字体。
      • >
      • 除了Google邮件之外,程序员在创建HTML电子邮件时面临的另一种危害:Lotus Notes。许多大型公司继续支持和升级其笔记安装。
      • 不幸的是,不可能判断哪些公司使用笔记是不可能的。最好的方法是遵循本文中描述的准则 - 代码越原始,使用说明>
      的可能性就越大,即使不是完美的可能性也越好。

      也就是说,Lotus的笔记很可能会介绍您的HTML电子邮件怪癖,这些怪癖几乎是不可信的。例如,旧版本的笔记可以将图像转换为其专有格式,或者简单地忽略一封电子邮件中完美无瑕的基本HTML,但在另一封电子邮件中显示其他html。

      以下一些提示可以帮助您说服笔记正确显示您的HTML电子邮件:>
        正如我们之前讨论的那样,使用包含所有内部布局表的容器表(例如,对于标题,内容和页脚)。这将电子邮件保留在一大块的HTML中,因此在注释中显示时,布局的一部分不太可能徘徊。
      • >通过将宽度设置为一个百分比和/或使用至少为5. 正如我之前提到的,
      • >避免在电子邮件的头标签中使用样式声明。这可能是遵守网络标准的方法,但是注意(如Google Mail)可能会删除您的样式。取而代之的是,在表中的内联样式上,TD,H1,H2,P,A和其他标签。
      • >使用绝对URL到存储在Web服务器上的图像。您对转换图像的注释无法做太多,但是使用远程图像可能会有所帮助。
      • >
      • >使用命名锚的链接链接,很少(如果有的话)在笔记中工作。最好避免将电子邮件从电子邮件中跳到特定内容的链接。
      • >
      • 避免使用HTML表中的colspans。注释 - 尤其是其早期版本 - 只能处理基本的表布局。
      • >
      • 确保您的TD单元格宽度准确。与Web浏览器不同,Web浏览器会自动将所有单元格设置为最宽的宽度,但根据其定义的宽度调查每个TD小区的大小。
      • 以电子邮件布局为中心通常无法在笔记中使用。通常必须将电子邮件布局左对齐。
      • >
      • 使用这些技术在Google Mail和Lotus Notes中成功渲染将确保您的电子邮件在Outlook 2007中也很好地显示出,该邮件使用了较旧的HTML渲染引擎。微软已经发布了有关其电子邮件软件将会且不会正确显示的详细信息;更多详细信息可以在本文末尾的“资源”部分中找到)。
      • >
      • 广告监护仪是一项电子邮件交付服务,为每个流行的手机,网络和桌面电子邮件客户端提供了全面的CSS元素列表。

      步骤5:编码手机和平板电脑

      >有很多人在智能手机和平板电脑以及桌面电子邮件软件上阅读HTML电子邮件。调整您的HTML表以在这些设备上很好地显示,这一点很容易。它可以帮助CSS支持非常适合用于新手机和平板电脑上使用的HTML渲染引擎。

      >

      >解决方案是使用CSS @Media定义来定位HTML表TD单元格,并提高显示屏所需的字体大小。例如,iPhone上的字体必须为13像素才能清晰。最好的部分?网络邮件和桌面电子邮件软件将剥离或忽略您的@Media定义,而您的手机和平板电脑将读取代码并完美显示所有内容。

      >

      >这是一组@Media定义的示例,用于显示手机和平板电脑的单列布局HTML表:

      <span><span><span><p</span> <span>style<span>="<span>color: red;</span>"</span></span>></span><span><span></p</span>></span></span>

      >将此@media代码直接放在您的身体标签下方,并将其放在表格定义和TD单元格上。当您的HTML电子邮件使用设备(或Web浏览器水平重新尺寸)查看小于480像素时,这些定义将激活。

      >

      >编码两列HTML电子邮件以适应小手机和平板电脑屏幕的秘诀?将每一列放入自己的表中。接下来,对于每个HTML表,请使用内联CSS进行浮动:左和HTML Align =“左”以浮动并对齐每个内容列表,向左对齐。然后添加到您的表定义和TD单元格中。

      >使用上面的@Media代码,对于宽度小于480像素的屏幕,这将设置列表,左右列,宽度与左侧列列相同,并在主列下面滑动。

      >

      该方法可用于针对任何布局设计更改以与手机和/或平板电脑一起使用。

      该解决方案来自广告系列监视器,响应式电子邮件设计的出色指南,该指南有更多有关如何使HTML电子邮件对不同屏幕尺寸响应的详细信息和想法。

      摘要

      许多收到电子邮件的人喜欢HTML而不是文本,原因有很多。但是,对于程序员而言,创建HTML电子邮件的任务将始终显示出来既简单又非常复杂。本文描述了创建标记的许多问题和策略。

      >从本文中获取的最佳主意是什么?如果在简单的电子邮件设计和更复杂的解决方案之间可以选择,那么简单始终是最安全的赌注。

      >

      进一步阅读

      这些资源提供有价值的信息,如果您想了解有关编码HTML电子邮件的更多信息,可以为您提供帮助。

      活动监视器:电子邮件中CSS支持指南
      • 广告系列监视器:响应式电子邮件设计
      • MailChimp:移动设备上的电子邮件
      • > mailChimp:电子邮件蓝图
      • MailChimp:电子邮件营销现场指南
      • ,这里还有一些…
      >

      电子邮件标准项目

      电子邮件标准项目可能是确切理解HTML和CSS的最佳起点。该网站还维护了一个酸测试,可用于比较跨电子邮件软件的合规性,并且您可以通过几种方式参与来帮助改善网络标准的电子邮件支持。>

      >免费广告系列监视器和MailChimp HTML电子邮件模板

      > 这两种电子邮件交付服务都随着时间的推移与不同的电子邮件客户端积极测试模板。但是,每种方法都存在细微的差异 - 广告系列监视器将样式声明放置在Head Tag中,而MailChimp则没有。请务必使用电子邮件列表的收件人使用的任何电子邮件客户端使用任何电子邮件客户端测试您的最终html代码。>

      纯文本电子邮件设计指南
      > 本文列出了许多用于使文本电子邮件更易于扫描的简单技术。

      >

      测试HTML电子邮件
      本文探讨了多个电子邮件客户端的测试程序。  其他相关文章包括创建HTML电子邮件布局和了解多元测试。

      >关于
      的有关封锁电子邮件图像的文章 “> clickz和广告系列监视 从2004年开始,ClickZ文章显示了主要的电子邮件软件如何比较何时阻止图像或何时在预览窗格中查看内容。广告监视器的文章更加详细,列出了实际示例和想法如何对抗电子邮件的默认映像渲染,以及设计电子邮件以在预览窗格中看起来还可以。
      > Word 2007 HTML和CSS在Outlook 2007中渲染功能 Microsoft的官方描述2007年Outlook将为HTML和CSS呈现什么。包括指向Dreamweaver工作的验证器以及Microsoft编辑工具的链接。

      mailChimp:html电子邮件模板入门指南 有关HTML电子邮件的各个方面的许多重要信息,包括垃圾邮件过滤器的工作方式。包括一些可以使过程更容易的工具。>
      >“ HTML电子邮件的秘密”系列

      > 其中一些信息是古老的,但提供了莲花笔记的好文章。>
      CSS和电子邮件,在树上接吻

      > 这种仅CSS的HTML电子邮件的方法是由列表分开发布的。注意:作者写了本文的更新,该文章发布在活动监视器博客上,优化了HTML电子邮件中的CSS演示文稿。
      > HTML代码如何影响电子邮件可传递性

      > 一个不错的概述,描述了不同的电子邮件服务如何查看您在HTML电子邮件中包含的HTML。您无法直接解决每个问题(例如,在电子邮件的html和电子邮件版本之间创建一个明确的边界是您的电子邮件服务提供商的问题,如果您使用一个问题),但它有助于知道发生了什么。 >初学者的6步电子邮件营销指南 以下是电子邮件营销指南,该指南比可访问的标题所建议的更完全涵盖了主题,它包括一部分良好的信息,以从构建电子邮件模板时将从您将做出的设计决策中获得最佳结果。它是从2020年底开始的

      >>如何在2020年创建博客(并赚钱):立即开始博客的轻松指南
      增长邮件列表的最佳方法之一是运行一个一致的博客。本指南是一个罕见的发现 - 它向您展示了如何快速运行有效的博客并产生结果,并削减了博客建议界的许多噪音。它还涵盖了使用您的电子邮件新闻通讯来增加您的博客受众,为您的整个操作创造了一个良性周期。

      经常询问有关HTML电子邮件新闻通讯的问题(常见问题解答)

      编码HTML电子邮件新闻通讯的最佳实践是什么?

      >编码HTML电子邮件新闻通讯可能会有些棘手,但是遵循最佳实践可以使过程变得更加顺畅。首先,始终使用表进行布局。与现代网络设计不同,电子邮件设计仍然在很大程度上依赖桌子。其次,内联CSS是必经之路。这是因为并非所有电子邮件客户端都支持嵌入或链接的CSS。第三,将HTML属性用于宽度,高度等。这样可以确保您的电子邮件在不同的电子邮件客户端中正确显示。最后,在发送电子邮件之前,请务必测试您的电子邮件。有多种在线可用的工具可让您测试您的电子邮件在不同的电子邮件客户端中的外观。

      >如何使我的HTML电子邮件通讯响应迅速吗?

      >使您的HTML电子邮件新闻通讯响应式响应率意味着从台式计算机到手机,确保在所有设备上看起来都不错。为此,您可以在CSS中使用媒体查询。媒体查询使您可以根据设备的屏幕尺寸应用不同的样式。但是,并非所有电子邮件客户都支持媒体查询,因此使用移动优先方法设计您的电子邮件很重要。这意味着首先为最小的屏幕设计,然后添加媒体查询以适应较大的屏幕。

      >我可以在我的HTML电子邮件通讯中使用Web字体吗?

      是的,您可以在您的HTML电子邮件通讯。但是,请记住,并非所有电子邮件客户端都支持Web字体。对于那些没有的人,您应该始终提供后备字体。这通常是标准字体,如Arial或Times New Roman。要使用Web字体,您将使用 @font-face规则在CSS中包含字体文件。

      如何将图像添加到我的HTML电子邮件通讯中?

      > HTML电子邮件通讯可以使用

      标签完成。但是,有几件事要牢记。首先,始终在您的标签中包含宽度和高度属性。这样可以确保图像正确显示。其次,将绝对URL用于图像。这意味着图像源应该是完整的URL,而不是相对路径。最后,始终包含图像的alt文本。这是图像的描述,如果无法加载图像,则会显示。

      >

      >如何确保我的HTML电子邮件通讯在所有电子邮件客户端中看起来都不错?但是,您可以使用一些策略。首先,始终将表用于布局和内联CSS。这些在电子邮件客户端中得到了广泛的支持。其次,在发送发送之前,请在各种电子邮件客户端中测试您的电子邮件。有一些在线工具可让您这样做。最后,保持设计简单。您的设计越复杂,在某些电子邮件客户端中断的可能性就越大。

      >我可以在我的HTML电子邮件新闻通讯中使用JavaScript吗? JavaScript在您的HTML电子邮件通讯中。这是因为许多电子邮件客户端不支持JavaScript,或者出于安全原因默认情况下将其禁用。相反,请坚持使用您的电子邮件设计的HTML和CSS。

      >如何在我的html电子邮件通讯中添加一个呼叫式操作按钮?您的HTML电子邮件通讯可以使用HTML和CSS完成。最简单的方法是使用带有CSS的标签将其像按钮一样样式。但是,要获得跨电子邮件客户端的更好兼容性,您可以使用具有单个单元格的表格和样式看起来像按钮。

      我如何在HTML电子邮件通讯中添加背景颜色? 🎜>可以在HTML电子邮件通讯中添加背景颜色,可以使用CSS完成。您可以使用背景色属性为整个电子邮件设置背景颜色,也可以为表或表单元格(如表或表单元格)设置背景颜色。但是,请记住,并非所有电子邮件客户都支持背景颜色。对于那些不这样的人,您应该使用html中的bgcolor属性提供后备颜色。

      >如何将链接添加到我的HTML电子邮件通讯?

      可以使用标签完成新闻通讯。您可以链接到网站,电子邮件地址或电话号码。要链接到网站,请使用网站的完整URL使用HREF属性。要链接到电子邮件地址,请在HREF属性中使用MailTo:协议。要链接到电话号码,请使用TEL:协议中的HREF属性中的协议。

      >如何将社交媒体图标添加到我的html电子邮件通讯中?

      >

      >在您的HTML电子邮件中添加社交媒体图标可以使用图像和链接完成新闻通讯。您将对图像图像使用

      标签,并将其包装在标签中以链接到您的社交媒体配置文件。始终包含图像的alt文本,并为图像源和链接HREF使用绝对URL。

以上是如何编码HTML电子邮件通讯和电子邮件模板的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn