HTML动态高亮标签怎么写？代码规范一览-html教程-PHP中文网

HTML中无原生highlight标签，应使用语义化mark标签实现高亮；自定义高亮需用CSS设置background-color并加padding；JS动态添加时须防XSS、保状态、避整段重绘。

html动态高亮标签怎么写？代码规范一览

HTML里没有原生的`highlight`标签

直接写 文本 会失效，浏览器不认识这个标签，它既不会渲染样式，也不会被任何标准解析。HTML5规范里压根没定义这个元素，所有所谓“高亮”都得靠CSS或JS配合实现。

常见误操作是把highlight当语义化标签用，结果发现控制台没报错但样式不生效——因为浏览器直接把它当作了未知的、无样式的内联元素，连默认display都是inline，更别说背景色了。

用`mark`标签最符合语义且开箱即用

mark是HTML5正式引入的语义化标签，专用于标记文档中需要引起注意的文本（比如搜索结果中的关键词），浏览器默认给它加了黄色背景和黑色文字。

无需额外CSS就能显示高亮效果
屏幕阅读器会识别其语义，对无障碍友好
支持所有现代浏览器，包括IE9+
可安全嵌套在p、div、li等大多数文本容器中

示例：

<p>这是正常文字，<mark>这段被高亮</mark>，后面继续正常文字。</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" 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互转" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill11244" title="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转" class="overflowclass">Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转</a>
													<p class="overflowclass">实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。</p>
												</div>
												<a rel="nofollow" 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>

自定义高亮必须用CSS控制`background-color`，别只改`color`

很多人写文本，以为这就是高亮——其实只是把字变黄了，根本没“高亮”效果。真正高亮的核心是背景色对比，不是前景色。

推荐用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