平心而论... 你有可能会想： 是干嘛的？它到底有哪些作用？别急，我这边准备了一份超级乏味但又能帮你搞清楚的问题较小手册。先说一句，当前这个标签本来就是给我们标记十分沉关键文本用的，不是来做背景色彩炫酷的。

一、哪些是 ？

有啥说啥... 是在 HTML5 中崭新增的一种语义化标签，用来强较大调部分需要被特别注意或者突出体现的文字片段。举个例子，在搜索最终还是结果是页里较高亮关键词、在学习了解资料中标记沉重点句子等。

换句话说它不是万能颜料盒，而是专门为“语义”而生。浏览器默认给它一个黄色背景+黑色文字， 我懂了。 目的就是告诉阅读者：这块内容已经被主动标记出来了。

常见误用场景

常见误用包括：用 给按钮加背景、在 CSS 框架里覆盖成粉红/蓝底还声称“更醒目”。这损较差了可访问性，也混淆了语义意图。

虽然能够沉重写 background-color 和 color 但要注意： 最简可靠方案是用 或 这类专库， 啊这... 它们已处理良好节点分裂、嵌套规避和空格归一化。

mark {
 background-color: #ffeb3b;
 color: #212121;
 padding: .1em .3em;
 border-radius: 2px;
 box-shadow:none;
}

二、为哪些要采用

如果你只是想让某段文字变黄，就直接写样式也行。但这样做就失掉了语义化带来的良好处：搜索引擎和屏幕阅读器都能识别出这是“十分沉关键”文本，而不是随便打点。对 SEO 一个合适的位置能够让关键字更突出，但不要滥用，否则 Google 会觉得你在作弊。

说到底。 另一方面 如果你把整个按钮都包裹进 mark ，就会出现可访问性问题，这是因为按钮本身已经有交互意义，再加上黄色背景有可能让视觉障碍用户不容简单以辨认。

与其他标签对比😅🤔

• /: 只负责粗体/斜体，没有任意语义信息。
• /: 强较大调/引用， 有一定语义，但不专门针对“需要注意”的文字。
• : 专门表示“这里值得关注”，如搜索关键词较高亮。
• : 已废弃， 用于陈旧代码，只能设置颜色/较大较小，没有语义。
• : 通用容器， 只是包装，没有任意意义，只靠 CSS 才能定义样式。