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. /etc/rancher/k3s/registries.yaml

    mirrors: "192.168.50.3": endpoint: - "https://192.168.50.3"configs: "192.16 ...

  2. springboot连接mysql报错errorCode 0, state 08S01

    前言许久未维护的项目需要检查一些数据,重新运行项目发现有create connection SQLException ,具体报错信息是 errorCode 0, state 08S01 . Sprin ...

  3. IDEA利用阿里云插件部署Springboot项目

    下载插件 搜索 Alibaba Cloud Toolkit 插件,并安装. IDEA增加Run/Debug Configurations Add New Configuration - Deploy ...

  4. 掌握 PostgreSQL 的 psql 命令行工具

    title: 掌握 PostgreSQL 的 psql 命令行工具 date: 2024/12/30 updated: 2024/12/30 author: cmdragon excerpt: psq ...

  5. VS2022推送代码 到github错误： CertGetCertificateChain trust error CERT_TRUST_IS_PARTIAL_CHAIN的解决办法

    VS2022推送代码 到github错误: CertGetCertificateChain trust error CERT_TRUST_IS_PARTIAL_CHAIN 解决办法: 进入到 选项&g ...

  6. 第七章 (Nginx+Lua)Web开发实战商品详情页

    本章以京东商品详情页为例,京东商品详情页虽然仅是单个页面,但是其数据聚合源是非常多的,除了一些实时性要求比较高的如价格.库存.服务支持等通过AJAX异步加载加载之外,其他的数据都是在后端做数据聚合然后 ...

  7. biancheng-Spring MVC-HandlerMapping

    一.HandlerMapping 作用是根据当前请求的找到对应的 Handler,并将 Handler(执行程序)与一堆 HandlerInterceptor(拦截器)封装到 HandlerExecu ...

  8. 使用 pdf.js 通过文件流方式加载pdf文件

    关于Pdf.js的基础知识,请参考我的博客  使用 pdf.js 在网页中加载 pdf 文件 使用 pdf.js 跨域问题的处理方法 上面两篇博客中介绍的内容都是基于直接加载远程服务器中静态PDF文件 ...

  9. linux：用户管理

    用户账号添加.删除.修改以及用户密码的管理 用户组的管理 涉及三个文件: /etc/passwd    :存储用户的关键信息 /etc/group :存储用户组的关键信息 /etc/shadow :存 ...

  10. web95 比较麻烦的interval绕过

    审计 include("flag.php"); highlight_file(__FILE__); if(isset($_GET['num'])){ $num = $_GET['n ...