如何在 Outlook 2016+ 中的电子邮件中插入 HTML(包括图像)

New*_*tes 11 html email outlook

尽管 Outlook 默认以 HTML 形式发送电子邮件,但 Microsoft 似乎想让我们很难自己编写 HTML。<img>使用 HTML 的一个重要原因是在插入图像时通过使用标签从在线访问图像而不是在电子邮件正文中插入图像本身来减小电子邮件的大小。

多个来源 [例如,1、2 ]表示,执行此操作的方法是使用“插入为文本”来插入包含 HTML 代码的文件但从 Office 2016 开始,默认情况下“插入为文本”选项不再可用。幸运的是,还有一些资源 [例如,3 ] 展示了如何将其恢复。

但是,当我尝试此操作时,Outlook 没有解释我的 HTML。因此,例如,如果我创建一个包含以下行的文件:

<img src="https://www.lenetek.com/blog/how-to-create-html-emails-in-outlook/images/attach_file.jpg" alt="Random online image">
Run Code Online (Sandbox Code Playgroud)

然后使用“插入为文本”在我的电子邮件中插入该行,结果只是该行代码,而不是图像。我究竟做错了什么?

(如 alt 属性所示,该示例中的图像文件只是上面引用的一篇文章中出现的随机在线图像。我与该网站没有任何关系。)

New*_*tes 9

答案很简单。从某种意义上说,这是显而易见的,但从另一方面来说,却并非如此。

答案是插入的每段 HTML 代码都必须是一个完整的 HTML 文件,包括<!DOCTYPE><HTML><body>标记,而不仅仅是所需的 HTML 代码。之所以不明显,是因为如果您插入多个代码段,则每个代码段都必须是一个完整的 HTML 文件,而这是您在实际编写 HTML 时永远不会做的事情。我认为发生的情况是,当 Outlook 检测到“作为文本插入”的有效 HTML 文件时,它会删除开头和结尾<!DOCTYPE>以及标签<HTML><body>然后插入它们之间的代码 - 作为 HTML,而不是文本。

因此,我找到的解决方案是,我需要“插入为文本”一个包含以下内容的文件,而不是问题中显示的单行代码:

<!DOCTYPE html>
<html>
<body>
<img src="https://www.lenetek.com/blog/how-to-create-html-emails-in-outlook/images/attach_file.jpg" alt="Random online image">
</body>
</html> 
Run Code Online (Sandbox Code Playgroud)

当我将其作为文本插入电子邮件中时,我看到的是图像,而不是代码。

在我在网上找到的所有资料中,都提到要使用“插入为文本”在 Outlook 中插入 HTML,但没有一个资料说它必须是完整的 HTML 文件,而不仅仅是所需的代码。因此,如果我不是唯一一个在思考这个问题之前摸不着头脑很长时间的人,那么也许这个问答对其他人会有帮助。

=======================

添加了有关在电子邮件中使用 HTML 的详细信息:

正如问题中链接的Lenetek 文章中所指出的,Outlook 不支持所有 HTML 标签。特别是,对于嵌入图像,我发现:

从 Outlook 发送时: Outlook 不支持<figure><FigCaption>。我发现放置在这些标签中的图像和标题是内联渲染的,只是忽略了标签。对于浮动到右边距,我发现通过替换<figure><table>然后将图像及其标题放置在<TR><TD>...</TD></TR>.

在 Outlook 中接收时: 不同的电子邮件客户端对 HTML 的解释方式存在差异,这可能就是为什么某些电子邮件顶部带有用于在浏览器中查看电子邮件的链接的原因。特别是,我了解到 Outlook 在这方面表现不佳。上面提到的右浮动图像就是这种情况。

执行“插入为文本”技巧后,图像在 Outlook 中的草稿电子邮件的右边距中正确显示,但在发送时,CSS 样式属性float被忽略,表格本身出现在左边距中周围没有文字。我可以通过在标签中用老式的 HTML 属性<table>替换 style 属性来解决这个问题。这样,在 Outlook 中收到图像和标题时,图像和标题就会正确显示在右边距。我还没有测试过它在其他电子邮件客户端中的样子。float: right;align="right"