的语义是标出与上下文相关的文本，非单纯视觉高亮；须嵌套于有意义的上下文中，确保可访问性与CSS对比度达标，不可替代 作装饰用。
mark 标签不是“加亮色”而是“标出相关文本”
<mark></mark> 的语义是「突出显示文档中与当前上下文相关的部分」，不是视觉上的“高亮笔效果”。浏览器默认用黄色背景只是示意，实际样式应由 CSS 控制，且必须确保可访问性（比如色觉障碍用户依赖对比度，不能只靠颜色区分）。
- 别用
<mark></mark>替代<span style="background: yellow"></span>—— 语义丢失，SEO 和屏幕阅读器无法识别意图 - 搜索结果页中匹配关键词、文章中引用他人原话时的强调、代码示例里被指出的错误行，才是典型使用场景
- 若只是想加背景色而无语义需求，用
<span class="highlight"></span>更合适
怎么写才符合 HTML5 语义规范
语义正确的 <mark></mark> 必须嵌套在有意义的上下文中，不能孤立存在。它不改变文本层级，也不影响段落结构，但需明确「为什么这段值得标出」。
- ✅ 正确：
<p>根据《网络安全法》第<mark>21</mark>条，网络运营者应当……</p>
- ✅ 正确：
<blockquote><p>我们坚持<mark>以人民为中心</mark>的发展思想。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10874" title="SEO Competitor Analyzer"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="SEO Competitor Analyzer" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10874" title="SEO Competitor Analyzer">SEO Competitor Analyzer</a> <p>分析竞争对手网站，识别关键词空白、SEO薄弱环节、内容机会和反向链接策略，提供优先排序且可执行的建议。</p> </div> <a href="/xiazai/skill10874" title="SEO Competitor Analyzer" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></blockquote> - ❌ 错误：
<mark>重要通知：系统将于今晚升级</mark>
（没上下文，纯装饰） - ❌ 错误：
<h2><mark>产品优势</mark></h2>
（标题本身已是强调，<mark></mark>叠加冗余）
CSS 自定义 mark 样式要注意什么
浏览器默认 <mark></mark> 是黄色背景 + 黑色文字，但很多项目会重置。关键点不在“怎么改颜色”，而在“改完是否仍可读、是否破坏语义传达”。
- 必须保证文字与背景的对比度 ≥ 4.5:1（WCAG AA 标准），例如
background-color: #ffeb3b配深灰文字可以，但配浅黄文字不行 - 避免用
opacity或半透明背景，会导致文字发虚、屏幕阅读器可能跳过 - 不要给
<mark></mark>加border-radius或阴影——这些纯视觉修饰会干扰语义聚焦 - 推荐最小化定制：
mark { background-color: #ffdd40; color: #212121; }
和 span / strong / em 混用时的边界在哪
<mark></mark> 和其它内联元素可以共存，但必须逻辑自洽。它的优先级低于语义结构（如 <strong></strong> 表达重要性），高于纯样式容器（如 <span></span>）。
- ✅ 合理：
<p>该参数<strong><mark>必填</mark></strong>，否则接口返回 400。</p>
（既强调必要性，又标出关键词） - ✅ 合理：
<p>用户输入<em>“<mark>admin</mark>”</em>时触发权限校验。</p>
（<em></em>表语气，<mark></mark>标具体值） - ⚠️ 警惕：
<mark><span class="tooltip-trigger">API</span></mark>
（<span></span>无语义，包裹后反而稀释了<mark></mark>的目的）
<mark></mark> 当成前端“高亮组件”的快捷写法，却忘了它本质是个**内容标注工具**。只要编辑者或 CMS 后台不能准确判断“此处是否真有上下文相关性”，就不该自动插入 <mark></mark>。 
