HTML5用mark和strong标注重点教程
时间：2026-02-23 14:31:45 226浏览 收藏
HTML5中正确使用``和``标签标注重点，远不止是“让文字变醒目”的视觉操作——前者专用于上下文相关的高亮引用（如搜索关键词、动态标记内容），强调的是“被标记”而非“更重要”；后者则承载语义上的强重要性（如法律条款、紧急警告），直接影响屏幕阅读器朗读方式和搜索引擎权重。混用或滥用不仅破坏文档语义结构，更会损害可访问性与SEO效果；真正关键的判断在于：去掉样式后，用户是否仍需感知这段文字的特殊语义？是，则选语义标签；否则，交给CSS更干净、更安全。
HTML5 标注重点不用 或 ，语义上最合适的两个标签是 和 ，但用途完全不同：前者表示「上下文中的高亮引用」，后者表示「强重要性」。混用会导致语义错误、影响可访问性和 SEO。
什么时候该用
它专为「视觉上突出显示一段文本，且该突出与当前上下文相关」而设计，比如搜索结果中的关键词、文章中被标记的引用段落、或用户当前关注的匹配内容。
- 浏览器默认样式通常是黄色背景（可覆盖），但语义核心是「被标记的」，不是「加粗的」
- 不传递权重或重要性，
screen reader通常不会特殊朗读（除非你额外加aria-label） - 适合动态插入：例如 JS 搜索后对
textContent中匹配词包裹 - 避免嵌套使用，也不要仅为了“看起来醒目”而滥用——那该用 CSS 类
什么时候必须用
当某段文字在逻辑上具有强重要性、紧急性或严肃性时，比如警告、法律条款关键义务、操作不可逆提示等。它影响语义结构和辅助技术行为。
- 会被屏幕阅读器加重语气朗读（如提高音调或放慢语速）
- 搜索引擎可能视其为内容权重信号之一
- 不要只因“想加粗”就用它——CSS 的
font-weight: bold才是纯样式方案 - 可嵌套：
请立即保存表示「立即」比整句更关键
很多人把 当成「网页荧光笔」随意高亮，结果破坏文档语义流。典型问题包括：
- 在标题里用
产品介绍—— 标题本身已是强调，这里应删掉，靠层级（）和 CSS 控制视觉 - 服务条款中写
您不得复制本内容—— 这属于法律约束力强的内容，应改用 - 用 JS 动态高亮时未转义 HTML：用户搜
相关阅读
更多>
-
502 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
最新阅读
更多>
-
121 收藏
-
214 收藏
-
386 收藏
-
457 收藏
-
186 收藏
-
437 收藏
-
376 收藏
-
167 收藏
-
299 收藏
-
116 收藏
-
210 收藏
-
256 收藏
课程推荐
更多>
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
- 立即学习 485次学习