Html <p> 和 <div> 有什么区别?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2226562/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 02:08:57  来源:igfitidea点击:

What is the difference between <p> and <div>?

html

提问by l--''''''---------''''''''''''

What is the difference between <p> and <div>?

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

Can they be used interchangeably? What are the applications?

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

采纳答案by Kazi T Ahsan

The previous code was

之前的代码是

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

So I have to changed it to

所以我必须把它改成

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

It was the easy fix. And the CSS for the above code is

这是一个简单的修复。上面代码的 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;
}

So div tag can contain other elements. P should not be forced to do that.

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

回答by Andrew Hare

They have semanticdifference - a <div>element is designed to describe a container of data whereas a <p>element is designed to describe a paragraph of content.

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

The semantics make all the difference. HTML is a markup language which means that it is designed to "mark up" content in a way that is meaningful to the consumer of the markup. Most developers believe that the semantics of the document are the default styles and rendering that browsers apply to these elements but that is not the case.

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

The elements that you choose to mark up your content should describethe content. Don't mark up your document based on how it should look - mark it up based on what it is.

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

If you need a generic container purely for layout purposesthen use a <div>. If you need an element to describe a paragraph of content then use a <p>.

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

Note:It is important to understand that both <div>and <p>are block-level elementswhich means that most browsers will treat them in a similar fashion.

注意:重要的是要理解<div><p>都是块级元素,这意味着大多数浏览器会以类似的方式对待它们。

回答by ceejayoz

All good answers, but there's one difference I haven't seen mentioned yet, and that's how browsers render them by default. The major web browsers will render a <p>tag with margin above and below the paragraph. A <div>tag will be rendered without any margin at all.

所有好的答案,但有一个我还没有看到提到的区别,那就是浏览器默认呈现它们的方式。主要的 Web 浏览器将<p>在段落上方和下方呈现带有边距的标签。一个<div>标签将在没有任何一切利润率呈现。

回答by cletus

<p>indicates a paragraph and has semantic meaning.

<p>表示一个段落并具有语义意义。

<div>is simply a block container for other content.

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

Anything that can go in a <p>can go in a <div>but the reverse is not true. <div>tags can have block-level elements as children. <p>elements cannot.

任何可以进入 a 的东西都<p>可以进入 a,<div>但反之则不然。<div>标签可以有块级元素作为子元素。<p>元素不能。

Tae a look at the HTML DTD.

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

回答by Ashish Agarwal

The only difference between the two elements is semantics. Both elements, by default, have the CSS rule display: block (hence block-level) applied to them; nothing more (except somewhat extra margin in some instances). However, as aforementioned, they both different greatly in terms of semantics.

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

The <p>element, as its name somewhat implies, is for paragraphs. Thus, <p>should be used when you want to create blocks of paragraph text.

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

The <div>element, however, has little to no meaning semantically and therefore can be used as a generic block-level element — most commonly, people use it within layouts because it is meaningless semantically and can be used for generally anything you might require a block-level element for.

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

Link for more detail

链接了解更多详情

回答by Nazmul

It might be better to see the standard designed by W3.org. Here is the address: http://www.w3.org/

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

A "DIV" tag can wrap "P" tag whereas, a "P" tag can not wrap "DIV" tag-so far I know this difference. There may be more other differences.

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

回答by bdl

DIVis a generic block level container that can contain any other block or inline elements, including other DIV elements, whereas Pis to wrap paragraphs (text).

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

回答by Suraj Chandran

Think of DIVas a grouping element. You put elements in a DIV element so that you can set their alignments

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

Whereas "p"is simply to create a new paragraph.

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

回答by Chad Okere

<p> represents a paragraph and <div> represents a 'division', I suppose the main difference is that divs are semantically 'meaningless', where as a <p> is supposed to represent something relating to the text itself.

<p> 代表一个段落,<div> 代表一个“分部”,我想主要区别在于 div 在语义上是“无意义的”,而 <p> 应该代表与文本本身相关的东西。

You wouldn't want to have nested <p>s for example, since that wouldn't make much semantic sense (except in the sense of quotations) Whereas people use nested <div>s for page layout.

例如,您不希望嵌套 <p> ,因为这没有太多语义意义(除了引号的意义),而人们使用嵌套 <div> 进行页面布局。

According to Wikipedia

根据维基百科

In HTML, the span and div elements are used where parts of a document cannot be semantically described by other HTML elements.

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

回答by Daniel A. White

A ptag is for a paragraph, generally used for text. A divtag is for division, and generally used for creating sections of text.

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

回答by vectran

<p>is semantically used for text, paragraphs usually.

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

<div>is used for a block or area in a webpage. For example it could be used to make the area of a header.

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

They could probablybe used interchangeably, but you shouldn't.

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