logo标签列表

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

html
47

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

它们可以互换使用吗？

因为我遇到了问题，<span> 的 margin 不起作用，但是对于 <div> 和 <p> 是有效的。

7个回答
67

p和div元素是块级元素，而span是行内元素，因此对的边距不起作用。您可以通过使用CSS display: block;将变成块级元素，或者对于我更喜欢使用display: inline-block;

除此之外，这些元素具有特定的语义意义，div更适合用于具有不同嵌套元素的内容块，p用于段落，span仅是一个空元素，因此需要考虑SEO，您需要为正确的内容使用正确的标记，所以例如将文本包装在

元素中比将其包装在

元素中语义上更少。

4
对于初级开发人员来说，“而 span 元素无非就是一个空元素”可能有点困惑。这听起来好像你不能在 span 中添加文本。 - Broda Noel
23

<p>应该包含文本段落，<div>用于使用分区布局页面，<span>允许标记略微不同样式，例如在<p>中。

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

15
作为一个Web开发者，在2015年，我不禁觉得所有这些指南都是极其误导人的。 当然，“p”标签曾经是为段落使用而设计的......但在我的所有应用程序、设计和日常一般开发中，我们遇到的只有“p”标签强加的限制......它在今天的互联网上没有任何好处。 我会说是的，“p”是一个描述性元素，因此如果它只是“描述某件事情”，我全力支持它......但是它并不仅仅描述内容，它直接改变内容，尽管这已经是一个限制，但这并不是所有它所做的事情，它还限制了内容。为什么有理智的人在进行Web开发时会故意拥抱限制性的构建块，这对我来说是超出了我的理解范畴。从设计的角度来看，这毫无意义。从结构的角度来看，这毫无意义。从任何形式的DOM操作角度来看，这都毫无意义。 除非我们绝对被迫使用“p”标签（例如客户WordPress帖子实现等愚蠢的事情），否则我们完全停止使用“p”标签。没有任何借口可以解释为什么我们不能用良好命名的类和ID来描述几乎所有内容，因此我们看不到任何理由必须遵循“标准”，这些标准没有任何好处，实际上阻碍了每个部分的开发。 “p”标签对开发者、最终用户和现代搜索引擎都没有帮助。简而言之，“p”标签在任何稍微复杂的实现中都已经被弃用（并且有非常好的原因），不要让这些标准纳粹的评论控制您如何显示您的内容！ 即使在这个面向开发者的网站上，它的核心是开发人员，其自己的页面顶部也有一个小弹出窗口，该弹出窗口可能需要使用“p”标签，因为它包含足够的文本以围绕第二行运行，但却完全被DIV所捕获（只有一个div，而不是一个div -> p），原因有无数个......首要的原因是今天，“p”与从DIV创建的任何良好描述块相比是狗屎一样的，其具有非常描述性的id="blurb"。（来自Stack Overflow）
<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>

我说反对

<p>I suck</p>

长命百岁

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

是的，我很欣赏我们当前的网络标准，像<span>这样的东西仍然有它们的用处，甚至提供了一些现代浏览器无法使用<div>容器实现的功能，但正是这个经常出问题的元素“p”，作为一个重组和现代化HTML的一部分...应该被留在属于它的坟墓中...这是一个段落不再永远是段落的网络时代...区块真的在变化...这只是过时和不切实际。

17
老实说，像 <div class="p"></div> 这样的东西对我来说没有意义。 - Mr. Alien
11
“在今天的互联网上，它没有任何好处。” — 不正确：辅助技术知道<p>和<div>的区别，即使用户不能分辨。“标准根本没有任何好处。” — 我建议您加强对无障碍知识的了解。只是出于好奇，<p>有什么“限制”？您只是明确表示了它如何“限制”内容（不管那意味着什么），以及它“没有意义”。你可以更具体地说明一下吗？ - chharvey
通过将div分配一个p类，您可以应用在主CSS文件中定义的全局CSS规则.p{}。这将使您能够自定义p标签的定义，但会牺牲那些专门处理这些标签的辅助技术的效果。 - Nicholas Gentile
10

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

