使用<mark>标签可实现文本高亮，浏览器默认黄色背景，如：<p>这是一段普通的文字，<mark>这部分会被高亮</mark>。</p>；可通过CSS自定义样式，如更改背景色、颜色、添加圆角等；结合JavaScript可动态高亮关键词，提升搜索体验；注意使用innerHTML时防范XSS攻击；<mark>具有语义化优势，有利于SEO和可访问性，但应避免滥用，仅用于需突出的重点内容。
在HTML中，想要实现文本高亮显示，最直接且语义化的方式是使用 <mark> 标签。这个标签专门用于标记文档中需要突出显示的部分，通常浏览器会默认将其背景色设为黄色，起到类似荧光笔的效果。
只需要将需要高亮的文本包裹在 <mark> 标签内即可：
<p>这是一段普通的文字，<mark>这部分会被高亮</mark>。</p>
浏览器渲染后，“这部分会被高亮”会以黄色背景显示，视觉上非常醒目。
立即学习“前端免费学习笔记（深入）”；
虽然 <mark> 有默认样式，但你可以通过 CSS 完全自定义高亮效果，比如更改颜色、字体、边框等：
例如：
<style>
mark {
background-color: lightblue;
color: darkblue;
padding: 2px 4px;
border-radius: 3px;
}
</style>
<p>请关注 <mark>这个重要信息</mark>。</p>
这样可以让高亮更符合页面整体设计风格。
在搜索功能中，常需要将用户输入的关键词在结果中高亮显示。可以通过 JavaScript 动态替换文本并插入 <mark> 标签：
const text = document.getElementById('content').innerText;
const keyword = '高亮';
const regex = new RegExp(keyword, 'gi');
const highlighted = text.replace(regex, match => '<mark>' + match + '</mark>');
document.getElementById('content').innerHTML = highlighted;
注意：使用 innerHTML 时要确保内容安全，避免 XSS 攻击。
<mark> 不仅视觉上有用，在语义上也告诉搜索引擎和辅助技术这段内容被“标记”或“强调”，有助于提升内容可读性和可访问性。但不要滥用，应仅用于真正需要引起注意的文本片段。
基本上就这些。合理使用 <mark> 标签，配合 CSS 和 JS，能让你的网页文本高亮既美观又实用。
以上就是HTML如何高亮显示文本_HTML mark标签文本高亮实现技巧的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
632
收藏
