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

在HTML中,想要实现文本高亮显示,最直接且语义化的方式是使用 标签。这个标签专门用于标记文档中需要突出显示的部分,通常浏览器会默认将其背景色设为黄色,起到类似荧光笔的效果。
只需要将需要高亮的文本包裹在 标签内即可:
这是一段普通的文字,这部分会被高亮。
浏览器渲染后,“这部分会被高亮”会以黄色背景显示,视觉上非常醒目。
立即学习“前端免费学习笔记(深入)”;
虽然 有默认样式,但你可以通过 CSS 完全自定义高亮效果,比如更改颜色、字体、边框等:
例如:
请关注 这个重要信息。
这样可以让高亮更符合页面整体设计风格。
在搜索功能中,常需要将用户输入的关键词在结果中高亮显示。可以通过 JavaScript 动态替换文本并插入 标签:
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 攻击。
不仅视觉上有用,在语义上也告诉搜索引擎和辅助技术这段内容被“标记”或“强调”,有助于提升内容可读性和可访问性。但不要滥用,应仅用于真正需要引起注意的文本片段。
基本上就这些。合理使用 标签,配合 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号