标签本身无默认视觉效果，必须配合显式css（如background-color、color、padding）才能在保存后正常高亮；脱离原始渲染环境或未内联样式时，仅保留语义而无颜色。
直接保存 HTML 源码时，<mark></mark> 标签本身会被原样保留——但如果你看到高亮“消失”或“没保存下来”，问题几乎一定出在生成环节，而非保存动作本身。
为什么保存后<mark></mark>在别处不显示高亮
浏览器默认黄色背景只在渲染时生效，且依赖 UA 样式；一旦脱离原始页面环境（比如粘贴进邮件、导入 Markdown 工具、用 html2text 转换），<mark></mark> 就只剩语义，没了视觉效果。
-
<mark></mark>不是“自带样式的标签”，它只是语义容器，样式靠 CSS 驱动 - Outlook、Notion、Obsidian 等工具默认忽略 UA 样式，也不加载你页面的 CSS 文件
- 很多 HTML→Markdown 转换器（如
html2text）会直接丢弃<mark></mark>，或转成普通文本——它不认为这是需要保留的格式 - 若原始高亮是 JS 动态插入的，而你保存的是初始 HTML（没等 JS 执行），那
<mark></mark>根本不存在
保存前必须确保<mark></mark>已真实存在于 DOM 中
动态高亮（如搜索关键词替换）常在 JS 中操作文本节点，但若你用 innerHTML = ... 覆盖整个容器，旧的 <mark></mark> 会被清空；或者高亮逻辑被防抖/节流延迟执行，你却在那一刻点了“另存为”。
- 检查是否真有
<mark></mark>：打开 DevTools → Elements 面板，搜索<mark>，确认标签已写入 DOM</mark> - 避免用
document.body.innerHTML = ...或el.innerHTML = ...替换整段内容，改用el.appendChild()或node.replaceChild()局部更新 - 若高亮由第三方库（如
mark.js）触发，确认调用了instance.mark()并等待 Promise 完成
保存为 HTML 文件时如何让<mark></mark>真正“可见”
光有标签不够，得把样式也带上。否则别人打开文件，只看到裸标签，没有颜色、内边距、对比度保障。
- 显式内联关键 CSS：
<style>mark{background-color:#ffeb3b;color:#212121;padding:0.1em 0.25em;border-radius:2px;}</style> - 深色模式适配不能省：
@media (prefers-color-scheme: dark) { mark { background-color: #ffc107; color: #121212; } } - 不要只写
background: none——它不清除background-image，应明确写background-color: transparent（如果真要透明） - 打印样式也要覆盖：
@media print { mark { background-color: yellow; color: black; } }，否则打印出来可能一片白
保存为 Markdown 或纯文本时<mark></mark>怎么办
绝大多数转换器不识别 <mark></mark>，也没对应 Markdown 语法。强行保留只会导致解析失败或静默丢弃。
- 若目标是 Markdown：
html2text默认会删掉<mark></mark>；需预处理：用正则把<mark>xxx</mark>替换成**xxx**或==xxx==（后者是 Obsidian 支持的高亮语法） - 若目标是纯文本：直接提取
textContent，<mark></mark>的语义自动降级为普通文字，这是合理行为 - 若需长期保留语义，建议保存为 HTML + 内联样式，而不是硬转其他格式——
<mark></mark>的价值就在 HTML 生态里
最易被忽略的一点：很多人以为“保存了 HTML 就等于保存了高亮效果”，其实真正起作用的是那几行 CSS 和浏览器的渲染上下文。脱离这两者，<mark></mark> 只是个空壳标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
