有时使用<BR />标签是不好的吗?

197

<BR/> 标签有时候使用会有不好的影响吗?

我问这个问题是因为我的开发团队给了我一个最初的建议:不要使用 <BR/>,而应该使用样式。但是为什么呢?使用 <BR/> 标签会带来负面影响吗?


13
找到最佳答案的最好方法是去问你的开发团队,询问他们为什么。 - azamsharp
信了这句话...问源头,而不是猜测的人。 - Gabriel Magana
10
通常,“第一条建议”是在员工刚开始工作时给出的。新员工并不总是想问“为什么?”显然,有时候问为什么是最好的选择,但我认为Burak Ozdogan阅读了这些问题后可能已经理解了“为什么”。或者至少足以理解HTML社区对该主题的看法以进行讨论。我认为他来这里询问是正确的决定。 - Nosredna
指南应该说不要使用 <br> 进行布局,或者将间距元素分开。这是因为不同的浏览器会给 <br> 元素不同的高度值,有时取决于行高。如果您在所有浏览器中追求“像素完美”的布局和设计,则使用 css 通过 margin: 或 position: 更可靠和一致。 - ChrisN
15个回答

219
不使用 <br> 的主要原因是它不具备语义化。如果你想在不同的视觉块中放置两个项目,则可能需要将它们放置在不同的逻辑块中。
在大多数情况下,这意味着只需使用不同的元素,例如<p>东西</p><p>其他东西</p>,然后使用CSS适当地间隔出这些块。
但有些情况下,<br> 是语义上有效的。也就是说,换行符是您发送的数据的一部分。这实际上仅限于两种用例 - 诗歌和邮寄地址。

45
个人而言,我更喜欢在诗歌中使用 <pre/> 标签。这样,您明确指定了意图,即保留原始排版,包括可能的缩进。 - Michał Górny
7
@MichałGórny提出了一个很好的观点 - <br>标签似乎只适用于满足以下所有条件的情况:1. 换行符具有语义意义,2. 缩进不具有语义意义(否则应该使用<pre>标签),3. 不存在其他具有语义合适标记,例如段落或标题标记。邮寄地址满足这三个条件,歌词也是如此。诗歌可能会违反“缩进没有意义”的条件,因此最好使用<pre>标签。 - Mark Amery
4
在电子邮件的结束语中使用<br />,例如:<footer>真诚地,<br />StrexCorp</footer>您有什么意见吗? - JHS

122

我认为你的开发团队误将<br />用于添加间距。如果想在元素之间添加空白,请使用 CSS 的 padding/margin 样式。

<br />的错误用法:

<div>
   Content
</div>
<br />
<br />
<br />
<br />
<div>
     More content...
</div>

合理使用<br />

<style>
     div {
          margin-top:10px;
     }
</style>

<div>
   Content<br />
   Line break
</div>

<div>
     More content...
</div>

4
您不能简单地移除您的<br>标签并添加CSS,因为如果您已经移除了<br>标签,那么就没有东西可以进行样式设置。仅仅说“去掉换行符”而不帮助(字面上地)填补空白并不是非常有帮助的。 - Gareth
8
你说得对,iamkoa,但这并不能解释“为什么”。因此,它并没有回答问题。24个赞似乎有点过多了。 - Lightness Races in Orbit
@iamkoa 你没有解释为什么 - fabpico
我认为第二个选项更好,因为更简洁明了。我认为不需要使用br。 - simon
不使用 <br> 元素,而是通过 CSS 边距或定位来调整页面元素的间距的原因是,不同的浏览器会以不同的方式处理 <br> 元素的高度。此外,<br> 的高度可能会随着行高的变化而改变。开发人员应该追求一致性,而 CSS 样式在所有浏览器中都是一致的。 - ChrisN

30

通常情况下,<br/> 是HTML语义化较差的标志。最常见的情况是将 <br/> 用于表示段落分隔,而在语义上有更好的方式来实现。请参考Bed and Breakfast

有时候,它确实是合适的标签,但由于滥用太多,人们采取“不使用”的态度以强制更好的语义思维。


17

你们团队的意思可能是不要使用<br>标签来分隔段落。例如:

<p>I am a paragraph</p>
<p>I am a second paragraph</p>

这是更好的方法,因为您可以通过 CSS 轻松调整段落之间的空格。 除此之外,我想不出有什么反对使用换行的理由。


10
同样的概念适用于为何我们不使用表格来进行布局,应该用表格来呈现表格数据,而使用 CSS 来进行布局。
在文本块中使用 <br/> 来进行分行,如果需要影响布局,则应该使用 CSS。

5

直接指定布局会使得网站难以适应不同的页面尺寸或字体大小等因素。


4
如果您这样做:<BR/> <BR/>,那么不同的浏览器将会呈现不同的布局。
更深入地说: 如果您只是使用<BR/>进行换行 - 没问题。 但如果您将<BR/>用作行间距 - 就不好了。

2
我通常会使用CSS在元素上设置适当的边距和填充 - 这比到处都是大量的<br />标签要干净得多,而且更符合语义。
可能唯一一种情况下我会使用<br />而不是CSS设置的边距和填充,即如果需要略微更多的空间,尽管这并不完全正确。如果我的样式表很大,似乎没有必要为那个特定的事件设置额外的样式,我可能会偶尔使用<br />
像大多数事物一样,只要使用正确,<br />并不是坏事。

1

它们用于表示换行。仅此而已。不要像普通的Geocities网站一样填充空间。但是,只有一种情况下它们可能有用于除了换行之外的其他目的:清除浮动。

<br style="clear: both;">

1
虽然被使用,但这种方法不符合有效的XHTML标准。 - iamkoa
2
你可以经常通过在包含元素上使用 overflow:auto 来避免这种“hack”。 - mpen
2
@iamkoa:我不使用XHTML。HTML就是HTML,不是XML。 - BalusC

1

我尝试以一种易于在禁用CSS时阅读的方式编写我的标记。如果您只是使用BR来添加间距,则最好使用边距和填充。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接