在邮箱中用html写邮件
最新推荐文章于 2024-10-24 14:15:13 发布
前言
帮公司的人事写入职通知模板
模板制作
创建html文件
主要代码用table标签包起来，table设置单元格边距(cellpadding)和单元格间距(cellspacing)为0，设置border="1"以便查看布局，记得最后将border="1"去掉
<!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">
<title>入职通知模板</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
模板
</td>
</tr>
</table>
</body>
</html>
编写主要内容
在之前的表格内再放置一个表格，外层表格方便布局，内层表格表格展示内容。
其中border-collapse用于表格属性, 表示表格的两边框合并为一条。
color为#999999不使用简写#999，使用简写可能会无效
600px是一个较为推荐的宽度
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse;margin: 0 auto;width: 600px;font-size: 14px;line-height:1.4;color: #999999;">
<tr>
<td>内容</td>
</tr>
</table>
</td>
</tr>
</table>
内边距的使用
仍然可以使用简写，例如：padding:8px 10px 9px 6px，不过可能会有问题，所以建议直接写全如：padding-top:8px;padding-right:10px;padding-bottom:9px;padding-left:6px;。
如果发现内边距依旧无效(例如，如果发送邮件的平台把CSS样式都删除了)，也可以用空的单元格创建空的间距。在空单元格中添加行内样式style="line-height:0;font-size:0"，单元格内容为一个 设置一个明确的高度或宽度。例如：
<tr><td style="font-size: 0; line-height: 0;" height="20"> </td></tr>模板示例
一个简单示例
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table cellpadding="0" cellspacing="0" style="border-collapse: collapse;margin: 0 auto;width: 600px;">
<tr>
<td style="padding-top: 60px;padding-left: 20px;padding-right: 20px;" colspan="2">
<b>入 职 通 知 书：</b><br />
<br />
您好!我们十分荣幸地通知您于×年×月×日到我公司××部门入职，担任××职，入职后试用期月薪为：￥×× 元/税前，转正后月薪为：￥××元/税前，补助￥××元/月，祝贺您即将成为我们公司的一员!关于您就职一事，特有以下事项提醒您做相应准备：
<br />
1. 请在上班当天携带身份证原件、复印件，户口簿复印件2份;学历证书、学位证书原件及复印件;6张一寸彩色照片;上一家就职公司离职证明等资料交给人力资源部 ，在部门助理协助下办理入职手续;；<br />
2. 公司统一规定的上班时间为每周五天，作息时间8：30-17：30，其中12：00-13：30为午饭和休息时间；<br />
学信网个人学历查询结果打印（在线验证报告）<br />
3. 公司将为您提供必要的办公环境和办公设备，请自带饮用水杯；<br />
4. 公司将会按照相关政策规定为您缴纳社会保险<br />
5. 其它事项说明；<br />
<div style="padding-top: 20px;">备注：请遵守薪酬保密制度，不得向第三方透露自己的薪酬、福利等相关内容，一经发现公司将根据薪酬保密制度给予严重处分，严重者解除劳动合同.
</div>
<div style="padding-top: 20px;">期待您成为我们的新同事！祝您在公司有一个美好的未来！</div>
</td>
</tr>
<tr>
<td colspan="2">
<div style="margin-top: 20px;margin-bottom: 20px;width: 100%;height: 1px;background-color: #acbdd4;"></div>
</td>
</tr>
<tr>
<td style="padding-top:36px;padding-left: 20px;padding-right: 20px;">
<b>公司地址：</b><br />
广州市xxxx<br /><br />
<b>联系人及联系电话：</b><br />
xxx<br />
xxx-xxxxxxxx/xxxxxxxxxxxx<br /><br />
<b>邮箱：</b><br />
xxxxxxxx
</td>
<td style="padding-top:36px;">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201901%2F11%2F20190111010348_tuyoj.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654659574&t=fc39d451f28f58cb346cfc988059ae8e" alt="公司地图" style="width: 280px;height: 186px;">
</td>
</tr>
<tr>
<td colspan="2">
<div style="margin-top: 20px;margin-bottom: 20px;border-top: 1px solid #acbdd4;width: 100%;height: 0;"></div>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top:32px;padding-left: 20px;padding-bottom: 20px;">
<div style="width: 410px;display: inline-block;">
<b>xxx</b> xxxx<br />
<b>xxx</b> xxxx<br /><br />
</div>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201901%2F11%2F20190111010348_tuyoj.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654659574&t=fc39d451f28f58cb346cfc988059ae8e" alt="二维码" style="width:150px;height: 150px;vertical-align: top;">
</td>
</tr>
<tr>
<td colspan="2">
<a href="https://www.csdn.net/" style="display: block;">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.leixue.com%2Fuploads%2F2020%2F03%2FCSDN.png%21760&refer=http%3A%2F%2Fwww.leixue.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654659829&t=ea09891eeb8d084056f7557929e80bed" alt="底部图" style="width: 598px;height: 75px;">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
改进
后续在几种类型的邮箱尝试了一下发现：
1.foxmail会将代码缩进空格统一替换成
2.网易邮箱 默认有默认行高，只在table中设置可能不生效
3.腾讯邮箱 默认字号12，只在table中设置可能不生效
解决：去掉代码缩进,每个单元格标签设置字号行高
最终代码为
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table cellpadding="0" cellspacing="0" style="border-collapse: collapse;margin: 0 auto;width: 600px;font-size: 14px;line-height:1.4;color: #525967;">
<tr>
<td style="padding-top: 60px;padding-left: 20px;padding-right: 20px;font-size: 14px;line-height:1.4;color: #525967;" colspan="2">
<b>入 职 通 知 书：</b><br />
<br />
您好!我们十分荣幸地通知您于×年×月×日到我公司××部门入职，担任××职，入职后试用期月薪为：￥×× 元/税前，转正后月薪为：￥××元/税前，补助￥××元/月，祝贺您即将成为我们公司的一员!关于您就职一事，特有以下事项提醒您做相应准备：
<br />
1. 请在上班当天携带身份证原件、复印件，户口簿复印件2份;学历证书、学位证书原件及复印件;6张一寸彩色照片;上一家就职公司离职证明等资料交给人力资源部 ，在部门助理协助下办理入职手续;；<br />
2. 公司统一规定的上班时间为每周五天，作息时间8：30-17：30，其中12：00-13：30为午饭和休息时间；<br />
学信网个人学历查询结果打印（在线验证报告）<br />
3. 公司将为您提供必要的办公环境和办公设备，请自带饮用水杯；<br />
4. 公司将会按照相关政策规定为您缴纳社会保险<br />
5. 其它事项说明；<br />
<div style="padding-top: 20px;">备注：请遵守薪酬保密制度，不得向第三方透露自己的薪酬、福利等相关内容，一经发现公司将根据薪酬保密制度给予严重处分，严重者解除劳动合同.
</div>
<div style="padding-top: 20px;">期待您成为我们的新同事！祝您在公司有一个美好的未来！</div>
</td>
</tr>
<tr>
<td colspan="2">
<div style="margin-top: 20px;margin-bottom: 20px;width: 100%;height: 1px;background-color: #acbdd4;"></div>
</td>
</tr>
<tr>
<td style="padding-top:36px;padding-left: 20px;padding-right: 20px;font-size: 14px;line-height:1.4;color: #525967;">
<b>公司地址：</b><br />
广州市xxxx<br /><br />
<b>联系人及联系电话：</b><br />
xxx<br />
xxx-xxxxxxxx/xxxxxxxxxxxx<br /><br />
<b>邮箱：</b><br />
xxxxxxxx
</td>
<td style="padding-top:36px;">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201901%2F11%2F20190111010348_tuyoj.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654659574&t=fc39d451f28f58cb346cfc988059ae8e" alt="公司地图" style="width: 280px;height: 186px;">
</td>
</tr>
<tr>
<td colspan="2">
<div style="margin-top: 20px;margin-bottom: 20px;border-top: 1px solid #acbdd4;width: 100%;height: 0;"></div>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top:32px;padding-left: 20px;padding-bottom: 20px;font-size: 14px;line-height:1.4;color: #525967;">
<div style="width: 410px;display: inline-block;">
<b>xxx</b> xxxx<br />
<b>xxx</b> xxxx<br /><br />
</div>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201901%2F11%2F20190111010348_tuyoj.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654659574&t=fc39d451f28f58cb346cfc988059ae8e" alt="二维码" style="width:150px;height: 150px;vertical-align: top;">
</td>
</tr>
<tr>
<td colspan="2">
<a href="https://www.csdn.net/" style="display: block;" target="_blank">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.leixue.com%2Fuploads%2F2020%2F03%2FCSDN.png%21760&refer=http%3A%2F%2Fwww.leixue.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654659829&t=ea09891eeb8d084056f7557929e80bed" alt="底部图" style="width: 598px;height: 75px;">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>foxmail中
进入源码模式
删掉原有内容，复制模板代码
最后返回可视化编辑，编辑邮件
使用其他邮箱步骤类似，先进入源码模式，接下来复制模板代码，最后返回可视化编辑
建议
内容方面
1.重要内容以文本形式展现
2.页面中需要动画时，将动画导出为gif图片
3.插入的图片要定义宽度和高度，html代码和图片尽量不超过50kb(各个邮箱收件标准不一样，超过标准邮件可能会进入垃圾箱)
4.页面宽度推荐600-800px
5.不使用css+div来布局，使用table表格来布局
样式方面
1.使用行内样式
05-03
968
968
08-16
4986
4986
06-02
暂无认证
到【灌水乐园】发言
Huooo1: 我也想知道world.js里面是什么，醉了
废柴_1: 你资源里没有world.js啊，能上传下吗大哥