<p> 和 <div> 有什么区别？答案

【问题标题】：What is the difference between <p> and <div>?<p> 和 <div> 有什么区别？
【发布时间】：2011-01-14 15:44:34
【问题描述】：

和

有什么区别？

它们可以互换使用吗？有哪些应用？

【问题讨论】：

在任何有效的 HTML/XHTML，transitional 或 strict 中，您不能将
嵌套在另一个

中，因此

和
不能互换。
Byran - 你已经用这些“语义”的答案解决了基本问题。问题在于 HTML 人为地限制了
，因此它们的行为不同。如果它们只是块元素加上语义就可以了。但是为什么要阻止你，例如在段落中嵌入插图？
@117700 你考虑过改变接受的答案吗？
记住<div></div>需要打开和关闭标签，<p>在特定情况下不需要

标签： html

【解决方案1】：

它们有语义的区别 - <div> 元素旨在描述数据容器，而 <p> 元素旨在描述一段内容。

语义决定一切。 HTML 是一种标记语言，这意味着它旨在以对标记使用者有意义的方式“标记”内容。大多数开发人员认为文档的语义是浏览器应用于这些元素的默认样式和呈现，但事实并非如此。

您选择用来标记内容的元素应该描述内容。 不要根据文档的外观来标记您的文档 - 根据它的内容来标记它。

如果您需要一个通用容器~~纯粹出于布局目的~~，请使用<div>。如果您需要一个元素来描述一段内容，请使用<p>。

注意： 重要的是要了解<div> 和<p> 都是block-level elements，这意味着大多数浏览器都会以类似的方式对待它们。

【讨论】：

我的经验是，如果您想以不同于其他内容的方式布局某些内容，则这两者在语义上是不同的，因此应该单独标记无论如何 .如果 OTOH，它们在语义上不是不同的，那么它们可能应该放在一起。在任何一种情况下，都不需要为布局目的添加元素，因为在第一种情况下，它应该从一开始就已经存在，而在第二种情况下，没有进行布局。但话又说回来，我是一个纯粹主义者，我的网站看起来总是回到 1995 年。
当你说“内容段落”使用<p>时，内容必须是字母和单词的形式吗？你会用<p> 来描述其他类型的内容，比如图片吗？
@drs：
的允许内容是“短语内容”，它由混合了普通字符数据的短语元素组成。顺便说一句，图像属于短语元素，因此您可以在

中使用它们。参考：w3.org/TR/html-markup/p.html 和 w3.org/TR/html-markup/common-models.html#common.elem.phrasing。 HTH
你忘了说你不能嵌套 p，而你可以嵌套 div。至于“不要在 html 中包含布局信息”的态度：编写一个 html 文件而不关心它的外观是不可能的。您对 div 的顺序和嵌套的选择总是会产生影响——除非您编写一些 javascript 将您的页面拆分并重新构建它。因此，将 div 视为“纯粹用于布局目的的通用容器”是正确的措辞。

【解决方案2】：

所有好的答案，但我还没有看到一个区别，那就是浏览器默认呈现它们的方式。主要的网络浏览器将呈现一个<p>标签，并在段落上方和下方留有边距。 <div> 标签将被渲染，没有任何边距。

【讨论】：

如果你想控制渲染，你应该使用 CSS。不要依赖浏览器当前的默认设置。
问题询问DIV和P标签之间有什么区别。这对于不使用 CSS 重置的人来说意义重大，尤其是对于只使用一个浏览器的人来说可能并不明显。
感谢您的澄清。我一直在寻找这个确切的区别，因为使用 P 标签导致文本出现在顶部（可能是底部）的边距，所以想知道那个空间来自哪里。需要摆脱空间。
@ceejayoz 保证金？我们怎么能看到呢？
@JAVA 只需编写两个虚拟 .html 文件，第一个是 <div>A</div>B，第二个是 <p>A</p>B，看看区别。

【解决方案3】：

<p>表示段落，有语义。

<div> 只是其他内容的块容器。

任何可以放在<p> 中的东西都可以放在<div> 中，但反之则不然。 <div> 标签可以有块级元素作为子元素。 <p> 元素不能。

看看HTML DTD。

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
<!ENTITY % block
     "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
      BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

<!ENTITY % flow "%block; | %inline;">

<!ELEMENT DIV - - (%flow;)*            -- generic language/style container -->
<!ELEMENT P - O (%inline;)*            -- paragraph -->

【讨论】：

所以你不能在
中有一个

吗？
非常有用的评论。

【解决方案4】：

