如何在Outlook 2016+中的电子邮件中插入HTML(包括图像) [英] How to insert HTML (including images) in an e-mail in Outlook 2016+
问题描述
尽管Outlook默认情况下以HTML格式发送电子邮件，但Microsoft似乎希望使我们自己编写HTML变得困难.使用HTML的一个重要原因是在插入图像时，通过使用< img> 标记从在线访问图像，而不是将图像本身插入到电子邮件中，从而可以减小电子邮件的大小.电子邮件正文.
Although Outlook sends e-mails as HTML by default, Microsoft seems to want to make it hard for us to write that HTML ourselves. One important reason for using HTML is to keep the size of an e-mail down when inserting an image by using an <img> tag to access the image from online instead of inserting the image itself in the body of the e-mail.
多个来源[例如， 1 ， 2 ]表示，这样做的方法是使用作为文本插入"来插入包含HTML代码的文件.但是从Office 2016开始，默认情况下将不再提供以文本形式插入"选项.不过，幸运的是，还有显示的来源[例如， 3 ]如何找回它.
Several sources [e.g., 1, 2] say that the way to do this is to use "Insert as Text" to insert a file containing the HTML code. But as of Office 2016, the "Insert as Text" option is no longer available by default. Fortunately though, there are also sources [e.g., 3] that show how to get it back.
但是，当我尝试这样做时，Outlook无法解释我的HTML.因此，例如，如果我制作一个包含以下内容的文件:
However, when I tried this, Outlook did not interpret my HTML. So, for example, if I make a file containing the line:
<img src="https://www.lenetek.com/blog/how-to-create-html-emails-in-outlook/images/attach_file.jpg" alt="Random online image">
，然后使用以文本形式插入"将该行插入到我的电子邮件中，结果只是该行代码，而不是图像.我在做什么错了?
and then use "Insert as Text" to insert that line in my e-mail, the result is just that line of code, not the image. What am I doing wrong?
(如alt属性所示，该示例中的图像文件只是出现在上面引用的文章之一中的随机在线图像.我与该网站没有任何隶属关系.)
(As indicated by the alt attribute, the image file in that example is just a random online image that appears in one of the articles referenced above. I have no affiliation with that website.)
推荐答案
答案很简单.在某种程度上，这很明显，但是在另一种方式中，不是.
The answer is very simple. In a way, it's obvious, but in another way, it's not.
答案是插入的HTML代码的每个段都必须是完整的HTML文件，包括<！DOCTYPE> ，< HTML> 和< body> 标签，而不仅仅是所需的HTML代码.之所以不那么明显，是因为如果您插入多个代码段，则每个代码段都必须是一个完整的HTML文件，而这在实际编写HTML时是永远都不会做的.我假设正在发生的情况是，当Outlook检测到有效的HTML文件被插入为文本"时，它会删除<！DOCTYPE> ，< HTML> 和< body> 标记，然后插入它们之间的代码-作为HTML，而不是文本.
The answer is that each segment of HTML code inserted has to be a complete HTML file, including the <!DOCTYPE>, <HTML> and <body> tags, not just the desired HTML code. The reason this is not obvious is because if you insert multiple code segments, each one has to be a complete HTML file, which is something you would never do when actually writing HTML. I presume that what is happening is that when Outlook detects a valid HTML file being "Inserted as Text", it strips the opening and closing <!DOCTYPE>, <HTML> and <body> tags and then inserts the code that was between them -- as HTML, not as text.
因此，我找到的解决方案是，我需要将包含以下内容的文件插入为文本"，而不是问题中显示的单行代码:
So, the solution I found was that instead of the single line of code shown in the question, I need to "Insert as Text" a file containing:
<!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>
当我将其作为文本插入电子邮件时，看到的是图像，而不是代码.
When I insert that as text in my e-mail, I see the image, not the code.
我在网上找到的所有资料中都说使用以文本形式插入"在Outlook中插入HTML，但没有一个人说它必须是完整的HTML文件，而不仅仅是所需的代码.因此，如果我不是唯一一个不得不长时间思考的人，那么此问题解答可能会对其他人有所帮助.
In all the sources I found online that said to use "Insert as Text" to insert HTML in Outlook, none of them said it had to be a complete HTML file instead of just the desired code. So maybe this Q&A will be helpful to someone else, if I'm not the only person who had to scratch my head for a long time before thinking of that.
======================
========================
在电子邮件中添加了有关使用HTML的详细信息:
Added details about using HTML in the e-mail:
Lenetek文章链接到问题中，则Outlook不支持所有HTML标记.特别是对于嵌入图像，我发现:
As pointed out in the Lenetek article linked in the question, Outlook does not support all HTML tags. In particular, for embedding images, I have found:
从Outlook发送时:Outlook不支持< figure> 和< FigCaption> .我发现放置在这些标签中的图像和标题是内联呈现的，只是忽略了标签.为了浮动到右边距，我发现我可以通过将< figure> 替换为< table> 并放置图像及其标题来获得相同的结果在< TR>< TD> ...</TD></TR> 的每个内部.
When sending from Outlook:
Outlook does not support <figure> and <FigCaption>. I found that an image and caption placed in those tags were rendered inline, just ignoring the tags. For floating to the right margin, I found I was able to get the same results by replacing <figure> with <table> and then placing the image and its caption each inside of <TR><TD>...</TD></TR>.
在Outlook中接收:不同的电子邮件客户端解释HTML的方式有所不同，这可能就是为什么某些电子邮件的顶部带有一个链接，以便在用户的浏览器中查看电子邮件的原因.特别是，我读到Outlook在这方面表现不佳.上面提到的我右上角的图片就是这种情况.
When receiving in Outlook: There are differences in how different e-mail clients interpret HTML, which is probably why some e-mails come with a link at the top for viewing the e-mail in one's browser. In particular, I've read that Outlook is not well behaved in this regard. And that was the case with my right-floated image referred to above.
完成以文本形式插入"技巧后，图像在Outlook中的电子邮件草稿中正确显示在右边距处，但是在发送时，CSS样式 float 属性被忽略了桌子本身就出现在左边缘，周围没有文字.我可以通过在< table> 标记中解决此问题，将样式属性 float:right; 替换为老式的HTML属性 align =正确" .这样，当在Outlook中收到图像和标题时，它会正确显示在右边距处.我尚未测试其他电子邮件客户端中的外观.
After doing the "Insert as Text" trick, the image appeared correctly at the right margin in the draft e-mail in Outlook, but when it was sent, the CSS style float attribute was ignored and the table appeared by itself at the left margin with no text wrapped around it. I was able to fix this by, in the <table> tag, replacing the style attribute float: right; with the old-fashioned HTML attribute align="right". With that, the image and caption appeared correctly at the right margin when received in Outlook. I have not tested what it looks like in other e-mail clients.
这篇关于如何在Outlook 2016+中的电子邮件中插入HTML(包括图像)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
