<p>和</p> <div>之间的区别是什么?</div>

时间:2010-02-09 03:29:50

标签: html

&lt; p&gt;之间的区别是什么?和&lt; div&gt;?

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

11 个答案:

答案 0 :(得分:269)

他们有语义差异 - <div>元素用于描述数据容器,而<p>元素用于描述内容段落。

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

您选择标记内容的元素应描述内容。 请勿根据文档的外观标记文档 - 根据文档的内容进行标记。

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

注意: 了解<div><p>都是block-level elements非常重要,这意味着大多数浏览器会将它们视为类似方式。

答案 1 :(得分:57)

所有好的答案,但我还没有看到一个区别,那就是浏览器默认情况下如何渲染它们。主要的Web浏览器将呈现<p>标记,其边距位于段落的上方和下方。 <div>标记将被渲染,没有任何边距。

答案 2 :(得分:55)

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

答案 3 :(得分:8)

两个元素之间的唯一区别是语义。默认情况下,这两个元素都有CSS规则显示:块(因此块级)应用于它们;仅此而已(在某些情况下除了一些额外的余量)。然而,如前所述,它们在语义方面都有很大不同。

<p>元素,正如其名称所暗示的那样,用于段落。因此,当您要创建段落文本块时,应使用<p>

然而,<div>元素在语义上几乎没有意义,因此可以用作通用的块级元素 - 最常见的是,人们在布局中使用它,因为它在语义上没有意义,可以用于通常你可能需要一个块级元素。

Link for more detail

答案 4 :(得分:7)

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

答案 5 :(得分:7)

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

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

答案 6 :(得分:5)

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

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

答案 7 :(得分:3)

&LT; p为H.表示段落和&lt; div&gt;代表一个“分裂”,我想主要区别在于div在语义上是“无意义的”,其中&lt; p&gt;应该代表与文本本身相关的东西。

例如,您不希望嵌套&lt; p&gt; s,因为这不会产生太大的语义意义(除了引号意义),而人们使用嵌套的&lt; div&gt;来进行页面布局。

根据Wikipedia

  

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

答案 8 :(得分:2)

p标记用于段落,通常用于文本。 div标记用于除法,通常用于创建文本部分。

答案 9 :(得分:2)

'p'在语义上通常用于文本,段落。

'div'用于网页中的块或区域。例如,它可以用于制作标题的区域。

可能可能可以互换使用,但你不应该。

答案 10 :(得分:-17)

之前的代码是

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