Html 何时使用 <p> 与 <br>

When to use <p> vs. <br>

提问by Will Moritz

What's the verdict on when you should use another <p>...</p>instead of a <br />tag? What's are the best practices for this kind of thing?

关于何时应该使用另一个标签<p>...</p>而不是<br />标签的判断是什么？这种事情的最佳实践是什么？

I looked around for this question, but most of the writing seems a bit old, so I'm not sure whether opinions about this topic have evolved since.

我环顾四周寻找这个问题，但大部分写作似乎有点旧，所以我不确定关于这个话题的观点是否从那时起发生了变化。

EDIT: to clarify the question, here is the situation that I am dealing with. Would you use <br>'s or <p>'s for the following content (imagine it's contained in a div on a homepage):

编辑：为了澄清这个问题，这是我正在处理的情况。您是否将<br>'s 或<p>'s 用于以下内容（想象它包含在主页上的 div 中）：

---

---

Welcome to the home page.

欢迎来到主页。

Check out our stuff.

看看我们的东西。

You really should.

你真的应该。

---

---

Now, these lines are not technically 'paragraphs'. So would you mark this up by surrounding the whole block in a <p>tag with <br>'s in between, or instead use separate <p>'s for each line?

现在，这些行在技术上不是“段落”。那么，您会通过将整个块包含在一个<p>标记中并<br>在其间使用<p>'s 来标记它，还是对每一行使用单独的's ？

采纳答案by Kermit

They serve two different functions.

它们提供两种不同的功能。

<p>(paragraph) is a block element which is used to hold text. <br />is used to force a line break within the <p>element.

<p>(paragraph) 是一个块元素，用于保存文本。<br />用于在<p>元素内强制换行。

Example

例子

<p>Suspendisse sodales odio in felis sagittis hendrerit. Donec tempus laoreet
est bibendum sollicitudin. Etiam tristique convallis<br />rutrum. Phasellus 
id mi neque. Vivamus gravida aliquam condimentum.</p>

Result

结果

Suspendisse sodales odio in felis sagittis hendrerit. Donec tempus laoreet est bibendum sollicitudin. Etiam tristique convallis
rutrum. Phasellus id mi neque. Vivamus gravida aliquam condimentum.

Suspendisse sodales odio in felis sagittis hendrerit。Donec tempus laoreet est bibendum sollicitudin。Etiam tristique convallis
rutrum。Phasellus id mi neque。Vivamus gravida aliquam 调味品。

Update

更新

Based on the new requirements, I would personally use <p>to achieve the spacing as well as allow for styling. If in the future you wish to style one of these parts, it will be much easier to do so at the block level.

根据新的要求，我个人会使用<p>来实现间距并允许样式。如果将来您希望设计这些部分之一的样式，在块级别这样做会容易得多。

<p>Welcome to the home page.</p>

<p style="border: 1px solid #00ff00;">Check out our stuff.</p>

<p>You really should.</p>

回答by Eric Goncalves

You want to use the <p>tag when you need to break up two streams of information into separate thoughts.

<p>当您需要将两个信息流分解为单独的想法时，您需要使用该标签。

<p> Now is the time for all good men to come to the aid of their country. </p>

<p>The quick brown fox jumped over the lazy sleeping dog.</p>

The <br/>tag is used as a forced line break within the text flow of the web page. Use it when you want the text to continue on the next line, such as with poetry.

该<br/>标签用作网页文本流中的强制换行符。当您希望文本在下一行继续时使用它，例如诗歌。

<p>  Now is the time for all good men to come to the aid of their country. <br/>
The quick brown fox jumped over the lazy sleeping dog. </p>

source

来源

回答by brooklynsweb

I may be breaking rules of etiquette when answering a question in this thread —as most of the answers thus far have been great —but here's how I approach this argument:

在回答这个线程中的问题时，我可能违反了礼仪规则——因为迄今为止的大多数答案都很好——但我是如何处理这个论点的：

While I agree that a 'p' is element which is used to hold text and a 'br' tag is used to break text, in many occasions one may want to manipulate a 'block' of text that have actual line spaces between them;

虽然我同意 'p' 是用于保存文本的元素，而 'br' 标签用于中断文本，但在许多情况下，人们可能想要操纵它们之间具有实际行间距的文本“块”；

Ex:
[my block of text]
Hello World!
--------this is a blank line------
You are so full of life!
[/my block of text]

例如：
[我的文本块]
Hello World！
--------这是一个空行------
你真是充满活力！
[/我的文本块]

Now many would argue that you can just place two 'p' elements in a 'div' and then manipulate that 'div', however I feel this is more time consuming (aka I'm lazy), and thus I stick with a double 'br' method —leaving me to manipulate just that one 'p.'

现在很多人会争辩说你可以在一个 'div' 中放置两个 'p' 元素，然后操作那个 'div'，但是我觉得这更耗时（也就是我很懒），因此我坚持使用 double 'br' 方法——让我只操作那个 'p'。

The issue with my unorthodox method is that if there is a specific styling applied to line-height, then there will definitely be a noticeable difference between the line-space created by a double 'br' vs. a 'p'.

我的非正统方法的问题是，如果对行高应用了特定的样式，那么双“br”与“p”创建的行空间之间肯定会有明显的差异。

I guess in when deciding which technique to follow, consider:

我想在决定采用哪种技术时，请考虑：

• code readability
• best practices
• time
• effects of shortcuts on the rest of your code

• 代码可读性
• 最佳实践
• 时间
• 快捷方式对其余代码的影响

回答by dan_s

You should use <p>when you want to separate two paragraphs. From Wikipedia:

<p>当您想分隔两个段落时应该使用。来自维基百科：

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea.

段落（来自希腊语paradeos，“写在旁边”或“写在旁边”）是处理特定观点或想法的书面语篇的一个独立单元。

Use the <br>tag when you want to force a new line inside your paragraphs.

<br>当您想在段落中强制换行时使用该标签。

回答by Tony

The ptag is a block level element, and is mainly used to add content, whereas the brtag is used to force a line-break within the element. That is, if you're going to follow semantics. A lot of people are doing that these days to add specific meaning to tags and whatnot. I hope that helps. Good luck, though. =)

该p标签是块级元素，和主要用来添加内容，而br标签被用于迫使元件内的线断裂。也就是说，如果您要遵循语义。如今，很多人都在这样做，为标签和诸如此类的东西添加特定含义。我希望这有帮助。不过祝你好运。=)

回答by Tony

I wouldn't use <p>unless you intend to put content within it. Of course, this is merely an opinion (as I assume most answers will be).

<p>除非您打算将内容放入其中，否则我不会使用。当然，这只是一种意见（我认为大多数答案都是如此）。

However, it may be easier to style a <p>tag (there are more options at least) which may lend itself to be used more often. My only problem is that this is not very easy to read (when reading code) and I feel like those styles could be applied elsewhere (possibly to the tags that would surround the <p>tag.

但是，为<p>标签设置样式可能更容易（至少有更多选项），这可能有助于更频繁地使用。我唯一的问题是这不是很容易阅读（在阅读代码时），我觉得这些样式可以应用于其他地方（可能应用于围绕<p>标签的标签。

Also, as other have stated, a <br />tag should be used to separate content within a block element (such as the <p>tag). If you are using the following:

此外，正如其他人所说，<br />应该使用标签来分隔块元素（例如<p>标签）中的内容。如果您正在使用以下内容：

<p class="a">some content...</p>
<p class="break"></p>
<p class="b">some other content...</p>

Then I would argue that you should use styles on one or both of the tags surrounding the p.breaktag to do any spacingthat is required.

然后我认为你应该在标签周围的一个或两个标签上使用样式p.break来做任何所需的间距。