为什么<p>标记中不能包含<div>标记?


169

据我所知,这是正确的:

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

但这是错误的:

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

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

那其他标签的收容关系又如何呢?


9
因为<p>是一个块级元素,并且(被假定)用于显示文本,所以它不允许在其中包含其他块级元素,而只允许内联元素(例如<span>和)<strong>
Bojangles

22
JamWaffles:这p是一个与块级元素无关的元素。div也是一个,并允许其他块。
乔伊,

可能的重复项:stackoverflow.com/questions/4967976/…(未标记):对此的任何体面回答都将回答如何阅读HTML规范,从而也应对此做出回答。
Ciro Santilli郝海东冠状病六四事件法轮功

将div的样式声明为内联也不起作用。
Triynko 2015年

Answers:


198

查找允许的容纳关系的权威场所是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本身)”。


74
我习惯避免使用规范,因为对于这样的事情,我们拥有最权威的文档,因为它们不好读。+1用于实际阅读,理解并使用它们回答问题。
Stoutie 2012年

3
这对HTML 5仍然有效吗?链接的规范专门引用了HTML 4,而HTML 5没有文档类型定义
Ajedi32

2
@ Ajedi32是的,在这里。HTML5重命名了许多术语,但是“允许的内容:短语内容”的含义与%inline上述含义相同。另请参阅Oriol的答案。
李斯特先生,2016年

@Stoutie对,对,这就是存在Stack Overflow的原因。
Captain Hypertext

69

简而言之,不可能将<div>元素放置<p>在DOM中的a 内,因为开始<div>标记会自动关闭该<p>元素。


2
嗯,这解释了为什么ap内的div之前有一个很大的空间,因为p实际上在div之前结束。
AaronLS 2014年

2
可以div元素放置p 在DOM中的内,例如myP.appendChild(myDiv)。但是HTML解析器不会这样做。
Oriol

1
不要那样做。您不知道在将来的浏览器中它将如何响应。技术在不断变化。可能有一个动态的html解析器将使这一天无效。Web开发人员的目标是创建能够令人满意且具有一定兼容性的事物。如果您可以绕过浏览器允许的功能,可以肯定地说,您不能确保它永远运行。只是使用span家伙...如果需要div,请停止使用p标签。

39

根据HTML5,所述内容模型div元素是流内容

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

其中包括p元素,这些元素只能在需要流量的地方使用

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


然而,内容模型p元素是段落式内容

短语内容是文档的文本,以及在段落内级别标记该文本的元素。段落内容措词方式多样

那不包括div元素,只能在需要流内容的地方使用

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

由于在元素后紧跟一个元素(以及其他元素)时,可以省略元素的end标签ppdiv

<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>放在<p>内,然后将span的显示设置为“ block”,它将被呈现为典型的block元素,而没有这种效果。
安德里·瑙莫维奇

-1

在X HTML之后,约定已被更改,现在它是XML和HTML约定的混合体,因此这就是第二种方法是错误的,并且W3C验证程序接受根据标准和约定的正确内容的原因。


XHTML变化不大。从未允许p元素包含div元素。
昆汀,

-7

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

您可以在document标签中写很多段落,但是不能在段落中写文档。与DOC文件相同。


2
实际上,这是分裂。否则应该是<doc>:D
Kyle

6
优先级不是适用于html元素的概念,并且div表示除法,如@KyleSevenoaks说的:)
SimplGy 2013年

什么是DOC文件?一个微软的Word文件?
彼得·莫滕森
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.