如何让 HTML 处理发送到 Outlook 的电子邮件?
How to get HTML to work with emails sent to outlook?
我正在制作一个程序,使用学生的学号向学生发送一封电子邮件,其中包含确认号。我们所有的电子邮件都符合相同的模板,id@whatever,并且是通过 outlook 获取的,他们为我们的学生电子邮件屏蔽了 gmail。
无论如何,我写了一封 html 电子邮件,当我将它发送到 gmail 时,所有内容都会显示出来。当我将它发送到我的学生帐户以测试他们会看到什么时,我只看到了应该在那里的四分之一。
所以我的问题是:有什么方法可以改变我的 HTML 以便它在 outlook 上显示所有内容。
Gmail 是什么样子
Outlook 的外观(选择 "trust user")
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body><div dir="ltr"><input name="cloudHQ__backup_css" type="hidden" value=" &lt;style type="text/css"&gt; 		p{ 			margin:10px 0; 			padding:0; 		} 		table{ 			border-collapse:collapse; 		} 		h1,h2,h3,h4,h5,h6{ 			display:block; 			margin:0; 			padding:0; 		} 		img,a img{ 			border:0; 			height:auto; 			outline:none; 			text-decoration:none; 		} 		body,#bodyTable,#bodyCell{ 			height:100%; 			margin:0; 			padding:0; 			width:100%; 		} 		.mcnPreviewText{ 			display:none !important; 		} 		#outlook a{ 			padding:0; 		} 		img{ 			-ms-interpolation-mode:bicubic; 		} 		table{ 			mso-table-lspace:0pt; 			mso-table-rspace:0pt; 		} 		.ReadMsgBody{ 			width:100%; 		} 		.ExternalClass{ 			width:100%; 		} 		p,a,li,td,blockquote{ 			mso-line-height-rule:exactly; 		} 		a[href^=tel],a[href^=sms]{ 			color:inherit; 			cursor:default; 			text-decoration:none; 		} 		p,a,li,td,body,table,blockquote{ 			-ms-text-size-adjust:100%; 			-webkit-text-size-adjust:100%; 		} 		.ExternalClass,.ExternalClass p,.ExternalClass td,.ExternalClass div,.ExternalClass span,.ExternalClass font{ 			line-height:100%; 		} 		a[x-apple-data-detectors]{ 			color:inherit !important; 			text-decoration:none !important; 			font-size:inherit !important; 			font-family:inherit !important; 			font-weight:inherit !important; 			line-height:inherit !important; 		} 		#bodyCell{ 			padding:10px; 		} 		.templateContainer{ 			max-width:600px !important; 		} 		a.mcnButton{ 			display:block; 		} 		.mcnImage,.mcnRetinaImage{ 			vertical-align:bottom; 		} 		.mcnTextContent{ 			word-break:break-word; 		} 		.mcnTextContent img{ 			height:auto !important; 		} 		.mcnDividerBlock{ 			table-layout:fixed !important; 		} 		body,#bodyTable{ 			background-color:#ddf1f2; 		} 		#bodyCell{ 			border-top:0; 		} 		.templateContainer{ 			border:0; 		} 		h1{ 			color:#202020; 			font-family:Helvetica; 			font-size:26px; 			font-style:normal; 			font-weight:bold; 			line-height:125%; 			letter-spacing:normal; 			text-align:left; 		} 		h2{ 			color:#202020; 			font-family:Helvetica; 			font-size:22px; 			font-style:normal; 			font-weight:bold; 			line-height:125%; 			letter-spacing:normal; 			text-align:left; 		} 		h3{ 			color:#202020; 			font-family:Helvetica; 			font-size:20px; 			font-style:normal; 			font-weight:bold; 			line-height:125%; 			letter-spacing:normal; 			text-align:left; 		} 		h4{ 			color:#202020; 			font-family:Helvetica; 			font-size:18px; 			font-style:normal; 			font-weight:bold; 			line-height:125%; 			letter-spacing:normal; 			text-align:left; 		} 		#templatePreheader{ 			background-color:#fafafa; 			background-image:none; 			background-repeat:no-repeat; 			background-position:center; 			background-size:cover; 			border-top:0; 			border-bottom:0; 			padding-top:10px; 			padding-bottom:0px; 		} 		#templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{ 			color:#656565; 			font-family:Helvetica; 			font-size:12px; 			line-height:150%; 			text-align:left; 		} 		#templatePreheader .mcnTextContent a,#templatePreheader .mcnTextContent p a{ 			color:#898989; 			font-weight:normal; 			text-decoration:none; 		} 		#templateHeader{ 			background-color:#60c7c6; 			background-image:none; 			background-repeat:no-repeat; 			background-position:center; 			background-size:cover; 			border-top:0; 			border-bottom:0; 			padding-top:0px; 			padding-bottom:0px; 		} 		#templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{ 			color:#202020; 			font-family:Helvetica; 			font-size:16px; 			line-height:150%; 			text-align:left; 		} 		#templateHeader .mcnTextContent a,#templateHeader .mcnTextContent p a{ 			color:#007C89; 			font-weight:normal; 			text-decoration:underline; 		} 		#templateBody{ 			background-color:#ffffff; 			background-image:url("https://gallery.mailchimp.com/ed526b2f15f645fc575e0db76/images/a3dde7f2-ddb4-49e0-a119-a523cf6237bd.jpg"); 			background-repeat:no-repeat; 			background-position:top; 			background-size:cover; 			border-top:0; 			border-bottom:2px solid #EAEAEA; 			padding-top:0; 			padding-bottom:0px; 		} 		#templateBody .mcnTextContent,#templateBody .mcnTextContent p{ 			color:#202020; 			font-family:Helvetica; 			font-size:16px; 			line-height:150%; 			text-align:left; 		} 		#templateBody .mcnTextContent a,#templateBody .mcnTextContent p a{ 			color:#007C89; 			font-weight:normal; 			text-decoration:none; 		} 		#templateFooter{ 			background-color:#fafafa; 			background-image:none; 			background-repeat:no-repeat; 			background-position:center; 			background-size:cover; 			border-top:0; 			border-bottom:0; 			padding-top:9px; 			padding-bottom:9px; 		} 		#templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{ 			color:#656565; 			font-family:Helvetica; 			font-size:12px; 			line-height:150%; 			text-align:center; 		} 		#templateFooter .mcnTextContent a,#templateFooter .mcnTextContent p a{ 			color:#656565; 			font-weight:normal; 			text-decoration:none; 		} 	@media only screen and (min-width:768px){ 		.templateContainer{ 			width:600px !important; 		} }	@media only screen and (max-width: 480px){ 		body,table,td,p,a,li,blockquote{ 			-webkit-text-size-adjust:none !important; 		} }	@media only screen and (max-width: 480px){ 		body{ 			width:100% !important; 			min-width:100% !important; 		} }	@media only screen and (max-width: 480px){ 		#bodyCell{ 			padding-top:10px !important; 		} }	@media only screen and (max-width: 480px){ 		.mcnRetinaImage{ 			max-width:100% !important; 		} }	@media only screen and (max-width: 480px){ 		.mcnImage{ 			width:100% !important; 		} }	@media only screen and (max-width: 480px){ 		.mcnCartContainer,.mcnCaptionTopContent,.mcnRecContentContainer,.mcnCaptionBottomContent,.mcnTextContentContainer,.mcnBoxedTextContentContainer,.mcnImageGroupContentContainer,.mcnCaptionLeftTextContentContainer,.mcnCaptionRightTextContentContainer,.mcnCaptionLeftImageContentContainer,.mcnCaptionRightImageContentContainer,.mcnImageCardLeftTextContentContainer,.mcnImageCardRightTextContentContainer,.mcnImageCardLeftImageContentContainer,.mcnImageCardRightImageContentContainer{ 			max-width:100% !important; 			width:100% !important; 		} }	@media only screen and (max-width: 480px){ 		.mcnBoxedTextContentContainer{ 			min-width:100% !important; 		} }	@media only screen and (max-width: 480px){ 		.mcnImageGroupContent{ 			padding:9px !important; 		} }	@media only screen and (max-width: 480px){ 		.mcnCaptionLeftContentOuter .mcnTextContent,.mcnCaptionRightContentOuter .mcnTextContent{ 			padding-top:9px !important; 		} }	@media only screen and (max-width: 480px){ 		.mcnImageCardTopImageContent,.mcnCaptionBottomContent:last-child .mcnCaptionBottomImageContent,.mcnCaptionBlockInner .mcnCaptionTopContent:last-child .mcnTextContent{ 			padding-top:18px !important; 		} }	@media only screen and (max-width: 480px){ 		.mcnImageCardBottomImageContent{ 			padding-bottom:9px !important; 		} }	@media only screen and (max-width: 480px){ 		.mcnImageGroupBlockInner{ 			padding-top:0 !important; 			padding-bottom:0 !important; 		} }	@media only screen and (max-width: 480px){ 		.mcnImageGroupBlockOuter{ 			padding-top:9px !important; 			padding-bottom:9px !important; 		} }	@media only screen and (max-width: 480px){ 		.mcnTextContent,.mcnBoxedTextContentColumn{ 			padding-right:18px !important; 			padding-left:18px !important; 		} }	@media only screen and (max-width: 480px){ 		.mcnImageCardLeftImageContent,.mcnImageCardRightImageContent{ 			padding-right:18px !important; 			padding-bottom:0 !important; 			padding-left:18px !important; 		} }	@media only screen and (max-width: 480px){ 		.mcpreview-image-uploader{ 			display:none !important; 			width:100% !important; 		} }	@media only screen and (max-width: 480px){ 		h1{ 			font-size:22px !important; 			line-height:125% !important; 		} }	@media only screen and (max-width: 480px){ 		h2{ 			font-size:20px !important; 			line-height:125% !important; 		} }	@media only screen and (max-width: 480px){ 		h3{ 			font-size:18px !important; 			line-height:125% !important; 		} }	@media only screen and (max-width: 480px){ 		h4{ 			font-size:16px !important; 			line-height:150% !important; 		} }	@media only screen and (max-width: 480px){ 		.mcnBoxedTextContentContainer .mcnTextContent,.mcnBoxedTextContentContainer .mcnTextContent p{ 			font-size:14px !important; 			line-height:150% !important; 		} }	@media only screen and (max-width: 480px){ 		#templatePreheader{ 			display:block !important; 		} }	@media only screen and (max-width: 480px){ 		#templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{ 			font-size:14px !important; 			line-height:150% !important; 		} }	@media only screen and (max-width: 480px){ 		#templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{ 			font-size:16px !important; 			line-height:150% !important; 		} }	@media only screen and (max-width: 480px){ 		#templateBody .mcnTextContent,#templateBody .mcnTextContent p{ 			font-size:16px !important; 			line-height:150% !important; 		} }	@media only screen and (max-width: 480px){ 		#templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{ 			font-size:14px !important; 			line-height:150% !important; 		} }&lt;/style&gt;" /><center>
<div>
<div>
<br />
</div>
</div>
<table id="bodyTable" style="border-collapse:collapse;height:100%;margin:0;padding:0;width:100%;background-color:#333869" border="0" width="100%" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td id="bodyCell" style="height:100%;margin:0;padding:10px;width:100%;border-top:0" align="center" valign="top">
<table style="border-collapse:collapse;border:0;max-width:600px!important" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td id="templatePreheader" style="background:#fafafa none no-repeat center/cover;background-color:#fafafa;background-image:none;background-repeat:no-repeat;background-position:center;background-size:cover;border-top:0;border-bottom:0;padding-top:10px;padding-bottom:0px" valign="top">
<table style="min-width:100%;border-collapse:collapse" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding:0px" valign="top">
<table style="min-width:100%;border-collapse:collapse" border="0" width="100%" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td style="text-align:center;padding:0 0px 0 0px" valign="top">
<div>
<img src="https://share1.cloudhq-mkt3.net/images_1524368_e6020c61-2016-0138-74a3-64434b0c2d74_4580" alt="Untitled drawing.jpg" width="452" height="167" />
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table style="min-width:100%;border-collapse:collapse;table-layout:fixed!important" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="min-width:100%;padding:10px 18px 0px">
<table style="min-width:100%;border-top:2px solid #eaeaea;border-collapse:collapse;height:17px;width:100%" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr style="height:17px">
<td style="height:17px"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td id="templateHeader" style="background:#83c239 none no-repeat center/cover;background-color:#83c239;background-image:none;background-repeat:no-repeat;background-position:center;background-size:cover;border-top:0;border-bottom:0;padding-top:0px;padding-bottom:0px" valign="top">
<table style="min-width:100%;border-collapse:collapse" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-top:9px" valign="top">
<table style="max-width:100%;min-width:100%;border-collapse:collapse" border="0" width="100%" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td style="word-break:break-word;color:#202020;font-family:Helvetica;font-size:16px;line-height:150%;text-align:left;padding:0 18px 9px 18px" valign="top">
<div style="text-align:center">
<span style="font-size:20px">
<span style="font-family:playfair display,georgia,times new roman,serif">
<span style="color:#ffffff">Cookies for a Cause!</span>
</span>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td id="templateBody" style="background:#ffffff url('https://ci5.googleusercontent.com/proxy/Dug6Uf0z_gnLgMs2DNJtvfFYLpZA-FrE_Lr1190kkoiLRQhE8Ekh5ouP-pZ_ar107jt3hxS2ltdIEejWFfQ2ia2Tpk-tH5pbv-fUY6Q_lhty3GyTJiHbsr2cRMrQAJtpKTpz=s0-d-e1-ft#https://drive.google.com/uc?export=download[=11=]0026id=11pP7V1G-vwASU6vAwkOb0fCeL2GzNo_l') no-repeat top/cover;background-color:#ffffff;background-image:url('https://ci5.googleusercontent.com/proxy/Dug6Uf0z_gnLgMs2DNJtvfFYLpZA-FrE_Lr1190kkoiLRQhE8Ekh5ouP-pZ_ar107jt3hxS2ltdIEejWFfQ2ia2Tpk-tH5pbv-fUY6Q_lhty3GyTJiHbsr2cRMrQAJtpKTpz=s0-d-e1-ft#https://drive.google.com/uc?export=download[=11=]0026id=11pP7V1G-vwASU6vAwkOb0fCeL2GzNo_l');background-repeat:no-repeat;background-position:top;background-size:cover;border-top:0;border-bottom:2px solid #eaeaea;padding-top:0;padding-bottom:0px" valign="top">
<table style="min-width:100%;border-collapse:collapse" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-top:9px" valign="top">
<table style="max-width:100%;min-width:100%;border-collapse:collapse;height:96px;width:95.8865%" border="0" width="449" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr style="height:96px">
<td style="padding:0px 18px 9px;line-height:200%;word-break:break-word;text-align:left;height:96px" valign="top">
<div style="text-align:center">
<span style="font-size:36pt">
<span style="text-align:left">
<span style="color:#ffffff;font-family:arvo,courier,georgia,serif">
<br />
</span>
</span>
</span>
</div>
<div style="text-align:center">
<span style="font-size:36pt">
<span style="text-align:left">
<span style="color:#ffffff;font-family:arvo,courier,georgia,serif">
<br />
</span>
</span>
</span>
</div>
<div style="text-align:center">
<span style="font-size:36pt"> 
<span style="text-align:left">
<span style="color:#ffffff;font-family:arvo,courier,georgia,serif">
<br />
</span>
</span>
</span>
</div>
<div style="text-align:center">
<span style="font-size:36pt">
<span style="text-align:left">
<span style="color:#ffffff;font-family:arvo,courier,georgia,serif">ENVIRONMENTAL</span>
</span>
<span style="color:#202020;font-family:Helvetica">
<span style="font-family:arvo,courier,georgia,serif">
<span style="color:#ffffff">CLUB</span>
</span>
</span>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table style="min-width:100%;border-collapse:collapse;table-layout:fixed!important" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="min-width:100%;padding:0px 18px">
<table style="min-width:100%;border-top:1px solid #ffffff;border-collapse:collapse;height:17px;width:100%" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr style="height:17px">
<td style="height:17px"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table style="min-width:100%;border-collapse:collapse" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-top:9px" valign="top">
<table style="max-width:100%;min-width:100%;border-collapse:collapse;height:45px;width:100%" border="0" width="100%" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr style="height:45px">
<td style="padding:0px 18px 9px;line-height:200%;word-break:break-word;color:#202020;font-family:Helvetica;font-size:16px;text-align:left;height:45px" valign="top">
<div style="text-align:center">
<span style="font-size:20px">
<span style="font-family:arvo,courier,georgia,serif">
<span style="color:#ffffff">Confirmation Number:</span>
</span>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table style="min-width:100%;border-collapse:collapse;height:53px;width:100%" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr style="height:36px">
<td style="text-align:center;padding:0px 18px 18px;height:36px" align="center" valign="top">
<span style="color:#ffffff">
<span style="font-size:48px">ConNum</span>
</span>
</td>
</tr>
<tr style="height:17px">
<td style="padding:0px 18px 18px;height:17px">
<span style="color:#008080">
<br />
</span>
</td>
</tr>
</tbody>
</table>
<table style="min-width:100%;border-collapse:collapse;table-layout:fixed!important;height:17px;width:100%" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr style="height:17px">
<td style="min-width:100%;padding:150px 18px 0px;height:17px"> 
<br />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td id="templateFooter" style="background:none center center/cover no-repeat #fafafa;border-top:0px;border-bottom:0px;padding-top:9px;padding-bottom:9px;text-align:center" valign="top">
<a href="mailto:rrhsenvironmentals@gmail.com" target="_blank" rel="noopener">Contact us</a>
<br />
<table style="min-width:100%;border-collapse:collapse;table-layout:fixed!important;height:36px;width:102.542%" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr style="height:36px">
<td style="min-width:100%;padding:10px 18px 25px;height:36px;width:100%">
<table style="min-width:100%;border-top:2px solid #eeeeee;border-collapse:collapse;height:34px;width:100.224%" border="0" width="448" cellspacing="0" cellpadding="0">
<tbody>
<tr style="height:17px">
<td style="height:17px">
<br />
</td>
</tr>
<tr style="height:17px">
<td style="height:17px"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
<br clear="all" />
<div>
<br />
</div>
<div dir="ltr" data-smartmail="gmail_signature">
<div dir="ltr">
<br />
</div>
</div>
</div>
</body>
</html>
请记住,我知道基本的 Java,几乎没有 HTML,为此我使用了网站构建器。因此,考虑到 5 岁的孩子,最好能接受任何解释。我真的很喜欢学习编程,真的很想继续做下去,所以请原谅我的知识不足。
Outlook 不适用于 background-image
。要将图像放入 Outlook 电子邮件的背景中,您必须使用 vml
.
VML 样本
<table>
<tr>
<td valign="middle" style="text-align: center; background-image: url('https://via.placeholder.com/600x230/222222/666666'); background-color: #222222; background-position: center center !important; background-size: cover !important;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:175px; background-position: center center !important;">
<v:fill type="tile" src="https://via.placeholder.com/600x230/222222/666666" color="#222222" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="middle" style="text-align: center; padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #ffffff;">
<p style="margin: 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.</p>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
图像路径无效
此外,您的图片路径无效。此图像 url 对我不可见,这意味着除了你之外任何人都看不到它:
https://ci5.googleusercontent.com/proxy/Dug6Uf0z_gnLgMs2DNJtvfFYLpZA-FrE_Lr1190kkoiLRQhE8Ekh5ouP-pZ_ar107jt3hxS2ltdIEejWFfQ2ia2Tpk-tH5pbv-fUY6Q_lhty3GyTJiHbsr2cRMrQAJtpKTpz=s0-d-e1-ft#https://drive.google.com/uc?export=download[=11=]0026id=11pP7V1G-vwASU6vAwkOb0fCeL2GzNo_l
要使此电子邮件有效,您需要一个对电子邮件客户端可见的 url。您应该使用绝对文件路径。
<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">
一般来说,图像应该以说明图像类型的描述符结尾,例如:.jpg
、.png
或 .gif
。我是这么说的,即使我的示例没有使用它,但那是因为 placeholder.com 设计了 url 来工作。其他主机可能不提供该功能。
进一步阅读
- https://backgrounds.cm
- https://www.w3schools.com/html/html_filepaths.asp
- https://www.campaignmonitor.com/css/color-background/background-image/
祝你好运。
我正在制作一个程序,使用学生的学号向学生发送一封电子邮件,其中包含确认号。我们所有的电子邮件都符合相同的模板,id@whatever,并且是通过 outlook 获取的,他们为我们的学生电子邮件屏蔽了 gmail。
无论如何,我写了一封 html 电子邮件,当我将它发送到 gmail 时,所有内容都会显示出来。当我将它发送到我的学生帐户以测试他们会看到什么时,我只看到了应该在那里的四分之一。
所以我的问题是:有什么方法可以改变我的 HTML 以便它在 outlook 上显示所有内容。
Gmail 是什么样子
Outlook 的外观(选择 "trust user")
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body><div dir="ltr"><input name="cloudHQ__backup_css" type="hidden" value=" &lt;style type="text/css"&gt; 		p{ 			margin:10px 0; 			padding:0; 		} 		table{ 			border-collapse:collapse; 		} 		h1,h2,h3,h4,h5,h6{ 			display:block; 			margin:0; 			padding:0; 		} 		img,a img{ 			border:0; 			height:auto; 			outline:none; 			text-decoration:none; 		} 		body,#bodyTable,#bodyCell{ 			height:100%; 			margin:0; 			padding:0; 			width:100%; 		} 		.mcnPreviewText{ 			display:none !important; 		} 		#outlook a{ 			padding:0; 		} 		img{ 			-ms-interpolation-mode:bicubic; 		} 		table{ 			mso-table-lspace:0pt; 			mso-table-rspace:0pt; 		} 		.ReadMsgBody{ 			width:100%; 		} 		.ExternalClass{ 			width:100%; 		} 		p,a,li,td,blockquote{ 			mso-line-height-rule:exactly; 		} 		a[href^=tel],a[href^=sms]{ 			color:inherit; 			cursor:default; 			text-decoration:none; 		} 		p,a,li,td,body,table,blockquote{ 			-ms-text-size-adjust:100%; 			-webkit-text-size-adjust:100%; 		} 		.ExternalClass,.ExternalClass p,.ExternalClass td,.ExternalClass div,.ExternalClass span,.ExternalClass font{ 			line-height:100%; 		} 		a[x-apple-data-detectors]{ 			color:inherit !important; 			text-decoration:none !important; 			font-size:inherit !important; 			font-family:inherit !important; 			font-weight:inherit !important; 			line-height:inherit !important; 		} 		#bodyCell{ 			padding:10px; 		} 		.templateContainer{ 			max-width:600px !important; 		} 		a.mcnButton{ 			display:block; 		} 		.mcnImage,.mcnRetinaImage{ 			vertical-align:bottom; 		} 		.mcnTextContent{ 			word-break:break-word; 		} 		.mcnTextContent img{ 			height:auto !important; 		} 		.mcnDividerBlock{ 			table-layout:fixed !important; 		} 		body,#bodyTable{ 			background-color:#ddf1f2; 		} 		#bodyCell{ 			border-top:0; 		} 		.templateContainer{ 			border:0; 		} 		h1{ 			color:#202020; 			font-family:Helvetica; 			font-size:26px; 			font-style:normal; 			font-weight:bold; 			line-height:125%; 			letter-spacing:normal; 			text-align:left; 		} 		h2{ 			color:#202020; 			font-family:Helvetica; 			font-size:22px; 			font-style:normal; 			font-weight:bold; 			line-height:125%; 			letter-spacing:normal; 			text-align:left; 		} 		h3{ 			color:#202020; 			font-family:Helvetica; 			font-size:20px; 			font-style:normal; 			font-weight:bold; 			line-height:125%; 			letter-spacing:normal; 			text-align:left; 		} 		h4{ 			color:#202020; 			font-family:Helvetica; 			font-size:18px; 			font-style:normal; 			font-weight:bold; 			line-height:125%; 			letter-spacing:normal; 			text-align:left; 		} 		#templatePreheader{ 			background-color:#fafafa; 			background-image:none; 			background-repeat:no-repeat; 			background-position:center; 			background-size:cover; 			border-top:0; 			border-bottom:0; 			padding-top:10px; 			padding-bottom:0px; 		} 		#templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{ 			color:#656565; 			font-family:Helvetica; 			font-size:12px; 			line-height:150%; 			text-align:left; 		} 		#templatePreheader .mcnTextContent a,#templatePreheader .mcnTextContent p a{ 			color:#898989; 			font-weight:normal; 			text-decoration:none; 		} 		#templateHeader{ 			background-color:#60c7c6; 			background-image:none; 			background-repeat:no-repeat; 			background-position:center; 			background-size:cover; 			border-top:0; 			border-bottom:0; 			padding-top:0px; 			padding-bottom:0px; 		} 		#templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{ 			color:#202020; 			font-family:Helvetica; 			font-size:16px; 			line-height:150%; 			text-align:left; 		} 		#templateHeader .mcnTextContent a,#templateHeader .mcnTextContent p a{ 			color:#007C89; 			font-weight:normal; 			text-decoration:underline; 		} 		#templateBody{ 			background-color:#ffffff; 			background-image:url("https://gallery.mailchimp.com/ed526b2f15f645fc575e0db76/images/a3dde7f2-ddb4-49e0-a119-a523cf6237bd.jpg"); 			background-repeat:no-repeat; 			background-position:top; 			background-size:cover; 			border-top:0; 			border-bottom:2px solid #EAEAEA; 			padding-top:0; 			padding-bottom:0px; 		} 		#templateBody .mcnTextContent,#templateBody .mcnTextContent p{ 			color:#202020; 			font-family:Helvetica; 			font-size:16px; 			line-height:150%; 			text-align:left; 		} 		#templateBody .mcnTextContent a,#templateBody .mcnTextContent p a{ 			color:#007C89; 			font-weight:normal; 			text-decoration:none; 		} 		#templateFooter{ 			background-color:#fafafa; 			background-image:none; 			background-repeat:no-repeat; 			background-position:center; 			background-size:cover; 			border-top:0; 			border-bottom:0; 			padding-top:9px; 			padding-bottom:9px; 		} 		#templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{ 			color:#656565; 			font-family:Helvetica; 			font-size:12px; 			line-height:150%; 			text-align:center; 		} 		#templateFooter .mcnTextContent a,#templateFooter .mcnTextContent p a{ 			color:#656565; 			font-weight:normal; 			text-decoration:none; 		} 	@media only screen and (min-width:768px){ 		.templateContainer{ 			width:600px !important; 		} }	@media only screen and (max-width: 480px){ 		body,table,td,p,a,li,blockquote{ 			-webkit-text-size-adjust:none !important; 		} }	@media only screen and (max-width: 480px){ 		body{ 			width:100% !important; 			min-width:100% !important; 		} }	@media only screen and (max-width: 480px){ 		#bodyCell{ 			padding-top:10px !important; 		} }	@media only screen and (max-width: 480px){ 		.mcnRetinaImage{ 			max-width:100% !important; 		} }	@media only screen and (max-width: 480px){ 		.mcnImage{ 			width:100% !important; 		} }	@media only screen and (max-width: 480px){ 		.mcnCartContainer,.mcnCaptionTopContent,.mcnRecContentContainer,.mcnCaptionBottomContent,.mcnTextContentContainer,.mcnBoxedTextContentContainer,.mcnImageGroupContentContainer,.mcnCaptionLeftTextContentContainer,.mcnCaptionRightTextContentContainer,.mcnCaptionLeftImageContentContainer,.mcnCaptionRightImageContentContainer,.mcnImageCardLeftTextContentContainer,.mcnImageCardRightTextContentContainer,.mcnImageCardLeftImageContentContainer,.mcnImageCardRightImageContentContainer{ 			max-width:100% !important; 			width:100% !important; 		} }	@media only screen and (max-width: 480px){ 		.mcnBoxedTextContentContainer{ 			min-width:100% !important; 		} }	@media only screen and (max-width: 480px){ 		.mcnImageGroupContent{ 			padding:9px !important; 		} }	@media only screen and (max-width: 480px){ 		.mcnCaptionLeftContentOuter .mcnTextContent,.mcnCaptionRightContentOuter .mcnTextContent{ 			padding-top:9px !important; 		} }	@media only screen and (max-width: 480px){ 		.mcnImageCardTopImageContent,.mcnCaptionBottomContent:last-child .mcnCaptionBottomImageContent,.mcnCaptionBlockInner .mcnCaptionTopContent:last-child .mcnTextContent{ 			padding-top:18px !important; 		} }	@media only screen and (max-width: 480px){ 		.mcnImageCardBottomImageContent{ 			padding-bottom:9px !important; 		} }	@media only screen and (max-width: 480px){ 		.mcnImageGroupBlockInner{ 			padding-top:0 !important; 			padding-bottom:0 !important; 		} }	@media only screen and (max-width: 480px){ 		.mcnImageGroupBlockOuter{ 			padding-top:9px !important; 			padding-bottom:9px !important; 		} }	@media only screen and (max-width: 480px){ 		.mcnTextContent,.mcnBoxedTextContentColumn{ 			padding-right:18px !important; 			padding-left:18px !important; 		} }	@media only screen and (max-width: 480px){ 		.mcnImageCardLeftImageContent,.mcnImageCardRightImageContent{ 			padding-right:18px !important; 			padding-bottom:0 !important; 			padding-left:18px !important; 		} }	@media only screen and (max-width: 480px){ 		.mcpreview-image-uploader{ 			display:none !important; 			width:100% !important; 		} }	@media only screen and (max-width: 480px){ 		h1{ 			font-size:22px !important; 			line-height:125% !important; 		} }	@media only screen and (max-width: 480px){ 		h2{ 			font-size:20px !important; 			line-height:125% !important; 		} }	@media only screen and (max-width: 480px){ 		h3{ 			font-size:18px !important; 			line-height:125% !important; 		} }	@media only screen and (max-width: 480px){ 		h4{ 			font-size:16px !important; 			line-height:150% !important; 		} }	@media only screen and (max-width: 480px){ 		.mcnBoxedTextContentContainer .mcnTextContent,.mcnBoxedTextContentContainer .mcnTextContent p{ 			font-size:14px !important; 			line-height:150% !important; 		} }	@media only screen and (max-width: 480px){ 		#templatePreheader{ 			display:block !important; 		} }	@media only screen and (max-width: 480px){ 		#templatePreheader .mcnTextContent,#templatePreheader .mcnTextContent p{ 			font-size:14px !important; 			line-height:150% !important; 		} }	@media only screen and (max-width: 480px){ 		#templateHeader .mcnTextContent,#templateHeader .mcnTextContent p{ 			font-size:16px !important; 			line-height:150% !important; 		} }	@media only screen and (max-width: 480px){ 		#templateBody .mcnTextContent,#templateBody .mcnTextContent p{ 			font-size:16px !important; 			line-height:150% !important; 		} }	@media only screen and (max-width: 480px){ 		#templateFooter .mcnTextContent,#templateFooter .mcnTextContent p{ 			font-size:14px !important; 			line-height:150% !important; 		} }&lt;/style&gt;" /><center>
<div>
<div>
<br />
</div>
</div>
<table id="bodyTable" style="border-collapse:collapse;height:100%;margin:0;padding:0;width:100%;background-color:#333869" border="0" width="100%" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td id="bodyCell" style="height:100%;margin:0;padding:10px;width:100%;border-top:0" align="center" valign="top">
<table style="border-collapse:collapse;border:0;max-width:600px!important" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td id="templatePreheader" style="background:#fafafa none no-repeat center/cover;background-color:#fafafa;background-image:none;background-repeat:no-repeat;background-position:center;background-size:cover;border-top:0;border-bottom:0;padding-top:10px;padding-bottom:0px" valign="top">
<table style="min-width:100%;border-collapse:collapse" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding:0px" valign="top">
<table style="min-width:100%;border-collapse:collapse" border="0" width="100%" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td style="text-align:center;padding:0 0px 0 0px" valign="top">
<div>
<img src="https://share1.cloudhq-mkt3.net/images_1524368_e6020c61-2016-0138-74a3-64434b0c2d74_4580" alt="Untitled drawing.jpg" width="452" height="167" />
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table style="min-width:100%;border-collapse:collapse;table-layout:fixed!important" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="min-width:100%;padding:10px 18px 0px">
<table style="min-width:100%;border-top:2px solid #eaeaea;border-collapse:collapse;height:17px;width:100%" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr style="height:17px">
<td style="height:17px"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td id="templateHeader" style="background:#83c239 none no-repeat center/cover;background-color:#83c239;background-image:none;background-repeat:no-repeat;background-position:center;background-size:cover;border-top:0;border-bottom:0;padding-top:0px;padding-bottom:0px" valign="top">
<table style="min-width:100%;border-collapse:collapse" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-top:9px" valign="top">
<table style="max-width:100%;min-width:100%;border-collapse:collapse" border="0" width="100%" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td style="word-break:break-word;color:#202020;font-family:Helvetica;font-size:16px;line-height:150%;text-align:left;padding:0 18px 9px 18px" valign="top">
<div style="text-align:center">
<span style="font-size:20px">
<span style="font-family:playfair display,georgia,times new roman,serif">
<span style="color:#ffffff">Cookies for a Cause!</span>
</span>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td id="templateBody" style="background:#ffffff url('https://ci5.googleusercontent.com/proxy/Dug6Uf0z_gnLgMs2DNJtvfFYLpZA-FrE_Lr1190kkoiLRQhE8Ekh5ouP-pZ_ar107jt3hxS2ltdIEejWFfQ2ia2Tpk-tH5pbv-fUY6Q_lhty3GyTJiHbsr2cRMrQAJtpKTpz=s0-d-e1-ft#https://drive.google.com/uc?export=download[=11=]0026id=11pP7V1G-vwASU6vAwkOb0fCeL2GzNo_l') no-repeat top/cover;background-color:#ffffff;background-image:url('https://ci5.googleusercontent.com/proxy/Dug6Uf0z_gnLgMs2DNJtvfFYLpZA-FrE_Lr1190kkoiLRQhE8Ekh5ouP-pZ_ar107jt3hxS2ltdIEejWFfQ2ia2Tpk-tH5pbv-fUY6Q_lhty3GyTJiHbsr2cRMrQAJtpKTpz=s0-d-e1-ft#https://drive.google.com/uc?export=download[=11=]0026id=11pP7V1G-vwASU6vAwkOb0fCeL2GzNo_l');background-repeat:no-repeat;background-position:top;background-size:cover;border-top:0;border-bottom:2px solid #eaeaea;padding-top:0;padding-bottom:0px" valign="top">
<table style="min-width:100%;border-collapse:collapse" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-top:9px" valign="top">
<table style="max-width:100%;min-width:100%;border-collapse:collapse;height:96px;width:95.8865%" border="0" width="449" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr style="height:96px">
<td style="padding:0px 18px 9px;line-height:200%;word-break:break-word;text-align:left;height:96px" valign="top">
<div style="text-align:center">
<span style="font-size:36pt">
<span style="text-align:left">
<span style="color:#ffffff;font-family:arvo,courier,georgia,serif">
<br />
</span>
</span>
</span>
</div>
<div style="text-align:center">
<span style="font-size:36pt">
<span style="text-align:left">
<span style="color:#ffffff;font-family:arvo,courier,georgia,serif">
<br />
</span>
</span>
</span>
</div>
<div style="text-align:center">
<span style="font-size:36pt"> 
<span style="text-align:left">
<span style="color:#ffffff;font-family:arvo,courier,georgia,serif">
<br />
</span>
</span>
</span>
</div>
<div style="text-align:center">
<span style="font-size:36pt">
<span style="text-align:left">
<span style="color:#ffffff;font-family:arvo,courier,georgia,serif">ENVIRONMENTAL</span>
</span>
<span style="color:#202020;font-family:Helvetica">
<span style="font-family:arvo,courier,georgia,serif">
<span style="color:#ffffff">CLUB</span>
</span>
</span>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table style="min-width:100%;border-collapse:collapse;table-layout:fixed!important" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="min-width:100%;padding:0px 18px">
<table style="min-width:100%;border-top:1px solid #ffffff;border-collapse:collapse;height:17px;width:100%" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr style="height:17px">
<td style="height:17px"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table style="min-width:100%;border-collapse:collapse" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-top:9px" valign="top">
<table style="max-width:100%;min-width:100%;border-collapse:collapse;height:45px;width:100%" border="0" width="100%" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr style="height:45px">
<td style="padding:0px 18px 9px;line-height:200%;word-break:break-word;color:#202020;font-family:Helvetica;font-size:16px;text-align:left;height:45px" valign="top">
<div style="text-align:center">
<span style="font-size:20px">
<span style="font-family:arvo,courier,georgia,serif">
<span style="color:#ffffff">Confirmation Number:</span>
</span>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table style="min-width:100%;border-collapse:collapse;height:53px;width:100%" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr style="height:36px">
<td style="text-align:center;padding:0px 18px 18px;height:36px" align="center" valign="top">
<span style="color:#ffffff">
<span style="font-size:48px">ConNum</span>
</span>
</td>
</tr>
<tr style="height:17px">
<td style="padding:0px 18px 18px;height:17px">
<span style="color:#008080">
<br />
</span>
</td>
</tr>
</tbody>
</table>
<table style="min-width:100%;border-collapse:collapse;table-layout:fixed!important;height:17px;width:100%" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr style="height:17px">
<td style="min-width:100%;padding:150px 18px 0px;height:17px"> 
<br />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td id="templateFooter" style="background:none center center/cover no-repeat #fafafa;border-top:0px;border-bottom:0px;padding-top:9px;padding-bottom:9px;text-align:center" valign="top">
<a href="mailto:rrhsenvironmentals@gmail.com" target="_blank" rel="noopener">Contact us</a>
<br />
<table style="min-width:100%;border-collapse:collapse;table-layout:fixed!important;height:36px;width:102.542%" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr style="height:36px">
<td style="min-width:100%;padding:10px 18px 25px;height:36px;width:100%">
<table style="min-width:100%;border-top:2px solid #eeeeee;border-collapse:collapse;height:34px;width:100.224%" border="0" width="448" cellspacing="0" cellpadding="0">
<tbody>
<tr style="height:17px">
<td style="height:17px">
<br />
</td>
</tr>
<tr style="height:17px">
<td style="height:17px"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
<br clear="all" />
<div>
<br />
</div>
<div dir="ltr" data-smartmail="gmail_signature">
<div dir="ltr">
<br />
</div>
</div>
</div>
</body>
</html>
请记住,我知道基本的 Java,几乎没有 HTML,为此我使用了网站构建器。因此,考虑到 5 岁的孩子,最好能接受任何解释。我真的很喜欢学习编程,真的很想继续做下去,所以请原谅我的知识不足。
Outlook 不适用于 background-image
。要将图像放入 Outlook 电子邮件的背景中,您必须使用 vml
.
VML 样本
<table>
<tr>
<td valign="middle" style="text-align: center; background-image: url('https://via.placeholder.com/600x230/222222/666666'); background-color: #222222; background-position: center center !important; background-size: cover !important;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:175px; background-position: center center !important;">
<v:fill type="tile" src="https://via.placeholder.com/600x230/222222/666666" color="#222222" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="middle" style="text-align: center; padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #ffffff;">
<p style="margin: 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.</p>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
图像路径无效
此外,您的图片路径无效。此图像 url 对我不可见,这意味着除了你之外任何人都看不到它:
https://ci5.googleusercontent.com/proxy/Dug6Uf0z_gnLgMs2DNJtvfFYLpZA-FrE_Lr1190kkoiLRQhE8Ekh5ouP-pZ_ar107jt3hxS2ltdIEejWFfQ2ia2Tpk-tH5pbv-fUY6Q_lhty3GyTJiHbsr2cRMrQAJtpKTpz=s0-d-e1-ft#https://drive.google.com/uc?export=download[=11=]0026id=11pP7V1G-vwASU6vAwkOb0fCeL2GzNo_l
要使此电子邮件有效,您需要一个对电子邮件客户端可见的 url。您应该使用绝对文件路径。
<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">
一般来说,图像应该以说明图像类型的描述符结尾,例如:.jpg
、.png
或 .gif
。我是这么说的,即使我的示例没有使用它,但那是因为 placeholder.com 设计了 url 来工作。其他主机可能不提供该功能。
进一步阅读
- https://backgrounds.cm
- https://www.w3schools.com/html/html_filepaths.asp
- https://www.campaignmonitor.com/css/color-background/background-image/
祝你好运。