em 表达语气强调，屏幕阅读器会改变语调；span 是零语义容器，仅用于样式或脚本钩子。两者语义层级不同，不可混用：品牌名用 span，反讽重音用 em，嵌套需克制，class 命名须体现分工，JS 操作应保留标签结构。
span 和 em 的语义边界必须先划清
别把 span 当成 em 的“样式补丁”，也别用 em 去实现纯视觉变色。两者根本不在同一层： em 表达语气强调（比如反讽、重音），屏幕阅读器会改变语调；span 是零语义容器，只管“这里要套个钩子”。混用时最容易踩的坑，就是用 em 包一段品牌名——它不是语气，是标识。
常见错误现象：<em>React</em> 生态很活跃 → 读屏软件会把 “React” 读得像在强调“这个 React 很特别”，但实际只是专有名词。正确做法是：<span class="brand">React</span>，再用 CSS 控制颜色/字体。
- 优先选
em：当某词在朗读时需要加重、停顿或语调变化（如“你*真的*确定？”） - 优先选
span：当只是变红、加底纹、挂 JS 事件、或标记多语言片段（<span lang="ja">東京</span>） - 嵌套允许但需克制：
<em>关键参数</em><span class="unit">ms</span>合理；<span><em>...</em></span>多余
配合使用时 class 命名要体现分工
一旦决定同时用 span 和 em，CSS 类名就得暴露意图。比如强调 + 变色，别写 highlight 这种模糊名，而应拆成 em-accent（语气强化）和 span-brand（品牌标识）。否则后期改样式时，你根本分不清哪个 class 是为语义服务，哪个是为视觉服务。
示例场景：API 文档中描述必填字段
立即学习“前端免费学习笔记（深入）”；
<p>参数 <em>user_id</em> <span class="required-indicator">（必填）</span> 为字符串类型</p>
em 负责告诉辅助技术“这是重点参数名”，span.required-indicator 负责视觉提示（红色+括号），两者互不干扰。若合并成一个 <span class="highlight">user_id（必填）</span>，语义就丢失了。
display 和继承链会影响最终效果
em 默认是 inline 元素，span 也是，但它们的 font-style、font-weight 继承行为不同。em 会强制继承父级的 font-style 并设为 italic，而 span 完全不干预字体样式。如果你给父容器设了 font-style: italic，再套一层 em 就会变成斜体套斜体（浏览器通常只渲染一层斜体），但 span 不会。
容易被忽略的细节：
-
em的斜体行为不可被font-style: normal简单覆盖——它本质是“强调标记”，不是“样式开关” -
span内文字若要统一字号，用font-size: 0.9em比14px更安全，避免因父级缩放导致错位 - 两者都受
line-height影响，但em的行高继承更“顽固”，调试时优先查 computed 样式里的line-height值
JavaScript 动态操作时 class 要保留语义层级
用 JS 修改含 em 和 span 的文本时，别直接替换整个 innerHTML，否则 em 的语义结构可能被抹掉。比如：
el.innerHTML = "新参数：" + data.name + "（必填）"; // ❌ 抹掉 em/span 结构
正确做法是只更新内容节点，保留标签结构：
el.querySelector("em").textContent = data.name; // ✅
或者用 DOM 方法插入：
const em = el.querySelector("em");<br>em.textContent = data.name;<br>el.querySelector(".required-indicator").textContent = "（必填）";
复杂点在于：如果动态内容本身含 HTML（比如富文本摘要），就必须用 DOMParser 或白名单过滤，否则 em 可能被意外闭合，或 span 被注入恶意 class。
