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

Dha*_*amu 28 html

有什么区别<p>,<div><span>

它们可以互换使用吗?

因为我现在面临的问题是,对于<span>没有工作,但对保证金<div><p>它的工作..

Mr.*_*ien 43

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

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

  • “并且跨度只是一个空元素”对于初级开发人员来说可能有点混乱。听起来您无法在跨度内添加文本。 (3认同)

Dav*_*idB 18

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

这就是它们应该如何在语义上使用,它们的样式然而使用CSS取决于你.


Fuj*_*ves 10

作为一名网络开发人员,我不禁觉得所有这些指导方针在2015年都是令人难以置信的误导.

当然,一个"p"标签在某一点设计用于段落使用......但在100%的应用程序,设计和日常的一般开发中,我们只遇到了"p"所施加的限制"标签......它在今天的互联网上没有任何好处.

我会说是的,"p"是一个描述性元素,因此,如果这就是它所做的一切; "描述一些东西",我会全力以赴......但它不只是描述内容,它直接改变内容,虽然已经是一个限制本身,但并不是全部,它也限制内容.为什么任何心智正常的人都会有目的地拥抱一个限制性的构建模块,当涉及到Web开发时,我无法理解.从设计的角度来看,它没有意义.从结构的角度来看,它没有意义.从任何DOM操作PERIOD,它没有意义.

我们在一起停止使用"p"标签,除非我们绝对被迫(例如,客户端文字按后发布实施,愚蠢的事情).没有理由为什么我们不能用名称很好的类和ID来描述几乎所有东西,所以我们看到没有理由不得不屈服于没有任何好处的"标准",并且实际上是为了解决每一个难题."p"标签对开发人员,最终用户和现代搜索引擎没有帮助.简而言之......即使是远程复杂的实现(并且有很好的理由),"p"标签几乎都被弃用了,不要让这些标准纳粹的评论控制你如何展示你的内容!

即使在这个网站上,一个面向开发人员的网站,在它自己的页面上有一个小小的弹出式文件,可以使用"p"标签,因为它包含足够的文本来运行一秒钟线,但完全被DIV(并且只有div,而不是div - > p)捕获了几乎无数的原因...最重要的是今天,"p"SUCKS与DIV创建的任何描述良好的块相比,这是一个很好的描述(更多...我说)作为一个段落"p"与描述性的id ="blurb".

来自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>
Run Code Online (Sandbox Code Playgroud)

我说下来

<p>I suck</p>
Run Code Online (Sandbox Code Playgroud)

并且万岁

<div class="p">I rock</div>
Run Code Online (Sandbox Code Playgroud)

是的,我很欣赏我们当前的网络标准,并且仍然有它们的位置,甚至提供了使用容器无法完成的一些现代浏览器的能力,但它只是特别是这个,破碎的元素"p",作为一个经过重组和现代化的HTML的一部分...应该留在它所属的坟墓中......这是一代网络,其中段落甚至不再是段落......块字面上改变......它只是过时而且不切实际.

  • 说实话,做一些像`<div class ="p"> </ div>`这样的事情对我来说毫无意义 (8认同)
  • "它在今天的互联网上没有任何好处." - false:辅助技术知道`<p>`和`<div>`之间的区别,即使用户无法分辨."标准没有任何好处." - 我建议你了解一下你的可访问性知识.出于好奇,有什么"限制"强加了?你只是非常清楚它是如何"限制"内容(无论这意味着什么)以及它是如何"没有意义的".你能更具体一点吗? (4认同)

chh*_*vey 7

正如其他人已经回答的...... div并且p是"块元素"(现在重新定义为流内容)并且span是"内联元素"(Phrasing Content).是的,您可以更改这些元素的默认表示,但"流"与"块","短语"与"内联"之间存在差异.

被分类为流内容的元素仅可以在期望流内容的情况下使用,并且可以在期望短语内容的情况下使用被分类为措辞内容的元素.由于所有措辞内容都是流内容,因此在预期流内容的任何地方也可以使用措辞元素.规格提供了更详细的信息.

所有的短语元素,例如strongem,只能包含其他短语元素:例如,你不能把一个短语放在table里面cite.大多数流内容例如div并且li可以包含所有类型的流内容(以及短语内容),但是有一些例外:ppre,并且th包含措辞的非短语流内容("块元素")的示例内容("内联元素").当然存在诸如正常元件限制dltable只被允许包含某些元素.

虽然两者divp为非措辞流内容时,div可以包含其他内容的流动儿童(包括更多的divS和pS).另一方面,p可能只包含措辞内容的孩子.这意味着你不能把一个div内部p,即使两个都是非措辞流元素.

现在这里是踢球者.这些语义规范与元素的显示方式无关.因此,如果你有一个div内部的span,你会得到一个验证错误,即使你有span {display: block;},并div {display: inline;}在你的CSS.


ose*_*ose 5

<p><div>默认情况下是块元素。<span>是一个内联元素。

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

在当今复杂的网页设计中,这些区别的目的不太明显,但如果您回想一下 HTML 的早期(这些标签的来源),其中文档基本上是用图像修饰的文本,区别就会变得更加清晰。

不管怎样,使用 CSS,您基本上可以覆盖标签的任何属性。因此,如果您希望 a<span>表现得像 a<div>或 a<p>那么您需要做的就是添加:

span
{
     display: block;
}
Run Code Online (Sandbox Code Playgroud)

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

  • 好吧,也许这样措辞更好。“我不喜欢这个答案,因为你没有阻止标签的错误使用,也没有提到标签语义使用的重要性,这对于初学者来说比你可以让跨度充当像分区 (2认同)