用于呈现新行的HTML规范? [英] HTML specification for rendering new lines?

问题描述

我正在尝试将一些简单的HTML文档(主要包含div和br标签)呈现为纯文本，但是我在何时添加新行的问题上苦苦挣扎.我以为<div>和<br/>生成新行将非常简单，但是看起来似乎有各种微妙的规则.例如:

I'm trying to render some simple HTML documents (contain mostly div and br tags) to plain text, but I'm struggling on when to add new lines. I assumed it would be quite simple with <div> and <br/> generating new lines, but it looks like there's various subtle rules. For example:

<div>one line</div>
<div>two lines</div>

<hr/>

<div>one line</div>
<div></div>
<div>still two lines because the empty div doesn't count</div>

<hr/>

<div>one line<br/></div>
<div></div>
<div>still two lines because the br tag is ignored</div>

<hr/>

<div>one line<br/></div>
<div><br/></div>
<div>three lines this time because the second br tag is not ignored</div>

<hr/>

<div><div>Wrapped tags generate only one new line<br/></div></div>
<div><br/></div>
<div>three lines this time because the second br tag is not ignored</div>

所以我正在寻找有关如何在HTML文档中呈现新行的规范(当未应用CSS时).知道在哪里可以找到这种文件吗?

So I'm looking for a specification on how new lines should be rendered in HTML documents (when no CSS is applied). Any idea where I could find this kind of document?

推荐答案

如果您正在寻找<div>和<br>的规范， 您不会在一个地方找到它，因为它们每个人都遵循不同的规则. DIV元素遵循块格式化规则，而BR元素遵循文本流规则.

If you are looking for the specification for <div> and <br>, you won't find it in one place, because each of them follow separate rules. DIV elements follow the block formatting rules, while BR elements follow the text flow rules.

我相信，造成您困惑的原因是假设他们遵循相同的新行规则. 让我解释一下.

I believe that the cause of your confusion is the assumption that they follow the same new lines rule. Let me explain.

BR元素.

BR在 HTML4规范第9.3节中定义关于线段和段落:

BR is defined in HTML4 Specification Section 9.3 regarding Lines and Paragraphs:

BR元素强制中断(结束)当前文本行.

The BR element forcibly breaks (ends) the current line of text.

在 HTML5规范第4.5节中关于文本级语义:

< br>元素代表换行符.

The <br> element represents a line break.

规格说明您的第三个示例的结果:

The specification explains the result your third example:

<div>one line<br/></div>
<div></div>
<div>still two lines because the br tag is ignored</div>

在那里，BR元素根本不会被忽略，因为它标志着该行必须在该点处断开. 换句话说，它标记了当前文本行的结尾. 这与创建新行无关.

There, the BR element is not ignored at all, because it marks that the line must be broken at that point. In other words, it marks the end of the current line of text. It is not about creating new lines.

在您的第四个示例中:

<div>one line<br/></div>
<div><br/></div>
<div>three lines this time because the second br tag is not ignored</div>

BR元素也标记该行的结尾. 由于该行包含零个字符，因此将其显示为空行.

the BR elements also marks the end of the line. Because the line has zero characters, it is rendered as an empty line.

因此，第三个示例和第四个示例中的规则相同. 什么都不会被忽略.

Therefore, the rule is the same in your third and fourth example. Nothing is ignored.

DIV元素.

在没有显式样式表的情况下，将应用默认样式. 默认情况下，DIV元素是块级元素，这意味着它遵循块格式上下文 在 CSS规范第9.4.1节中定义:

In the absence of explicit style sheet, the default style applies. A DIV element is by default a block-level element which means it follows the block formatting context defined in CSS Specification Section 9.4.1:

在块格式设置上下文中，从包含块的顶部开始，垂直地将框一个接一个地布置.

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.

因此，这也不是关于创建新行的原因，因为在块格式化上下文中，没有行的概念. 这是关于将块元素从上到下一个接一个地放置.

Therefore, this is also not about creating new lines because in a block formatting context, there is no notion of lines. It is about placing block elements one after another from top to bottom.

在第二个示例中:

<div>one line</div>
<div></div>
<div>still two lines because the empty div doesn't count</div>

空DIV的高度为零，因此对下一个块级元素的呈现没有影响.

the empty DIV has zero height, therefore it has no effect on the rendering of the next block-level element.

在您的第五个示例中:

<div><div>Wrapped tags generate only one new line<br/></div></div>
<div><br/></div>
<div>three lines this time because the second br tag is not ignored</div>

外部DIV用作第9.1节中定义的包含块.2 内部DIV定义在我上面引用的9.4.1节中. 由于未应用CSS，因此默认情况下，DIV元素的边距为零，填充为零， 这会使内部DIV的每个边缘都接触到外部DIV的相应边缘. 换句话说，内部DIV与外部DIV的渲染位置完全相同.

the outer DIV functions as a containing block as defined in Section 9.1.2 and the inner DIV is defined Section 9.4.1 that I have quoted above. Because no CSS is applied, a DIV element by default has zero margin and zero padding, which makes every edge of the inner DIV touches the corresponding edges the outer DIV. In other words, the inner DIV is rendered at exactly the same place as the outer DIV.

我相信这就是一切.

这篇关于用于呈现新行的HTML规范?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！