用于渲染新行的HTML规范？

Question

我正在尝试将一些简单的HTML文档(主要包含div和br标签)呈现为纯文本,但我正在努力何时添加新行.我认为它会很简单<div>并<br/>产生新的线条,但看起来有各种微妙的规则.例如:

<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时).知道在哪里可以找到这种文件吗？

Answer 1

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

我相信你混淆的原因是假设他们遵循相同的新行规则.让我解释.

BR元素.

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

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

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

<br>元素表示换行符.

规范解释了第三个例子的结果:

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

在那里,BR元素根本不被忽略,因为它标志着该线必须在那一点被打破.换句话说,它标志着当前文本行的结束.它不是关于创建新线.

在你的第四个例子中:

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

BR元素也标志着该行的终结.因为该行具有零个字符,所以它呈现为空行.

因此,规则在第三和第四个示例中是相同的.什么都没有被忽视.

DIV元素.

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

在块格式化上下文中,框从一个包含块的顶部开始一个接一个地垂直排列.

因此,这也不是关于创建新行,因为在块格式化上下文中,没有行的概念.它是关于从上到下依次放置块元素.

在你的第二个例子中:

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

空DIV的高度为零,因此它对下一个块级元素的渲染没有影响.

在你的第五个例子中:

<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完全相同的位置.

我相信这就是一切.

Answer 2

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

我不会说第二个div不计算,更准确地说,它的默认块宽度为100%但由于为空而为0px的高度.显然,没有填充和边距,但它在技术上仍然存在.重要的是.

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

br也不会忽略tag,它已经完成了在父块级别的当前文本行中创建换行符的工作div.强调措辞直接来自文档.请注意,它仅提及当前的文本行.它不会创建下一行,如果有内容,它会创建一个可能导致换行的中断.

在它放在第二行之后根本就没有任何文字.因此,下一个div在下面创建并遵守上述规则.

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

基于先前的逻辑,没有任何br标签被忽略.此示例中的两个标记实际上都是在其父块级div元素中创建新的换行符.

这些br标记的作用就像一个标记,表示"从这一点到行尾,在我的父块级元素中,不会允许任何内联内容".但是,在所有这些情况下,没有什么东西可以放在下一行.

接下来div,作为块级元素基本上重置该行为.之前的中断包含在其文本行及其父块级元素中.我们知道这一点,因为一行文本不能在两个块级元素之间拉伸.

关于你对另一个答案的评论.

块级元素始终在新行上开始.如上所述,空div确实存在并且在新行上开始,它只有0高度.如果你有两个嵌套的空div元素,它们都从同一个新行开始,因为它们都是空块级元素,没有任何创建行的内容.如果您div在子项之前向父项添加文本,div它将被推送到新行.如果有帮助,可以将其视为同一行文本.例如:

同一行:

<div>
    <div>
        bar
    </div>
</div>

不同的线条:

<div>
    foo
    <div>
        bar
    </div>
</div>