最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
HTML5里Mark标签实现文本高亮显示的具体语法
时间：2026-07-23 10:55:56 编辑：袖梨 来源：一聚教程网
mark 是 HTML5 新增语义化元素，用于标记文本中需突出或高亮的部分，浏览器默认以黄色背景渲染；支持嵌套与组合、可自定义 CSS 样式，语义强调上下文相关性而非重要性或语气。
mark 标签是 HTML5 新增的语义化元素，专门用于对文本中需要突出、标记或高亮的部分进行标注，浏览器默认会以黄色背景（类似荧光笔效果）渲染它。
基本语法结构
最简单的用法就是用 <mark></mark> 包裹要高亮的文本：
<p>这是一段普通文字，其中 <mark>关键词需要高亮</mark>，其余保持原样。</p>支持嵌套与组合使用
mark 可以和其他行内元素（如 em、strong、a）自由组合，也能嵌套在段落、列表、标题等块级元素中：
<h3>搜索结果：<mark><strong>HTML5</strong> 语法详解</mark></h3><p>相关文档中提到 <a href="#highlight"><mark>mark 标签</mark></a> 的语义是“标记文本”。</p>
自定义样式更灵活
浏览器默认背景色可能不符合设计需求，可通过 CSS 覆盖：
立即学习“前端免费学习笔记（深入）”；
- 修改背景色和文字色：mark { background-color: #ffcc00; color: #333; }
- 添加圆角和内边距提升可读性：mark { padding: 2px 6px; border-radius: 3px; }
- 去除默认样式重置（如需完全自定义）：mark { background: none; box-shadow: inset 0 -2px 0 #007acc; }
语义注意点
mark 强调的是“上下文中的相关性”，不是强调重要性（那是 strong）或语气变化（那是 em）。常见适用场景包括：
- 搜索结果中匹配的关键词
- 引用中需要特别指出的片段
- 教学文档中标注示例代码中的重点部分
- 用户操作后动态高亮当前选中内容（配合 JS 使用）
相关文章
- 苹果折叠屏爆料汇总：售价超两万，比例阔折叠 07-30
- 纪念碑谷3 纪念碑谷3手游玩法详解与体验评测 07-30
- 晴空双子金卡阵容推荐 晴空双子高性价比氪金养成指南 07-30
- 大周列国志全新派系系统 07-30
- 兔小萌世界甜系小房间搭建指南 兔小萌世界高颜值甜系房间布置全流程详解 07-30
- 大周列国志全新剧本包西汉剧本包 07-30