本教程教你从零写出一封能交给后端使用的 HTML 邮件模板。全文只用一种写法：样式集中写在 <head> 的 <style> 里，HTML 标签挂 class。每一步都给出完整代码，按顺序复制进文件、改成自己的内容，做完就是一封可用的邮件。
先明确一个前提：邮件模板不是普通网页。用户是在 QQ 邮箱、Outlook、Gmail 里看它，这些邮件客户端功能比浏览器落后十年：
1、很多客户端对 CSS 的支持不完整，老版本甚至会删掉 <style> 标签；
2、不支持 flex、grid 布局，只认 float 和 table；
3、图片必须用绝对网址，本地路径发出去就是裂图。
class 写法的好处是：样式集中在 <style> 一处，改色值、调间距只动一个地方，学习和维护成本最低。主流客户端（QQ 邮箱、Gmail、Outlook、网易）目前都支持 <head> 里的 <style>，兼容性兜底放在文末自查清单里说明。
第 一 步：建文件，写基础骨架
在客户文件夹里新建 email.html，写入：
这段代码做了三件事：
1、charset="UTF-8"：中文不乱码，必写；
2、viewport：手机打开时按屏宽缩放；
3、全局重置：* 通配符清掉浏览器自带的 margin/padding 并统一盒模型，保证不同设备看到的间距一致——这是 class 写法最大的红利，行内样式做不到这一点。
用浏览器打开是白屏，正常，骨架还没填内容。
第 二 步：搭内容容器
邮件正文要限制一个固定宽度并居中（一般 800px），不要跟着屏幕拉满，否则宽屏上一行文字拖得太长没法读。
在 <body> 里加：
第 三 步：加顶图和称呼
每封邮件都有的三段式：顶图（品牌区）→ 正文 → 底部联系方式。先加前两样：
要点：
1、顶图 width: 100% 撑满容器；display: block 消掉图片底部的默认空隙（行内图片下方会多出几像素，这是常见坑）；
2、图片地址必须是绝对网址（https:// 开头）。开发期间本地预览可以临时写 ./email_top.png，但发给用户前必须换成线上地址——邮件里的本地路径是打不开的。
第 四 步：写正文和「动态数据占位」
正文是给后端程序替换的。后端会把「用户名」「订单号」这些值填进去，所以你要用一眼就能认出来的假数据占位：
注意：链接保留空 href=""，不要删掉 <a> 标签，否则后端没法填地址。
第 五 步：写底部联系方式
底部用「文字 + 底图背景」的组合：图片做装饰背景，联系方式本身是文字（做成整图的话，客户想改个电话就得重新切图）。
到这里，用浏览器打开文件，一封完整的通知类邮件已经成型了。
第 六 步：手机适配（媒体查询）
手机屏窄，桌面字号在手机上会显得巨大。加一段媒体查询，小屏自动缩小：
含义：屏幕宽度 ≤ 767px（即手机）时，字号从 16px 降到 14px，行高收到 24px。
验证方法：把浏览器窗口拖窄到手机宽度，看字号是否变小。
万一遇到不支持媒体查询的老客户端，就按桌面样式显示——所以第 2 步的基础字号取 16px 中间值，即使媒体查询失效，手机上也不至于没法读。
交付前自查
1、图片全部是 https:// 绝对地址，顶图/底图 width: 100%
2、容器居中：margin: 0 auto
3、动态值（验证码/订单号/姓名/日期）有红色强调（.f80000）
4、需要后端填的链接保留 <a href=""> 空标签
5、手机上字号变小（媒体查询生效，把浏览器窗口拖到 767px 以下验证）
6、目标客户若以老邮件客户端为主，发送前用 CSS 内联工具转换一次
7、交付时附一张「替换清单」：哪些文字要换、链接填在哪个 href
以上步骤全部做完，这封模板就可以交给后端接数据了。