当前位置：首页 > Web前端 > HTML

HTML元素嵌套问题

时间：2023-04-02 21:30:34 HTML

HTML元素嵌套问题元素嵌套块元素可以包含行内元素或某些块元素，但行内元素不能包含块元素，只能包含其他行内元素。P元素嵌套问题

在P元素中嵌套div等块级元素，在浏览器中解析如下：可以看到会有一个空格在元素

的末尾。通过查询发现原来的p元素是不能包裹块级元素的。因为我们使用的DTD规定块级元素不能放在

里面，再加上一些浏览器容忍这样的写法：

这是一个段落的开头

这是另一个段落的开头，当一个

标签还没有结束，遇到下一个块元素就会自己结束。事实上，浏览器是这样处理它们的：

这是一个段落的开始

这是另一个段落的开始

这也解释了为什么会有一个空的

在浏览器中结束。块级元素嵌套问题可以先将所有块级元素分成若干层。我们已经知道是最外层，的下一层只会有和，，，我们已经知道可见元素只会出现在<body>中，所以我们把<body>放在第一层。然后，不能自由嵌套的元素归入第三层，其他归入第二层。所谓不可自由嵌套的元素就是那些只能包含行内元素的元素。它们包括：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>；段落标签的<p>；分隔符<hr>和特殊元素<dt>（仅存在于列表元素<dl>的子级）。三级元素是指只能嵌套内联元素的块级元素。p也恰好是其中之一。为什么二级元素可以自由嵌套？我们可以把它们想象成一些容器（或盒子），这些容器的大小是可以自由改变的。例如，我们可以将<ul>嵌入到<div>中，或者将<div>嵌入到<li>中。HTML中有几个特殊的元素：<ul>、<ol>、<dl>、<table>，它们的子级必须是指定的元素，而<ul>、<ol>的子级必须是<li>;<dl>的子级别必须是<dt>或<dd>；<table>的sub-level必须是<caption>或者<thead>,<tfoot>,<tbody>等，然后Thesub-level必须是<tr>(<tr>只存在于<thead>,<tfoot>,<tbody>),然后是<td>或<th>可以放置内容的地方。　内联元素其实内联元素还是可以区分的。有几个元素（<img>、<input>等）比较特殊，可以定义宽高。虽然在IE浏览器中，所有的元素都可以定义宽高，但是这是IE自己的标准，并不是所有的浏览器都支持，W3C称他们为replacedelements，其实就是我们常说的inlineblocks，虽然这些元素属于inline，但是他们有一定的block（宽高可以设置），我们也可以给任何元素css属性display:inline-block。本身具有内联块的元素不应该！参考文章：http://www.cnblogs.com/Iona/p...</p> </div> </div> <div class="zuowen_sxy"> <div class="prev">上一篇：<a title="前端面试每日3+1——第989天" href="/webqianduan/233528.html">前端面试每日3+1——第989天</a> </div> <div class="prev">下一篇：<a title="[vue-cli3.0]vue.config.js配置-路径别名" href="/webqianduan/233530.html">[vue-cli3.0]vue.config.js配置-路径别名</a> </div> </div> <div class="related_about"> <div class="related_about_t"><code>HTML元素嵌套问题相关文章</code></div> <ul> <li><a href="/shujuyingyong/286690.html" target="_blank" title="MongoDB中如何查询嵌套文档的属性值">MongoDB中如何查询嵌套文档的属性值</a></li> <li><a href="/shujuyingyong/286571.html" target="_blank" title="MongoDB嵌套文档操作的基本方法和注意事项">MongoDB嵌套文档操作的基本方法和注意事项</a></li> <li><a href="/shujuyingyong/286455.html" target="_blank" title="如何使用MongoDB查询数组中指定元素的前一个元素">如何使用MongoDB查询数组中指定元素的前一个元素</a></li> <li><a href="/shujuyingyong/286343.html" target="_blank" title="MongoDB如何实现SQL风格的嵌套查询">MongoDB如何实现SQL风格的嵌套查询</a></li> <li><a href="/shujuyingyong/285136.html" target="_blank" title="Redis如何实现随机抽取10个元素的功能">Redis如何实现随机抽取10个元素的功能</a></li> <li><a href="/shujuyingyong/283504.html" target="_blank" title="Redis集合操作指南：如何查看、添加和删除元素">Redis集合操作指南：如何查看、添加和删除元素</a></li> <li><a href="/shujuyingyong/283007.html" target="_blank" title="Redis 列表操作：如何删除指定元素">Redis 列表操作：如何删除指定元素</a></li> <li><a href="/bianchengyuyan/275294.html" target="_blank" title="HtmlAgilityPack替换节点分享">HtmlAgilityPack替换节点分享</a></li> <li><a href="/bianchengyuyan/275250.html" target="_blank" title="如何在asp.net中嵌套转发器分享">如何在asp.net中嵌套转发器分享</a></li> <li><a href="/bianchengyuyan/275217.html" target="_blank" title="htmlagilitypackgzip加密异常分享">htmlagilitypackgzip加密异常分享</a></li> <li><a href="/bianchengyuyan/275215.html" target="_blank" title="Helper方法生成小型HTML片段Share">Helper方法生成小型HTML片段Share</a></li> <li><a href="/bianchengyuyan/275139.html" target="_blank" title="发送包含嵌入图像和纯文本的html电子邮件，其中包含与C＃中">发送包含嵌入图像和纯文本的html电子邮件，其中包含与C＃中</a></li> <li><a href="/bianchengyuyan/275136.html" target="_blank" title="如何将viewbag显示为html？分享">如何将viewbag显示为html？分享</a></li> <li><a href="/bianchengyuyan/274986.html" target="_blank" title="在C＃中将HTML实体转换为Unicode字符分享">在C＃中将HTML实体转换为Unicode字符分享</a></li> <li><a href="/bianchengyuyan/274921.html" target="_blank" title="HtmlAgilityPack中的NullReference">HtmlAgilityPack中的NullReference</a></li> <li><a href="/bianchengyuyan/274907.html" target="_blank" title="如何在C#中以最快的方式获取HTMLDocument的所有文">如何在C#中以最快的方式获取HTMLDocument的所有文</a></li> <li><a href="/bianchengyuyan/274889.html" target="_blank" title="HtmlAgilityPack-removeelements">HtmlAgilityPack-removeelements</a></li> <li><a href="/bianchengyuyan/274828.html" target="_blank" title="数组中元素的确切最大限制是多少分享">数组中元素的确切最大限制是多少分享</a></li> <li><a href="/bianchengyuyan/274795.html" target="_blank" title="在没有DocumentViewer的情况下显示HTML文档的">在没有DocumentViewer的情况下显示HTML文档的</a></li> <li><a href="/bianchengyuyan/274727.html" target="_blank" title="ItextSharp尝试解析html进行pdf转换时出错分享">ItextSharp尝试解析html进行pdf转换时出错分享</a></li> </ul> </div> </div> <div class="main-right"> <div class="right_fix"> <div class="r_con"> <div class="r_title">最新推荐</div> <ul> <li><em>1</em><a href="/kejifunen/368274.html" title="聚焦健康元素的可穿戴设备能否撬动大市场？ " target="_blank">聚焦健康元素的可穿戴设备能否撬动大市场？ </a></li> <li><em>2</em><a href="/kejifunen/361249.html" title="VR首轮洗牌后，运动元素能否成为新突破？ " target="_blank">VR首轮洗牌后，运动元素能否成为新突破？ </a></li> <li><em>3</em><a href="/kejifunen/361079.html" title="开发者眼中的微软HoloLens眼镜！交互元素需要添加" target="_blank">开发者眼中的微软HoloLens眼镜！交互元素需要添加</a></li> <li><em>4</em><a href="/kejifunen/359588.html" title="碳纤维元素加身 Find X兰博基尼版完美诠释“超跑精神”" target="_blank">碳纤维元素加身 Find X兰博基尼版完美诠释“超跑精神”</a></li> <li><em>5</em><a href="/kejifunen/359229.html" title="PGI 2018吃鸡世界杯中国元素强势亮相柏林" target="_blank">PGI 2018吃鸡世界杯中国元素强势亮相柏林</a></li> <li><em>6</em><a href="/kejifunen/358968.html" title="将科技元素融入传统的Fossil Q Nate智能手表体验" target="_blank">将科技元素融入传统的Fossil Q Nate智能手表体验</a></li> <li><em>7</em><a href="/kejifunen/354496.html" title="长征七号火箭VR元素让你见识什么是真正的工业4.0" target="_blank">长征七号火箭VR元素让你见识什么是真正的工业4.0</a></li> <li><em>8</em><a href="/kejifunen/353596.html" title="2岁就背元素周期表，90年代斯坦福辍学生造激光雷达PK特斯拉" target="_blank">2岁就背元素周期表，90年代斯坦福辍学生造激光雷达PK特斯拉</a></li> <li><em>9</em><a href="/kejifunen/349310.html" title="如果融入更多跨界元素，AWE2019会不会一席难求？ " target="_blank">如果融入更多跨界元素，AWE2019会不会一席难求？ </a></li> <li><em>10</em><a href="/kejifunen/345344.html" title="洗衣机携手人工智能，未来呈现缺乏新鲜元素的尴尬" target="_blank">洗衣机携手人工智能，未来呈现缺乏新鲜元素的尴尬</a></li> </ul> </div> <div class="r_con"> <div class="r_title">猜你喜欢</div> <ul class="you_like"> <li><em>1</em><a href="/jishutupo/318398.html" title="使用HTML5和JavaScript构建Windows商店应" target="_blank">使用HTML5和JavaScript构建Windows商店应</a></li> <li><em>2</em><a href="/shumafazhan/300921.html" title="Chrome OS 68稳定版发布：引入Material D" target="_blank">Chrome OS 68稳定版发布：引入Material D</a></li> <li><em>3</em><a href="/shumafazhan/300647.html" title="知乎携手中国科普博览会，开启元素之旅，为网友带来值得信赖的化" target="_blank">知乎携手中国科普博览会，开启元素之旅，为网友带来值得信赖的化</a></li> <li><em>4</em><a href="/shumafazhan/299983.html" title="《荒野行动PC Plus》首次曝光：充满中国元素" target="_blank">《荒野行动PC Plus》首次曝光：充满中国元素</a></li> <li><em>5</em><a href="/kejidiedai/298218.html" title="检查data_list中的每个元素是否为列表，并确保所有列表" target="_blank">检查data_list中的每个元素是否为列表，并确保所有列表</a></li> <li><em>6</em><a href="/shumafazhan/298199.html" title="努比亚Z50推出中国红兔年限量版：融入红宝石元素，节日气氛十" target="_blank">努比亚Z50推出中国红兔年限量版：融入红宝石元素，节日气氛十</a></li> <li><em>7</em><a href="/shumafazhan/298125.html" title="Redmi Note 13 Pro+将推出AAPE潮流限量版" target="_blank">Redmi Note 13 Pro+将推出AAPE潮流限量版</a></li> <li><em>8</em><a href="/shujuyingyong/288253.html" title="MongoDB如何实现多层嵌套查询" target="_blank">MongoDB如何实现多层嵌套查询</a></li> <li><em>9</em><a href="/shujuyingyong/288066.html" title="MongoDB中如何高效地查询嵌套文档" target="_blank">MongoDB中如何高效地查询嵌套文档</a></li> <li><em>10</em><a href="/shujuyingyong/287998.html" title="MongoDB如何使用聚合管道统计数组中的元素数量" target="_blank">MongoDB如何使用聚合管道统计数组中的元素数量</a></li> <li><em>11</em><a href="/shujuyingyong/287869.html" title="MongoDB如何高效地查询嵌套对象的属性值" target="_blank">MongoDB如何高效地查询嵌套对象的属性值</a></li> <li><em>12</em><a href="/shujuyingyong/287842.html" title="文档嵌套对mongodb的性能影响分析" target="_blank">文档嵌套对mongodb的性能影响分析</a></li> <li><em>13</em><a href="/shujuyingyong/287742.html" title="MongoDB中如何使用$elemMatch操作符查询嵌套对" target="_blank">MongoDB中如何使用$elemMatch操作符查询嵌套对</a></li> <li><em>14</em><a href="/shujuyingyong/287734.html" title="MongoDB如何优化嵌套数据的存储和查询" target="_blank">MongoDB如何优化嵌套数据的存储和查询</a></li> <li><em>15</em><a href="/shujuyingyong/287667.html" title="如何使用MongoDB查询数组中的第一个元素" target="_blank">如何使用MongoDB查询数组中的第一个元素</a></li> <li><em>16</em><a href="/shujuyingyong/287606.html" title="MongoDB中的嵌套文档：什么是嵌套文档，如何创建和查询它" target="_blank">MongoDB中的嵌套文档：什么是嵌套文档，如何创建和查询它</a></li> <li><em>17</em><a href="/shujuyingyong/287601.html" title="如何使用MongoDB查询数组中的元素" target="_blank">如何使用MongoDB查询数组中的元素</a></li> <li><em>18</em><a href="/shujuyingyong/287236.html" title="MongoDB如何查询数组中的嵌套对象" target="_blank">MongoDB如何查询数组中的嵌套对象</a></li> <li><em>19</em><a href="/shujuyingyong/287163.html" title="MongoDB如何实现数组中的元素匹配查询" target="_blank">MongoDB如何实现数组中的元素匹配查询</a></li> <li><em>20</em><a href="/shujuyingyong/286877.html" title="如何使用MongoDB的$last运算符查询数组的最后一个元" target="_blank">如何使用MongoDB的$last运算符查询数组的最后一个元</a></li> </ul> </div> </div> </div> </div> <div class="related_article"></div> <div class="footer"> <p>Copyright © 2012-2022 程序源版权所有<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">豫ICP备2022028201号</a></p> <p>重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。</p> </div>   </body> </html>