HTML如何设置标记文本？mark标签的用法是什么？-html教程-PHP中文网

HTML如何设置标记文本？mark标签的用法是什么？

月夜之吻

发布： 2025-08-13 17:45:21

原创

485人浏览过

mark标签在搜索结果高亮、引用重点强调、代码注释、法律文本和教育材料中使用更有效；可通过css自定义背景色、文本颜色、字体样式等；还可结合javascript动态控制标记行为，以提升用户体验并间接促进seo优化。

HTML如何设置标记文本？mark标签的用法是什么？

HTML的

<mark>

登录后复制

标签用于突出显示文本中的重要部分，就像用荧光笔在书上做标记一样。它能吸引用户的注意力，强调关键词，或者指示搜索结果在页面中的位置。

解决方案：

使用

<mark>

登录后复制

标签非常简单。你只需要将想要标记的文本包裹在

<mark>

登录后复制

和`标签之间即可。

立即学习“前端免费学习笔记（深入）”；

<p>这是一段包含<mark>标记文本</mark>的段落。</p>

登录后复制

默认情况下，浏览器会将标记的文本以黄色背景显示。你可以使用CSS来自定义其样式，例如更改背景颜色、文本颜色、字体样式等。

<!DOCTYPE html>
<html>
<head>
<style>
mark {
  background-color: lightgreen;
  color: black;
  font-style: italic;
}
</style>
</head>
<body>

<p>这是一段包含 <mark>标记文本</mark> 的段落。</p>

</body>
</html>

登录后复制

除了基本的用法，你还可以嵌套

<mark>

登录后复制

标签，或者在

<mark>

登录后复制

标签内使用其他HTML元素。不过，要注意保持语义的清晰，避免过度使用，以免降低可读性。我觉得嵌套这玩意儿还是少用为妙，容易把自己绕进去。

<mark>

登录后复制

标签在搜索引擎优化方面也有一定的作用。虽然搜索引擎不会直接因为

<mark>

登录后复制

标签而提高网页排名，但它可以帮助用户更快地找到他们搜索的内容，从而提高用户体验，间接影响排名。

mark标签在哪些场景下使用更有效？

标书对比王

标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

查看详情

<mark>

登录后复制

标签最适合用于以下场景：

搜索结果高亮显示： 在搜索结果页面中，使用
```

```
登录后复制
标签突出显示用户搜索的关键词，帮助用户快速找到相关信息。这个场景应该是最常见的了。
引用中的重点强调： 在引用一段文字时，使用
```

```
登录后复制
标签突出显示其中的关键部分，以便读者快速理解引用的重点。
代码注释： 在代码中，使用
```

```
登录后复制
标签标记需要特别注意的部分，例如潜在的错误、需要优化的代码等。虽然代码高亮更常用，但
```

```
登录后复制
在某些特殊情况下也挺好用。
法律或合同文本： 在法律或合同文本中，使用
```

```
登录后复制
标签标记重要的条款或条件，方便查阅和理解。
教育材料： 在教材或学习资料中，使用
```

```
登录后复制
标签突出显示重点概念或定义，帮助学生更好地掌握知识。我小时候看书就喜欢用荧光笔划重点，
```

```
登录后复制
标签有点那个意思。

如何使用CSS自定义mark标签的样式？

CSS提供了丰富的选项来定制

<mark>

登录后复制

标签的样式，使其与你的网站或应用程序的整体设计风格相协调。以下是一些常用的CSS属性：

```
background-color
```
登录后复制
: 设置背景颜色。例如，
```
background-color: yellow;
```
登录后复制
```
color
```
登录后复制
: 设置文本颜色。例如，
```
color: black;
```
登录后复制
```
font-style
```
登录后复制
: 设置字体样式（例如，斜体）。例如，
```
font-style: italic;
```
登录后复制
```
font-weight
```
登录后复制
: 设置字体粗细（例如，加粗）。例如，
```
font-weight: bold;
```
登录后复制
```
text-decoration
```
登录后复制
: 设置文本装饰（例如，下划线）。例如，
```
text-decoration: underline;
```
登录后复制
```
padding
```
登录后复制
: 设置文本周围的内边距。例如，
```
padding: 2px 5px;
```
登录后复制
可以让标记文本看起来更舒服。
```
border-radius
```
登录后复制
: 设置边框的圆角。例如，
```
border-radius: 3px;
```
登录后复制
让标记文本看起来更柔和。

你可以将这些CSS属性组合起来，创建出各种各样的

<mark>

登录后复制

标签样式。

mark {
  background-color: #fceabb; /* 柔和的黄色 */
  color: #333; /* 深灰色文本 */
  font-weight: 600; /* 稍微加粗 */
  padding: 2px 4px;
  border-radius: 3px;
}

登录后复制

使用JavaScript动态控制mark标签？

虽然

<mark>

登录后复制

标签主要通过HTML和CSS进行静态标记和样式设置，但你也可以使用JavaScript来动态地创建、修改或删除

<mark>

登录后复制

标签。这在需要根据用户交互或其他动态条件来突出显示文本时非常有用。

例如，你可以创建一个JavaScript函数，根据用户输入的关键词，在页面中搜索并用

<mark>

登录后复制

标签标记所有匹配的文本。

function highlightText(keyword) {
  const elements = document.querySelectorAll('body *'); // 获取页面上所有元素
  elements.forEach(element => {
    if (element.childNodes.length > 0) {
      element.childNodes.forEach(node => {
        if (node.nodeType === Node.TEXT_NODE) {
          const text = node.textContent;
          const regex = new RegExp(keyword, 'gi'); // 创建正则表达式，忽略大小写
          const newHtml = text.replace(regex, '<mark>$&</mark>'); // 替换匹配的文本
          if (newHtml !== text) {
            const newElement = document.createElement('span');
            newElement.innerHTML = newHtml;
            node.parentNode.replaceChild(newElement, node);
          }
        }
      });
    }
  });
}

// 调用函数，例如：
highlightText('example');

登录后复制

这段代码会遍历页面上的所有文本节点，查找包含关键词的文本，并用