何时使用 <br> 换行符而不是 CSS 定位?

33

我经常想知道如何正确使用 <br> 换行符。似乎经常会错误地将其用于定位或清除内容,而应改用 CSS。

W3schoools.org 表示应该使用 <br> 来创建空行,但不用于创建或分隔段落。在查看W3C HTML5规范草案时,更明确地说明了当内容需要换行时,例如地址的行或诗歌中的空行,即作者想要的情况下,应使用<br>

但我仍然对其他人可能有的进一步澄清或建议感兴趣。 我经常发现自己选择不使用 <br> 标签,而是只需使用所需的清除、边距、填充等样式元素来创建所需的空间。

虽然这并不是至关重要的,但以下示例让我思考到一个流行的(“权威”的)网站使用了一个我不确定是否很语义化的 <br>。 在这里,我只会通过 CSS 清除其兄弟节点中的<a>

<p>Lorem ipsum dolor sit amet, consectetur tempor laborum.</p>
<br>
<a href="#readmore">more &gt;&gt;</a>

几个很好的答案...但我刚意识到我犯了一个错误,发布了一个“讨论”类型的问题...没有办法只选一个勾选框来给予! - brandonjp
如果你喜欢某个人的答案,应该点赞他们 :) 尽管你说有几个好答案,但我是唯一得到点赞的人。我可能只是碰巧最快,但James也提出了一个好观点。 - Marko
@brandonjp,“分离”链接已经失效(其他链接可能也是如此)。 - Redwood
@LawrenceJohnston 谢谢。看起来W3schools移动了HTML5指南。现在已全部更新。 - brandonjp
1
我知道这是一个古老的问题,但为了迎接HTML5的发布,这里有最新和最棒的内容!http://www.w3.org/TR/2014/REC-html5-20141028/text-level-semantics.html#the-br-element - Thomas Schultz
6个回答

60

对我来说,换行符应该只在段落内使用,用于表示新的一行。在过去,当HTML看起来像杂碎一样,HTML文档的语义看起来像是幼儿园里的人使用Dreamweaver制作的时候,添加段落之间的换行符被广泛使用。

个人而言,我依赖于边距和填充来分隔内容,如果我不得不使用<br />,这意味着我做错了什么。我认为地址中的行是正确使用的完美例子,我会坚持仅仅在这些情况下使用。


clearfix的替代方案是在包含的<div>上使用overflow:autooverflow:hidden - Husky
对于地址的格式化,我想将它们放在列表中会更有意义。 - Husky
@Husky - 但它并不是一个列表,实际上... :) 换行并不是邪恶的,只需要适当使用 :) - Marko
1
@Marko,HTML5规范指出<p>元素是格式化地址的最佳方式。当然,如果您使用vCard微数据格式,您将获得额外的奖励分数! - Husky
@Husky,或者RFDa:维基百科W3谷歌 - Baumr
显示剩余2条评论

10

当换行在未经样式处理的文档中具有语义意义时。

正如有人所说,诗歌是一个很好的例子 - 传统上,诗歌是用换行符分隔行的。地址也是如此。使用段落元素标记诗歌或地址的一行是没有意义的,因为这些更适合整个地址或诗歌的一节。


2

我同意这个规范,应该使用br标签在段落内创建新的文本行。从语义上讲,这是有道理的-一个段落是一块带有一些顶部或底部边距的文本,而br则指定没有边距,只是一个换行符,与相同的行高/行间距。


1

在客户有可能编辑东西的时候,我使用换行符——这样他们只需要使用回车键就可以了,而不用因为页面上某些元素周围出现空格而感到困惑。不过这几乎总是在文本区域内进行,没有理由使用 <br /> 来定位其他任何内容。


0

我的观点:

<br> 会在内容需要换行的时候使用,比如地址的多行显示或诗歌中需要留白的地方。

(话虽如此,我偶尔也会用它来分隔段落)</br>


我认为使用 hr 更适合分隔没有强关联的段落。 - unor

0

换行标签(单独使用时应为<br />

必须用于换行而非定位,特别是因为您只打断单个行。

它应该具有与使用回车键相同的概念。

希望这有所帮助。


2
在HTML5中,<br><br />都是有效的。为您的项目选择其中之一并与其他标记(如<img><p>)一致使用是有意义的。 - Husky
我非常确定有些IE浏览器无法读取它们。但是我同意这并不重要。 - Trufa

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