<mark>是HTML5语义化标签，专用于标记需突出显示的文本，如搜索关键词，默认黄色背景，利于无障碍和SEO；不可滥用为样式工具，应避免嵌套与大段包裹，自定义样式优先用CSS，确保可访问性对比度≥4.5:1。
HTML里怎么用<mark>标高亮文本
<mark>是HTML5原生语义化标签，专门用来标记页面中需要突出显示的文本，比如搜索结果中的关键词、文档里的重点段落。它默认渲染为黄色背景，比用<span style="background:yellow">更语义清晰，也利于无障碍访问和SEO。
常见错误是把它当“加粗”或“变色工具”乱用——<mark>不是样式容器，而是内容角色声明。浏览器可能在暗色模式下自动调整背景色，CSS重置时也容易意外覆盖其默认表现。
实操建议：
- 只用于有明确上下文意义的高亮，比如“用户搜索‘表单验证’，页面中匹配到的这三处文字”
- 避免嵌套
<mark>，也不要用它包裹大段文字或块级元素（如<p>） - 如果需自定义颜色，优先用CSS选择器
mark { background-color: #ffeb3b; }，别直接写style内联属性 - 注意可访问性：纯靠背景色区分信息时，确保文字与背景的对比度≥4.5:1（可用Chrome DevTools的Accessibility面板检查）
为什么不用class="highlight"而要用<mark>
用<span class="highlight">看似灵活，但丢失了语义。屏幕阅读器不会特别提示“这是高亮”，搜索引擎也不清楚这段文字为何被强调。而<mark>自带语义，部分辅助技术会将其读作“marked text”或触发特殊反馈。
立即学习“前端免费学习笔记（深入）”；
性能和兼容性上，<mark>在IE9+、所有现代浏览器都支持，无polyfill负担；但若项目需兼容IE8及更早版本，就得退回到<span>并手动加ARIA属性（如role="mark"），实际收益远低于维护成本。
使用场景差异：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用户生成内容（如评论高亮关键词）→ 用
<mark>，语义正确且易维护 - 代码块中语法高亮 → 不适用
<mark>，应由<code>内部的<span class="token keyword">等处理 - 临时调试标记 → 可用
<span>，但上线前必须清理，避免污染语义结构
document.querySelector('mark')取不到高亮元素？
典型现象：DOM已加载，控制台执行document.querySelector('mark')返回null，但页面明明能看到黄色背景文本。
原因通常有两个：
- HTML中写的是
<MARK>或<Mark>——HTML标签名不区分大小写，但JS中querySelector参数是字符串，大小写不影响匹配；真正问题是：该<mark>节点可能还没被解析（比如动态插入但未触发重排），或被JS逻辑移除了 - 更常见的是：高亮是通过CSS类（如
.highlight）模拟的，根本没用<mark>标签，自然查不到 - 还有可能是Shadow DOM隔离导致，
querySelector默认查不到影子根内的节点
排查建议：
- 先打开开发者工具，在Elements面板里Ctrl+F搜
<mark，确认标签真实存在 - 检查是否在
DOMContentLoaded事件之前执行了查询 —— 改用addEventListener('DOMContentLoaded', ...)或把脚本放</body>前 - 若涉及Web Component，需用
shadowRoot.querySelector('mark')
高亮列表入口怎么实现？别硬套<mark>
“我的高亮列表入口”这种需求，本质是状态管理+UI聚合，不是单个标签能解决的。HTML本身没有“高亮列表”概念，<mark>只负责单点标注，不提供索引、跳转、持久化能力。
真实做法是分层处理：
- 数据层：把用户标记的位置存成数组，如
[{id: 'p-123', offset: 42, length: 8}] - 渲染层：用JS遍历该数组，在对应DOM节点内插入
<mark data-id="hl-001">包裹目标文本 - 入口UI：单独做一个
<aside>或<nav>区域，用<a href="#hl-001">链接到各<mark>（需给其父元素设id或用scrollIntoView） - 注意：不要给每个
<mark>加id——它不是锚点元素，加了反而破坏语义；锚点应放在其最近的块级祖先上
最容易被忽略的是：高亮状态需与文本变更同步。用户编辑内容后，原始offset会失效，必须重新匹配关键词或用Range API做健壮定位——这点几乎没人提，但线上产品出问题最多就在这儿。
