8

例如，在 HTML 4.01 中，

1) 内联元素通常不能包含其他块元素（例如： a<span>或<a>不应该包含任何<div>.）但是这个规则更宽容，因为大多数浏览器不会像下面的规则 2 那样改变 HTML 结构。（现在许多浏览器都会处理标签<div>内的预期结果。）<a>

2)<p>元素不能包含任何<p>元素。如果任何<p>出现在前一个<p>元素关闭之前，那么前一个元素将立即关闭。这个规则似乎更严格，因为它改变了 HTML 文档的结构。

上述规则是否准确，是否有其他规则说明一个元素不能包含其他元素？（作为后代）。

4

3 回答 3

6

你在谈论 HTML5 吗？由于此时该规范应该取代任何其他规范，因此我们将坚持下去。

我不会详细介绍每个单独的元素，但是如果您需要查找某些内容，请参考以下内容：

http://www.w3.org/TR/html5-author/

讨论“内容模型”的部分

元素预期内容的描述

在这里：http ://www.w3.org/TR/html5-author/content-models.html

您可以在特定元素的规范中看到一些示例：

http://www.w3.org/TR/html5-author/the-html-element.html#the-html-element（html元素）：

一个head元素后跟一个body元素。

具体例子

a

我们从第一个链接（在a元素上）得知它的内容模型是透明的，但前提是没有交互式内容后代。

通过查看“透明”的定义，我们看到a它从其父级继承其内容模型。这意味着您的初始定义不正确并且a确实可以包含 a div，但前提是其父级可以。上面的文档甚至包括嵌套“透明”内容模型元素的示例。

由于a不能包含任何“交互内容”模型元素，它根本不能包含button元素。这是有道理的，因为对于哪个元素主动响应点击会有冲突。

span

当我们查看第二个链接时span，我们看到它的内容模型是“短语内容”，它基本上是段落级文本的文本和标记。该定义并不完全具体，但它确实包含一个指南：

大多数被归类为短语内容的元素只能包含本身被归类为短语内容的元素，而不是任何流内容。

由于div没有“短语内容”模型（它是“流内容”），span因此无法包含它。这意味着span应该遵循上述规则，并且只包含任何其他“短语内容”元素和/或嵌入的内容或文本。如果上述规则被打破，它会在元素的“内容模型”描述中专门列出（请记住a关于“交互内容”的元素的特殊规则。） span没有。

br

第三个链接br表示内容模型是“空的”。不幸的是，W3C 没有为此提供具体定义，但我认为这很明显：它根本不能包含后代。甚至没有文本节点。任何“空”内容模型元素都没有结束标记（您可以将其写为<br>not as <br></br>）。

你的问题

上面的规则准确吗？

第一条规则（内联与块）

你说的有误导性。HTML 没有inlinevs.block元素的概念。这些是 CSS 样式。大多数浏览器都有一个元素display样式的默认设置，inline或者block取决于它是分别是“短语”还是“流”内容模型（作为一般规则；没有什么硬性和快速性）或者只是传统的。

如果您想说“短语内容”元素不能包含“流内容”元素，那么您将是正确的，因为那是专门在规范中的。这实际上也有效，因为span不能包含div（如您所示）。

但是，说不a应该包括任何div内容是错误的。 a可以包括div只要它的父母可以。如果a包含在 aspan中，则不能包含div。但是，如果a包含在body或其他div中，它可以。

至于浏览器“宽容”，这对于许多不能花时间创建有效 HTML 的开发人员来说非常方便，但对于我们这些想要花时间的人来说可能是一种痛苦。浏览器通常不会像您所说的那样改变“HTML 结构”——它们改变的是 DOM。还有一点，网络供应商规范与我上面发布的“网络作者”规范有点不同，但我们是作者。

第二条规则（p包含p）

这是真的，因为我遗漏了一个重要的点：Context.

从p元素规范：

可以使用此元素的上下文：
预期流内容的位置。

由于p是“短语内容”，这意味着p不能将另一个放在 a 中，p因为预期的是“短语内容”，而不是“流内容”。

还有其他规则吗？

HTML5 规范包含大量元素，因此我无法在此处详细介绍所有这些细节。我详细介绍了内容span和a内容div，以及p因为您特别提出了这些内容。看看这个答案有多长！

您需要做的是查看您对规范本身有疑问的任何元素。查看上下文和内容模型部分，看看您对元素的使用是否有效。

总之

当您对元素的工作方式有疑问时，请参阅规范。要回答有关如何使用元素（关于其容器和内容）的问题，请查看：

  • 可以使用此元素的上下文：
  • 内容模型：

这告诉你什么可以包含元素，它可以包含什么，以及何时。

如果您对您的 HTML 是否有效有疑问，您可以随时使用非常好的 W3C 标记验证服务：

http://validator.w3.org/

如果您使用的是 Chrome，您可以查看 Chrome Inspector (F12) 并将输出 DOM 与源 HTML 本身进行比较。例如，您会注意到 Chromep在生成 DOM 时会自动关闭嵌套标签。

于 2012-08-21T14:36:35.103 回答
1

关于您的第二条规则（在 HTML 4.01 中），它有点强：P 元素不能包含块级元素（包括 P 本身）。

于 2012-08-21T15:44:18.267 回答
0

根据您编辑的帖子-

<a>现在被视为块级元素，从 html5 开始 - 无论您使用什么标准标记页面，浏览器都可能将元素视为 html5，因此从那里开始工作，而不是向后工作。

<a>不能包含<a>或任何要与之交互的元素（输入/按钮）。 <hX>不能包含或更高的<h_>标签X（就层次结构而言）。即，<h3>不能持有一个<h1>或一个<h2>或一个<h3>

如果你这样写，大纲将关闭大纲，直到它达到适当的层次结构级别。

<h1></h1>
<h2></h2>
<h3></h3>
<h2></h2> // starts a new branch of H2s, in terms of outline


<h1></h1>
<h2></h2>
<h3></h3>
<h1></h1> // closes the entire previous branch and all leaves, and starts a new outline

<ul>并且<ol>只能包含s<li>作为直接后代。 <li>s 可以保存您希望它们保存的任何内容（<li>s 或其他列表节点除外），包括其他有序/无序/定义列表...

...但是<ul>and<ol>元素只能<li>作为它们的第一代子元素。

同样处理<dl>s<dt>和<dd>节点。

其余的大部分要么是常识（不要将元素放在<script>标签、<img>标签、<br>标签、<meta>标签、<legend>标签等中）......要么他们仍然在解决问题（比如figure/figcaption 可以保持正确的格式<picture>，等等）。

于 2012-08-21T15:26:41.190 回答