HTML&XHTML 中的 <p>、<div> 和 <span> 有什么区别？

What is the difference between <p>, <div> and <span> in HTML&XHTML?

提问by Dhamu

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

之间有什么区别<p>，<div>和<span>？

Can they be used interchangeably?

它们可以互换使用吗？

Because I am facing problem that, for <span>margin not working but for the <div>and <p>it's working..

因为我现在面临的问题是，对于<span>边缘不工作，但对于<div>和<p>它的工作..

回答by Mr. Alien

pand divelements are block level elements where spanis an inline element and hence margin on span wont work. Alternatively you can make your spana block level element by using CSS display: block;or for spanI would prefer display: inline-block;

p和div元素是块级元素，其中span是内联元素，因此跨度上的边距不起作用。或者，您可以span使用 CSS制作块级元素，display: block;或者span我更喜欢display: inline-block;

Apart from that, these elements have specific semantic meaning, divis better referred for a block of content having different nested elements, pwhich is used for paragraphs, and spanis nothing but an empty element, hence keeping SEO in mind, you need to use right tag for right thing, so for example wrapping the text inside divelement will be less semantic than wrapping it inside a p

除此之外，这些元素具有特定的语义含义，div最好用于具有不同嵌套元素的内容块，p用于段落，并且span只是一个空元素，因此记住SEO，您需要使用正确的标签对于正确的事情，例如将文本包裹在div元素内将比将其包裹在一个p

回答by DavidB

A <p>should contain paragraghs of text, a <div>is to layout your page using divisions and a <span>allows markup to be styled slightly different, for example within a <p>

A<p>应该包含文本段落，a<div>是使用分区来布局您的页面，并且 a<span>允许标记的样式略有不同，例如在<p>

This is how they should be used semantically, the styling of them however using CSSis up to you.

这就是它们在语义上的使用CSS方式，它们的样式如何使用取决于您。

回答by Fujilives

As a web developer, I can't help but feel all these guidelines are incredibly misleading in the year 2015.

作为一名 Web 开发人员，我不禁感到所有这些准则在 2015 年都具有令人难以置信的误导性。

Sure, a "p" tag was at one point designed for paragraph use... but in 100% of my applications, designs, and just day-to-day general development, we've encountered nothing but limitations imposed by the "p" tag... it offers no benefit in today's internet.

当然，“p”标签一度是为段落使用而设计的……但在我 100% 的应用程序、设计和日常一般开发中，我们遇到的只是“p”强加的限制" 标签......它在今天的互联网中没有任何好处。

I would say yes, "p" is a descriptive element, and for that reason if that's all it did; "describe something", I'd be all for it... but it DOESN'T just describe the content, it straight up ALTERS the content, which while already being a limitation in itself, isn't all it does, it also LIMITS the content. Why anyone in their right mind would purposefully embrace a limiting building block when it comes to web development is beyond me. From a design standpoint it doesn't make sense. From a structural standpoint it doesn't make sense. From any from of DOM manipulation PERIOD, it doesn't make sense.

我会说是的，“p”是一个描述性元素，因此如果仅此而已；“描述一些东西”，我会全力以赴......但它不只是描述内容，它直接改变了内容，虽然这本身已经是一个限制，但它并不是全部，它也限制内容。当涉及到 Web 开发时，为什么任何头脑正常的人都会有目的地接受一个限制性的构建块，这超出了我的理解。从设计的角度来看，这是没有意义的。从结构的角度来看，它没有意义。从任何 DOM 操作 PERIOD 来看，它都没有意义。

We've all-together stopped using the "p" tag except where we are absolutely forced to (client word-press post implementations, silly things like that, for example). There is no excuse as to why we can't describe nearly everything with well-named classes and ID's, so we see zero reason to have to bow to "standards" that add no benefit whatsoever, and in fact HINDER every piece of the puzzle. The "p" tag is of no help to the developer, the end-user, nor to modern search engines. In a nutshell... "p" tag is all but deprecated in even remotely complicated implementations (and with very good reason), don't let the comments of these standard's nazi's control how you display your content!

