内容类别
大多数 HTML 元素都属于一个或多个内容类别——这些类别将共享共同特征的元素分组。这是一种松散的分类(它实际上并未在这些类别的元素之间建立关系),但它们有助于定义和描述这些类别的共享行为及其相关规则。有些元素(例如 <track>
)可能不属于任何这些类别。
内容类别用于定义元素的内容模型,换句话说,每个元素可以包含哪些后代。例如,<p>
元素只能包含短语内容,而 <div>
元素可以包含流内容。
有七个主要内容类别,可以用下面的维恩图概括
注意: 对这些内容类别及其比较功能的更详细讨论超出了本文的范围;为此,您可能需要阅读 HTML 规范的相关部分。
元数据内容
属于元数据内容类别的元素修改文档其余部分的呈现或行为,设置指向其他文档的链接,或传达其他带外信息。 <head>
中的所有内容,包括 <title>
、<link>
、<script>
、<style>
以及较少使用的 <base>
,都是元数据内容。有一个 <meta>
元素用于无法由这些其他元素表示的元数据。
元数据元素是
其中一些元素属于多个内容类别。例如,<script>
属于元数据、流和短语内容类别,并且是脚本支持元素;<script>
可以在预期元数据内容、短语内容或脚本支持元素的地方使用。
流内容
流内容是一个广泛的类别,它包含大多数可以放入 <body>
元素的元素,包括标题元素、分区元素、短语元素、嵌入元素、交互元素和表单相关元素。它还包括文本节点(但不包括仅由空白字符组成的节点)。
流元素是
<a>
<abbr>
<address>
<article>
<aside>
<audio>
<b>
<bdi>
<bdo>
<blockquote>
<br>
<button>
<canvas>
<cite>
<code>
<data>
<datalist>
<del>
<details>
<dfn>
<dialog>
<div>
<dl>
<em>
<embed>
<fieldset>
<figure>
<footer>
<form>
<h1>
-<h6>
<header>
<hgroup>
<hr>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<main>
<map>
<mark>
<math>
<menu>
<meter>
<nav>
<noscript>
<object>
<ol>
<output>
<p>
<picture>
<pre>
<progress>
<q>
<ruby>
<s>
<samp>
<script>
<search>
<section>
<select>
<slot>
<small>
<span>
<strong>
<sub>
<sup>
<svg>
<table>
<template>
<textarea>
<time>
<u>
<ul>
<var>
<video>
<wbr>
- 自主自定义元素
- 纯文本
少数其他元素属于此类别,但仅在满足特定条件时
分区内容
分区内容是流内容的子集,它在当前大纲中创建了一个节,定义了 <header>
和 <footer>
元素的范围。
分区元素是
标题内容
标题内容是流内容的子集,它定义了一个节的标题。此定义既适用于由显式分区内容元素标记的节,也适用于由标题内容本身隐式定义的节。
标题元素是
注意: 尽管 <header>
很有可能包含标题内容,但它本身并不是标题内容。
短语内容
短语内容是流内容的子集,指的是文档中的文本和标记。短语内容的序列构成段落。
短语元素是
<abbr>
<audio>
<b>
<bdi>
<bdo>
<br>
<button>
<canvas>
<cite>
<code>
<data>
<datalist>
<dfn>
<em>
<embed>
<i>
<iframe>
<img>
<input>
<kbd>
<label>
<mark>
<math>
<meter>
<noscript>
<object>
<output>
<picture>
<progress>
<q>
<ruby>
<s>
<samp>
<script>
<select>
<slot>
<small>
<span>
<strong>
<sub>
<sup>
<svg>
<template>
<textarea>
<time>
<u>
<var>
<video>
<wbr>
- 自主自定义元素
- 纯文本
少数其他元素属于此类别,但仅在满足特定条件时
嵌入内容
嵌入内容是流内容的子集,它导入另一个资源或将来自另一个标记语言或命名空间的内容插入到文档中。
嵌入内容元素是
交互式内容
交互式内容是流内容的子集,包括专门用于用户交互的元素。
交互式内容元素是
某些元素仅在特定条件下属于此类别
可感知内容
可感知内容是既不为空也不隐藏的内容;它是已渲染且实质性的内容。可感知内容不用于定义内容模型,但用于定义一个通用规则:内容模型允许任何流内容或短语内容的元素,其内容中应至少有一个节点是可感知内容,且没有指定 hidden
属性。
可感知元素是
<a>
<abbr>
<address>
<article>
<aside>
<b>
<bdi>
<bdo>
<blockquote>
<button>
<canvas>
<cite>
<code>
<data>
<del>
<details>
<dfn>
<div>
<em>
<embed>
<fieldset>
<footer>
<figure>
<form>
<iframe>
<img>
<ins>
<kbd>
<label>
<main>
<map>
<mark>
<math>
<meter>
<nav>
<object>
<p>
<picture>
<pre>
<progress>
<q>
<ruby>
<s>
<samp>
<search>
<section>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<svg>
<table>
<textarea>
<time>
<u>
<var>
<video>
- 自主自定义元素
- 非元素间 空白字符 的纯文本
某些元素仅在特定条件下属于此类别
脚本支持元素
脚本支持元素是不直接影响文档渲染输出的元素。相反,它们通过直接包含或指定脚本代码,或通过指定将被脚本使用的数据来支持脚本。几乎所有元素,包括那些只接受特定元素(如 <ul>
,它接受 <li>
元素)的元素,都可以包含脚本支持元素。
脚本支持元素是
表单关联内容
表单关联内容是流内容的子集,包含具有表单所有者且可在预期流内容的任何地方使用的元素。表单所有者可以是包含的 <form>
元素,也可以是其 id
在元素的 form
属性中指定的 <form>
。
表单关联元素是
此类别包含几个子类别
- 列出的
-
在
HTMLFormElement.elements
和HTMLFieldSetElement.elements
集合中列出的元素。包括<button>
、<fieldset>
、<input>
、<object>
、<output>
、<select>
和<textarea>
。 - 可提交的
-
当表单提交时可用于构建表单数据集的元素。包括
<button>
、<input>
、<select>
和<textarea>
。 - 可重置的
-
当表单重置时会受影响的元素。包括
<input>
、<output>
、<select>
和<textarea>
。 - 自动大写和自动更正继承的
-
从其表单所有者继承
autocapitalize
和autocorrect
属性的元素。包括<button>
、<fieldset>
、<input>
、<output>
、<select>
和<textarea>
。 - 可标注的
-
可以与
<label>
元素关联的元素。包括<button>
、<input>
(除hidden
外的所有类型)、<meter>
、<output>
、<progress>
、<select>
和<textarea>
。
透明内容模型
如果一个元素具有透明内容模型,那么它的内容必须这样构造,即使透明元素被移除并替换为子元素,它们仍然是有效的 HTML。
<p><del>Shopping</del> <ins>Returns</ins> list</p>
<ul>
<del>
<li>Oranges</li>
<li>Toilet paper</li>
</del>
<li>Toothpaste</li>
</ul>
如果这些元素被移除,这个片段仍然是有效的 HTML(即使英语不正确)。
<p>Shopping Returns list</p>
<ul>
<li>Oranges</li>
<li>Toilet paper</li>
<li>Toothpaste</li>
</ul>