HTML中无原生highlight标签，应使用语义化mark标签实现高亮；自定义高亮需用CSS设置background-color并加padding；JS动态添加时须防XSS、保状态、避整段重绘。
HTML里没有原生的highlight标签
直接写 <highlight>文本</highlight> 会失效，浏览器不认识这个标签，它既不会渲染样式，也不会被任何标准解析。HTML5规范里压根没定义这个元素，所有所谓“高亮”都得靠CSS或JS配合实现。
常见误操作是把highlight当语义化标签用，结果发现控制台没报错但样式不生效——因为浏览器直接把它当作了未知的、无样式的内联元素，连默认display都是inline，更别说背景色了。
用mark标签最符合语义且开箱即用
mark是HTML5正式引入的语义化标签，专用于标记文档中需要引起注意的文本（比如搜索结果中的关键词），浏览器默认给它加了黄色背景和黑色文字。
- 无需额外CSS就能显示高亮效果
- 屏幕阅读器会识别其语义，对无障碍友好
- 支持所有现代浏览器，包括IE9+
- 可安全嵌套在
p、div、li等大多数文本容器中
示例：
<p>这是正常文字，<mark>这段被高亮</mark>，后面继续正常文字。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11244" title="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11244" title="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转">Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转</a>
<p>实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。</p>
</div>
<a href="/xiazai/skill11244" title="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
自定义高亮必须用CSS控制background-color，别只改color
很多人写<span style="color: yellow">文本</span>，以为这就是高亮——其实只是把字变黄了，根本没“高亮”效果。真正高亮的核心是背景色对比，不是前景色。
- 推荐用
span+ 类名，比如<span class="hl">关键词</span>，再配CSS：.hl { background-color: #ffeb3b; padding: 0 2px; } - 加
padding很重要，否则背景紧贴文字边缘，视觉上像染色而不是高亮 - 避免用
!important硬覆盖，尤其在框架项目里容易和组件样式冲突 - 深色主题下默认黄色背景可能不可见，需配合
@media (prefers-color-scheme: dark)调整
JS动态添加高亮时，别直接innerHTML +=拼接mark或span
用字符串拼接往DOM里塞mark看似简单，但极易引发XSS风险（比如高亮内容来自用户输入却没转义），而且破坏原有事件绑定和数据状态。
- 优先用
document.createElement('mark')+textContent插入纯文本 - 若需保留原有HTML结构，用
DOMPurify.sanitize()先过滤再插入 - 批量高亮时，避免逐个
replace()后整段重赋innerHTML，会导致滚动位置丢失、焦点消失；应使用Range和DocumentFragment做局部替换 - Vue/React项目里，别在模板中用
v-html或dangerouslySetInnerHTML渲染高亮结果，改用渲染函数或useEffect后手动操作DOM
高亮看着简单，但动起来就暴露DOM操作功底——边界匹配、嵌套干扰、样式继承、性能卡顿，每个点都容易漏掉。尤其在富文本或实时搜索场景下，光让颜色出来远远不够。