我们已经完全停止使用“p”标签，除非我们绝对被迫（例如，客户端 word-press 发布实现，诸如此类的愚蠢事情）。没有理由解释为什么我们不能用命名良好的类和 ID 来描述几乎所有的东西，所以我们认为必须向没有任何好处的“标准”低头是零理由，事实上，阻碍了每一块拼图. “p”标签对开发人员、最终用户和现代搜索引擎都没有帮助。简而言之......“p”标签在即使是远程复杂的实现中也几乎被弃用（并且有很好的理由），不要让这些标准的纳粹的评论控制你如何显示你的内容！

Even on this very site, a site oriented towards developers at it's core, has at the VERY TOP of it's own page a little pop-in piece that could have used a "p" tag as it contains enough text to run around to a second line, but is entirely captured in a DIV (and only a div, not a div -> p) for a nearly infinite number of reasons... foremost being that today, "p" SUCKS compared to any well described block created from DIVs, that is as-well-described (moreso... I say) as a paragraph "p" with the very descriptive id="blurb".

即使在这个网站上，一个以开发人员为核心的网站，在它自己页面的最顶部也有一个小块，可以使用“p”标签，因为它包含足够的文本来运行一秒钟行，但由于几乎无数的原因，完全被捕获在一个 DIV（并且只有一个 div，而不是一个 div -> p）中......今天最重要的是，与从 DIV 创建的任何描述良好的块相比，“p”很烂，这也被很好地描述（更多……我说）作为一个带有非常描述性的 id="blurb" 的段落“p”。

From Stackoverflow:

来自 Stackoverflow：

<div id="blurb">Stack Overflow is a question and answer site for professional and enthusiast programmers. It&#39;s 100% free, no registration required.</div>

I say down with

我说下来

<p>I suck</p>

and long live

并且万岁

<div class="p">I rock</div>

And yes, I do appreciate our current web standards, and things like still have their place, even offering up abilities to do things with some modern browsers you can't accomplish with a container, but it's just that this one in particular, the broken element "p", as a piece of a restructured and modernized HTML... should have been left in the grave where it belongs... this is a generation of web where paragraphs aren't even paragraphs forever anymore... the blocks literally change... it's just plain outdated and impractical.

是的，我确实很欣赏我们当前的 Web 标准，并且诸如此类的东西仍然占有一席之地，甚至提供了使用某些现代浏览器无法使用容器来完成的事情的能力，但尤其是这一点，已损坏元素“p”，作为重组和现代化 HTML 的一部分……应该留​​在它所属的坟墓中……这是一代网络，段落甚至不再是永远的段落……块从字面上改变......它只是过时和不切实际。

回答by chharvey

As others have answered… divand pare “block elements” (now redefined as Flow Content) and spanis an “inline element” (Phrasing Content). Yes, you may change the default presentation of these elements, but there is a difference between “flow” versus “block”, and “phrasing” versus “inline”.

正如其他人所回答的那样......div并且p是“块元素”（现在重新定义为Flow Content）并且span是一个“内联元素”（短语内容）。是的，您可以更改这些元素的默认呈现方式，但“流”与“块”、“短语”与“内联”之间存在差异。

An element classified as flow contentcan only be used where flow content is expected, and an element classified as phrasing contentcan be used where phrasing content is expected. Since all phrasing content isflow content, a phrasing element can also be used anywhere flow content is expected. The specs provide more detailed info.

归类为流畅内容的元素只能在需要流畅内容的地方使用，归类为短语内容的元素可以在需要短语内容的地方使用。由于所有短语内容都是流内容，因此也可以在任何需要流内容的地方使用短语元素。规格提供了更详细的信息。

All phrasing elements, such as strongand em, can onlycontain other phrasing elements: you can't put a tableinside a citefor instance. Mostflow content such as divand lican contain all types of flow content (as well as phrasing content), but there are a few exceptions: p, pre, and thare examples of non-phrasing flow content (“block elements”) that can onlycontain phrasing content (“inline elements”). And of course there are the normal element restrictions such as dland tableonly being allowed to contain certain elements.

