不该直接用，因搜索高亮是语义化的匹配标识，需用<mark>标签准确表达“上下文相关高亮”，仅适用于纯视觉加粗且无语义需求的场景。
搜索结果关键词加粗该用 <b> 吗
不该直接用 <b>，除非你确认这些关键词纯属视觉标记、不承担任何语义权重。搜索高亮本质是“用户输入词在文档中的定位提示”，它既不是警告，也不是必填字段，更不改变原文逻辑重要性——所以 <b> 在语义上勉强成立，但必须满足两个前提：不嵌套、不与 <strong> 混用。
为什么不能直接替换为 <strong>
因为搜索高亮不是内容强调，而是匹配标识。把用户搜的 “React” 用 <strong> 包裹，等于告诉屏幕阅读器“这段文字比上下文更重要”，可原文里它可能只是普通名词；搜索引擎也可能误判页面主题权重。常见错误现象包括：
- 读屏软件对每个高亮词都加重语气，打断自然语流
- SEO 工具报 “
<strong>使用过度”，尤其当一页出现 10+ 个高亮时 - 后端模板或前端渲染层把高亮逻辑和业务强调逻辑耦合，导致
<strong>被复用错位
<b> 在搜索高亮中的安全用法
真正可控的做法是：用 <b>，但仅限于无样式干扰、可预测的 DOM 结构中。实操建议如下：
- 高亮前先做 HTML 转义，避免用户输入
<script>等被解析——否则<b>会变成 XSS 入口 - 不要写
<b style="font-weight: 600">，CSS 应统一收口在类里，比如<b class="highlight"> - 如果高亮词跨标签（如 “
<p>前端</p><p>框架</p>” 中搜 “前端框架”），<b>无法跨元素包裹，此时必须用document.createRange()+surroundContents()或虚拟节点方案 - 服务端渲染时，避免直接拼接
<b>字符串；推荐用模板引擎的转义 + 插入机制（如 Handlebars 的{{{highlighted}}}）
更现代的替代方案：CSS 自定义属性 + mark 标签
其实 <mark> 才是语义最贴切的选择——HTML5 明确定义它表示“文档中需要引起注意的片段”，正好匹配搜索高亮意图。相比 <b>，它有三点优势：
立即学习“前端免费学习笔记（深入）”；
- 屏幕阅读器默认不特殊处理，但语义比
<b>更清晰（不是“粗体”，而是“标记”） - 浏览器原生支持
mark { background: yellow; }，无需额外样式保底 - 可配合
color-scheme: dark做主题适配，而<b>只控制粗细，背景色得全靠 CSS 覆盖
真正难的不是选 <b> 还是 <mark>，而是高亮后要不要保留原文结构、是否要支持连续高亮、以及点击跳转到对应段落时 DOM 是否仍可锚定——这些细节比标签本身更影响体验。
