有什么区别<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
可以包含其他内容的流动儿童(包括更多的div
S和p
S).另一方面,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)
使用此代码,您将能够设置垂直边距和水平边距。