HTML 元素嵌套关系

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

a>div 是否合法？

<!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>  // [!code focus:5]
    <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

Categories:

Flow content.

Phrasing content.

If the element has an href attribute: Interactive content.

Palpable content.

Content model:

Transparent, but there must be no interactive content descendant, a element descendant, or descendant with the tabindex attribute specified.

The p element

Categories:

Flow content.

Palpable content.

Content model:

Phrasing content.

在 HTML5 中，a 元素的 content model 为 transparent（透明）属性，意味这个元素本身是不参与计算的。也就是说，你放一个 a 在那里，你去计算它的嵌套，合法性的时候，实际上你就相当于 a 是不存在的。也就是说 a 元素所包含的内容，会继承其父级元素的 content model。
- ~~如果 a 元素的父元素是块级元素，那么 a 元素内部的内容也将被解析为块级元素。~~
- ~~如果 a 元素的父元素是行内元素，那么 a 元素内部的内容也将被解析为行内元素。~~
用上面的按理来说：
- <div><a href="#">DIV > A</a></div> 这个肯定是合法的
- <a href="#"><div>A > DIV</div></a>
  - 因为 a 在 HTML 5 中是一个 transparent 元素，那么我们在计算合法性的时候，直接将它去掉。
  - 也就是相当于 body > div。那么，这个当然就是合法的了。
- <p><a href="#"><div>P > A > DIV</div></a></p>
  - 因为 a 是一个 transparent 透明的，那么我们要把它去掉，之后就是 p > div。
  - 在文档中找到 The p element 的 Content model 是 Phrasing content。
  - 在 phrasing-content 里无法找到 div 元素，也就意味着 p 去包含一个 div 是不合法的，也就是说 p>a>div 是不合法的。

所以浏览器最终会将上面的 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>   // [!code focus:5]
    <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>

判断元素嵌套是否合法

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