Learn-HTML-CSS

Appearance

Return to top
On this page

HTML 元素嵌套关系

  • 块级元素可以包含行内元素
  • 块级元素不一定能包含块级元素
  • "行内元素一般不能包含块级元素"
  • 但是…..什么叫一般

a>div 是否合法？

ts
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>default style</title>
  </head>
  <body>
    <div><a href="#">DIV &gt; A</a></div>  
    <a href="#"><div>A &gt; DIV</div></a>
    <p>
      <a href="#"><div>P &gt; A &gt; DIV</div></a>
    </p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>default style</title>
  </head>
  <body>
    <div><a href="#">DIV &gt; A</a></div>  
    <a href="#"><div>A &gt; DIV</div></a>
    <p>
      <a href="#"><div>P &gt; A &gt; DIV</div></a>
    </p>
  </body>
</html>

HTML4

  • 在 HTML4 中，a 元素是行内元素，而 div 元素是块级元素。
  • 根据 HTML4 的规范，行内元素只能包含其他行内元素或者数据，而块级元素可以包含其他块级元素和行内元素。
  • 将 a 元素设置为 display: inline-block; 属性后，a 元素将同时具有行内元素和块级元素的特性。
  • 按照 HTML4 的话 a 里面包含 div 是不合法的。但是呢，几乎所有的主流浏览器都支持 a 里面包含 div，因为这个场景确实很常见。

HTML5

文档地址：HTML Standard (whatwg.org)

The a element

The p element

  • 在 HTML5 中，a 元素的 content model 为 transparent（透明）属性，意味这个元素本身是不参与计算的。也就是说，你放一个 a 在那里，你去计算它的嵌套，合法性的时候，实际上你就相当于 a 是不存在的。也就是说 a 元素所包含的内容，会继承其父级元素的 content model。

    • 如果 a 元素的父元素是块级元素，那么 a 元素内部的内容也将被解析为块级元素。
    • 如果 a 元素的父元素是行内元素，那么 a 元素内部的内容也将被解析为行内元素。

  • 用上面的按理来说：

    • <div><a href="#">DIV &gt; A</a></div> 这个肯定是合法的

    • <a href="#"><div>A &gt; DIV</div></a>

      • 因为 a 在 HTML 5 中是一个 transparent 元素，那么我们在计算合法性的时候，直接将它去掉。
      • 也就是相当于 body > div。那么，这个当然就是合法的了。

    • <p><a href="#"><div>P &gt; A &gt; DIV</div></a></p>

      • 因为 a 是一个 transparent 透明的，那么我们要把它去掉，之后就是 p > div。
      • 在文档中找到 The p element 的 Content model 是 Phrasing content。
      • 在 phrasing-content 里无法找到 div 元素，也就意味着 p 去包含一个 div 是不合法的，也就是说 p>a>div 是不合法的。

所以浏览器最终会将上面的 HTML 案例解析为

ts
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>default style</title>
  </head>
  <body>
    <div><a href="#" target="_self">DIV &gt; A</a></div>   
    <a href="#" target="_self"><div>A &gt; DIV</div></a>
    <p><a href="#" target="_self"></a></p>
    <div><a href="#" target="_self">P &gt; A &gt; DIV</a></div>
    <p></p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>default style</title>
  </head>
  <body>
    <div><a href="#" target="_self">DIV &gt; A</a></div>   
    <a href="#" target="_self"><div>A &gt; DIV</div></a>
    <p><a href="#" target="_self"></a></p>
    <div><a href="#" target="_self">P &gt; A &gt; DIV</a></div>
    <p></p>
  </body>
</html>

判断元素嵌套是否合法

  1. 使用 The W3C Markup Validation Service 检查 HTML 文档是否符合其规范。
  2. 查阅 Allowed nesting of elements in HTML 4 (and XHTML 1.0) (jkorpela.fi) 和 W3C HTML Standard (whatwg.org) 文档。查找元素的 Categories 和 Content model，然后看被嵌套的元素属不属于它的 Content model。如果属于就可以嵌套，如果不属于就不能嵌套。