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

【问题标题】：Html code Email : it does not work the same as the Tryit EditorHtml 代码电子邮件：它与 Tryit 编辑器的工作方式不同
【发布时间】：2018-06-22 14:46:03
【问题描述】：

每个人，我希望你能帮助我解决我的问题......我看到了一些示例，我对其进行了编辑，以便能够制作电子邮件的正文，并能够通过 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

我不截图，因为只有没有样式的文本，正如我在框中所放的，我希望你能澄清我做错了，我将非常感激。

【问题讨论】：

欢迎来到 Stack Overflow！寻求代码帮助的问题必须包括在问题本身最好在Stack Snippet 中重现它所需的最短代码。见How to create a Minimal, Complete, and Verifiable example

标签： html css email gmail html-email

【解决方案1】：

大多数电子邮件客户端会从电子邮件中剥离 head 标签，因此 bootstrap 和 fontawesome 链接标签以及您头部中的样式标签可能都被剥离，留下的电子邮件只有 body 标签内的 html 中的裸露内容.此外，大多数电子邮件客户端会阻止 javascript，因此您在 html 正文底部的脚本标签可能也没有任何效果。编写 html 电子邮件以在各种电子邮件客户端中保持一致的显示是很棘手的 - 请查看 Common HTML Mistakes - 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>

【讨论】：