HTML嵌套规则_html/css

参考：

html标签的嵌套规则-慕课网

HTML标签嵌套规则-博客园

WEB标准系列-HTML元素嵌套

块元素：

address、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul等

内联元素：

a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、u、var等

嵌套规则：

块能包含块和内联，内联只能包含内联

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

标题和段落中不能包含块

有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是

h1、h2、h3、h4、h5、h6、p、dt

块与内联不能并列

块级元素与块级元素并列、内嵌元素与内嵌元素并列

注意：

li是块级元素，可以嵌套块级元素（包括ul）。

有些标签是固定的嵌套规则，比如ul包含li、ol包含li、dl包含dt和dd等等。

不可以嵌套自己，自行参考该标签在w3School教程上的实例。 </p> <p class="sycode"> 这里说明一下，虽然可以可以使用display设置block和inline，但以此来定义嵌套关系很显然不严谨。（不知道搜索引擎会不会抓取CSS内容？） </p> <p class="sycode"> </p> <p class="sycode"> <strong>进阶知识</strong> </p> <p class="sycode"> WEB标准系列-HTML元素嵌套 </p> <p class="sycode"> 由于现在自己接触不到HTML5，所以先保留 </p> <p class="sycode"> <strong>嵌套错误可能引起的问题</strong> </p> <p class="sycode"> <li>元素开始与结束标签嵌套错误，页面可以在大部分浏览器被正常解析，IE9会出现解析错误</li> <li>在<p>元素内嵌入<div>等元素造成所有浏览器的解析错误</li> <li>在<h2>~<h6>元素内嵌入<div>等元素所有浏览器可以解析正常</li> <li>在元素内嵌入元素会导致所有浏览器的解析错误（a也不可嵌套button，input等交互元素）</li> <li>在列表元素<li><dt><dd>等插入非列表兄弟元素会导致IE6\IE7的解析错误</li> <p class="sycode"> 其实，这里说解析错误并不是很合理，应该是说浏览器解析出来的结果和我们期望的结果不一致，但 <strong>任何的嵌套错误都不会导致页面呈现有很大的出错。</strong> </p> </p> <p class="sycode"> <strong> </strong> </p> <p class="sycode"> </p> <p class="sycode"> 最后： </p> <p class="sycode"> <strong>虽然我们可以嵌套标签，但是为了提高浏览器的渲染效率，我们应该尽少的嵌套标签，扁平化。</strong> </p> <p class="sycode"> </p> <p class="sycode"> 还有 </p> <p class="sycode"> < ul > </p> <p class="sycode"> < li >< h4 >< a href = "" >< div ></ div ></ a ></ h4 ></ li > </p> <p class="sycode"> </ ul > </p> <p class="sycode"> 以上代码来自Facebook，瞬间觉得自己好牛逼！哈哈。 </div> </div> <script type="text/javascript" src="/layui/layui.js"></script> <script> layui.use('code', function(){ layui.code({ elem: 'pre', //默认值为.layui-code about:false, title:'HTML嵌套规则_html/css_WEB-ITnose代码块', encode: true //是否转义html标签。默认不开启 }); }); </script> <footer class="comm-footer"> <ul class="channels"> <li> <a target="_top" href="/system/">操作系统</a> </li><li> <a target="_top" href="/down/">程序下载</a> </li><li> <a target="_top" href="/jquery/">jquery插件库</a> </li><li> <a target="_top" href="/jiaoben/">编程</a> </li><li> <a target="_top" href="/db/">数据库</a> </li><li> <a target="_top" href="/tools/">在线工具</a> </li><li> <a target="_top" href="/framebook/">框架书籍</a> </li><li> <a target="_top" href="/xitongjiaocheng/">系统教程</a> </li><li> <a target="_top" href="/ruanjianxiazai/">软件下载</a> </li> </ul> <ul class="versions"> <li> <a href="https://m.gxlcms.com" class="active">触屏版</a> </li> <li> <a href="https://www.gxlcms.com" target="_top">电脑版</a> </li> </ul> <p><a href="https://beian.miit.gov.cn/" target="_blank" style="color:#ffffff"></a><script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6c9b8cea1903c9f813f150c04aeebc3c"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script></p> </footer> </body> </html>