时间戳

首页 > 解决方案 > Html 代码电子邮件：它与 Tryit 编辑器的工作方式不同

html - Html 代码电子邮件：它与 Tryit 编辑器的工作方式不同

问题描述

大家，我希望你能帮助我解决我的问题......我看到了一些例子，我对其进行了编辑，以便能够制作电子邮件的正文，并能够通过 gmail 和其他电子邮件提供商发送......我在 Tryit Editor 中尝试过，效果很好：

https://www.w3schools.com/code/tryit.asp?filename=FSKBT3UW23J3

但最后是这样的：

Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Social Media

Legal
Terms & Privacy

Contact Information
Tell: 506 8888-8888
Email: support@youcompany.com Web: www.dominio.com

我不捕捉，因为只有没有样式的文本来，正如我在盒子里放的那样，我希望你能澄清我做错了，我将非常感激。

标签： htmlcssemailgmailhtml-email

解决方案

大多数电子邮件客户端会从电子邮件中剥离 head 标签，因此 bootstrap 和 fontawesome 链接标签以及您头部中的 style 标签可能都被剥离，留下的电子邮件只有 body 标签内的 html 中的裸露内容。此外，大多数电子邮件客户端都会阻止 javascript，因此您在 html 正文底部的脚本标签可能也没有任何效果。编写 html 电子邮件以在各种电子邮件客户端中保持一致的显示是很棘手的 - 查看常见的 HTML 错误 - Mailchimp以获得一些一般指导。

最好的办法是在没有任何 javascript 的情况下编写电子邮件代码，并将您的样式内联在 html 或 html 正文内的样式标记中，而不依赖于外部样式表。一个基本的 html 电子邮件结构示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Email Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>

  <!-- put your email content in an html table and use inline styles -->
  <table></table>

  <!-- 
  you can also use css in a style tag inside the body
  but some clients may not handle this as well as inline styles
  -->
  <style type="text/css"></style>

</body>
</html>

推荐阅读