塊狀元素與內聯(行內)元素的嵌套規則


  如果不按照HTML規則書寫代碼時,瀏覽器就不會正確解析,會將不符合嵌套規則的節點放到目標節點的下面,或者變成純文本。HTML存在許多種類型的標簽,有的標簽下面只允許特定的標簽存在,這就是HTML嵌套規則。

  塊狀元素:一般是其他元素的容器,可容納內聯元素和其他塊狀元素,塊狀元素排斥其他元素與其位於同一行,寬度(width)高度(height)起作用。

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

  內聯元素(行內元素):內聯元素只能容納文本或者其他內聯元素,它允許其他內聯元素與其位於同一行,但寬度(width)高度(height)不起作用。

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

  塊狀元素與內聯(行內)元素的嵌套規則

  1、塊狀元素可包含內聯元素或某些塊元素,但內聯元素不可包含塊元素,只能包含內聯元素。

    <div><h1></h1><p></p></div>     正確

    <a href="#"><span></span></a>    正確

    <span><div></div></span>     錯誤

  2、塊級元素不能放在<p>里面

    <p><ol><li></li></ol></p>    錯誤

    <p><div></div></p>  錯誤

  3、有幾個特殊塊級元素只能包含內聯元素,不能包含塊級元素。這幾個特殊標簽是 h1~h6、p、dt

  4、li 內可包含 div 標簽

    <li><div></div></li>

  5、塊級元素與塊級元素並列、內聯元素與內聯元素並列

    <div><h2></h2><p></p></div>  正確

    <div><a href="#"></a><span></span></div>  正確

    <div><h2></h2><span></span></div>  錯誤

  

  

 

 

 

    


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM