When to use <span> instead <p>?

正如问题所指出的,如果我有一些文本,我想添加到 HTML 然后什么时候我应该使用 <p>和什么时候我应该使用 <span>

149615 次浏览

Semantically, you use <p> tags to indicate paragraphs. <span> is used to apply CSS style and/or class(es) to an arbitrary section of text and inline elements.

从语义上讲,p 是一个段落标记,应该用来格式化一段文本。Span 是不能从语义上处理的内联格式更改。

Span 是完全没有语义的,它没有任何意义,只是作为一种美化效果的元素。

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

一个实际的解释: 在默认情况下,<p> </p>将在所附文本之前和之后添加换行符(因此它创建了一个段落)。<span>不这样做,这就是为什么它被称为 内嵌式

Span 是一个内联格式化元素,它的上面或下面没有换行符。

P 是一个块元素,其上下都有一个隐含的换行符。

http://w3schools.com/tags/default.asp

<p>标记是一个 p段落,因此,它是一个 拦截元素(例如,h1div) ,而 span是一个内联元素(例如,ba)

默认情况下,块元素在它们自己的上面和下面创建一些空格,除非为它们设置 float属性,否则不能在它们旁边对齐任何内容。

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

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

So, if you wish to convey a paragraph, then do so.

但你的比较并不完全正确,更直接的比较应该是

什么时候使用 <div>而不是 <p>

因为它们都是块级元素。

<span>是内联的,很像一个锚(<a>) ,<strong>,强调(<em>) ,等等,所以请记住,由于它的默认性质在 html 和自然书写,一个段落会导致前后的中断,就像一个 <div>

有时,当样式化事物ーー内联事物ーー时,<span>非常适合给你一些东西来“钩住”css,但除此之外,它就是一个没有语义或文体意义的空标记。

P 标记表示段落元素。它有应用于它的边距/填充。Span 是未样式化的内联标记。一个重要的区别是,当 span 为内联时,p 是块元素,这意味着当 <span>Hi</span><span>There</span>并排放置时,<p>Hi</p><p>There</p>将出现在不同的行上。

<span>是内联标记,<p>是块标记,用于段落。浏览器将在段落下面呈现一个空行,而 <span>将在同一行上呈现。

当我们在那个时候使用普通文本时,我们需要 <p>标签。当我们在那个时候使用带有一些效果的普通文本时,我们需要 <span>标签

p {
float: left;
margin: 0;
}

周围没有间距,它看起来像跨度。

Explanation

p element is a block level, therefore, add padding and margin before and after the line/ text. But span is inline element and therefore does not add any padding and margin before and after the line. We actually use span element for styling purpose and it has not semantic meaning in HTML, however, the p element is block element and has semantic meaning in HTML.