语义化标签应按信息角色选用：表重要性，表语气强调；/需带datetime属性表内容变更；仅用于附属细则；用于上下文高亮，专指术语首次定义。
<strong></strong> 和 <em></em> 是语义化文本强调的首选，不是为了加粗或斜体而用，而是表达「重要性」和「强调语气」；<b></b>、<i></i>、<u></u> 等纯样式标签已退居次要地位，仅在无语义需求时才考虑。
什么时候该用 <strong></strong> 而不是 <b></b>
当一段文字在逻辑上具有更高权重（比如警告、关键操作提示、法律条款中的义务项），就该用 <strong></strong>。屏幕阅读器会以不同语调朗读它，搜索引擎也会赋予更高语义权重。<b></b> 只是视觉加粗，没有任何语义暗示。
常见错误现象：
— 用 <b></b> 包裹商品价格“¥99”，但没说明这是「限时特惠价」；
— 后台系统弹窗里写“确认删除？”，却用 <b></b> 加粗“删除”二字，其实应改用 <strong></strong> 表达严重后果。
- 语义优先：先想“这段话是否值得被机器/残障用户特别对待”，再选标签
- 嵌套限制：
<strong></strong>内部可再嵌<em></em>，但避免多层<strong></strong>嵌套 - CSS 干预：默认加粗可能不够醒目，建议额外加
font-weight: 800或颜色对比
<ins></ins> 和 <del></del> 不只是划线和下划线
它们专为「内容变更」设计，比如文档修订、电商比价页、合同条款更新。浏览器默认用虚线下划线（<ins></ins>）和删除线（<del></del>），但真正价值在于 time 属性和可访问性支持。
使用场景：
— 商品页显示原价 <del>¥199</del> <ins>¥99</ins>，配合 datetime 属性记录调价时间；
— 法律文本中某条款被废止，用 <del datetime="2026-08-20">第十二条……</del> 明确失效节点。
- 必须带
datetime属性才符合规范，否则语义不完整 - 不要用
<ins></ins>替代<u></u>做普通下划线——后者无语义，且在现代 CSS 中更可控 - 旧浏览器（如 IE11）对
datetime不识别，但至少视觉样式仍保留
<small></small> 的真实用途常被误解
<small></small> 不是“缩小字体”的快捷方式，W3C 明确定义它用于「附属细则」，比如版权信息、免责声明、许可条款、脚注等。它的语义是“次要但必要”的内容。
错误用法：
— 导航菜单文字偏小，直接套 <small></small>；
— 卡片标题下方加副标题，用 <small></small> 而非 <span class="subtitle"></span>。
- 正确示例：
<p>本服务受《用户协议》约束。<small>© 2026 Lobster AI. 保留所有权利。</small></p> - 性能影响：它本身不触发重排，但若 CSS 强制修改
font-size，需注意父容器行高是否塌陷 - 兼容性：所有现代浏览器支持，但部分旧版 Safari 对
<small></small>的默认缩放比例略有差异（约 80% vs 85%）
别忽略 <mark></mark> 和 <dfn></dfn> 这两个冷门但精准的标签
<mark></mark> 表示「上下文中的高亮引用」，比如搜索结果页关键词标黄、代码片段中被注释的行、文章中被引用的原文段落；<dfn></dfn> 则专指「术语首次定义处」，常用于技术文档、API 手册。
容易踩的坑：
— 把 <mark></mark> 当作通用高亮工具，在非上下文相关位置滥用（如按钮文字标黄）；
— 在术语第二次出现时还用 <dfn></dfn>，破坏语义一致性。
-
<mark></mark>默认背景色是黄色，但务必通过 CSS 覆盖为满足 WCAG 对比度要求的颜色（如#fff3cd配深灰文字） -
<dfn></dfn>最好配合title属性或邻近<abbr></abbr>使用，例如：<dfn title="Document Object Model">DOM</dfn> - 二者都支持
id，可用于锚点跳转或 JS 动态定位，这点常被忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
