语义上标注重点应优先使用和：前者用于上下文相关的高亮引用，后者表示强重要性；混用会损害可访问性与SEO。
HTML5 标注重点不用 <b></b> 或 <i></i>，语义上最合适的两个标签是 <mark></mark> 和 <strong></strong>，但用途完全不同：前者表示「上下文中的高亮引用」，后者表示「强重要性」。混用会导致语义错误、影响可访问性和 SEO。
什么时候该用 <mark></mark>？
它专为「视觉上突出显示一段文本，且该突出与当前上下文相关」而设计，比如搜索结果中的关键词、文章中被标记的引用段落、或用户当前关注的匹配内容。
- 浏览器默认样式通常是黄色背景（可覆盖），但语义核心是「被标记的」，不是「加粗的」
- 不传递权重或重要性，
screen reader通常不会特殊朗读（除非你额外加aria-label） - 适合动态插入：例如 JS 搜索后对
textContent中匹配词包裹<mark></mark> - 避免嵌套使用，也不要仅为了“看起来醒目”而滥用——那该用 CSS 类
什么时候必须用 <strong></strong>？
当某段文字在逻辑上具有强重要性、紧急性或严肃性时，比如警告、法律条款关键义务、操作不可逆提示等。它影响语义结构和辅助技术行为。
- 会被屏幕阅读器加重语气朗读（如提高音调或放慢语速）
- 搜索引擎可能视其为内容权重信号之一
- 不要只因“想加粗”就用它——CSS 的
font-weight: bold才是纯样式方案 - 可嵌套：
<strong>请<strong>立即</strong>保存</strong>表示「立即」比整句更关键
<mark></mark> 常见误用和修复方式
很多人把 <mark></mark> 当成「网页荧光笔」随意高亮，结果破坏文档语义流。典型问题包括：
立即学习“前端免费学习笔记（深入）”；
- 在标题里用
<mark>产品介绍</mark>—— 标题本身已是强调，这里应删掉<mark></mark>，靠层级（<h2></h2>）和 CSS 控制视觉 - 服务条款中写
<mark>您不得复制本内容</mark>—— 这属于法律约束力强的内容，应改用<strong></strong> - 用 JS 动态高亮时未转义 HTML：用户搜
<script></script>，直接 innerHTML 插入<mark><script></script></mark>会执行脚本 —— 必须先textContent转义再包裹
样式控制建议（别依赖默认黄色）
默认 <mark></mark> 黄底在深色背景或印刷场景下极难读；<strong></strong> 默认加粗也可能和字体家族冲突。务必重置：
mark {
background-color: #ffdd40;
color: #333;
padding: 0.1em 0.2em;
border-radius: 2px;
}
strong {
font-weight: 700;
}
注意：不要用 !important 覆盖所有 <strong></strong>，某些组件库（如按钮内文字）已有自己的加粗逻辑，需局部覆盖。
真正难的是判断「这段高亮到底是语义标记，还是视觉装饰」——如果去掉样式后，用户仍需要知道这段文字被特别指出，那就该选语义标签；如果只是设计师说“这里要亮眼一点”，那交给 CSS 类更干净。