这两个元素之间的唯一区别是语义。默认情况下，这两个元素都应用了 CSS 规则 display: block（因此是块级）；仅此而已（在某些情况下除了一些额外的保证金）。但是，如前所述，它们在语义方面都存在很大差异。

<p> 元素，顾名思义，用于段落。因此，当您想要创建段落文本块时，应该使用<p>。

然而，<div> 元素在语义上几乎没有意义，因此可以用作通用块级元素——最常见的是，人们在布局中使用它，因为它在语义上没有意义，并且通常可以用于任何事情您可能需要一个块级元素。

Link for more detail

【讨论】：

不需要最后一句话。这个网站上几乎所有的问题都可以用谷歌搜索，但这不是重点。重点是为将来有相同问题的开发人员提供资源。
是的，但他可以开始讨论一些相关信息，任何方式都可以编辑它
既然 p 和 div 都是块元素，为什么 h1 元素嵌套在 div 中时会继承样式，但嵌套在 p 中时不会？谢谢
@Return-1 我不知道在你的情况下到底发生了什么，但 h1 是一个标题，它不是短语内容，因此不允许在段落中.考虑打印文本 - 它包含标题和段落，但标题不是段落的一部分。

【解决方案5】：

DIV 是一个通用块级容器，可以包含任何其他块或内联元素，包括其他 DIV 元素，而P 用于包装段落（文本）。

【讨论】：

【解决方案6】：

最好看看 W3.org 设计的标准。这里是地址：http://www.w3.org/

“DIV”标签可以包裹“P”标签，而“P”标签不能包裹“DIV”标签——目前我知道这个区别。可能还有更多其他差异。

【讨论】：

【解决方案7】：

将DIV 视为一个分组元素。您将元素放在 DIV 元素中，以便您可以设置它们的对齐方式

而"p" 只是创建一个新段落。

【讨论】：

【解决方案8】：

代表一个段落，而

代表一个“分区”，我想主要区别在于 div 在语义上是“无意义的”，而

应该代表与文本本身相关的内容。

例如，您不希望嵌套

，因为这不会产生太大的语义意义（引号除外），而人们使用嵌套的

进行页面布局。

根据Wikipedia

在 HTML 中，span 和 div 元素是在文档的某些部分不能使用的地方使用由其他人在语义上描述 HTML 元素。

【讨论】：

非常有用的评论。

【解决方案9】：

<p> 在语义上用于文本，通常是段落。

<div> 用于网页中的块或区域。例如，它可以用来制作标题的区域。

它们可能可以互换使用，但你不应该。

【讨论】：

【解决方案10】：

p 标签用于段落，通常用于文本。 div 标签用于划分，通常用于创建文本部分。

【讨论】：

【解决方案11】：

除了已经给出的答案之外，还有一个主要区别：

div 可以包含其他 div 元素
p 不能包含另一个 p 元素

这意味着div 可以堆叠，而p 不能！

【讨论】：

【解决方案12】：

之前的代码是

<p class='item'><span class='name'>*Scrambled eggs on crusty Italian ciabatta and bruschetta tomato</span><span class='price'>$12.50</span></p>

所以我必须把它改成

<div class='item'><span class='name'>*Scrambled eggs on crusty Italian ciabatta and bruschetta tomato</span><span class='price'>$12.50</span></div>

这很容易解决。上面代码的CSS是

.item {
    position: relative;
    border: 1px solid green;
    height: 30px;
}

.item .name {
    position: absolute;
    top: 0px;
    left: 0px;
}

.item .price {
    position: absolute;
    right: 0px;
    bottom: 0px;
}

所以 div 标签可以包含其他元素。不应强迫 P 这样做。

【讨论】：

我真的不明白你的意思。 “在站点”：哪个站点？ “……让它工作”：“工作”是什么意思？预期的渲染是什么？
这听起来完全不合逻辑：p 元素可以包含其他内联元素（phrasing elements (see 7.3) 的 HTML 5 规范讨论），其中 span 是其中之一其中，在许多其他人中。此外，这不是对 OP 问题的回答：它没有说明p 和div 之间的区别。请阅读How do comment replies work?
@MarcelKorpel 为什么这是公认的答案呢？没有争议，只是想知道为什么会有不一致。
@Anshul 显然对 OP 有用，但它没有回答问题。还要看这个答案的分数：目前-16。如果您不知道：OP 是唯一可以接受答案的人，而社区中的每个人都可以投票赞成或反对答案。
完美的例子说明为什么在 SX 页面上阅读多个答案是值得的。