Web前端入门第 10 问：HTML 段落标签（ <p> ）嵌套段落标签（ <p> ）的渲染结果会怎样？

HELLO，这里是大熊学习前端开发的入门笔记。

本系列笔记基于 windows 系统。

曾经有一个神奇的 bug 摆在我面前，为什么套娃一样的 HTML 语法，在段落标签 <p> 身上不生效？

上源码

注意源码中 p 标签分别嵌套了 span 、 p 、 div 标签。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <section>
    <p>我是 p 标签</p>
    <p>
      <span>我是 p 标签里面的 span 标签</span>
    </p>
    <p>
      <p>我是 p 里面的 p 标签</p>
    </p>
    <p>
      <div>我是 p 标签里面的 div 标签</div>
    </p>
  </section>
</body>
</html>

渲染结果

结论：段落标签 <p> 里面包含任何块级元素，都会被把外层的 p 标签截断为两个 p 标签，嗯...可以理解为 p 标签眼里容不下任何块级元素。

DeepSeek 给出的解释

HTML 标准规定：<p> 标签的内容模型（Content Model）仅允许包含 phrasing content（如文本、<span>、<a> 等行内元素），不允许直接嵌套块级元素（如 <p>、<div>）。

自动纠错机制：当浏览器检测到嵌套的 <p> 时，会强制闭合外层 <p> 以修复结构错误。

--- 来源：DeepSeek

总结

HTML 规范里不允许块级元素嵌套在段落标签里。当浏览器遇到 <p> 标签嵌套 块级元素 时，会自动结束当前的 <p> 元素，然后开始新的块级元素渲染，在修正后面的结束标签 </p>。

posted @ 2025-03-06 09:33  前端路引  阅读(215)  评论(0)    收藏  举报