在HTML中,哪个元素不能包含其他一些特定元素?

时间:2012-08-21 14:31:11

标签: html

例如,在HTML 4.01中,

1)内联元素通常不能包含其他块元素(例如:<span><a>不应包含任何<div>。)但是这条规则比大多数浏览器更宽容不会像下面的规则2那样改变HTML结构。 (现在很多浏览器都会处理<div>标记内<a>所需的结果。)

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

上面的规则是否准确,是否有其他规则说明元素不能包含其他元素? (作为后代)。

3 个答案:

答案 0 :(得分:6)

你在谈论HTML5吗?由于该规范在此时应该取代任何其他规范,我们将坚持这一点。

我不打算浏览每个单独的元素,但如果你需要查看一些内容,请参考以下内容:

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

讨论&#34;内容模型&#34;

的部分
  

元素预期内容的描述

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

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

http://www.w3.org/TR/html5-author/the-html-element.html#the-html-elementhtml元素):

  

head元素后跟body元素。

具体例子

a

我们从第一个链接(在a元素上)了解到其内容模型为Transparent,但前提是没有Interactive Content后代。

通过查看&#34;透明的定义,&#34;我们看到a从其父级继承其内容模型。这意味着您的初始定义不正确,a确实可以包含div,但前提是它的父级可以。上面的文档甚至包括一个嵌套&#34; Transparent&#34;内容模型元素。

由于a不能包含任何&#34;互动内容&#34;模型元素,它根本不能包含button元素。这是有道理的,因为哪个元素主动响应点击会产生冲突。

span

当我们查看第二个链接span时,我们会看到其内容模型是&#34; Phrasing Content,&#34;这基本上是段落级文本的文本和标记。该定义并非完全具体,但确实包括一个准则:

  

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

由于div没有&#34; Phrasing Content&#34; model(&#39; s&#34; Flow Content,&#34;)span不能包含它。这意味着span应遵循上述规则,并且只包含任何其他&#34; Phrasing Content&#34;元素和/或嵌入内容或文本。如果上述规则被破坏,它将特别列在&#34;内容模型&#34;元素的描述(请记住a元素关于&#34;互动内容的特殊规则。&#34;)span没有。

br

第三个链接br表示内容模型为#34;空。&#34;不幸的是,W3C并未包含具体的定义,但我认为它相当明显:它根本不包含任何后代。甚至不是文本节点。任何&#34;空&#34;内容模型元素没有结束标记(您将其标记为<br>而不是<br></br>)。

您的问题

上述规则是否准确?

第一条规则(内联与阻止)

你所说的是误导。 HTML没有inlineblock元素的概念。这些是CSS样式。大多数浏览器都将元素的display样式的默认设置设置为inlineblock,具体取决于它是否为&#34; Phrasing&#34;或&#34; Flow&#34;内容模型分别(作为一般规则;没有什么是硬性和快速的)或传统上。

如果你想说&#34; Phrasing Content&#34;元素不能包含&#34;流内容&#34;元素然后你会是正确的,因为这是在规范中具体。这也很有效,因为span不能包含div(如您所示)。

但是,说a不应包含任何div是错误的。只要父母可以,a就可以包含div。如果a中包含span,则其不能包含div。但是,如果a或其他body中包含div,则可以。{/ p>

至于浏览器&#34;宽恕,&#34;对于那些无法花时间创建有效HTML的开发人员来说,这一切都非常方便,但对于我们这些想要花时间的人来说,这可能会很麻烦。浏览器通常不会改变HTML结构&#34;正如你所说 - 他们改变的是DOM。此外,Web供应商规范的节点与&#34; Web作者&#34;略有不同。我上面发布的规范,但我们是作者

第二条规则(p包含p

这是正确的,因为我遗漏了一个重点:Context

From the p element spec:

  

可以使用此元素的上下文:
     在哪里有流量内容。

由于p是&#34; Phrasing Content,&#34;这意味着另一个p不能放在p内,因为&#34; Phrasing Content&#34;预期,而不是&#34;流动内容。&#34;

任何其他规则?

HTML5规范有很多元素,所以我不能在这里详细介绍所有这些细节。我详细了解了spana内容与div以及p的内容,因为您专门提到了这些内容。看看这个答案有多长!

您需要做的是查看您在规范中遇到的任何问题。查看 上下文 内容模型 部分,了解您对该元素的使用是否有效

摘要

如果您对元素的工作方式有疑问,请参阅规范。要回答有关如何使用元素(关于其容器和内容)的问题,请查看:

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

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

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

http://validator.w3.org/

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

答案 1 :(得分:1)

关于你的第二条规则(在HTML 4.01中),它有点强大:a P element cannot contain block-level elements (including P itself)

答案 2 :(得分: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>可以 包含<li>作为直接后代<li>可以保存您想要的任何内容(<li>或其他列表节点除外),包括其他有序/无序/定义列表......

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

<dl><dt>个节点的<dd>相同。

其余大部分都是常识性的(不要将元素放在<script>标记中,<img>标记,<br>标记,<meta>标记,{ {1}}标签,等等)... ...或者他们仍然在解决问题(比如数字/ figcaption可以容纳的内容以及<legend>等的正确格式。)