HTML中<em>可合法嵌套于<p>内，语义为强调，浏览器默认斜体；勿与仅表样式的<i>混淆，样式失效优先查CSS覆盖，无障碍场景下不可为美观弃用<em>。
直接在 <p> 里写 <em> 就行
HTML 允许 <em> 作为内联元素嵌套在 <p> 中，这是完全合法且推荐的用法。浏览器会默认把 <em> 渲染为斜体，并赋予语义上的“强调”含义。
常见错误是误以为需要额外包裹或加 class 才能生效——其实不需要。只要结构正确，样式和语义就自动成立。
-
<p>这是一个<em>重要</em>提醒</p>✅ 正确 -
<p><em>重要</em>提醒</p>✅ 也正确（强调位置不同） -
<p><em>重要提醒</p>❌ 缺少闭合标签，会破坏 DOM 结构 -
<p><em>重要</em><em>提醒</em></p>✅ 合法，但语义上不如单个<em>自然
<em> 和 <i> 别混用
虽然两者默认都显示为斜体，但语义完全不同：<em> 表示内容有语言学上的强调（比如读出来要重读），而 <i> 仅表示“不同语气”，如外文词、科技术语、船名等。
如果你只是想让某几个字“看起来突出”，又不带强调语气，那该用 <i> 或 CSS（比如 font-style: italic）；如果真想表达“这句话里这个词很关键”，就用 <em>。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- ✅
<p>请务必检查<em>电源是否已接通</em></p>（强调操作前提） - ✅
<p>这个术语源自拉丁语 <i>exemplum</i></p>（外文词，非强调） - ❌
<p>点击<i>提交</i>按钮</p>（“提交”是动作核心，应强调，用<em>）
样式被覆盖？优先查 CSS 继承和 specificity
如果写了 <em> 却没看到斜体，大概率不是 HTML 写错了，而是 CSS 干预了。浏览器默认给 <em> 设了 font-style: italic，但这个样式很容易被父级或通用规则覆盖。
- 检查是否父元素（比如
<p>）设置了font-style: normal，它会继承下去 - 看是否有类似
p em { font-style: normal; }这样的显式重置规则 - 用浏览器开发者工具 inspect 元素，直接看 computed 样式里
font-style最终值是多少 - 临时加
style="font-style: italic !important;"测试是否是样式问题（上线前必须删掉）
无障碍和 SEO 场景下，别为了“好看”去掉 <em>
屏幕阅读器会为 <em> 加重音或停顿，搜索引擎也可能轻微加权强调内容。如果只因“斜体不好看”就改用纯 CSS 模拟，等于主动放弃语义和可访问性。
更合理的做法是：保留 <em>，再用 CSS 控制它的外观，比如改成颜色变化、下划线或背景高亮：
em {
font-style: normal;
color: #d32f2f;
text-decoration: underline wavy;
}
这样既保持语义，又满足设计需求。真正容易被忽略的，是开发时顺手删掉 <em> 改用 <span> 的那一刻——那不是简化，是信息降级。
