快上网专注成都网站设计成都网站制作成都网站建设

成都网站建设公司服务热线：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://6mz.cn/article/gopgdc.html">http://6mz.cn/article/gopgdc.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/cjdogs.html">tigase集群配置</a> </li><li> <a href="/article/cjohhs.html">赋能地摊经济，重燃人间烟火</a> </li><li> <a href="/article/cjdoej.html">php中子类如何调用父类的构造方法</a> </li><li> <a href="/article/cjdogc.html">网站SEO优化中怎么可以有效吸引蜘蛛</a> </li><li> <a href="/article/cjdose.html">HDVC进军亚洲市场，中国首个运营中心落地武汉</a> </li> </ul> </div> </div> <footer> <div class="message"> <div class="mess container"> <p>免费获取网站建设与品牌策划方案报价</p> <span>*主要业务范围包括：高端网站建设，集团网站建设(网站建设网站制作)找网站建设公司就上快上网。</span> <form action=""> <input type="text" class="ipt1" placeholder="联系人"> <input type="text" class="ipt2" placeholder="联系电话"> <textarea name="" id="" placeholder="内容描述：描述您的需求，如网站、微信、电商、APP等。"></textarea> <a href="">提交需求</a> </form> </div> </div> <div class="footA"> <div class="footAs container"> <ul> <h3>联系我们</h3> <b>028-86922220</b> <li>手机：13518219792</li> <li>地址：成都市太升南路288号锦天国际A幢1002号</li> <li class="hr1"></li> <li>24小时服务热线：400-028-6601</li> </ul> <ul> <h3>网站建设服务</h3> <li>网页设计</li> <li>网站制作</li> <li>网站开发</li> </ul> <ul> <h3>网站推广服务</h3> <li>营销网站建设</li> <li>百度快速排名</li> <li>整站网站推广</li> </ul> <ul> <h3>网站运维服务</h3> <li>基础维护</li> <li>网站改版</li> <li>网站维护</li> </ul> <ul> <h3>FOLLOW US</h3> <li class="hr2"></li> <li> <dd class="fl"><img src="/Public/Home/img/ewm.png" alt=""><p>微信二维码</p></dd> <dd class="fr"><img src="/Public/Home/img/ewm.png" alt=""><p>微信二维码</p></dd> </li> </ul> </div> <div class="link container"> 友情链接： <a href="http://www.digifinexcn.com/" title="固迪佳新材料" target="_blank">固迪佳新材料</a>   <a href="http://www.swwzsj.com/" title="汕尾凯敏网站" target="_blank">汕尾凯敏网站</a>   <a href="http://www.ncjierui.cn/" title="彭山网站制作" target="_blank">彭山网站制作</a>   <a href="http://www.dmvi.cn/ser/huace/" title="企业画册设计制作" target="_blank">企业画册设计制作</a>   <a href="https://www.cdcxhl.com/ssl/chengdu.html" title="成都ssl证书认证" target="_blank">成都ssl证书认证</a>   <a href="http://m.cdcxhl.cn/dingzhi/ " title="定制网站" target="_blank">定制网站</a>   <a href="http://www.cdhuace.com/faguangzi/wbfgz.html" title="led无边发光字" target="_blank">led无边发光字</a>   <a href="https://www.cdxwcx.com/400/" title="成都400电话申请" target="_blank">成都400电话申请</a>   <a href="https://www.cdxwcx.com/wangzhan/app.html" title="app软件开发" target="_blank">app软件开发</a>   <a href="https://www.cdxwcx.com/jifang/wenjiang.html" title="成都多线机房" target="_blank">成都多线机房</a>    </div> </div> <div class="footB"> <div class="container"> <div class="fl"> Copyright © 2022 成都快上网科技有限公司成都网站建设公司-选网站建设公司快上网！国内专业的网站制作公司！ </div> <div class="fr"> All Rights Reserved 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">蜀ICP备19037934号-11</a> </div> </div> </div> </footer> </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>