HTML元素分类与嵌套

如果你了解一些前端知识，当提起 html 元素的分类，你可能立即就会想到块级元素、内联元素等等，很多基础前端岗位的面试也会问到相关的题目，虽说这样分类没有错误，只是不够严谨，但如果我告诉你，block（块级）、inline（内联）等等这些其实是 css 术语，元素本身并没有一定是 block 或 inline，最新的 html5 规范中对元素的分类也与之大相径庭，是否能让你重新审视元素分类。

W3C在最新的HTML5规范中对元素的分类方式

（引用自https://www.w3.org/TR/html/dom.html）

如上图，元素的分类方式遵循如下分类规则： 
Flow（流式元素）、Heading（标题元素）、Sectioning（章节元素）、Phrasing（段落元素）、Embedded（嵌入元素）、Interactive（交互元素）、Metadata（元数据元素）。

• Flow（流式元素） 
  在应用程序和文档的主体部分中使用的大部分元素都被分类为流式元素。

  a， abbr， address， area（如果它是map元素的后裔）， article， aside， audio， b， bdi， bdo， blockquote， br， button， canvas， cite， code， command， datalist， del， details， dfn， div， dl，em， embed， fieldset， figure， footer， form， h1， h2， h3， h4， h5， h6， header， hgroup， hr， i， iframe， img， input， ins， kbd， keygen， label， map， mark， math， menu， meter，nav， noscript， object， ol， output， p， pre， progress， q， ruby， s， samp， script， section， select， small， span， strong， style（如果该元素设置了scoped属性）， sub， sup， svg， table，textarea， time， u， ul， var， video， wbr， text

• Heading（标题元素） 
  标题式元素定义一个区块/章节（section）（无论是明确的使用章节式内容的元素标记，或者标题式内容自身所隐含的）的标题。

  h1， h2， h3， h4， h5， h6

• Sectioning（章节元素） 
  章节式元素是用于定义标题及页脚范围的元素。

  article， aside， nav， section

• Phrasing（段落元素） 
  段落式元素是文档中的文本、标记段落级文本的元素。

  a（如果其只包含段落式元素）， abbr， area（如果它是map元素的后裔）， audio， b， bdi， bdo， br， button， canvas， cite， code， command， datalist， del（如果其只包含段落式元素）， dfn， em， embed， i，iframe， img， input， ins（如果其只包含段落式元素）， kbd， keygen， label， map（如果其只包含段落式元素）， mark， math， meter， noscript， object， output， progress， q， ruby， s， samp， script，select， small， span， strong， sub， sup， svg， textarea， time， u， var， video， wbr， text

• Embedded（嵌入元素） 
  嵌入式元素是引用或插入到文档中其他资源的元素。

  audio， canvas， embed， iframe， img， math， object， svg， video

• Interactive（交互元素） 
  交互式元素是专门用于与用户交互的元素。

  a， audio（如果设置了controls属性）， button， details， embed， iframe， img（如果设置了usemap属性）， input（如果type属性不为hidden状态）， keygen， label， menu（如果type属性为toolbar状态），object（如果设置了usemap属性）， select， textarea， video（如果设置了controls属性）

• Metadata（元数据元素） 
  元数据元素是可以被用于说明其他内容的表现或行为，或者在当前文档和其他文档之间建立联系的元素。

  base，command，link，meta，noscript，script，style，title

各元素分类会有交叉或重叠的现象，这说明在html5中，元素可能属于上述所有分类中的一个或多个。

html5中为每个元素会规定如下三项：

• Categories（规定元素本身的分类）

• Contexts in which this element can be used（规定了可以使用此元素的上下文）

• Content model（规定了合法的元素的内容（子元素、文本等）类型。）

我们以a元素为例，在w3.org中，a 元素是这样规定的：

The a element

• Categories: 
  

• Flow content.

• Phrasing content.

• If the element has an href attribute: Interactive content.

• Palpable content.

• Contexts in which this element can be used: 
  

• Where phrasing content is expected.

• Content model: 
  

• Transparent, but there must be no interactive content or a element descendants.

• Transparent Some elements are described as transparent; they have “transparent” in the description of their content model. The content model of a transparent element is derived from the content model of its parent element: the elements required in the part of the content model that is “transparent” are the same elements as required in the part of the content model of the parent of the transparent element in which the transparent element finds itself. 

引用自https://www.w3.org/TR/html/dom.html

简单的翻译过来就是：

a 元素

• 分类：a 元素属于流式元素、段落元素、交互元素（当它有 href 属性时）以及可感知元素。

• 父元素：父元素必须是那些子元素为段落式元素的元素。

• 子元素：a 元素的内容模型是 Transparent，允许的子元素是以它的父元素允许的子元素为准，但不能包含交互式元素（Transparent：简单来说就是这类元素本身内部可以有任何类型的内容，是否合法要看其父元素的 Content model 和其内容的 Categories。）。

通过分析元素的这几个规定属性，我们可以很容易的去判断元素的嵌套是否合法。

判断 p > a > div 是否合法，过程是这样的： 

1. p 元素的 content model 是 phrasing content，a本身属于 phrasing content 故可以嵌套； 

2. a 元素的 content model 是 transparent，故此时里面包含 div的合法性向上传递，变成检查 p > div； 

3. div 不属于 phrasing content，所以这个嵌套是不合法的。 

了解最新的 html5 标准、利用新的特性，有助于我们写出更高效、更合理的代码。

本篇文章来源于微信公众号: TripDesign