HTML5中语义化高亮应优先使用mark元素，它可合法包裹p等短语内容，禁止嵌套div；统一样式用mark选择器，差异化语义才加class；需跨段高亮时改用blockquote等更准确标签。
用 mark 标签直接包裹多段文字，不是靠 class
HTML5 里标注重点内容，语义正确、浏览器支持好、无障碍友好的方式就是用 mark 元素。它本身是行内元素，但可以合法地包裹多个块级子元素（比如 p、div），只要结构合理——也就是说，你不需要“批量加 class”来模拟高亮，更不该用 span + class="highlight" 替代语义。
常见错误是把 mark 当成纯样式容器，结果嵌套 div 导致 HTML 验证失败（mark 在 HTML5 中允许包含 phrasing content，而 div 默认不属于这类；但 p 是允许的，只要不跨层级）。
- ✅ 正确：用
mark包裹连续的p、em、strong、文本节点等 - ❌ 错误：在
mark里直接放div、section或其他流内容（flow content）元素 - ⚠️ 注意：
mark不会自动换行或撑开块级空间，视觉上需要 CSS 补充（如display: inline-block或配合white-space）
想统一控制多处 mark 的样式？用 CSS 选中器，别改 HTML 结构
如果你有几十处要高亮，又希望统一颜色、背景、内边距，根本不用给每个 mark 加 class。直接写一条 CSS 规则就够了：
mark {
background-color: #ffeb3b;
color: #212121;
padding: 0.1em 0.3em;
border-radius: 2px;
}
这样所有 mark 都生效，语义干净，维护成本低。只有当你需要区分「引用高亮」「搜索匹配高亮」「编辑建议高亮」等不同语义时，才考虑加 class，比如 <mark class="search-match">。
立即学习“前端免费学习笔记（深入）”；
- 优先用原生
mark标签，而不是自定义类名模拟语义 - 避免写
<mark class="highlight">…</mark>这种冗余组合 - 如果必须差异化样式，
class应反映用途（如search-result），而非外观（如yellow-bg）
遇到换行/段落错位？检查是否误用了块级嵌套或 CSS 冲突
把多个 p 放进一个 mark 里，视觉上可能看起来“断开了”，其实是默认样式和行内元素特性导致的。浏览器把 mark 当作行内容器，遇到 p 的换行和外边距就会表现异常。
- ✅ 推荐做法：用
mark分别包裹每段中的重点部分，而不是整个段落 - ✅ 替代方案：若真需跨段高亮（比如整段引文重点），改用
aside或blockquote+ CSS 背景，语义更准 - ⚠️ 常见坑：给
mark设display: block后没重置margin，导致上下间距失控 - ? 小技巧：用
mark::before/::after添加图标或强调符号，但注意兼容性（不支持 IE）
SEO 和屏幕阅读器怎么看 mark？别指望它提升权重，但得确保可读
mark 不影响 SEO 排名，搜索引擎不会因此提高关键词权重。但它会被屏幕阅读器识别为“被标记的文本”，部分读屏软件会读出“highlighted”或“marked text”，所以内容必须真实重要，不能滥用。
- 不要为了视觉效果堆砌
mark，尤其是大段重复关键词 - 避免在
mark里放链接或交互控件（如button），结构易混乱且可访问性差 - 深色模式下默认黄色背景可能看不见，建议用
color-scheme: light dark或媒体查询微调
真正难的是判断“哪里该标”——这没法靠批量操作解决，得人工通读上下文。工具能帮你加标签，但标错了，反而干扰理解。
