为什么 <p> 标签里面不能包含 <div> 标签？答案

【问题标题】：Why can't the <p> tag contain a <div> tag inside it?为什么 <p> 标签里面不能包含 <div> 标签？
【发布时间】：2012-01-13 22:24:13
【问题描述】：

据我所知，这是对的：

<div>
  <p>some words</p>
</div>

但这是错误的：

<p>
  <div>some words</div>
</p>

第一个可以通过the W3C validator (XHTML 1.0)，但第二个不能。我知道没有人会像第二个那样编写代码。我只是想知道为什么。

那么其他标签的包含关系呢？

【问题讨论】：

因为<p> 是块级元素，并且（应该）用于显示文本，所以它不允许在其中包含其他块级元素，而只允许像<span> 这样的内联元素和<strong>。
JamWaffles：p 是块级元素与它无关。 div 也是一个并且允许其他块。
可能重复：stackoverflow.com/questions/4967976/…（未标记）：任何体面的答案都将回答如何阅读 HTML 规范，因此也回答了这个问题。
将 div 的样式声明为内联也不起作用。

标签： html xhtml

【解决方案1】：

因为div 标记的优先级高于p 标记。 p 标签代表一个段落标签，而div 标签代表一个文档标签。

你可以在一个文档标签中写很多段落，但你不能在一个段落中写一个文档。与 DOC 文件相同。

【讨论】：

【解决方案2】：

简而言之，不可能将<div> 元素放在DOM 中的<p> 中，因为打开的<div> 标签会自动关闭<p> 元素。

【讨论】：

啊，这解释了为什么在 p 中的 div 之前有一个巨大的空间，因为 p 实际上就在 div 之前结束。
您可以将div元素放在p中在DOM中，例如myP.appendChild(myDiv)。但是 HTML 解析器不会这样做。
不要那样做。你不知道这将如何在未来的浏览器中响应。技术在不断变化。可能有一个动态 html 解析器有一天会使其无效。 Web 开发的目标是创建具有可取性和兼容能力的东西。如果您可以绕过浏览器允许的内容，则可以肯定地说您无法确保它会永远工作。只需使用 span 伙计们...如果您需要 div，请停止使用 p 标签。

【解决方案3】：

查找允许的包含关系的权威位置是 HTML 规范。例如，参见http://www.w3.org/TR/html4/sgml/dtd.html。它指定哪些元素是块元素，哪些是内联元素。对于这些列表，请搜索标记为“HTML 内容模型”的部分。

对于P元素，指定如下，表示P元素只允许包含内联元素。

<!ELEMENT P - O (%inline;)*            -- paragraph -->

这与http://www.w3.org/TR/html401/struct/text.html#h-9.3.1一致，表示P元素“不能包含块级元素（包括P本身）。”

【讨论】：

我有一个习惯，避开规范，这是我们拥有的最权威的文件，因为它们读起来并不有趣。 +1 用于实际阅读、理解它们并使用它们来回答问题。
这对 HTML 5 仍然有效吗？链接的规范特别引用了 HTML 4 和 HTML 5 doesn't have a document type definition。
@Ajedi32 是的，here。 HTML5 已经重命名了很多术语，但“允许的内容：短语内容”的含义与上面的 %inline 位相同。另请参阅 Oriol 的回答。
@Stoutie 与你同在，这就是 Stack Overflow 存在的原因。

【解决方案4】：

在 X HTML 之后，约定发生了变化，现在它是 XML 和 HTML 约定的混合，这就是为什么第二种方法是错误的，W3C 验证器接受符合标准的正确事物并约定。

【讨论】：

【解决方案5】：

根据 HTML5，div 元素的 content model 是 flow content

文档和应用程序正文中使用的大多数元素都归类为流内容。

这包括p 元素，其中can only be used 是预期的flow content。

因此，div 元素可以包含p 元素。

短语内容是文档的文本，以及在段落内标记该文本。运行phrasing content 形成paragraphs。

这不包括div 元素，其中can only be used 是预期的flow content。

因此，p 元素不能包含div 元素。

由于p 元素后面紧跟div 元素（以及其他元素）时，p 元素中的end tag 可以省略，因此以下

<p>
  <div>some words</div>
</p>

被解析为

<p></p>
<div>some words</div>
</p>

最后一个</p> 是一个错误。

【讨论】：

但是如果在 CSS 中如果我将 div 设置为内联，为什么它不尊重呢？
由于 CSS 值是在 dom 解析之后应用的......即使我们使 div as inline in CSS 它没有用，因为新的解析结构是 <p>Text</p> <div>some words</div> <p></p> 我的理解是否正确？
@Sanjay 是的，看起来你是对的。而且，在我的观察中，如果你把放在
里面，然后将 span 的显示设置为“块”，它将被渲染为典型的块元素，而没有这种效果。