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

187

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

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

html

— l --''''''---------''''''''''''
source

31

在任何有效的HTML / XHTML（过渡的或严格的）中，您都不能将<p>嵌套在另一个<p>内，因此<div>和<p>不能互换。

— Byran Zaugg 2010年

3

Byran-您已经用这些“语义”答案触及了基本问题。问题在于HTML人为地限制了<p>，因此它们的行为有所不同。如果它们只是块元素加上语义，那就可以了。但是为什么要阻止您将插图嵌入段落中呢？

— dkretz 2011年

2

@ 117700您是否考虑过更改接受的答案？

— 卡尔·里希特

记住<div></div>需要打开和关闭标签，<p>在特定情况下不需要

— Mark Schultheiss

-26

之前的代码是

<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不应被迫这样做。

— 卡齐·塔·阿桑（Kazi T Ahsan）
source

3

我真的不明白你的意思。“在站点中”：哪个站点？“……使其工作”：“工作”是什么意思？预期的渲染是什么？

— 马塞尔·科佩尔

4

这对我来说听起来完全不合逻辑：p元素可以包含其他内联元素（HTML 5规范措辞元素（请参阅7.3）），其中span之一就是其中之一。而且，这并不是对OP的问题的答案：它并没有说明p和之间的区别div。并请阅读评论回复如何工作？

— 马塞尔·科佩尔

@MarcelKorpel为什么这是公认的答案？没有争议，只是想知道为什么存在不一致。

— Anshul

3

@Anshul显然，某些操作适用于OP，但它无法回答问题。同时查看此答案的分数：-16。如果您不知道：OP是唯一可以接受答案的人，而社区中的每个人都可以上下投票。

— Marcel Korpel '17

仇恨晚了，但是：<p>标签通常包含其他元素，例如<strong>或<em>等。<p>标签的内容应为其名称所暗示的含义：一段文本。文字段落通常包含其他标记。甚至没有任何异常或错误。

— 戴夫牛顿

296

它们具有语义上的差异- <div>元素旨在描述数据容器，而<p>元素旨在描述内容的段落。

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

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

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

注意： 必须了解<div>和<p>都是块级元素，这意味着大多数浏览器将以相似的方式对待它们。

— 安德鲁·黑尔
source

我的经验是，如果您要以与其他内容不同的方式布局某些内容，则这两种内容在语义上是不同的，因此无论如何都应独立进行标记。如果是OTOH，则它们在语义上没有区别，那么可能应该将它们布置在一起。在这两种情况下，都无需出于布局目的而添加元素，因为在第一种情况下，元素应该已经存在，而在第二种情况下，则不进行布局。但是话又说回来，我是一个纯粹主义者，我的网站总是像是回溯到1995

— JörgW Mittag 2010年

5

当您说要<p>用于“内容段落”时，内容是否必须为字母和单词的形式？您是否曾经<p>用来描述其他类型的内容，例如图像？

— 2013年

1

@drs：<p>的允许内容是“短语内容”，它由与常规字符数据混合的短语元素组成。顺便说一句，图像属于短语元素，因此您可以在<p>中使用它们。参考：w3.org/TR/html-markup/p.html和w3.org/TR/html-markup/common-models.html#common.elem.phrasing。HTH

— Paolo

2

您忘了提一下，您不能在嵌套div时嵌套p。至于“不要在html中包含布局信息”这种态度：编写一个html文件时必须先打扰它的外观。您对div的顺序和嵌套的选择始终会产生影响-除非您编写一些JavaScript来撕裂页面并对其进行重组。因此，将div视为“ 纯粹用于布局目的的通用容器”是正确的措辞。

— 2014年

如果我宁愿使用div而不是p怎么办？

— Melab

66

所有的答案都不错，但是我还没有提到其中一个不同之处，那就是浏览器默认情况下的呈现方式。主要的网络浏览器将<p>在段落的上方和下方呈现带有空白的标签。一个<div>标签将在没有任何一切利润率呈现。

— 塞贾约兹
source

10

如果要控制渲染，则应使用CSS。不要依赖浏览器的当前默认值。

— 机械蜗牛

15

问题询问DIV和P标签之间有什么区别。对于不使用CSS重置的任何人来说，这都是一个重要的意义，尤其是对于仅使用一个浏览器的人来说可能并不明显。

— ceejayoz 2011年

3

感谢您的澄清。我一直在寻找这种确切的差异，因为使用P标签会导致文本在顶部（可能在底部）出现空白，因此想知道该空间是从哪里来的。需要摆脱空间。

— WhatsInAName

@ceejayoz保证金？我们怎么看到呢？

— JAVA 2014年

57

<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 -->

— 克莱图斯
source

3

因此，在<p>中不能有<h1>吗？

— Koray Tugay

8

这两个元素之间的唯一区别是语义。默认情况下，两个元素均具有CSS规则显示：块（因此为块级）应用于它们；仅此而已（在某些情况下除外）。但是，如上所述，它们在语义上都存在很大差异。

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

<div>但是，该元素在语义上几乎没有意义，因此可以用作通用的块级元素-最常见的是，人们在布局内使用该元素，因为它在语义上是无意义的，并且通常可用于您可能需要块的任何内容，级别元素。

链接以获取更多详细信息

— 阿什什·阿加瓦尔（Ashish Agarwal）
source

3

不需要最后一句话。该网站上的几乎所有问题都可能会用Google搜索，但这不是重点。关键是将来为有相同问题的开发人员提供资源。

— 尼克

是的，但是他可能会开始讨论一些相关信息，任何方式都可以对其进行编辑

— Ashish Agarwal 2010年

1

由于p和div都是块元素，为什么将h1元素嵌套在div中会继承样式，而嵌套在ap中却不会呢？谢谢

— Return-

@ Return-1我不知道您的情况到底发生了什么，但是h1是标题，它不措词内容，因此不允许在段落内。考虑印刷文本-它包含标题和段落，但标题不是段落的一部分。

— Oskar Berggren

7

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

— bdl
source

7

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

“ DIV”标签可以包装“ P”标签，而“ P”标签不能包装“ DIV”标签-到目前为止，我知道这种区别。可能还有其他差异。

— 纳兹穆尔
source

5

可以将其DIV视为分组元素。您可以将元素放在DIV元素中，以便设置其对齐方式

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

— 苏拉杰·钱德兰
source

3

<p>代表一个段落，而<div>代表一个“除法”，我想主要区别在于div在语义上是“无意义的”，因为<p>应该代表与文本本身有关的东西。

例如，您不希望嵌套<p>，因为这在语义上没有多大意义（引号除外），而人们使用嵌套的<div>进行页面布局。

根据维基百科

在HTML中，span和div元素用于无法通过其他HTML元素语义描述文档部分的位置。

— 乍得·奥克雷（Chad Okere）
source

2

一个p标记是一个段落，通常用于文本。一个div标记是分裂的，一般用于创建文本部分。

— 丹尼尔·怀特
source

2

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

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

它们可能可以互换使用，但您不应该这样。

— vectran
source