和是语义化强调标签，分别表示内容重要性和语气强调；与表示删除与插入的版本变更；、用于化学式、数学单位等上下文；仅用于当前上下文相关的高亮。
<strong></strong> 和 <em></em> 是语义化格式标签的核心，不是“加粗”和“斜体”的快捷写法——用错就等于丢掉可访问性与 SEO 价值。
为什么不用 <b></b> 和 <i></i> 做强调
浏览器渲染效果可能一样，但语义完全不同：<b></b> 只表示“视觉上突出”，<strong></strong> 表示“内容重要性高”，屏幕阅读器会加重语气读出；<i></i> 仅用于技术术语、外文名、船名等（比如 <i>Linux</i>），而 <em></em> 表示语气强调（比如“你真的确定？”）。
常见错误现象：
- 用
<b></b>包裹价格或警告文字，导致无障碍工具无法识别其重要性 - 把所有斜体都写成
<i></i>，结果被搜索引擎忽略语义权重
实操建议：
- 强调关键信息（如错误提示、必填项说明）用
<strong></strong> - 表达说话节奏或反问/转折语气用
<em></em> - 需要纯样式加粗/斜体且无语义时，改用 CSS 的
font-weight或font-style
<del></del> 和 <ins></ins> 不只是划线和下划线
这两个标签自带语义：表示“已删除内容”和“新插入内容”，常用于版本对比、价格变动、编辑痕迹等场景。它们默认样式是删除线 + 下划线，但重点在于浏览器和辅助技术能据此推断内容变更意图。
使用场景：
- 电商页展示原价与现价：
<del>¥299</del> <ins>¥199</ins> - 法律文档修订稿中标识删改部分
- 协作编辑界面同步显示他人修改
容易踩的坑：
- 只图样式效果，用
<span style="text-decoration: line-through"></span>替代<del></del>，丢失语义 - 把
<ins></ins>当作普通下划线用，比如给链接加装饰，反而干扰可访问性 - 没配
datetime属性（如<ins datetime="2026-09-28T14:30"></ins>），导致机器无法判断修改时间
<sub></sub> 和 <sup></sup> 必须严格对应上下文
化学式（H<sub>2</sub>O）、数学单位（m<sup>2</sup>）、脚注编号（
参见<sup>1</sup>）是标准用法。它们不是“调小字号”的通用手段。 <p>参数差异与风险：</p>
<sub> 默认垂直对齐基线下方，<code><sup></sup>对齐上方；CSS 覆盖时容易破坏 baseline 对齐，导致排版错位- 在表格或行内公式中混用未包裹的数字（如直接写 H2O）会被解析为普通文本，失去语义和可搜索性
- 某些旧版屏幕阅读器对
<sub></sub>/<sup></sup>支持不一致，需配合 ARIA label 补充说明（如<sup aria-label="平方">2</sup>）
<mark></mark> 的高亮逻辑容易被误用
<mark></mark> 表示“与当前上下文相关的高亮”，不是“我想让它黄一点”。典型场景是搜索结果页中标出关键词、代码片段中标识匹配行、教学文档中突出考点。
性能与兼容性影响：
- 大量
<mark></mark>标签在长文本中可能触发重排（reflow），尤其配合 CSS 动画时 - IE 仅支持到 IE9，且默认背景色偏暗，需重置
background-color保证可读性 - 不要嵌套
<mark></mark>，HTML5 规范未定义嵌套行为，各浏览器渲染不一致
真正难处理的是语义边界的模糊性——比如一段话里哪些词该标 <mark></mark>，哪些该用 <strong></strong>，得看用户当前任务：是“快速定位关键词”，还是“理解信息优先级”。这点没法靠标签自动判断，得人来权衡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
