我正在制作一个程序,该程序使用其学生ID号向具有确认号的学生发送电子邮件。我们所有的电子邮件都使用相同的模板,即id @ whatever,该模板通过Outlook来获取,并且它们阻止了我们学生电子邮件的gmail。
[无论如何,我写了一个html电子邮件,当我将其发送到gmail时,一切都会显示出来。当我将其发送到学生帐户以测试他们所看到的内容时,我只会看到应该存在的内容的四分之一。
所以我的问题是:有没有办法改变我的HTML,使其在Outlook中显示所有内容。
Gmail的外观
Outlook的外观(选择了“信任用户”)
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\000026id=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\000026id=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:[email protected]" 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,为此我使用了一个Web构建器。因此,考虑到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>
无效的图像路径
此外,您的图像路径无效。该图片网址对我不可见,这意味着除您之外其他任何人都看不到:
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\000026id=11pP7V1G-vwASU6vAwkOb0fCeL2GzNo_l
要使此电子邮件正常工作,您需要一个对电子邮件客户端可见的URL。您应该使用绝对文件路径。
<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">
[通常,图像应以说明图像类型的描述符结尾,例如:.jpg
,.png
或.gif
。我是在说这个,尽管我的示例没有使用它,但这是因为placeholder.com设计了可以工作的网址。其他主机可能不提供此功能。
进一步阅读
祝你好运。>>