前端写html邮件模板（兼容outlook）

来源：cnblogs　　作者：YJJMH　　时间：2021/4/6 9:33:49　　对本文有异议

使用前端完成邮件模板注意事项（实测兼容outlook2016）

使用html5之前的元素，outlook不支持html5；如果使用html5，outlook客户端会提示在浏览器中打开；
使用table表格布局；
仅使用table、tr、td、div、span、img等基本元素
尽量使用行内样式（class属性是否可用未测试）
使用行内样式时，每个元素尽量都写出对应的样式，可能继承性不好（未测试，谨慎起见写上而已）
使用table嵌套布局时，如果在table上设置margin/padding - top/bottom，outlook客户端中会导致table下的每个单元格都含有margin/padding - top/bottom，应当在需要的td中写margin/padding - top/bottom
示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>docmount</title>
</head>
 
<body>
  <table border="0" cellspacing="0" width="100%" cellpadding="0" style="background:#F8F8FB;font-size:14px; border-collapse: collapse">
    <tr>
      <td align='center' style="padding-top: 50px;">
        <table border="0" cellspacing="0" width="700" cellpadding="0" style="margin: 0 auto;background:white;box-shadow:0 0 3px 5px #888888;font-size:14px; border-collapse: collapse">
          <tr>
            <td>
              <table border="0" cellspacing="0" width="540" cellpadding="0" style="margin:80px; margin-top:0; margin-bottom: 0; background:white;font-size:14px; border-collapse: collapse">
                <tr>
                  <td>
                    <div style="font-size:14px;">内容</div>
                    <div style="margin-top: 20px; font-size:14px;">内容</div>
                    <div style="margin-top: 5px; padding-bottom: 100px; font-size:14px;">内容</div>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
 
</html>