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