mark是语义正确的高亮标签，专用于暂态突出需注意的文本（如搜索关键词、审阅标记），非ui装饰；误用会损害可访问性与结构。
HTML 里 mark 标签到底该不该用
直接说结论：mark 是语义正确的高亮方式，但不是所有“看起来黄底”的地方都该用它。它专指「在上下文中暂态突出、需要引起注意的文本片段」，比如搜索结果中的关键词、文档中被标记的重点句——不是 UI 装饰，更不是替代 span + CSS 的万能高亮工具。
哪些场景必须用 mark，哪些场景坚决别碰
用对了是语义清晰、可访问性友好；用错了反而干扰屏幕阅读器、破坏内容结构。
- ✅ 搜索页结果中匹配到的关键词：用户搜“JavaScript”，结果里出现的
<mark>JavaScript</mark>是标准做法 - ✅ 文档批注或审阅模式中标出待确认段落：语义上就是「这段暂时标出来，供人注意」
- ❌ 给按钮文字加黄色背景：这是样式需求，应该用
span或直接改按钮 class - ❌ 整段代码块高亮某行：
mark不支持嵌套块级内容，且语义不符；该用pre+code+ CSS 定位
mark 的样式默认值和常见踩坑
浏览器默认给 mark 加了黄色背景 + 黑色文字，但这个样式不可靠：部分旧版 Safari 会忽略背景，某些 Windows 高对比度模式下可能完全失效。不能只靠默认样式交付。
- 必须重置或显式声明样式，至少补上
background-color和color - 不要依赖
mark自带的 padding：默认没有内边距，紧贴文字容易糊成一团，建议加padding: 0.1em 0.2em - 避免嵌套：比如
<mark>abc <mark>def</mark> ghi</mark>—— 语义混乱，CSS 也难控制层级 - 和
q、blockquote混用时注意：如果高亮的是引文中的某词，mark应放在引号内部，而非包裹整个引文
和 span + class 对比：什么时候选谁
核心区别不在视觉，而在「是否携带语义信息」。辅助技术（如读屏软件）会把 mark 读作「高亮文本」，而 span 默认无声无息。
- 需要传达「这段文字当前被特别标出」这个意图 → 用
mark - 只是换颜色/加边框做视觉区分，无特殊含义 → 用
span class="highlight" - 要支持主题切换（比如暗色模式下高亮色要变）→
mark更合适，因为样式可统一通过 :root 或 prefers-color-scheme 控制 - SEO 或内容提取工具会识别
mark的语义权重，批量处理时可能被单独抓取 —— 这点常被忽略
真正麻烦的从来不是怎么写那行 <mark>xxx</mark>，而是想清楚：这段高亮，到底是给人看的，还是给机器读的，还是两者都得兼顾。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
