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. 使用OpenSSL创建生成CA证书、服务器、客户端证书及密钥

    说明: 对于SSL单向认证:服务器需要CA证书.server证书.server私钥,客户端需要CA证. 对于SSL双向认证:服务器需要CA证书.server证书.server私钥,客户端需要CA证书, ...

  2. shell内置字符串替换

    shell变量赋值语法: 使用规则 解释单引号 所见即所得,即输出时会将单引号内的所有內容都原样输出,或者描述为单引号里面看到的是什么就会输出什么,这称为强引用双引号 (默认) 输出双引号内的所有内容 ...

  3. JunitGenerator

    ######################################################################################## ## ## Avail ...

  4. Qt编写地图综合应用37-覆盖物多边形

    一.前言 多边形主要的应用场景是用来框起一块区域,然后根据坐标点集合,找到该区域内的标注点集合,比如指定某个县市区域多边形,然后找到这个县市对应的所有站点,拿到这些站点在做其他处理. 二.功能特点 同 ...

  5. Mac_使用allure 生成测试报告

    在mac下使用allure 生成测试报告,需要安装软件为: 1. pytest 2. allure-pytest 或者 pytest-allure-adaptor (记住二者只能选其一) 3. all ...

  6. Solution Set -「AGC 001~003」C~F

    目录 「AGC 001C」Shorten Diameter 「AGC 001D」Arrays and Palindrome * 「AGC 001E」BBQ Hard * 「AGC 001F」Wild ...

  7. CF div3 995 (A~G）

    期末周之第三把网瘾(真是越来越放肆了...).这次赛时了一把div 3 , 又一次只做出了A~E,写完E后剩下的题没时间看了(受了些寝室噪音的干扰,最后二十分钟才出).赛后看了下F和G,感觉也是一时半 ...

  8. Spring源码分析基本介绍

    Spring源码分析(一)基本介绍   摘要:本文结合<Spring源码深度解析>来分析Spring 5.0.6版本的源代码.若有描述错误之处,欢迎指正. 前言 作为一名开发人员,阅读源码 ...

  9. Chrony：让你的服务器时间精准到微秒级的神器！

    在现代计算机系统中,时间同步是至关重要的.无论是分布式系统.数据库集群,还是日志记录,时间不一致都可能导致严重的问题.而 Chrony,作为一款高性能的时间同步工具,正在成为越来越多系统管理员的首选. ...

  10. Linux开发帮助参考

    在开发Linux系统下面软件时常常需要查阅手册,但是如果你的开发平台不是Linux系统,那你无法丝滑使用man手册,这里推荐一些方便的Linux开发手册. 手册: 在线man手册:Linux Man ...