HTML如何高亮显示文本_HTML mark标签文本高亮实现技巧

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

HTML如何高亮显示文本_HTML mark标签文本高亮实现技巧

2025-10-17

浏览次数：次

返回列表

使用标签可实现文本高亮，浏览器默认黄色背景，如：这是一段普通的文字，这部分会被高亮。

html如何高亮显示文本_html mark标签文本高亮实现技巧

在HTML中，想要实现文本高亮显示，最直接且语义化的方式是使用标签。这个标签专门用于标记文档中需要突出显示的部分，通常浏览器会默认将其背景色设为黄色，起到类似荧光笔的效果。

使用 mark 标签实现基本高亮

只需要将需要高亮的文本包裹在标签内即可：

这是一段普通的文字，这部分会被高亮。

浏览器渲染后，“这部分会被高亮”会以黄色背景显示，视觉上非常醒目。

自定义高亮样式（CSS 控制）

虽然有默认样式，但你可以通过 CSS 完全自定义高亮效果，比如更改颜色、字体、边框等：

例如：

察言观数AskTable

企业级AI数据表格智能体平台

78 查看详情察言观数AskTable

请关注这个重要信息。

这样可以让高亮更符合页面整体设计风格。

结合 J*aScript 动态高亮关键词

在搜索功能中，常需要将用户输入的关键词在结果中高亮显示。可以通过 J*aScript 动态替换文本并插入标签：

const text = document.getElementById('content').innerText;
const keyword = '高亮';
const regex = new RegExp(keyword, 'gi');
const highlighted = text.replace(regex, match => '' + match + '');
document.getElementById('content').innerHTML = highlighted;

注意：使用 innerHTML 时要确保内容安全，避免 XSS 攻击。