---

title:’重新认识HTML系列005——内容模型’

重新认识HTML系列005——内容模型

查看文档

在继续探索下一个全局属性之前，我们先来探索下一个比较重要的东西——内容模型，它是HTML语义化和结构化所依赖的重要特性。

整体认知

每一个HTML元素在设计时其实都是被期望用于某些特定的场景的，就像每个孩子出生时父母都会对孩子的未来充满憧憬，他们可能希望自己的孩子以后是医生，老师，大老板等等，HTML也是这样，设计者设计了那么多的元素，当然是希望它们各司其职，各尽其用。

所以每一个HTML元素都会被期望只用来承载某些特定的内容，所以就有了我们今天要认识的内容模型。

总体上，HTML规范把能够置入HTML元素的所有内容分为了两大类：空内容与非空内容。

空内容

如果一个HTML元素被期望为空内容类型，则意味着：

1. 该元素不能包裹任何文本节点
2. 该元素不应该有任何元素作为其子节点

为了方便起见，一些无内容类型的元素也被归于五大元素类型（空元素、原始文字元素，可避免的原始空文字元素、外来元素、普通元素）中的空元素类型（即非文字内容元素）。

非空内容

对于非空内容类型的元素来说，每个元素都被归类于一个或多个 类中，每一个类都是那些具有相似特征的元素集合。

总共有以下分类：

• 流内容（Flow）
• 元数据内容（Metadata）
• 章节内容（Sectioning）
• 标题内容（Heading）
• 段落内容（Phrasing）
• 嵌入式内容（Embedded）
• 可交互内容（Interactive）

上面的图提现了它们之间的关系：

• 章节内容、标题内容、段落内容、嵌入式内容、可交互内容又全都是流内容的一部分
• 元数据内容的其中一些也是流内容
• 有些元数据内容与可交互内容也是段落内容
• 嵌入式内容又都属于段落内容
• 嵌入式内容有时也是可交互内容

下面我们来依次分别看看它们各自都有哪些特征

元数据内容

元数据内容有三种作用：

• 设置文档其余内容的默认表现和行为，如<base>元素
• 或者设置文档与其他文档间的关系，如引入外部样式表的<link>元素
• 或者是传达额外的信息，如用于搜索引擎识别的<meta>-keywords属性描述

属于这个类别的元素有

base  link  meta  noscript   script  style  template   title

流内容

大多数应用于文档或应用的body标签内的元素都属于流内容，属于这个类别的元素有：

a  abbr  address  area (当它是map的子元素时)  article  aside  audio  b bdi bdo block quote br button canvas cite code data datalist del details dfn dialog div dl emembed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input ins kbd label link (当它被允许在body中使用时) main map mark 'mathml math' menu meta (当设置了itemprop属性时) meter nav noscript object ol output p picture pre progress q ruby s samp script section select slot small span strong sub sup 'svg svg' table template textarea time u ul var video wbr 'autonomous custom elements' text

章节内容

章节内容是位于标题内容和footer元素中间的内容，它与章节的标题和章节的脚部内容共同构成页面中的一个章节——你可以把每个章节都看成是一个主题，这些主题之间有逻辑联系但语义上讲又能相互独立。

每个章节内容通常都有一个标题和一个大纲。

属于这个类别的元素有：

article   aside   nav   section

标题内容

标题内容是一个章节的标题，这个很简单，就不多说了，属于这个类别的元素有：

h1  h2  h3  h4  h5  h6  hgroup

段落内容

段落内容即可以使文档中的文本，也可以是标记内部的段落级别的元素。

大多数段落内容只能包含与它同一个类别的内容，而不是所有的流内容。

在内容模型的上下文语境中，‘文本’意味着要么什么也不是，要么是文本节点。文本有时被用来做它自己的内容模型，有时为段落内容，有时也可能是元素间空白（如果文本节点是空的或者只包含ASCII空白符）

属于这个类别的元素有：

a  abbr  area(如果它是map元素的子节点) audio  b  bdi  bdo br  button  canvas  cite  code  data  datalist  del  dfn  em  embed  i  iframe  img  input  ins  kbd  label  link (if it is allowed in the body)  map  mark  'mathml math'  meta (if the itemprop attribute is present)  meter  noscript  object  output  picture  progress  q  ruby  s  samp  script  select  slot  small  span  strong  sub  sup  'svg svg'  template  textarea  time  u  var  video  wbr  'autonomous custom elements'  text

嵌入式内容

嵌入式内容指的是从其他源导入到文档中的内容，或是从其他语汇表插入到文档中的内容

从其他命名空间（如SVG命名空间、MathML命名空间）中导入或插入的内容可传达额外信息，但它们不是元数据内容。

一些嵌入式内容可以拥有回调内容，这些回调内容可能在外部源中无法使用而在HTML文档里被使用，如果有的话，这些元素会定义回退状态是什么。

属于这个类别的标签有：

audio  canvas  embed  iframe  img  mathml math  object  picture  'svg svg'  video

交互内容

交互内容是可以提供给用户用来与文档进行交互行为的。属于这个类别的有：

* a (当设置了href属性的值)* audio (当配置了controls属性)* button* details* embed* iframe* img (当设置了usemap属性)* input (当其状态不为隐藏时)* label* object (当设置了usemap属性时)* select* textarea* video (当配置了controls属性)

任何元素设置了tabindex属性后，都将属于交互内容（这就是我们为什么要先探索内容模型的缘故了，因为接下来我们就要讲tabindex这个全局属性了）；

可见内容

如果一个元素 允许其中有任何流内容或段落内容，那它至少要包含一个可见内容，这意味着他们的不可以设置为隐藏。当然，这并不是硬性规定。

属于这个类别的我就不列出来了，截个图给大伙看看吧：

支持脚本的元素

支持脚本的元素中的内容将不被渲染入页面，它们仅被用来提供对脚本的支持。这样的元素只有两个：

script  template

所以，这两个元素里的内容将不会出现在浏览器渲染后页面中。

总结

好了，关于内容模型我们就说到这，总得来说，内容模型在实际应用中并不会严格被检查和执行，它只是HTML语义化的要求，但是在这个越来越以人为本的时代，关注语义化也应该成为每个前端开发者具备的基本素质，所以学好内容模型，可以帮助我们在平常构建HTML结构时条理更加清晰，也可以帮助一些人士更好地对WEB内容进行无障碍阅读。