重学前端:HTML元素嵌套关系及HTML5内容模型

重学前端系列

HTML元素众多,各种标签相互包裹,或者称之为嵌套都存在一些规则,本文讲述一下常见的html元素嵌套关系。

HTML元素嵌套关系

  • 块级元素可以包含行内元素;
  • 块级元素不一定能包含块级元素:例如p标签里面不能包含注入div之类的块级元素;
  • 行内元素一般不能包含块级元素:例如行内元素span里面不能包含块级元素div,行内元素a可以包含块级元素div

为什么行内元素a可以包含块级元素div

在HTML4和XHTML中规定了行内元素不能包含块级元素,所以按照HTML4和XHTML的规范,a包含div是不合法的。
但是但时主流浏览器都支持a包含块级元素,因为这个使用场景很常见。

在HTML5中对这个做了合法化,HTML5中对元素分类重新做了规定,由HTML4的按默认样式分(行内元素、块级元素、行内块级元素)转变成按元素相似特征分。

每个类别的元素有相似的内容模型,并且它们的内容必须遵照规则。现在主要有7个类别,其实总共有15个类别。

HTML5内容模型

https://html.spec.whatwg.org/multipage/indices.html#element-content-categories
类型 描述
元数据型(Metadata) 设置展示、行为、关联文档,或其他内容的元数据的元素
区块型(Sectioning) 定义区块内容范围的元素
标题型(Heading) 定义区块内容标题的元素
文档流型(Flow) 大部分文档body内的元素
语句型(Phrasing) 文档里的文字,还有在段落内标记这些文字的元素。一系列的语句型内容构成段落。(注意大部分语句型内容只能包含也是语句型内容的元素,不能包含文档流型元素)
内嵌型(Embedded) 在文档引入另一个资源的元素,或者插入文档的另一种语言,比如在HTML文档里的MathML
交互型(Interactive) 专门用于用户交互的元素

这里主要介绍了7个类别,7个类别也没有完全覆盖所有元素的所有情况。例如,元素可能不属于任何一个类别(比如html元素),或者被称为“穿透的”,即它的类别继承自父元素。很多元素属于不止一个类别。在这种情况下,它们被称为有混合内容的模型。

a内容模型

a标签内容模型

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element
https://html.spec.whatwg.org/multipage/dom.html#transparent

上图可以看到atransparent内容模型,transparent是透明的意思,在计算内容模型的时候,这个元素本身不参与计算,也就是计算合法性的时候,a相当于不存在。

下面一个是示例:

<div><a href="">div > a </a></div>
<a href=""><div> a %gt; div </div></a>
<p><a href=""><div> p > a > div </div></a></p>
  • 上面的div>a是合法的;
  • a>div也是合法的;
  • p>a>div是不合法的,计算内容模型时,a不参与计算,此时是p>div,这是不合法的。

p标签

https://html.spec.whatwg.org/multipage/grouping-content.html#grouping-content

从上图可以看出p可包含的元素没有div,当采用这种错误写法时,浏览器的容错机制就会启动,让这段标签变得混乱不堪,具体可以运行上面那段代码,然后检查。

© 版权声明
THE END
请我喝怡宝
点赞0
分享
评论 共1条
    • 人间不值得
    • 思无涯0

      学到了,原来html5元素分类和html4不一样啊。

      6月前回复