为什么要用 <br> 而不是 <br/>?

24

这是那种你看一次就会恍然大悟,但之后又会忘记的事情。我也是一样。

为什么在xhtml中,换行标签优先写成 <br /> 带有空格,而不是可以接受的格式<br/>?我记得原因很有趣,而且你可以想象通过谷歌并不容易找到答案。

毫无疑问,这不是xml格式问题。来自W3C的说明:

[44]    EmptyElemTag       ::=      '<' Name (S Attribute)* S? '/>' 

   Empty-element tags may be used for any element which has no content, whether
   or not it is declared using the keyword EMPTY. For interoperability, the 
   empty-element tag should be used, and should only be used, for elements which 
   are declared EMPTY.

Examples of empty elements:

<IMG align="left"  src="http://www.w3.org/Icons/WWW/w3c_home" /> 
<br></br> 
<br/>

所以末尾的空格是可选的。


2
另外,<br/> 是 XML 而不是 HTML。HTML 只是简单的 <br>。 - cletus
你的意思是XHTML,而不是XML。 - snicker
2
他的意思是XML:看看XHTML中的X代表什么。 - ntd
阅读W3的HTML兼容性指南,了解XHTML。 - Gabriele Petrioli
你不妨为XHTML和CSS(http://validator.w3.org/)运行一个验证器,认识到在`<br />`节点中有一个空格的问题已经远远不是你优先考虑的事情了? - Igor Zevaka
显示剩余2条评论
13个回答

46

W3C规定这个语法:

EmptyElemTag       ::=      '<' Name (S Attribute)* S? '/>'

这意味着一个开标签,一个名称,一些(空格和属性)令牌,可选的空格,一个斜杠和一个闭标签。根据这个规则,两者都是正确的。


4
结尾只有0或1个空格?也许S代表任意数量的空白字符? - bmargulies

25
如果我没记错的话,这只是因为一些旧版浏览器在没有斜杠前加空格的自封闭标签上存在问题。我怀疑现在已经不是问题了,但很多开发人员(包括我自己)都养成了包括空格的习惯。
编辑:啊,我们找到了这里:http://www.w3.org/TR/xhtml1/#guidelines

在空元素的结尾斜杠和 > 前加一个空格,例如 <br />, <hr /> 和 <img src="karen.jpg" alt="Karen" />。此外,使用空元素的最小化标记语法,例如 <br />,因为 XML 允许的另一种语法 <br></br> 在许多现有用户代理中会产生不确定的结果。


据我所知,唯一存在此问题的“旧版浏览器”是IE6,在您发布答案时仍被广泛使用。但是今天,即将进入2021年,VS Code仍会自动格式化我的void标签以添加空格。 - John Churchill

23

一些旧的浏览器如果没有空格,无法正确解析该元素,所以大多数网页开发人员使用 <br />。 我不记得具体是哪些浏览器,但我相信它们已经几乎绝迹了。

编辑该浏览器是Netscape 4


15

在XHTML中没有正确的方式。它们在XML中是形式上相同的。在该位置空格不重要。


2
在XHTML中没有区别,但在普通的HTML中是有区别的 - 斜杠 / 实际上结束了标记,所以您的 <br/> 将显示为 break + >。约定采用 /> 是一种妥协。 - K Prime
你知道的,尽管我有评论,但我暂时迷失了“html”方面。当然,在旧的HTML中,/>形式是行不通的。 - bmargulies
@K Prime - 空间对于这个问题没有帮助。只有浏览器在获取那一部分 HTML 时出现错误,才能使兼容 HTML 的 XHTML 正常工作。 - Quentin

9
对于XHTML:两者都可以。对于HTML4及更早版本:两者都不行。

7

<br /> 是合法的(旧)HTML,而 <br/> 不是。如果你将你的XHTML作为XML提供服务,则无所谓。但如果您将其作为text/html提供,则除了有效的XHTML外,还需要是有效的HTML。(为什么将XHTML作为HTML提供服务?因为IE不理解XHTML作为XML,而且没有主要浏览器会在下载文本的中途开始呈现XHTML,但它们会对HTML进行这样的操作。我的博客似乎加载缓慢,不是因为网站速度慢,而是因为浏览器直到所有内容都被获取后才开始呈现页面。我讨厌浏览器。)


2
这是真正的原因。HTML没有自闭合标签语法 - 标签是否需要显式关闭取决于它是哪种类型的标签(例如,<br>不需要,而<div>需要)。当您编写<br />时,HTML解析器会看到一个带有名为“/”的空属性的<br>标签(就像输入的空“checked”属性一样)。由于<br>标签在HTML中已经是自闭合的,因此在HTML和XML模式下都可以使用相同的方式工作。 - Chuck
@Chuck。我以前看过那个解释,但我不能说我相信它。如果是这样的话,那么使用Firebug或Hixie的Live DOM Viewer渲染DOM应该显示属性为/ =“”,但它们没有。请参见此处:http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0D%0Atext%3Cbr%20checked%20%2F%3E(对于在br元素上放置“checked”属性我表示歉意 - 我知道它不是有效的,但它证明了我的观点。) - Alohci
1
@Alohci:那是Firefox的实现细节。纯粹按照HTML标准,是没有<br/>标签的。 - Chuck
2
纯文本false:在HTML 4.01中,唯一有效的br元素是<BR><br /><br/>都是无效的标签混乱,但前者在实际浏览器中问题较少。 - ntd
2
"<br />是有效的(旧)HTML。" 不,它不是,但浏览器可以处理它。我看到的建议是,如果您使用text/html MIME类型,则使用空格。如果您使用application/xhtml+xml,则不需要它们。 - TRiG

7

补充一下Matt Hamilton的回答。

至少有一个问题浏览器是Netscape 4。快速检查显示,在该浏览器中,<br/>(即没有空格)不会导致换行。实际上,它似乎什么也没做。<br />(即带有空格)会执行换行。

当创建可以作为XHTML或HTML运行的多语言文档时(注意:“作为”而不是“有效”),必须使用<br />或<br></br>。但是,在解析为HTML时,</br>被视为<br>,因此<br></br>会产生两个换行符。


3
我会说...捂脸 因为</br>会产生一个换行 :) - Stefano Borini
这是因为有一个人曾经这样做过,然后抱怨它不起作用,然后浏览器开始支持它。这就是为什么Firefox会使用600M的RAM……有很多“特殊情况”。 - jrockway

5

使用 <br/><br /> 都是正确的。之所以会出现 <br /> 这种写法,最初是为了支持那些不理解新语法 <br/> 的老旧浏览器。实际上,这是一种 hack 技巧,其中斜杠 / 被解释为一个没有值的属性并被忽略。


4

两种写法都是正确的,网页浏览器都能接受。你可以使用<br/>来省略一个字符。


3
两种都是正确的。但是我会使用<br />只是为了保持我的代码一致性...因为我从不写这样的代码。
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

替代

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

只是为了节省一个字节...第二个版本在我看来更易读。但这只是个人口味问题。按照您的喜好进行操作,但请保持一致性 :-)


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