元素嵌套規則

  1. <p>內不能嵌套任何塊級元素,<h1>-<h6>不能嵌套自身和其他<h1>-<h6><dt>不能嵌套自身(嵌套自身顯示網頁效果沒有問題,但在網頁上按"ctrl+shift+c"查看源代碼是有問題的);內聯元素不能嵌套塊級元素,只能包含其他內聯元素;塊元素可以包含內聯元素和某些特定的塊元素。
    <p><div></div></p>—— 錯
    <span><div></div></span> —— 錯
    <div><p></p></div>—— 對
    <div><div><p></p></div></div>—— 對
    <div><h1></h1><p></p></div> —— 對
    <a href=http://www.cnblogs.com/jyybeam/p/"#"> —— 對
    <p><p></p></p>—— 錯
    <h2><h2></h2></h2>—— 錯
    <h2><h3></h3></h2>—— 錯
    <p><h2></h2></p>—— 錯
    <h2><p></p></h2>—— 對
    <dt><dt></dt></dt>—— 錯

  2. 有幾個特殊的塊級元素只能包含內聯元素,不能再包含塊級元素,這幾個特殊的標簽是:
      h1、h2、h3、h4、h5、h6、p、dt。

  • 當輸入<h2><h2></h2></h2>時,瀏覽器出現的html文檔是:<h2></h2><h2></h2>,原本是嵌套的屬于父子關系的標簽成為了2個兄弟標簽。
  • 當輸入<h2><h3></h3></h2>時,瀏覽器出現的html文檔是:<h2></h2><h3></h3>,原本是嵌套的屬于父子關系的標簽成為了2個兄弟標簽。
  • 當輸入<p><p></p></p>時,瀏覽器出現的html文檔是:<p></p><p></p><p></p>,原本是嵌套的屬于父子關系的標簽成為了3個兄弟標簽。
  • 當輸入<p><h2></h2></p>時,瀏覽器出現的html文檔是:<p></p><h2></h2><p></p>
  • 當輸入<dt><dt></dt></dt>時,瀏覽器出現的html文檔是:<dt></dt><dt></dt>
  • 當輸入<h2><p></p></h2>時,瀏覽器出現的html文檔是:<h2><p></p></h2>,是正確的用法。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • HTML4的元素嵌套規則 在我們的印象中會有這樣的嵌套規則: 內聯元素不能嵌套塊元素 元素和 元素不能嵌套塊元素 ...
    zpeople閱讀 1,105評論 0 1
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1 92
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,915評論 18 139
  • 一:在制作一個Web應用或Web站點的過程中,你是如何考慮他的UI、安全性、高性能、SEO、可維護性以及技術因素的...
    Arno_z閱讀 1,212評論 0 1
  • HTML基礎 本文包括 HTML基本知識與結構 HTML常見標簽 標簽寫法與嵌套的討論 HTML、CSS、java...
    廖少少閱讀 2,121評論 2 21