html - 段落中的 元素何时被忽略？

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 规范中找不到指定此行为的部分，您知道在哪里可以找到此规范，或者您能以简单的方式表达此行为吗？

如果您知道，我也会对出现这种行为的原因感兴趣。

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

Answer 1

在我看来，大多数浏览器都遵循 WHATWG 规范，我也会这样做。 World Wide Web Consortium (W3C) 有 2019 年 5 月 28 日 announced WHATWG 将成为 HTML 和 DOM 标准的唯一发布者。如果我们在本规范中仅遵循规则，那么我将遵循这些规则。
WHATWG 对 br 有以下建议元素:

The br element represents a line break.

Note: While line breaks are usually represented in visual media by physically moving subsequent text to a new line, a style sheet oruser agent would be equally justified in causing line breaks to berendered in a different manner, for instance as green dots, or asextra spacing.

br elements must be used only for line breaks that are actually partof the content, as in poems or addresses.

The following example is correct usage of the br element:

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

br elements must not be used for separating thematic groups in aparagraph.

The following examples are non-conforming, as they abuse the brelement:

<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>

Here are alternatives to the above, which are correct:

<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>

If a paragraph consists of nothing but a single br element, itrepresents a placeholder blank line (e.g. as in a template). Suchblank lines must not be used for presentation purposes.

Any content inside br elements must not be considered part of thesurrounding text.

Note: This element has rendering requirements involving the bidirectional algorithm.

Source: WHATWG: The br element

在您的示例中，您有 br <br></p> 中的元素在 <br></a></p>结束 <p>元素。这个元素末尾的新行什么都不做，但仅在这种情况下。在这种情况下，您可以忽略它。 br的情况也是如此 <br></a></div> 中的元素在 <br></div>结束 <div>元素。
引用 WHATWG 的建议(见上文):如果一个段落只包含一个 br元素，它代表一个占位符空行。也是 非空 (就像用户 kalkronline 写的那样)。如果 W3C 和 WHATWG 意见发生冲突，用户代理必须遵循 WHATWG 建议(见上文)。
不要忘记 clear 的样式可能性(例如 br )元素。

2020 年 6 月 25 日更新
我想发布和解释 再次引用 WHATWG 的建议(见上文):

If a paragraph consists of nothing but a single br element, it represents a placeholder blank line.

这显示如下:

p{border:1px dashed red}

<b>1. example:</b>
<code>&lt;p&gt;&lt;br&gt;&lt;/p&gt;</code>
<p><br></p>
<b>2. example:</b>
<code>&lt;p&gt;I am a line&lt;br&gt;&lt;br&gt;&lt;/p&gt;</code>
<p>I am a line<br><br></p>
<b>3. example:</b>
<code>&lt;p&gt;&lt;/p&gt;</code>
<p></p>

第一个示例中的情况意味着这表示占位符空白行。这是 非空 !为什么？因为占位符空白行具有一些字体大小属性。在其他情况下，就像在第三个示例中一样 - 空 .
第二个例子中的案例向我们展示了两个 br block 元素末尾的元素，我们可以看到最后一个 br元素被忽略，但第二个 br元素从头到尾都有自己的路线。
用户kalkronline has done the research again ，但他发现用户 Rei 的误解导致了错误的解释。用户 Rei 的解释乍看之下是合乎逻辑的，但如果我们阅读我写的内容，我们会发现他做了 logical mistakes .我的第二个示例向我们展示了用户的 Rei 错误，因为根据他的描述，我们必须有一个空行。引用用户 Rei 的误解:

Because the line has zero characters, it is rendered as an empty line.

但这是因为在这个 block 元素中没有任何元素跟随在它后面!
结论
我想为你的转换器写一些规则:

如果一个段落只包含一个 br元素，它表示占位符空白行(来自 WHATWG 建议)

全部 br block 元素末尾的元素，如果在它们之后没有任何内容，则应忽略它们。

只有最后一个 br来自两个或多个 br 的元素必须忽略 block 元素末尾的元素。但是以前的br元素必须有自己的字体大小高度。

您必须遵循所有 WHATWG 建议。

有用的链接:

WHATWG: The br element

<br> : The Line Break element (MDN)

WHATWG: HTML Living Standard. The definition of ' <p> ' in that specification.

<p> : The Paragraph element (MDN)

Me and others. 1971 USSR (关于逻辑错误和思维操纵的非常好的纪录片，带有英文字幕(打开它们))