何时使用<span>代替<p>?


93

如问题所示,如果我要在HTML中添加一些文本,那么什么时候应该使用<p>,什么时候应该使用<span>

Answers:


90

您应该记住,HTML旨在描述其包含的内容。

因此,如果您想传达一段,则可以这样做。

不过,您的比较并不完全正确。比较直接的比较是

什么时候使用a<div>代替<p>

因为两者都是块级元素。

A<span>是内联的,非常类似于anchor(<a>)、、<strong>强调(<em>)等,因此请记住,由于它是html和自然书写形式的默认性质,因此段落会在其前后引起中断,例如a <div>

有时,当对样式(内联样式)进行样式设置时,a<span>可以给您一些“钩住” css的很棒的方法,但是否则它是一个没有语义或风格含义的空标签。


7
比较内联元素和块元素时,请注意不要描述外观。如HTML5规范所述p不一定要用周围的换行符来设置a的样式,例如,可以在其后跟随一个内联的pilcrow符号。术语“内联”和“阻止”对盲用户也没有任何意义。而是在流内容短语内容之间进行区分(请参阅此链接)。
chharvey 2012年

3
此外,填充左表现不同上p比它上span。在段落上,填充会影响每一行(文本块),而在跨度上,填充只会影响第一行。
diynevala 2015年

94

在语义上,您使用<p>标签来指示段落。<span>用于将CSS样式和/或类应用于文本和嵌入式元素的任意部分。


13

<p>标签是paragraph,正因为如此,它是一个元素(如,例如,h1div),而span是内嵌元素(如,例如,ba

默认情况下,块元素会在其上方和下方创建一些空格,除非您float为其设置了属性,否则它们旁边无法对齐。

内联元素处理段落内的文本范围。它们通常没有边距,因此,例如,您不能为其设置a width


是的,span没有边距,因此,具有使用html标记功能的表格单元格(td)是很好的
Igor Fomenko

6

跨度完全是非语义的。它没有任何意义,仅用作美容效果的元素。

段落具有语义含义-它们告诉机器(例如浏览器或屏幕阅读器)所封装的内容是一段文本,并且与书中的一段文本具有相同的含义。


5

从语义上讲,ap是一个段落标签,应用于格式化文本的段落。跨度是没有语义处理的内联格式更改。



4

实际说明:默认情况下,<p> </p>将在包含的文本之前和之后添加换行符(因此将创建一个段落)。<span>不会这样做,因此将其称为inline


3

p标签表示一个段落元素。它已应用了边距/填充。跨度是无样式的内联标签。一个重要的区别是,当span为inline时,p是一个块元素,这意味着<p>Hi</p><p>There</p><span>Hi</span><span>There</span>并排缠绕时,p会出现在不同的行上。


3

当我们当时<p>使用普通文本时,我们想要<span>标记;当我们当时使用具有某些效果的普通文本时,我们想要标记


2

<span>是一个内联标签,<p>是一个块标签,用于段落。浏览器将在段落下方显示空白行,而<span> s将在同一行显示。


0

tag是块级元素,而tag是内联元素。通常,我们使用span标签在块元素内部设置样式。但是您不必使用span标签来内嵌样式。使用“ display:inline”将块元素转换为行内元素


-6
p {
    float: left;
    margin: 0;
}

周围没有间距,看起来与跨度相似。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.