提问人：Arthur 提问时间：10/27/2023 更新时间：10/27/2023 访问量：44
发送 Html 电子邮件
Sending Html Email
问：
我希望发送一封带有图像的 HTML 电子邮件 我正在通过谷歌的smtp服务器发送，
我用内联css生成一些html，看起来像这样
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
</head>
<body>
<style>
body{
padding: 24px;
display: flex;
justify-content: center;
font-family: Arial
}
.content{
padding: 24px;
background-color: #2b2b2b;
color: #cfcfd0 ;
}
.row{
display: flex;
flex-direction: row;
}
.center{
justify-content: center;
}
.code{
padding: 8px;
background-color: #1c1c1c;
border: solid 1px #bababa;
border-radius: 2px;
font-size: 42px;
color: #b81414;
flex-grow: 1;
text-align: center;
font-weight: bold;
font-family: helvetica
}
.link {
color: #a10000;
&:hover{
color: #ef0000;
text-decoration: none;
}
}
</style>
<div class="content">
<p>Hello <b>example user</b
<p>your new account is almost ready<br>
to validate your email please use the code</p>
<div class="row center">
<span class="code">123123</span>
</div><p>Or simply click <a class="link" href="http://localhost:80/verify?id=45&code=123123"><b>Here</b></a></p>
<p>If this was not you, you can safely ignore this email</p>
</div>
</body>
</html>
在浏览器中，html 如下所示：
这是我发送电子邮件的代码
进口
import java.util.Properties
import javax.mail._
import javax.mail.internet._
import org.slf4j.{Logger, LoggerFactory}
import play.api.Configuration
import play.api.libs.json.{JsValue, Json}
import scalaj.http.{Http, HttpOptions, HttpResponse}
方法
def sendMail(recipient: String, subject: String, content: String): Option[Int] = {
refreshAccessToken()
try {
val message = new MimeMessage(session)
message.setFrom(new InternetAddress(mimeSender))
message.addRecipient(Message.RecipientType.TO, new InternetAddress(recipient))
message.setSubject(subject)
message.setHeader("Content-Type", "text/html")
message.setContent(content, "text/html; charset=UTF-8")
val transport = session.getTransport("smtp")
transport.connect(hostName, senderEmail, accessToken)
transport.sendMessage(message, message.getAllRecipients)
logger.info("Email Sent!!")
Some(recipient.length)
}
catch {
case exception: Exception =>
logger.error("Mail delivery failed. " + exception)
None
}
}
电子邮件已发送并已接收，但看起来像这样（gmail）
如果我选择右侧的垂直省略号并选择查看原件，我会得到：
Return-Path: <**REDACTED**>
Received: from Magnus (**REDACTED**.dyn.plus.net. [**REDACTED**])
by smtp.gmail.com with ESMTPSA id p9-20020adff209000000b00324853fc8adsm241084wro.104.2023.10.26.14.06.24
for <**REDACTED**>
(version=TLS1_3 cipher=TLS_AES_256_GCM_SHA384 bits=256/256);
Thu, 26 Oct 2023 14:06:25 -0700 (PDT)
Sender: **REDACTED**
Date: Thu, 26 Oct 2023 22:06:25 +0100 (BST)
From: **REDACTED**
To: **REDACTED**
Message-ID: <1348099677.0.1698354385683@Magnus>
Subject: Get started
MIME-Version: 1.0
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: 7bit
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
</head>
<body>
<style>
body{
padding: 24px;
display: flex;
justify-content: center;
font-family: Arial
}
.content{
padding: 24px;
background-color: #2b2b2b;
color: #cfcfd0 ;
}
.row{
display: flex;
flex-direction: row;
}
.center{
justify-content: center;
}
.code{
padding: 8px;
background-color: #1c1c1c;
border: solid 1px #bababa;
border-radius: 2px;
font-size: 42px;
color: #b81414;
flex-grow: 1;
text-align: center;
font-weight: bold;
font-family: helvetica
}
.link {
color: #a10000;
&:hover{
color: #ef0000;
text-decoration: none;
}
}
</style>
<div class="content">
<p>Hello <b>453452345</b>
<p>your new account is almost ready<br>
to validate your email please use the code</p>
<div class="row center">
<span class="code">sIarYu44</span>
</div>
<p>Or simply click <a class="link" href="http://localhost:80/verify?id=18&code=sIarYu44"><b>Here</b></a></p>
<p>If this was not you, you can safely ignore this email</p>
</div>
</body>
</html>
我可以看到内容类型设置为 text/html，正文确实包含 html，但它看起来不一样，请帮忙，如果我希望将一些图像嵌入到电子邮件中，我也需要发送一封多部分电子邮件
答：
1赞
mplungjan
10/27/2023
#1
如果将所有样式都内联使用，会更好看吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div style="padding: 24px; display: flex; justify-content: center; font-family: Arial;">
<div style="padding: 24px; background-color: #2b2b2b; color: #cfcfd0;">
<p>Hello <b>example user</b></p>
<p>Your new account is almost ready.</p>
<p>To validate your email, please use the code:</p>
<div style="display: flex; flex-direction: row; justify-content: center;">
<span style="padding: 8px; background-color: #1c1c1c; border: solid 1px #bababa; border-radius: 2px; font-size: 42px; color: #b81414; flex-grow: 1; text-align: center; font-weight: bold; font-family: helvetica;">123123</span>
</div>
<p>Or simply click <a style="color: #a10000;" href="http://localhost:80/verify?id=45&code=123123"><b>Here</b></a></p>
<p>If this was not you, you can safely ignore this email.</p>
</div>
</div>
</body>
</html>是的，您将需要多部分和类似的东西
<img src="cid:image1" alt="Embedded Image 1">
每个附件都具有唯一的 CID 标识符。
评论
1赞
Arthur
10/27/2023
尽管我讨厌这个答案，但它确实解决了这个问题，对于可维护性来说，这是非常多的
0赞
imhotap
10/27/2023
#2
尽管没有人能够权威地回答，但电子邮件中的 HTML 通常仅限于 https://learn.microsoft.com/en-us/previous-versions/office/developer/office-2007/aa338201（v=office.12）？redirectedfrom=MSDN 中详述的 Microsoft Outlook 2007 或更早版本接受的 HTML 的历史子集。该子集派生自 https://www.w3.org/TR/1999/REC-html401-19991224/ 中描述的 HTML 4，https://www.w3.org/TR/1999/REC-html401-19991224/sgml/dtd.html 中具有正式的 SGML DTD 语法。
值得注意的是，该元素应该是 的子元素，而不是允许出现在 下面的任何位置。WHATWG HTML 5 在某个时候考虑在下面引入，但在 HTML 5 之前（WHATWG HTML 的 W3C 版本最初作为）HTML 5 已经放弃了，如 eg.https://sgmljs.net/docs/w3c-html5-dtd.html。styleheadbody<style scoped>body
此外，HTML 中的 CSS 通常仅限于 CSS 2.1 中可用内容的子集，例如 ，并且不会由大多数专用邮件用户代理呈现。floatflex
评论
0赞
Arthur
10/27/2023
可悲的是，这不起作用，我在标题上设置了样式并指定了内容类型并使用了古老的html，这比内联css更好
评论