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