<strong> 和 <em> 优先于 <b> 与 <i>，因其传达语义强调而非仅视觉样式：<strong> 表示内容重要，被屏幕阅读器加重朗读、搜索引擎加权；<em> 表示语音/逻辑强调（如反问重音）；而 <b> 和 <i> 仅实现粗体/斜体，无语义。中文场景中 <em> 效果有限，推荐 <strong> 或 CSS 类明确表达层级。
直接用 <strong> 和 <em>，别用 <b> 或 <i> ——除非你明确只需要视觉效果，且不关心语义、SEO 或屏幕阅读器行为。
为什么 <strong> 比 <b> 更值得优先选
浏览器渲染效果一样，但语义完全不同：<strong> 告诉辅助技术“这段内容重要”，屏幕阅读器会加重语气朗读，搜索引擎也会赋予更高权重；<b> 只是“让它变粗”，没有额外含义。实际项目中，如果你加粗的是操作按钮文字、错误提示、关键参数名，用 <strong> 才符合意图。
- 错误写法：
<p>配置项必须设为 <b>true</b></p>（<b>无法传达“这是强制要求”的语义） - 推荐写法：
<p>配置项必须设为 <strong>true</strong></p> - 例外场景：产品名、品牌词、技术术语（如
<b>React</b>）可用<b>，因其本意就是视觉区分，非强调重要性
什么时候该用 <em> 而不是 <i>
<em> 表示语音或逻辑上的强调，比如反问、转折、对比时的重音；<i> 仅表示“这段文字该斜着显示”，常见于船名、拉丁学名、外语短语等纯格式需求。
- 语义正确：
<p>你真的<em>确定</em>要删除全部数据？</p>（强调“确定”，带质疑语气） - 格式正确：
<p>该菌种学名为 <i>Escherichia coli</i>。</p>（斜体是惯例，不表达强调） - 注意：
<em>支持嵌套，<em>最<em>关键</em>的一环</em>会被读作两层强调，但慎用，容易让屏幕阅读器混乱
CSS 替代方案：什么时候该放弃标签，改用样式
当加粗/倾斜只是视觉设计的一部分，且需统一控制、响应式适配或配合交互状态（如 hover、focus）时，CSS 更灵活可靠。
- 用类代替标签：
<span class="highlight">高亮文本</span>+.highlight { font-weight: 700; font-style: italic; } - 避免混合语义与样式：不要写
<strong style="font-style: italic">，这既破坏语义又难维护 - 性能影响极小，但可访问性风险明显：纯 CSS 实现的“加粗”不会被屏幕阅读器识别为强调，除非额外加
aria-live或role="alert"等补救措施
容易被忽略的兼容性细节
现代浏览器对 <strong> 和 <em> 的默认样式基本一致，但部分旧版 Android WebView 或邮件客户端（如 Outlook）可能忽略它们的语义，只按默认粗细/倾斜渲染。如果目标环境不可控，且强调效果必须 100% 可见，可双保险：
- 语义 + 样式并存：
<strong class="visually-bold">关键步骤</strong> - 不要依赖默认字体粗细：某些系统字体（如 macOS 的 San Francisco）在
font-weight: bold下变化不明显，建议显式设font-weight: 700 -
<em>在中文语境下效果有限——中文无重音朗读习惯，屏幕阅读器通常不特殊处理，此时更推荐用<strong>或 CSS 类明确表达层级
