028-86922220
建站资讯

网站建设资讯

为你提供网站建设行业资讯、网站优化知识、主机域名邮箱、网站开发常见问题等。
当前位置：首页 - 全部资讯

web前端入门到实战：HTML元素嵌套问题

HTML元素嵌套问题

元素嵌套

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

创新互联不只是一家网站建设的网络公司；我们对营销、技术、服务都有自己独特见解，公司采取“创意+综合+营销”一体化的方式为您提供更专业的服务！我们经历的每一步也许不一定是最完美的，但每一步都有值得深思的意义。我们珍视每一份信任，关注我们的网站制作、做网站质量和服务品质，在得到用户满意的同时，也能得到同行业的专业认可，能够为行业创新发展助力。未来将继续专注于技术创新，服务升级，满足企业一站式营销型网站建设需求，让再小的高端网站设计也能产生价值！

P元素嵌套问题


  

在P元素中嵌套div等块级元素，在浏览器中解析如下：

web前端入门到实战：HTML元素嵌套问题

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

。

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

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

这是一个段落的开始

这是另一个段落的开始
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）

当一个

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

这是一个段落的开始


这是另一个段落的开始

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

。

块级元素嵌套问题

可以先把所有的块元素再次划分成几个级别的，我们已经知道 是在最外层， 下一级里面只会有 、、、</code>，而我们已经知道了可视的元素只会出现在 <code><body></code>里，所以我们把 <code><body></code>划在第一个级里面。接着，把 <code>不可以自由嵌套</code>的元素划在第三个级，其他的就归进第二个级。所谓的不可自由嵌套的元素就是里面只能放内联元素的，它们包括有：标题标记的 <code><h2>、<h3>、<h4>、<h5>、<h6>、<h7>、<caption></code>；段落标记的 <code><p></code>；分隔线 <code><hr></code>和一个特别的元素 <code><dt></code>(它只存在于列表元素 <code><dl></code>的子一级)。</p><p><code>三级元素</code>就是指，只能嵌套内联元素的块级元素。 <code>p</code>也恰好是其中之一。</p><h3>为什么第二级的元素可以自由嵌套</h3><p>我们可以把它们看成是一些容器（或者说是盒子）， 这些容器的大小可以自由变化，例如我们可以把 <code><ul></code>嵌在 <code><div></code>里面，也可以把 <code><div></code>嵌在 <code><li></code>里面。</p><p>在HTML里有几个元素是比较特别的： <code><ul>、<ol>、<dl>、<table></code>，它们的子一层必须是指定元素， <code><ul>、<ol</code>>的子一级必须是 <code><li></code>； <code><dl></code>的子一级必须是 <code><dt></code>或者 <code><dd></code>； <code><table></code>的子一层必须是 <code><caption></code>或 <code><thead>、<tfoot>、<tbody></code>等，而再子一层必须是 <code><tr></code>（ <code><tr></code>只存在于 <code><thead>、<tfoot>、<tbody></code>中），之后才是可放内容的 <code><td></code>或者 <code><th></code>。</p><h3>内联元素</h3><p>其实在内联元素中，还是可以再区分一下的，有几个元素（ <code><img>、<input></code>等）比较特别，它们可以定义宽高。虽然在 <code>IE</code>浏览器里，所有的元素都可以定义宽高，但这是 <code>IE</code>自己的标准，并非所有浏览器都支持， <code>W3C</code>称它们为replaced元素，其实它们也就是我们常说的行内块，虽然这些元素属于inline，但是却具有一定的block（可以设置宽高），我们也可以赋予任何元素css属性display:inline-block。<br/>本身具有inline-block的元素应该没有！</p> <br> 当前题目：web前端入门到实战：HTML元素嵌套问题 <br> 本文来源：<a href="http://whjierui.cn/article/gopgdc.html">http://whjierui.cn/article/gopgdc.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/sijgsp.html">抖音代运营收费五万</a> </li><li> <a href="/article/sijgeg.html">抖音代运营哪些分类</a> </li><li> <a href="/article/sijgep.html">个人短视频运营方案</a> </li><li> <a href="/article/sijgoc.html">抖音房产号代运营介绍内容</a> </li><li> <a href="/article/sijgei.html">抖音探店业务提成怎么算？</a> </li> </ul> </div> </div> <footer> <div class="foot-top"> <ul> <li> <div class="title">关于美图云海</div> <div class="tbox"> <div class="txt"> 美图云海专注于网站建设、小程序开发， <br /> 用心做好每一个网站，懂您所需、做您所想！ <br /> 我们比其他网络公司做的更好、做的更多， <br /> 为客户创造更大的价值，让客户更省心! </div> <a rel="nofollow" href="javascript:;" class="more">MORE</a> </div> </li> <li> <div class="title">相关专题</div> <div class="tbox"> <a href="javascript:;" class="link">企业官网定制</a> <a href="javascript:;" class="link">小程序开发</a> <a href="javascript:;" class="link">品牌网站设计</a> <a href="javascript:;" class="link">网站建设标签</a> <a href="javascript:;" class="link">乐山网站建设</a> <a href="javascript:;" class="link">高端网站设计</a> <a href="javascript:;" class="link">公司做网站</a> </div> </li> <li> <div class="title">凭什么选择我们</div> <div class="tbox"> <a class="link">专业设计团队</a> <a class="link">快速响应服务</a> <a class="link">7个软件著作权</a> <a class="link">已服务3000+客户</a> <a class="link">项目检测具体全面</a> <a class="link">技术研发能力强劲</a> <a class="link">深度符合SEO优化</a> <a class="link">15项设计奖项</a> <a class="link">完善的制作流程</a> <a class="link">售后服务让您省心</a> </div> </li> <li> <div class="title">网站设计案例</div> <div class="tbox"> <ul> <li> <a href="javascript:;" target="_blank"> <div class="img"><img src="/Public/Home/images/gebaili.jpg" alt="哥百利" /> </div> <div class="tboxs"> <div class="t1">哥百利</div> <div class="t2">家具研发、设计、生产、服务为一体的专业实木家具订做企业</div> </div> </a> </li> <li> <a href="javascript:;" target="_blank"> <div class="img"><img src="/Public/Home/images/cdshujin.jpg" alt="蜀锦在线" /></div> <div class="tboxs"> <div class="t1">蜀锦在线</div> <div class="t2">汽车行业网站建设</div> </div> </a> </li> </ul> </div> </li> </ul> </div> <div class="foot-center"> <ul> <li> <div class="f-ewm"><img alt="美图云海微信公众号" src="/Public/Home/images/ewm.jpg" /></div> <div class="tbox ewm"> <div class="t1">扫一扫关注</div> <div class="t2">专业团队为您解答</div> </div> </li> <li> <div class="tbox tel"> <div class="t1">电话/邮箱</div> <div class="t2">400-028-6601 / 028-86922220<br>631063699@qq.com</div> </div> </li> <li> <div class="tbox sz"> <div class="t1">成都（总部）</div> <div class="t2">成华区 双林路22号仁禾商务楼5F<br> 大客户专线：13518219792 </div> </div> </li> <li> <div class="tbox gz"> <div class="t1">网站建设（乐山站）</div> <div class="t2"> 乐山市市中区瑞祥路一段1507号 <br /> 028-86922220 </div> </div> </li> </ul> </div> <div class="foot-button"> <div class="link-box" style="width:100%;float:none;"> <div class="a-box"></div> <div style="border-top:1px solid #ebebeb;font-size:12px;color:#666666;line-height:2;padding-top:20px;margin-top:20px;"> 业务范围包括企业网站建设、商城系统开发、品牌网站设计、旅游网站制作、英文外贸网站、教育培训门户网站开发、微信手机移动端开发、响应式网站建设、微信小程序开发、APP定制和其他类型网站定制等。 <br>服务区域包括成都市锦江区、青羊区、武侯区、金牛区、成华区、龙泉驿、温江、新都、高新区、成都市以及全国各地接受异地服务商的公司企业或者机构。 <br> <div class="a-box"><span><b>友情链接</b></span> <a href="http://www.36103.cn/mobile/" title="成都手机网站开发" target="_blank">成都手机网站开发</a><a href="http://www.qlfdjwx.com/" title="邛崃柴油发电机维修保养公司" target="_blank">邛崃柴油发电机维修保养公司</a><a href="http://www.dmvi.cn/" title="成都广告制作" target="_blank">成都广告制作</a><a href="https://www.cdcxhl.com/idc/cqhx.html" title="重庆电信回兴机房" target="_blank">重庆电信回兴机房</a><a href="http://www.cxjianzhan.com/" title="成都网站建设" target="_blank">成都网站建设</a><a href="https://www.cdcxhl.com/sosuo.html" title="关键词优化排名" target="_blank">关键词优化排名</a><a href="http://www.xjhxgs.com/" title="成都无纺布袋" target="_blank">成都无纺布袋</a><a href="http://m.cdcxhl.cn/qiye/ " title="成都企业网站建设" target="_blank">成都企业网站建设</a><a href="http://www.zywzjz.com/" title="zywzjz.com" target="_blank">zywzjz.com</a><a href="http://seo.cdkjz.cn/yingxiao/" title="网站优化公司" target="_blank">网站优化公司</a> </div> </div> <div class="copyright">&copy;2025 青羊区美图云海设计工作室（个体工商户）乐山站&nbsp;&nbsp; 蜀ICP备19037934号</div> </div> </div> </footer> <div class="fixed-contact-wrap show"> <ul class="item-list clearfix"> <li class="phone"> <a rel="nofollow" target="_blank" href="tel:028-86922220"><i class="icon"></i><strong>028-86922220</strong></a> </li> <li class="qq"> <a rel="nofollow" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes"><i class="icon"></i><strong>&nbsp;244261566</strong></a> </li> <li class="back-top"> <a href="#" rel="nofollow" class="back-to-top"><i class="icon"></i><strong>&nbsp;回到顶部</strong></a> </li> </ul> </div> <script type="text/javascript"> //右侧联系我们悬浮窗 $(".fixed-contact-wrap").hover(function () { $(this).addClass("active"); }, function () { $(this).removeClass("active"); }) function show_phone_menu() { $(".right-side ul").toggle(); } </script> </body> </html> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>