段落中的 <br> 元素何时被忽略？

Question

我发现有时，<br>元素不会在我使用的浏览器（Firefox 和 Chrome）中呈现。

<p>Hello<br></p>
<p>Hello<br></p>

将呈现为相同：

<p>Hello</p>
<p>Hello</p>

以同样的方式，

<p>Hello <a href="https://ddg.gg">ddg<br></a></p>
<p>Hello</p>

和 ：

<p>Hello <a href="https://ddg.gg">ddg</a></p>
<p>Hello</p>

在浏览器中打开时，也将在没有任何换行符的情况下呈现。

我在 HTML 规范中找不到指定此行为的部分，您知道在哪里可以找到此规范，或者您能否以简单的方式表达此行为？

如果您了解他们，我也会对出现这种行为的原因感兴趣。

编辑：我知道在 HTML 中的这个位置放置 br 元素是非常“不正确的”，我不是生成这个 HTML 的人，但我需要将此 HTML 转换为另一种格式，所以我有兴趣了解如何浏览器处理这种情况。

Answer 1

在我看来，大多数浏览器都遵循WHATWG规范，我也会这样做。万维网联盟 (W3C)于 2019 年 5 月 28 日宣布，WHATWG 将成为 HTML 和 DOM 标准的唯一发布者。如果我们在本规范中只遵循规则，那么我将遵循这些规则。

WHATWG 对br元素有以下建议：

该br元素表示换行符。

注意： 虽然换行符通常通过将后续文本物理移动到新行来表示在视觉媒体中，但样式表或用户代理也同样有理由使换行符以不同的方式呈现，例如绿点，或作为额外的间距。

br 元素必须仅用于实际上是内容一部分的换行符，例如诗歌或地址。

以下示例是该br元素的正确用法：

<p>P. Sherman<br>
42 Wallaby Way<br>
Sydney</p>

br 元素不得用于分隔段落中的主题组。

以下示例不符合标准，因为它们滥用了该br 元素：

<p><a ...>34 comments.</a><br>
<a ...>Add a comment.</a></p>
<p><label>Name: <input name="name"></label><br>
<label>Address: <input name="address"></label></p>

以下是上述的替代方案，它们是正确的：

<p><a ...>34 comments.</a></p>
<p><a ...>Add a comment.</a></p>
<p><label>Name: <input name="name"></label></p>
<p><label>Address: <input name="address"></label></p>

如果一个段落只由一个br元素组成，它代表一个占位符空白行（例如在模板中）。此类空行不得用于演示目的。

br元素内的任何内容不得视为周围文本的一部分。

注意： 此元素具有涉及双向算法的渲染要求。

来源：WHATWG：br元素

在您的示例中，您在br元素末尾有元素 in<br></p>和 in 。此元素末尾的新行什么也不做，但仅在这种情况下。在这种情况下，您可以忽略它。对于元素 in和 in在元素末尾的情况也是如此。<br></a></p><p>br<br></a></div><br></div><div>

引用 WHATWG 的建议（见上文）： 如果一个段落只由一个br元素组成，则它代表一个占位符空白行。它也不是空的（就像用户kalkronline写的那样）。如果 W3C 和 WHATWG 意见发生冲突，用户代理必须遵循 WHATWG 建议（见上文）。

不要忘记元素的样式可能性（例如clear）br。

25/06/2020 更新

我想再次发布并解释WHATWG 建议中的引用（见上文）：

如果一个段落只包含一个br元素，则它代表一个占位符空白行。

这显示为：

<p>P. Sherman<br>
42 Wallaby Way<br>
Sydney</p>

<p><a ...>34 comments.</a><br>
<a ...>Add a comment.</a></p>
<p><label>Name: <input name="name"></label><br>
<label>Address: <input name="address"></label></p>

第一个示例中的情况表示这表示占位符空白行。这不是空的！为什么？因为占位符空白行具有一些字体大小属性。在其他情况下，就像在第三个例子中一样 – empty。

第二个例子中的例子向我们展示br了块元素末尾的两个元素，我们可以看到最后一个br元素被忽略了，但是br从末尾开始的第二个元素有自己的行。

用户kalkronline 再次进行了研究，但他发现了用户Rei 的错误解释和错误解释。用户Rei的解释只是乍一看合乎逻辑，但如果我们阅读我写的内容，我们就会发现他犯了逻辑错误。我的第二个例子向我们展示了用户的Rei错误，因为根据他的描述，我们必须有一个空行。引用来自用户Rei 的误解：

因为该行有零个字符，所以它呈现为空行。

但这是因为在这个块元素中没有元素跟在它后面！

结论

我想为您的转换器编写一些规则：

1. 如果一个段落只包含一个br元素，它代表一个占位符空白行（来自 WHATWG 建议）
2. br块元素末尾的所有元素如果在它们之后没有任何东西应该被忽略。
3. 只有块元素末尾的br两个或多个br元素中的最后一个元素必须被忽略。但是以前的br元素必须有自己的字体大小高度的行。
4. 您必须遵循 WHATWG 的所有建议。

有用的链接：

• WHATWG：br 元素
• <br>:换行元素(MDN)
• WHATWG：HTML 生活标准。该<p>规范中“ ”的定义。
• <p>: 段落元素(MDN)
• 我和其他人。1971 苏联（非常好的关于逻辑错误和思维操作的纪录片，带英文字幕（打开））