简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

HTML元素嵌套问题

高洛峰
发布： 2017-02-15 14:03:59
原创
2145 人浏览过

HTML元素嵌套问题

元素嵌套

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

P元素嵌套问题

<p>
  <p></p>
</p>
登录后复制
<p>在P元素中嵌套p等块级元素，在浏览器中解析如下：

<p>HTML元素嵌套问题

<p>可以看到在元素最后会多出一个空的<p></p>。

<p>通过查询，发现原来p元素内无法包裹块级元素。
因为我们使用的DTD中规定了块级元素是不能放在<p>里面的，再加上一些浏览器纵容这样的写法：

<p>这是一个段落的开始
<p>这是另一个段落的开始
登录后复制
<p>当一个<p>标签还没结束时，遇到下一个块元素就会把自己结束掉，其实浏览器是把它们处理成这样：

<p>这是一个段落的开始</p>
<p>这是另一个段落的开始</p>
登录后复制
<p>这也就解释了，为何浏览器中最后会多出1个空的<p></p>。

块级元素嵌套问题

<p>可以先把所有的块元素再次划分成几个级别的，我们已经知道<html>是在最外层，<html>下一级里面只会有<head>、<body>、<frameset>、<noframes>，而我们已经知道了可视的元素只会出现在<body>里，所以我们把<body>划在第一个级里面。接着，把不可以自由嵌套的元素划在第三个级，其他的就归进第二个级。所谓的不可自由嵌套的元素就是里面只能放内联元素的，它们包括有：标题标记的<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>；段落标记的<p>；分隔线<hr>和一个特别的元素<dt>(它只存在于列表元素<dl>的子一级)。

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

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

<p>我们可以把它们看成是一些容器（或者说是盒子）， 这些容器的大小可以自由变化，例如我们可以把<ul>嵌在<p>里面，也可以把<p>嵌在<li>里面。

<p>在HTML里有几个元素是比较特别的：<ul>、
    、<dl>、<table>，它们的子一层必须是指定元素，<ul>、>的子一级必须是<li>；<dl>的子一级必须是<dt>或者<dd>；<table>的子一层必须是<caption>或<thead>、<tfoot>、<tbody>等，而再子一层必须是<tr>（<tr>只存在于<thead>、<tfoot>、<tbody>中），之后才是可放内容的<td>或者<th>。　

    内联元素

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

    <p>更多HTML元素嵌套问题 相关文章请关注PHP中文网！

相关标签：
HTML 元素嵌套
来源：php.cn
上一篇：favicon 不只是个图标 下一篇：完美解决html中select的option不能隐藏的问题。
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
通过迭代显示嵌套的对象数组在HTML表格中 我有一个包含嵌套对象数组的以下input。summary是父级对象数组，run_type是嵌套的对象数组。letinput={"summary":[{"...
来自于 2024-04-05 14:11:42
0
1
1373
PDF文件能够运行HTML5和Javascript吗？ 我有一个愚蠢的想法，想尝试制作一个在任何计算机上都不会被阻止的程序，因为它将嵌入在PDF中（我听说Javascript可以在PDF中运行）。它将在PDF文件中运行HTML5和Jav...
来自于 2024-04-05 12:57:00
0
1
456
需要一个 jquery 脚本，根据最终用户的当前选择从选择框中移动选定的选项 我有一个HTML页面，最终用户可以通过选择框元素对我们的项目进行排名。请参阅小提琴来观看简单的演示：https://jsfiddle.net/Balkanlii/ghecv1j8/...
来自于 2024-04-04 18:40:04
0
1
3528
使用selenium想要点击并在类中定义URL 今天我需要另一个提示。我正在尝试构建Python/Selenium代码，想法是单击www.thewebsiteIwantoclickon下面是我正在处理的HTML示例。类entit...
来自于 2024-04-04 14:14:44
0
1
3492
重新写的标题：在改变大小的情况下，水平和垂直居中一个固定的HTML方形或圆形元素 如何使尺寸变化的方形或圆形固定html元素水平和垂直居中？我认为宽度和高度必须保持相等这一事实带来了困难。
来自于 2024-04-04 12:31:51
0
1
322
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！