所有短语元素，例如strongand em，只能包含其他短语元素：例如，您不能将 atable放在 acite中。最流的内容，例如div与li可以包含所有类型的流内容的（以及措辞含量），但也有一些例外：p，pre，和th是的非措辞流内容的例子（“块元素”），其可以仅包含措辞内容（“内联元素”）。当然还有正常的元素限制，例如dl并且table只允许包含某些元素。

While both divand pare non-phrasing flow content, the divcan contain other flow content children (including more divs and ps). On the other hand, pmay only contain phrasing content children. That means you can't put a divinside a p, even though both are non-phrasing flow elements.

虽然div和p都是非短语流内容，但div可以包含其他流内容子项（包括更多的divs 和ps）。另一方面，p可能只包含子句内容。这意味着您不能将 adiv放入 a 中p，即使两者都是非短语流元素。

Now here's the kicker. These semantic specifications are unrelated to how the element is displayed. Thus, if you have a divinside a span, you will get a validation error even if you have span {display: block;}and div {display: inline;}in your CSS.

现在是踢球者。这些语义规范与元素的显示方式无关。因此，如果您在 adiv内部有一个span，即使您在 CSS 中有span {display: block;}和，您也会收到验证错误div {display: inline;}。

回答by ose

<p>and <div>are block elements by default. <span>is an inline element.

<p>并且<div>默认是块元素。<span>是一个内联元素。

Block elements start and end with a new line in the browser while inline elements do not. "Inline" means they are part of the current line.

块元素在浏览器中以新行开始和结束，而内联元素则不然。“内联”意味着它们是当前行的一部分。

With today's complex web designs the purpose of these distinctions are less obvious but if you think back to the early days of HTML (where these tags come from) where documents were basically embellished text with images, the distinction becomes clearer.

在当今复杂的网页设计中，这些区别的目的不那么明显，但是如果您回想 HTML 的早期（这些标签的来源）文档基本上是用图像装饰文本，区别就会变得更加清晰。

Either way, with CSS you can override basically any property of a tag. So if you want a <span>to behave like a <div>or a <p>then all you need to do is add:

无论哪种方式，使用 CSS，您基本上都可以覆盖标签的任何属性。所以如果你想让 a<span>表现得像 a<div>或 a<p>那么你需要做的就是添加：

span
{
     display: block;
}

With this code, you will be able to set the vertical margins as well as the horizontal ones.

使用此代码，您将能够设置垂直边距和水平边距。

回答by karthik gorijavolu

1) div element is designed to describe a container of data. div tag can contain other elements---div is Block Level

1) div 元素旨在描述一个数据容器。div标签可以包含其他元素---div是块级

2)p element is designed to describe a paragraph of content---para is Block Level

2）p元素是用来描述一段内容的---para是Block Level

3)span element Usually used for a small chunk of HTML.---span is Inline

3)span元素通常用于一小块HTML。---span是Inline

4)block-level elements begin on new lines, inline elements do not.

4）块级元素从新行开始，行内元素则不然。

5)Most browsers insert a blank line between any two block-level elements. Ex: There will be blank line between para and para and header and para and between two headers,between a paragraph and a list, between a list and a table, etc

5）大多数浏览器在任意两个块级元素之间插入一个空行。例如：para 和para 之间、header 和para 之间、两个header 之间、段落和列表之间、列表和表格之间等都会有空行

回答by Fazlul Karim

I more thought that,pand divelements are block level element on the other side, spanis an inline element. but when you write pin your code it will take space top and bottom but divbehavior not like that. Check out this experiment on JS fiddle:

我更认为，p和div元素是块级元素的另一边，span是内联元素。但是当您编写p代码时，它会占用顶部和底部的空间，但div行为并非如此。在 JS fiddle 上查看这个实验：

https://jsfiddle.net/arifkarim/9wcef1c3/

https://jsfiddle.net/arifkarim/9wcef1c3/