em 必须嵌套在 strong 内部，因语义上语气强调依附于内容重要性；b/i 无语义，不可替代 strong/em；嵌套限两层且仅 strong→em→其他行内标签；重度警示需 class 强化样式并用 aria-live="assertive" 动态播报。
strong 和 em 嵌套时谁该包在里层
必须把 em 放在 strong 内部，不能反过来。因为语义上，“语气强调”是依附于“内容重要性”的局部修饰——比如警告弹窗里那句“立即断电”，“立即”需要重读（em），但整句话本身具有强制操作属性（strong）。浏览器渲染时会同时加粗+斜体；屏幕阅读器也会先识别 strong 的权重，再对 em 部分做语调变化。
常见错误：<em><strong>危险！</strong></em> —— 这会让读屏软件先处理语气、再判断重要性，逻辑倒置，部分无障碍工具可能忽略内层 strong 的语义。
重度警示内容中为什么不用 b 或 i 替代
b 和 i 是纯样式标签，不传递任何语义信息。搜索引擎不会提升其权重，读屏软件也不会特殊处理。在安全警告、法律义务、系统中断提示这类场景中，用 b 包裹“断电”或 i 包裹“禁止触摸”，等于主动放弃可访问性和合规性支撑。
以下情况必须避免：
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 用
<i>请勿靠近</i>代替<strong><em>请勿靠近</em></strong> - 在医疗设备 UI 中用
<b>致命风险</b>而非<strong>致命风险</strong> - 把
em单独用于整段警告文字（它只适合词/短语级语气强调，不是段落级重要性标记）
实际排版中容易被忽略的细节
嵌套超过两层（例如 <strong><em><u>立即停机</u></em></strong>）会导致部分读屏软件跳过中间语义，或解析为“普通文本”。W3C 明确建议：仅在必要时嵌套，且只限 strong → em → 其他行内标签（如 code、kbd）这一层级。
另外注意：
- CSS 重置可能覆盖默认加粗/斜体效果，务必检查
strong和em是否仍保有视觉区分 - 不要用
em替代del或mark：过期条款该用<del></del>，搜索高亮该用<mark></mark> - 中文语境下慎用
em单独包裹“注意”“警告”等词——它们本身已是强语义词，应由strong承载，em只用于其中需语音重读的部分，如“请务必确认电源已关闭”
要不要加 class 或 aria-label
单纯语义标签已足够传达基础意图，但重度警示内容建议补充 class 用于样式强化（如红底白字、动画闪烁），同时加 aria-live="assertive" 确保动态插入时读屏软件立刻播报。不要用 aria-label 覆盖原生文本——它会完全替代标签内容，导致“断电”变成“高压危险”，丢失原始语义。
推荐写法：<strong aria-live="assertive" class="alert-danger"><em>立即</em>断电</strong>。注意 aria-live="assertive" 只应在用户触发关键操作（如点击“执行销毁”按钮）后动态插入时使用，静态页面中无需添加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
