HTML5的标签在邮件中基本无效，主流客户端如Outlook、Gmail、Apple Mail均忽略或剥离该标签；可靠替代方案是用加内联background-color和padding模拟高亮。
HTML5的<mark></mark>标签在邮件HTML里基本无效
绝大多数邮件客户端会直接忽略或剥离<mark></mark>标签，包括 Outlook（Windows/macOS）、Apple Mail、Gmail（Web/iOS/Android）、Yahoo Mail。它不是被“渲染不好”，而是根本没进渲染流程——邮件客户端的HTML解析器普遍只支持 HTML4.01 子集 + 少量 CSS2 属性，<mark></mark>属于 HTML5 语义化标签，不在白名单内。
Gmail 和 Outlook 对 <mark></mark> 的实际处理方式
实测结果很一致：
- Gmail Web/iOS/Android：移除
<mark></mark>标签，保留其内部文本，但无背景色、无样式 - Outlook 2016–2021（Windows）：直接丢弃整个
<mark></mark>元素（含内容），导致文字消失 - Apple Mail（macOS/iOS）：保留文本，但忽略
background-color等内联样式，<mark></mark>本身无默认样式可 fallback
替代方案：用 <span></span> + 内联 background-color 最稳妥
要实现“高亮效果”，唯一可靠路径是放弃语义标签，手动模拟：
- 必须用
<span></span>包裹文字，并写死style="background-color:#fff9c4;"（避免外部CSS或<style></style>被剥离） - 额外加
style="padding:2px 4px;"防止背景贴边难读 - 避免用
!important—— Outlook 会直接剔除带它的声明 - 颜色选浅黄（如
#fff9c4）或浅蓝（#e3f2fd），避开深色背景下不可读问题
<span style="background-color:#fff9c4; padding:2px 4px;">这是重点内容</span>
为什么不用 <b></b> 或 <strong></strong> 代替？
它们解决的是“强调语气”，不是“视觉高亮”：
立即学习“前端免费学习笔记（深入）”；
-
<b></b>仅加粗，不提供背景色，在信息密度高的邮件里极易被忽略 -
<strong></strong>语义更强，但渲染效果与<b></b>完全一致，且部分老客户端（如 Outlook 2007）会降级为普通文本 - 真实业务场景中，“重点”常需和加粗共存（例如加粗+高亮），此时必须分层控制
真正麻烦的不是写法，而是测试——每个客户端对padding、line-height、vertical-align的继承逻辑都不同，哪怕只是换行位置偏移1px，都可能让高亮块看起来像错位bug。
