有什么区别<p>,<div>和<span>?
它们可以互换使用吗?
因为我现在面临的问题是,对于<span>没有工作,但对保证金<div>和<p>它的工作..
Mr.*_*ien 43
p和div元素是块级元素,其中span是内联元素,因此跨度上的边距不起作用.或者,您可以span使用CSS display: block;或span我更喜欢使用块级元素display: inline-block;
除此之外,这些元素具有特定的语义含义,div更好地引用具有不同嵌套元素的内容块,p用于段落,并且span只是一个空元素,因此记住SEO,你需要使用正确的标签对于正确的事情,所以例如将文本包装在div元素内部将比在其中包装文本更少语义p
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'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并且p是"块元素"(现在重新定义为流内容)并且span是"内联元素"(Phrasing Content).是的,您可以更改这些元素的默认表示,但"流"与"块","短语"与"内联"之间存在差异.
被分类为流内容的元素仅可以在期望流内容的情况下使用,并且可以在期望短语内容的情况下使用被分类为措辞内容的元素.由于所有措辞内容都是流内容,因此在预期流内容的任何地方也可以使用措辞元素.规格提供了更详细的信息.
所有的短语元素,例如strong和em,只能包含其他短语元素:例如,你不能把一个短语放在table里面cite.大多数流内容例如div并且li可以包含所有类型的流内容(以及短语内容),但是有一些例外:p和pre,并且th是仅包含措辞的非短语流内容("块元素")的示例内容("内联元素").当然存在诸如正常元件限制dl和table只被允许包含某些元素.
虽然两者div并p为非措辞流内容时,div可以包含其他内容的流动儿童(包括更多的divS和pS).另一方面,p可能只包含措辞内容的孩子.这意味着你不能把一个div内部p,即使两个都是非措辞流元素.
现在这里是踢球者.这些语义规范与元素的显示方式无关.因此,如果你有一个div内部的span,你会得到一个验证错误,即使你有span {display: block;},并div {display: inline;}在你的CSS.
<p>和<div>默认情况下是块元素。<span>是一个内联元素。
块元素在浏览器中以换行开始和结束,而内联元素则不然。“内联”意味着它们是当前行的一部分。
在当今复杂的网页设计中,这些区别的目的不太明显,但如果您回想一下 HTML 的早期(这些标签的来源),其中文档基本上是用图像修饰的文本,区别就会变得更加清晰。
不管怎样,使用 CSS,您基本上可以覆盖标签的任何属性。因此,如果您希望 a<span>表现得像 a<div>或 a<p>那么您需要做的就是添加:
span
{
display: block;
}
Run Code Online (Sandbox Code Playgroud)
使用此代码,您将能够设置垂直边距和水平边距。