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. C#中使用ping命令测试远程主机网络通信是否正常

    说明,使用ping工具 1.可以用来查询域名是否可以访问 2.可以用来查询域名对应的ip地址 如果远程服务器允许ping命令的前提下. 解决思路:主要使用了C#提供的Ping类,效率比较高,相应快 程 ...

  2. WPF 动态加载嵌入主程序的DLL

    WPF 动态加载嵌入主程序的DLL,好处是节省文件数量,坏处是启动影响加载速度. 首先将DLL添加进项目,选择添加现有项,设置生成操作为"嵌入资源". 代码: public App ...

  3. uwp 下载文件显示进度并解压文件

    uwp 下载文件显示进度并解压文件. <Page x:Class="App4.MainPage" xmlns="http://schemas.microsoft.c ...

  4. 从单体架构、到SOA、再到微服务的架构设计详解

    本文涉及的内容以及知识点如下: 1.单体架构 2.单体架构的拆分 3.SOA与微服务的区别 4.微服务的优缺点 5.微服务的消息 6.服务集成 7.数据的去中心化 单体架构 Web应用程序发展的早期, ...

  5. 文章学习：基于AVX-512指令集的同态加密算法中大整数运算性能优化与突破

    学习文章:英特尔×同态科技 | 基于AVX-512指令集的同态加密算法中大整数运算性能优化与突破 文章 人工智能的安全隐患 ChatGPT的成功大部分来源于海量的数据支撑和丰富的数据维度,基于13亿参 ...

  6. 密码学报如何正确Latex投稿？

    记录一下<密码学报>投稿遇到的坑,要不研究一下,投稿都不会投!(死在第一步) 模版地址 http://www.jcr.cacrnet.org.cn/CN/column/column13.s ...

  7. LaVita pg walkthrough Intermediate

    nmap └─# nmap -p- -A 192.168.159.38 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-12-01 00:21 U ...

  8. Sa-Token v1.20.0 发布，新增临时Token认证

    框架介绍 Sa-Token是一个轻量级Java权限认证框架,主要解决:登录认证.权限认证.分布式Session会话.单点登录.OAuth2.0 等一系列权限相关问题. 框架针对踢人下线.自动续签.前后 ...

  9. 基于Java语言的开源能管平台才是最适合国内的能源管理平台

    在"双碳"战略背景下,能源管理已成为政府.企业实现可持续发展的必经之路.面对市场上各类能源管理平台,为何基于Java语言的开源解决方案才是最佳选择?本文将为您揭晓答案,并向您推荐我 ...

  10. 再次使用layui遇见问题

    Layui似乎只接收data里的数据,所以只能使用这个方式把原有数据放入dataparseData: function (res) { //res 即为原始返回的数据 return { "c ...