前端编写邮件html各邮箱兼容及注意事项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="/ajax/libs/normalize/8.0.1/"
rel="stylesheet"
/>
<title>成绩通知</title>
</head>
<body>
<table
cellpadding="0"
cellspacing="0"
style="
max-width: 700px;
margin: 0 auto;
border-collapse: collapse;
border-spacing: 0;
border-left: 1px solid #e6e8ee;
border-right: 1px solid #e6e8ee;
border-bottom: 1px solid #e6e8ee;
"
>
<tbody>
<tr style="height: 40px; width: 100%; background-color: #20242c">
<td style="padding-top: 9px; padding-bottom: 5px; padding-left: 20px">
<img
height="22"
style="height: 22px"
src="/it/u=3072371240,760127611&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281"
alt="Error"
/>
</td>
<td
style="
width: 100%;
text-align: right;
vertical-align: middle;
padding-right: 20px;
"
>
<img
height="16"
style="height: 16px"
src="/it/u=1053999863,2498083417&fm=253&fmt=auto&app=120&f=GIF?w=607&h=500"
/>
</td>
</tr>
<tr>
<td
colspan="2"
style="
font-size: 18px;
font-weight: bold;
color: #2d2d2d;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 20px;
padding-right: 20px;
"
>
成绩通知
</td>
</tr>
<tr>
<td
colspan="2"
style="
font-size: 12px;
color: #2d2d2d;
padding-left: 20px;
line-height: 17px;
"
>
尊敬的学生家长，您好！
</td>
</tr>
<tr>
<td
colspan="2"
style="
font-size: 12px;
color: #2d2d2d;
padding-top: 10px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
word-break: break-all;
line-height: 17px;
vertical-align: text-top;
"
>
感谢您对学校的支持，点击以下“查看详情”链接可访问具体内容，或复制链接至浏览器查看()。
</td>
</tr>
<tr>
<td
colspan="2"
style="padding-bottom: 60px; padding-left: 20px; height: 30px"
>
<a
href=""
style="text-decoration: none; display: block; width: 100px"
target="_blank"
>
<table>
<tbody>
<tr>
<td
height="30"
width="100"
style="
color: #fff !important;
font-size: 12px;
background: linear-gradient(
315deg,
#4bbfec 0%,
#7c3cf3 47%,
#c136ec 100%
);
cursor: pointer;
width: 100px;
height: 30px;
text-align: center;
vertical-align: middle;
line-height: 30px;
"
>
查看详情
</td>
</tr>
</tbody>
</table></a
>
</td>
</tr>
<tr>
<td
colspan="2"
style="
color: #2d2d2d;
padding-bottom: 15px;
padding-left: 20px;
font-size: 12px;
line-height: 17px;
"
>
本邮件由系统自动发送，请勿直接回复
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 20px; padding-right: 20px">
<hr style="border-top: #eff0f5; margin: 0" />
</td>
</tr>
<tr>
<td
style="padding-left: 20px; padding-top: 16px; padding-bottom: 20px"
>
<img
style="height: 60px; width: 60px"
height="60"
width="60"
src="/it/u=1340460595,2858602922&fm=253&fmt=auto&app=138&f=GIF?w=511&h=500"
alt="code"
/>
</td>
<td
style="
font-size: 12px;
padding-top: 16px;
vertical-align: text-top;
color: #2d2d2d;
line-height: 20px;
padding-left: 10px;
"
>
感谢您的信任
<br />
扫描二维码联系我们
<br />
xxxxx学校
</td>
</tr>
<tr>
<td
colspan="2"
height="4"
style="
width: 100%;
height: 4px;
background: linear-gradient(
315deg,
#4bbfec 0%,
#7c3cf3 47%,
#c136ec 100%
);
"
></td>
</tr>
</tbody>
</table>
</body>
</html>