HTML邮件模板不能用可视化编辑器，因其生成的CSS（如style块、flex、media查询）在Gmail、Outlook、iOS Mail等客户端中被剥离或不支持；必须用Sublime Text等工具手动编写表格布局、内联样式，并补全role="presentation"、img的alt/width/height及条件注释。
别用可视化编辑器做 HTML 邮件模板——它生成的代码在 Outlook 里塌、在 Gmail 里丢样式、在 Apple Mail 里错位，不是功能不行，是底层规则冲突。
为什么拖拽式编辑器生成的邮件 HTML 必然出问题
可视化编辑器（比如 Mailchimp Designer、Bee Free、Stripo）默认产出带 <style> 块、class 名、flex 布局、@media 查询的代码，而这些在 90% 的邮件客户端中被直接剥离或忽略。Gmail Web 会干掉整个 <style> 标签；Outlook Desktop 完全不认 display: flex；iOS Mail 对 max-width + width 组合渲染异常。
更关键的是：编辑器无法自动处理「条件注释」（如 <!--[if mso]>...<![endif]-->）和「内联样式补全」这类必须人工介入的兼容逻辑。
- 它不会告诉你
#fff在某些 Outlook 版本里不生效，得写成#ffffff - 它不会阻止你往
<tr>里直接塞文字——这在 Gmail App 里会导致整行错乱 - 它生成的
<img>往往缺width/height属性，而这是防止图片拉伸/塌陷的硬性要求
哪些编辑器能真帮上忙（且怎么用）
真正可用的不是“所见即所得”，而是“结构辅助 + 内联增强”类工具。Sublime Text 配合插件，比任何在线拖拽编辑器更可控。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
Emmet：输入table>tr*2>td*3回车，秒出嵌套表格骨架，避免手敲<table><tr><td>嵌套出错 -
Color Highlighter：实时高亮#333333这类值，避免写成#333后在 Outlook 2016 中失效 -
SideBarEnhancements：右键 →New File→ 直接建template-email.html，不用切 Finder 找路径
注意：CSScomb 和 AutoFileName 这类插件对邮件开发无效——前者排序无意义（你根本不能写外部 CSS），后者提示路径没用（邮件里所有资源都靠绝对 URL）。
必须手动补的三处关键代码
哪怕用了最“智能”的编辑器，以下三段仍需人眼检查、手动插入，否则多端必挂：
- 外层
<table>必须加role="presentation"，否则 Outlook 可能误读为语义化容器并强制重排 - 所有图片标签必须含
alt、width、height三个属性，例如：<img src="https://example.com/logo.png" alt="Logo" width="120" height="40"> - 移动端适配不能只靠
@media，得配合条件注释包裹 table 宽度逻辑，例如：<!--[if mso]><table width="600"><tr><td><![endif]-->
测试环节没有捷径，本地预览全是假象
Sublime 里按 Ctrl+Shift+P → Preview in Browser 看的是 Chrome 渲染结果，和真实邮件客户端毫无关系。Gmail 不支持 border-radius，但 Chrome 显示得 perfectly；Outlook 不解析 line-height: 1.6，但浏览器里看着很美。
绕不开的真实验证步骤：
- 把 HTML 文件拖进
Thunderbird或Apple Mail本地预览——它们的渲染引擎更贴近真实邮件环境 - 用
Mailtrap或putsmail.com发测试信，重点看 iOS Mail、Android Gmail App、Outlook Desktop 三端实际表现 - 特别检查背景图：
background-image在 Gmail Web / Outlook.com / QQ 邮箱中 100% 不显示，必须改用<img>拼接
复杂点在于：同一份 HTML，在 Outlook 2019 和 Outlook 365 的渲染差异可能比 Chrome 和 Safari 还大；而最易被忽略的是——所有字体必须用安全栈，"Helvetica Neue", Helvetica, Arial, sans-serif 可以，"PingFang SC" 或 "SF Pro Text" 一发就变 Times New Roman。
