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

说实话,使用HTML的标签来突出显示文本是非常方便的。
你看,这个标签有荧光笔效果,默认是黄色背景。

CSS自定义样式特别简单。
例如,如果你写: CSS 分数{ 背景颜色:浅蓝色; 颜色:深蓝色; 内边距:2 像素 4 像素; 边框半径:3 px; 字体粗细:粗体;
这会将“关键内容”更改为浅蓝色背景、深蓝色文本、圆角和粗体文本。
您可以直接应用它或调整颜色以匹配页面的样式。

使用 JavaScript 动态突出显示更加灵活。
例如,如果用户在搜索框中输入“突出显示”,则可以自动将文章中所有“突出显示”的单词包含在 标记中。
代码大概是这样的: javascript const text = document.getElementById('content').innerText; const 关键字 = '突出显示'; const regex = new RegExp(关键字, 'gi'); 突出显示 const = text.replace(regex, match => '' + match + ''); document.getElementById('content')[xss_clean] = displayed;
看,这段代码可以将所有“突出显示”变成黄色背景。
但是,请记住,当您使用innerHTML插入内容时,您需要小心XSS攻击。
最好先过滤一下。

使用标签的另一个好处是搜索引擎和读屏软件可以了解到这段内容是关注的焦点。
但不要盲目使用。
如果整篇文章都被标记为黄色,那就很愚蠢而且看起来很假。
一般用于标记关键词、评论等。

总之,这种方法使用方便,效果美观。
只是要注意不要滥用,一定要保证安全。

标签p代表什么

这就是坑。
别相信。
不要这样做。