Office365 outlook 邮件 HTML 电子邮件渲染

Question

我在工作场所使用 office365 电子邮件来访问电子邮件。我需要生成一个将在 HTML 中开发的动态时事通讯，但是，我似乎无法弄清楚如何将 HTML 页面添加到电子邮件中，粘贴纯 HTML 不会' t 似乎工作，因为 outlook 没有呈现。

经过一番研究，我找到了解决方法，即在浏览器上打开 html 页面，只需使用 CTRL + A 复制内容并粘贴到电子邮件编辑器中，这似乎添加了 html 但这不是一个合适的解决方案！

目的是写HTML，（已经做到了）把HTML页面加到outlook邮件里。任何 help/suggestion 都受到高度赞赏

Answer 1

首先请查看 this 各种电子邮件客户端支持的 CSS 列表。

然后确保您也有 CSS 内部电子邮件。最好的方法是使用内联 CSS:

<div style="color: red; font-size: 12px;">HALO!</div>

粘贴时确保将其粘贴为 HTML（不知道是否可以在所有电子邮件客户端中执行此操作）。否则它将对您粘贴的文本进行编码并发送它会将所有 HTML 标记显示为文本。

Answer 2

电子邮件客户端和网络浏览器都可以显示 HTML/CSS，但它们的显示方式不同。因此，如果您 copy/paste 一个 HTML 页面，它可能不会在 Outlook365 等电子邮件客户端中以相同的方式显示。

电子邮件布局需要使用 <table>s 进行布局，而不是 <div>s。电子邮件也只支持需要内联的a small of CSS rules。

电子邮件代码看起来更像这样：

<table cellpadding="0" cellspacing="0" border="0" align="center">
  <tr>
    <td valign="top" style="vertical-align: top;background: #aaaaaa;">
      <span style="color: red; font-size: 12px;">text</span>
    </td>
  </tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" align="center">
  <tr>
    <td valign="top" style="vertical-align: top;">
      <img src="full path to image" alt="alt text" width="50" height="50">
    </td>
  </tr>
</table>

如果您像这样重建您的电子邮件，它应该在 Outlook365 等电子邮件客户端中显示得更好。

Office365 outlook 邮件 HTML 电子邮件渲染

Office365 outlook mail HTML email render

html

outlook

html-email