em 可合法嵌套于 p 中，因其属于 HTML5 规范定义的 phrasing content；滥用为容器、过度嵌套或混用 strong 会导致解析异常、语义混乱或无障碍问题。

标签内嵌套 em 完全合法，且是语义化强调的标准用法——只要 em 不被当作“容器”滥用，就不会触发解析错误或样式断裂。

为什么 em 能放进 p 里？

em 是 HTML5 明确允许的 phrasing content（短语内容），和 strong、a、img 属同一类。浏览器解析 p 时，只允许这类行内级元素进入，em 正好符合。这不是“浏览器宽容”，而是规范强制要求的支持。

常见错误写法与后果

• 把 em 当成块容器用：

  说明如下：

  • 支持 JSON
  → 解析器会立刻在
  前闭合 和
  ，实际 DOM 变成

  说明如下：

  ...
  ，CSS 选择器 p em ul 永远不匹配
• 嵌套过深导致可读性崩坏：

  重点词

  

  DeepBI DHTML 页面生成器

  生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

  下载
  → 语义冗余，em 和 strong 都表达强调，同时用等于没强调；span 在这里无必要，纯增加维护成本
• 误以为 em 会继承父级样式而忽略重置：p { font-style: italic; } p em { font-style: normal; } 这种覆盖容易漏掉，结果所有 em 看起来都没斜体，误判为“不生效”

推荐写法与注意事项

最简、最稳的写法就是直接包裹文本：

<p>这是正常段落，而 <em>这部分需要轻度强调</em>，其余照旧。</p>

若需额外控制样式，优先用 class 而非深度嵌套：

• 需要统一强调色？加 class：关键参数，再配 CSS .highlight { color: #d32f2f; }
• 要禁用斜体但保留语义？CSS 写 em { font-style: normal; }，别删标签
• 想让 em 内部换行？不行——em 是行内元素，br 放里面虽不报错，但语义错乱；该分段就用两个 p
• 移动端注意：iOS Safari 对 em 的字体缩放较敏感，如用 rem 控制字号，确保根字体未被用户缩放覆盖（可加 html { text-size-adjust: 100%; }）

和 strong 混用时的取舍

两者不是“加粗 vs 斜体”的视觉分工，而是语义强度差异：

• em 表示语气上的轻度强调（比如“我**不是**不想去”，重音在“不是”）
• strong 表示内容重要性更高（比如“密码**必须**包含大小写字母”）
• 视觉上都可以用 CSS 改，但不要为了“看起来更重”而改用 strong——那会误导屏幕阅读器和 SEO
• 真要叠加语义（极少见），按规范应 紧急操作，而非反过来

真正容易被忽略的是：哪怕只改一行 HTML，如果 em 里塞了 div 或 h3，浏览器也会静默修正 DOM 结构——你写的代码和最终渲染的 DOM 已经不是一回事，JS 查询、CSS 作用域、无障碍树都会出偏差。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！