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>。

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

  1. web前端入坑第五篇：秒懂Vuejs、Angular、React原理和前端发展历史

    秒懂Vuejs.Angular.React原理和前端发展历史 2017-04-07 小北哥哥 前端你别闹 今天来说说 "前端发展历史和框架" 「前端程序发展的历史」 「 不学自知, ...

  2. Android零基础入门第10节：开发IDE大升级，终于迎来了Android Studio

    原文:Android零基础入门第10节:开发IDE大升级,终于迎来了Android Studio 通过前面几期的学习,我们知道了Android的前世今生,也了解了Android的系统架构和应用组件,也 ...

  3. Web前端开发最佳实践（5）：正确闭合HTML标签，停止使用不标准的标签和属性

    正确闭合HTML标签 HTML元素的内容模型定义了元素的结构,表明元素可以包含哪些内容以及元素可以有哪些属性.元素可以包含的内容包括其他元素和字符,但是也有一些元素是空元素,即不能包含任何内容,这些元 ...

  4. 百度web前端面试2015.10.18

    邮件里通知的周日下午两点参加百度校招面试,我13:10分就到了,前台先让我拿了个面试资格单(上面是我的信息),然后在web前端面试入口排队,面试在百度食堂举行的,等了大概1个小时,放我去面试.都是一对 ...

  5. web前端入坑第二篇：web前端到底怎么学？干货资料！ 【转】

    http://blog.csdn.net/xllily_11/article/details/52145172 版权声明:本文为博主[小北]原创文章,如要转载请评论回复.个人前端公众号:前端你别闹,J ...

  6. Web前端开发基础 第四课（CSS文字和段落排版）

    文字排版--字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:" ...

  7. web前端2017.6.10

    表单元素:用于客户端和服务端进行信息交互的通道 <form></form>:所有的表单元素都应该放在里面 文本输入框:<input type="text&quo ...

  8. web前端篇:html基础知识

    目录 1.web前端: 2.HTML概述 2.1HTML介绍 2.2HTML在计算机中如何表现 3.HTML基础语法 4.练习题: 1.web前端: 什么是web? web 就是网页,是一种基于B/S ...

  9. Android零基础入门第38节：初识Adapter

    原文:Android零基础入门第38节:初识Adapter 在上一节一起了解了ListView的简单使用,那么本节继续来学习与ListView有着千丝万缕的Adapter. 一.了解MVC模式 在开始 ...

  10. Android零基础入门第88节：Fragment显示和隐藏、绑定和解绑

    在上一期我们学习了FragmentManager和FragmentTransaction的作用,并用案例学习了Fragment的添加.移除和替换,本期一起来学习Fragment显示和隐藏.绑定和解绑. ...

随机推荐

  1. rpc-java 生成代码路径设置

    <plugin> <groupId>org.xolstice.maven.plugins</groupId> <artifactId>protobuf- ...

  2. OpenSSL SSL_read: SSL_ERROR_SYSCALL, errno 10054

    OpenSSL SSL_read: SSL_ERROR_SYSCALL, errno 10054,vagrant box add laravel/homestead,安装 Homestead Vagr ...

  3. Qt音视频开发23-视频绘制QPainter方式（占用CPU）

    一.前言 采集到的图片,用painter绘制是最基础的方式,初学者可能第一次尝试显示图片用的qlabel的setpixmap,用下来会发现卡成屎,第二次尝试用样式表设置背景图,依然卡成屎,最终选用pa ...

  4. Qt编写地图综合应用文章导航

    文章 链接 1-闪烁点图 https://qtchina.blog.csdn.net/article/details/105310274 2-迁徙图 https://qtchina.blog.csdn ...

  5. Qt 6 中的 Qt Extras 模块

    一.前言 Qt 6 是有意识地努力使框架更加高效和易于使用的结果. 我们尝试在每个版本中保持所有公共 API 的二进制和源代码兼容性. 但为了使 Qt 成为更好的框架,一些更改是不可避免的. 其中一项 ...

  6. Qt 5.15.6 发布

    一.前言 我们今天为商业许可证持有者发布了 Qt 5.15.6 LTS.作为补丁版本,Qt 5.15.6 没有添加任何新功能,但提供了错误修复和其他改进. 您可以使用维护工具在现有的在线安装中添加 Q ...

  7. Qt编写的项目作品34-雷达模拟仿真工具(雨田哥作品)

    一.功能特点 支持音频频谱显示. 支持任意随机添加模拟点. 支持自定义添加模拟点. 支持方位.航向角.距离.速度.目标体真实图自定制. 支持危险区域范围显示. 支持激光发射模拟. 支持雷达图放大缩小显 ...

  8. Solution Set -「NOIP Simu.」20221024

    \(\mathscr{A}\sim\) 断   给定一棵含有 \(n\) 个点的树, 所有点初始时为白色. 再给出 \(m\) 个形如 \((u,v)\) 的点对, 要求 \(u\) 到 \(v\) ...

  9. Docker的安装和配置

    1.在CentOS上安装Docker 在CentOS上安装Docker的过程相对简单,可以通过官方提供的安装包安装.以下是详细的安装步骤. 1.安装依赖包 在安装Docker之前,确保安装了一些必要的 ...

  10. 你所不知道的 C/C++ 宏知识——基于《C/C++ 宏编程的艺术》

    前言 刚学 C++ 的时候,就知道它糅合了四种编程模式:基于预处理器的宏.基于 C 语言的面向过程.基于类的面向对象.以及基于模板的泛型编程.其中,宏和模板元编程因为是在编译期出结果,能有效提升程序运 ...