被分类为流内容的元素只能在期望流内容的地方使用，而被分类为短语内容的元素可以在期望短语内容的地方使用。由于所有短语内容都是流内容，因此短语元素也可以在任何期望流内容的地方使用。 规范提供了更详细的信息。

所有短语元素，例如strong和em，只能包含其他短语元素：例如，您不能将table放在cite中。 大多数流内容，例如div和li，可以包含所有类型的流内容（以及短语内容），但是有一些例外：例如，p、pre和th是非短语流内容（“块元素”），只能包含短语内容（“内联元素”）。当然还有一些普通的元素限制，例如dl和table只允许包含特定的元素。

虽然 div 和 p 都是非语序流内容，但是 div 可以包含其他流内容子元素（包括更多的 div 和 p）。另一方面，p 只能包含语序内容子元素。这意味着你不能把一个 div 放在 p 里面，即使两者都是非语序流元素。

现在，事情变得有趣了。这些语义规范与元素的显示方式无关。因此，如果你在 span 中放置一个 div，即使你在 CSS 中设置了 span {display: block;} 和 div {display: inline;}，你也会收到验证错误。

感谢您教我“p、pre和th是非短语流内容（“块元素”）的示例，它们只能包含短语内容（“内联元素”）”。 - Jeroen Wiert Pluimers
5

<p>和<div>是默认的块级元素。而<span>是内联元素。

块级元素在浏览器中以新行开头和结尾，而内联元素不会。 "内联"意味着它们是当前行的一部分。

随着今天复杂的网页设计，这些区别的目的变得不那么明显，但如果您回想一下HTML的早期（这些标记来自哪里）时代，那时的文档基本上是带有图像的修饰文本，这种区别变得更加清晰。

无论如何，使用CSS，您可以覆盖标签的基本任何属性。因此，如果您想让一个<span>表现得像一个<div>或一个<p>，您只需要添加：

span
{
     display: block;
}

使用这段代码，您将能够设置垂直边距和水平边距。
我不喜欢这个答案，因为你鼓励了错误使用标签的行为。 - DavidB
我并不鼓励任何人错误地使用标签，只是回答了OP的问题，为什么边距不起作用。我的答案可以推广到其他标签，因此具有合法的目的 - 教授块和内联之间的区别。 - ose
你说的是使用CSS可以让一个span表现得像一个div或者p的部分。你认为仅使用spans来构建整个页面是好的Web实践吗？ - DavidB
显然不是这样的...为了澄清：我从来没有建议过使用span完全创建一个网页。CSS可以覆盖标签的基本属性，这就是CSS的作用。“如果你想让一个span像div或p一样行事。”“如果”——也就是说，你需要有一个很好的理由这样做。如果你有一个很好的理由这样做，那么我说去做吧。我并不自命知道其他人可能会遇到的每种情况，这需要做某些事情。我只是指出了一种可以使用的工具，并将其负责任的使用留给用户。 - ose
2
好的，也许这样表述更好一些。“我不喜欢这个答案，因为你没有阻止错误标签的使用，也没有提到标签语义化使用的重要性，而对于初学者来说，这比让一个span像div一样工作更重要。” - DavidB
@DavidB 一个 span 无法像 div 一样运作（无论如何进行样式设置），因为 span 无法像 div 那样包含流内容。即使 span 具有 display: block;，它们也只能包含短语内容。 - chharvey
2

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

2) p元素用于描述内容段落---para是块级元素

3) span元素通常用于小块的HTML。---span是内联元素

4) 块级元素在新行上开始， 内联元素则不会。

5) 大多数浏览器在任何两个块级元素之间插入一个空行。 例如: 在段落和段落、标题和段落以及两个标题之间、段落和列表之间、列表和表格之间等都会有空行。

0
我更认为，p和div元素是块级元素，而span是行内元素。但当你在代码中写p时，它会在顶部和底部占用空间，但div的行为不是这样的。在JS fiddle上检查一下这个实验：

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接