html - 在电子邮件中显示 html

标签 html css email gmail

我有以下 html/css 文件:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style>
body {
   background-color:white;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
}

#outterBox {
   position:relative;
   width:500px;
   height:320px;
   display:flex;
   justify-content: top;
   flex-direction:column;
   background-color:#F0f0f0;
}

#innerBox {
   display:flex;
   align-self: center;
   background-color:white;
   width:90%;
   height:55%;
   margin-top:6px;
   flex-direction:column;
}

#headingBox {
   display:flex;
   align-self: flex-start;
   width:100%;
   background-color:#f0f0f0;
   overflow: hidden;
   height:18%;
   margin-top:6px;
}

#headingBox > img {
   margin-left:-4%;
   background-color:#f0f0f0;
}

#notiBar {
   display:flex;
   align-self: flex-start;
   background-color:#a1a1a1;
   width:100%;
   height:42px;
   justify-content: top;
   align-items: center;
}

#qqq > span {
   font-size:18px;
   color:white;
   margin:16px;
}

#nnn {
   display:flex;
   align-self: flex-start;
   width:100%;
   height:100%;
   justify-content: top;
   align-items: left;
   flex-direction:column;
}

#nnn > span {
   font-size:18px;
   color:#878787;
   margin-top:16px;
   margin-bottom:16px;
   margin-left:14px;
}

#nnn > a {
   display:flex;
   background-color:#5683CC;
   border:none;
   height:36px;
   color:white;
   font-size:14px;
   padding-left:10px;
   padding-right:10px;
   align-self:center;
   align-items:center;
   text-decoration:none;
}

#footer {
   display:flex;
   height:27%;
   width:90%;
   align-self: center;
}

#footer > span {
    align-self: flex-end;
    margin-bottom:12px;
    color:#878787;
    font-size:10px;
 }

 #u {
    text-decoration:none;
    color:#81a0d3;
    font-size:10px;
 }

</style>
</head>
<body>
   <div id="outterBox">
      <div id="headingBox">
         <img src="">
      </div>
      <div id="innerBox">
         <div id="qqq">
            <span>New</span>
         </div>
         <div id="nnn">
            <span><span id="aaa">John</span>, xxxxx</span>
            <a href="https://www.google.com"><span>Hello</span></a>
         </div>
      </div>
      <div id="footer">
         <span> Some footer<a id="u" href="/"> click</a></span>
      </div>
   </div>
</body>
</html>

我使用以下命令从我的服务器发送电子邮件:

mail -s "$(echo -e "This is Subject\nContent-Type: text/html")"  testemail@gmail.com < test.html 

电子邮件中的渲染与我在浏览器中打开它时看到的不同。我不知道我在这里做错了什么是我没有 javascript。有没有一种特殊的方法可以让 html 在电子邮件中工作?

从浏览器呈现时:

enter image description here

发送到电子邮件时: enter image description here

图像也没有显示(在 html 中被遗漏)

最佳答案

你可以试试这个方法。希望它能解决您的问题:

  echo "<b>HTML Message goes here</b>" | mail -s "$(echo -e "This is the subject\nContent-Type: text/html")" testemail@gmail.com

关于html - 在电子邮件中显示 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45237115/

相关文章:

javascript - 在 Angular 指令中附加 D3 元素

email - 退回特定电子邮件地址收到的邮件

html - 如何在 <td> 中制作相同尺寸的图像,但图像尺寸不同

html - 我似乎无法将右列 float 到页面右侧

javascript - 移动 safari - 防止 body 滚动(不使用固定位置)

c# - 如何在 ASP.NET 中发送亚洲字符集纯文本电子邮件?

java - 在 AWS SES 服务的电子邮件中添加嵌入图像

jquery - Bootstrap CSS - 缩略图图像调整大小和响应式

html - 全屏背景html

html - 如何将图像与 reRestructuredText 居中对齐?