应优先使用 表达语义重要性， 仅用于纯视觉加粗；前者被屏幕阅读器和搜索引擎识别为重要内容，后者无语义；避免嵌套使用。
用 <strong></strong> 还是 <b></b>？语义和渲染效果都得看
浏览器默认都把 <strong></strong> 和 <b></b> 渲染成粗体，但它们的用途完全不同。搜索引擎、屏幕阅读器会把 <strong></strong> 当作“内容重要性信号”，而 <b></b> 只是视觉加粗，不传递任何语义。
常见错误现象：用 <b></b> 包裹警告信息（如“账户即将到期”），结果无障碍工具完全忽略它；或者在 SEO 场景下，关键操作按钮文字用 <b></b> 而不是 <strong></strong>，削弱了关键词权重。
- 纯视觉需求（比如品牌名、产品型号想加粗但无特殊含义）→ 用
<b></b> - 强调内容重要性（如错误提示、价格变动、法律条款关键句）→ 必须用
<strong></strong> - 不要嵌套使用：
<strong><b>...</b></strong>没意义，也容易让辅助技术困惑
<em></em> 和 <i></i> 的区别不是“斜不斜”，而是“重不重读”
<em></em> 表示语音重音，屏幕阅读器会放慢语速或加重语气读出来；<i></i> 只是表示一种文本类型，比如外语词、船名、术语——它不改变朗读节奏。
使用场景举例：
— “你真的确定要删除？” → 适合用 <em></em>，因为“真的”是语气重心
— “《La Vie En Rose》是一首法语歌” → 用 <i></i>，因它是外文标题，非强调
- 别用
<i></i>替代<em></em>来做“强调”，否则语音交互体验会断裂 - 某些 CMS 或富文本编辑器默认输出
<i></i>，需检查并替换为<em></em>（尤其面向公共/政务类网站） - CSS 中
font-style: italic可以统一控制样式，但不能替代语义标签本身
<del></del> 和 <ins></ins> 不只是画线，它们自带时间上下文
<del></del> 表示“已被移除的内容”，<ins></ins> 表示“新加入的内容”，两者常配合使用，构成一次修订动作。浏览器默认给 <del></del> 加删除线、<ins></ins> 加下划线，但这只是表层表现。
容易踩的坑：
— 把原价写成 <s>¥199</s>，虽然显示一样，但 <s></s> 语义是“不再准确”，不等于“已删除”；<del></del> 才表示该价格确实被撤下
— 忘记添加 datetime 属性，导致修订时间不可追溯：<del datetime="2026-09-28T14:30">¥199</del>
- 电商比价页、合同修订稿、政策更新页必须用
<del></del>/<ins></ins>，而非<s></s>/<u></u> -
<ins></ins>默认下划线在部分浏览器中可能和链接混淆，建议用 CSS 微调颜色或加点状线区分 - 不要用
<ins></ins>做装饰性下划线（如导航栏 hover 效果），那是 CSS 的事
<mark></mark> 是唯一带背景色的语义标签，别滥用
<mark></mark> 的本意是“高亮与当前上下文相关的内容”，比如搜索结果页中匹配的关键词、文章中用户刚跳转到的锚点段落。它不是“随便标重点”的万能工具。
性能影响容易被忽略：大量 <mark></mark> 标签 + 复杂 CSS 背景渐变或阴影，在低端设备上可能引发重绘卡顿。更隐蔽的问题是，某些翻译插件或阅读模式会过滤掉 <mark></mark> 内容，误以为是临时标注。
- 搜索页高亮关键词 → 合理使用
<mark></mark> - 教程中“注意：这里很重要” → 不该用
<mark></mark>，改用<strong></strong>+ 图标或边框更稳妥 - 避免嵌套：
<mark><strong>...</strong></mark>语义冲突，选其一即可
真正难的是判断“这个修饰到底有没有语义”。很多团队把格式化标签当 CSS 替代品来用，结果代码看着整齐，却悄悄破坏了可访问性、SEO 和长期维护性。最保险的做法：先问一句——如果去掉所有样式，这段文字的含义和优先级还清晰吗？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
