0

0

HTML元素嵌套问题

高洛峰

高洛峰

发布时间:2017-02-15 14:03:59

|

2360人浏览过

|

来源于php中文网

原创

HTML元素嵌套问题

元素嵌套

块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,只能包含其他的内联元素。

P元素嵌套问题

在P元素中嵌套p等块级元素,在浏览器中解析如下:

HTML元素嵌套问题

可以看到在元素最后会多出一个空的

立即学习前端免费学习笔记(深入)”;

通过查询,发现原来p元素内无法包裹块级元素
因为我们使用的DTD中规定了块级元素是不能放在

里面的,再加上一些浏览器纵容这样的写法:

这是一个段落的开始

这是另一个段落的开始

当一个

标签还没结束时,遇到下一个块元素就会把自己结束掉,其实浏览器是把它们处理成这样:

这是一个段落的开始

这是另一个段落的开始

HTML5CSS3分步提示框Tooltip 可嵌入任意HTML元素
HTML5CSS3分步提示框Tooltip 可嵌入任意HTML元素

Tooltip又叫提示框,在网页上很常见,用户通过点击或者滑动鼠标来获取更详细的信息,但是整个页面却很整洁。

下载

这也就解释了,为何浏览器中最后会多出1个空的

块级元素嵌套问题

可以先把所有的块元素再次划分成几个级别的,我们已经知道是在最外层,下一级里面只会有、、、 ,而我们已经知道了可视的元素只会出现在里,所以我们把划在第一个级里面。接着,把不可以自由嵌套的元素划在第三个级,其他的就归进第二个级。所谓的不可自由嵌套的元素就是里面只能放内联元素的,它们包括有:标题标记的

;段落标记的

;分隔线
和一个特别的元素
(它只存在于列表元素
的子一级)。

三级元素就是指,只能嵌套内联元素的块级元素。p也恰好是其中之一。

为什么第二级的元素可以自由嵌套

我们可以把它们看成是一些容器(或者说是盒子), 这些容器的大小可以自由变化,例如我们可以把

    嵌在

    里面,也可以把

    嵌在
  • 里面。

    在HTML里有几个元素是比较特别的:

      、,它们的子一层必须是指定元素,
        >的子一级必须是
      1. 的子一级必须是
        或者
      的子一层必须是等,而再子一层必须是只存在于中),之后才是可放内容的
      或者。 

      内联元素

      其实在内联元素中,还是可以再区分一下的,有几个元素(HTML元素嵌套问题 等)比较特别,它们可以定义宽高。虽然在IE浏览器里,所有的元素都可以定义宽高,但这是IE自己的标准,并非所有浏览器都支持,W3C称它们为replaced元素,其实它们也就是我们常说的行内块,虽然这些元素属于inline,但是却具有一定的block(可以设置宽高),我们也可以赋予任何元素css属性display:inline-block。
      本身具有inline-block的元素应该没有!

      更多HTML元素嵌套问题 相关文章请关注PHP中文网!

  • 相关文章

    HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

    下载

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    相关专题

    更多
    c++ 根号
    c++ 根号

    本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

    57

    2026.01.23

    c++空格相关教程合集
    c++空格相关教程合集

    本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

    57

    2026.01.23

    yy漫画官方登录入口地址合集
    yy漫画官方登录入口地址合集

    本专题整合了yy漫画入口相关合集,阅读专题下面的文章了解更多详细内容。

    237

    2026.01.23

    漫蛙最新入口地址汇总2026
    漫蛙最新入口地址汇总2026

    本专题整合了漫蛙最新入口地址大全,阅读专题下面的文章了解更多详细内容。

    393

    2026.01.23

    C++ 高级模板编程与元编程
    C++ 高级模板编程与元编程

    本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

    17

    2026.01.23

    php远程文件教程合集
    php远程文件教程合集

    本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

    103

    2026.01.22

    PHP后端开发相关内容汇总
    PHP后端开发相关内容汇总

    本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

    73

    2026.01.22

    php会话教程合集
    php会话教程合集

    本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

    81

    2026.01.22

    宝塔PHP8.4相关教程汇总
    宝塔PHP8.4相关教程汇总

    本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

    70

    2026.01.22

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    CSS教程
    CSS教程

    共754课时 | 23.6万人学习

    CSS3-瞬间提升网页逼格的利器
    CSS3-瞬间提升网页逼格的利器

    共56课时 | 17.1万人学习

    React中文开发手册
    React中文开发手册

    共0课时 | 0人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号