用于渲染新行的 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 Specification Section 9.3 中定义了关于行和段落：

BR 元素强制中断（结束）当前文本行。

在HTML5 Specification Section 4.5 中关于文本级语义：

元素表示换行符。

规范解释了您的第三个示例的结果：

<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 Specification Section 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 用作 Section 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 标签也不会被忽略，它已经完成了在父块级别 div 内的 current line of text 内创建换行符的工作.强调的措辞直接来自文档。请注意，它仅提及当前的文本行。它不会创建下一行，它会创建一个中断，如果有内容，它可能会导致一个新行。

在它之后根本没有任何文本可以放在第二行。因此，下一个 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，作为一个块级元素基本上会重置该行为。先前的中断包含在它们的文本行和它们的父块级元素中。我们知道这一点，因为一行文本不能在两个块级元素之间延伸。

关于您对另一个答案的评论。

Block level elements do always start on a new line. 如上所述，空 div 确实存在并且确实从新行开始，它的高度只是 0。如果您有两个嵌套的空 div 元素，它们都从同一新行开始，因为它们都是空的块级元素，没有任何创建行的内容。如果您在子 div 之前向父 div 添加文本，它将被推送到新行。如果有帮助，可以将其视为同一行文本。例如：

同一行：

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

不同的行：

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

Answer 3

• <DIV> = 除法。这是一组可能混合的内容。
• <BR> = 休息。只是换行符。
• <P> = 段落。

如果您想创建像文字处理器这样的文档，那么<P> 是您的最佳选择。

许多新开发人员在最初几次实施 tinyMCE 时似乎都在为此苦苦挣扎。点击 [enter] 创建一个 <P>，而 [shift]+[enter] 创建一个 <br>。就像文字处理器一样。

Answer 4

我猜你在这里缺少的是 div 是一个块级元素，因此总是开始一个新行（没有 CSS）。关于空的div，我想既然没有什么可显示的，它就不会渲染任何新行；它还可能取决于您的浏览器对 HTML 标准的实现。

您可以在此处找到有关块或内联 HTML 元素的更多信息 here

Answer 5

块级元素将始终从新行开始，除非它是另一个元素的直接第一个子元素。

在你的例子#2中

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

这些行是三行，但由于第二个 div 中没有视觉内容，它们看起来好像是两行。您可以定义自定义边距和边框以获得视觉效果。

br 元素总是会中断内容流，之后的节点将在新行上开始，无论该节点是否恰好是块级元素。

Answer 6

对于第二个示例，您可以将   放入 <div> 中，以便将其呈现为空行。 同样对于您的第四个示例，您可以将双 br 放在第一个 div 中。

但是，我不知道这方面的任何规范。

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

<hr/>

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

Answer 7

在您的问题中，您是说两个 div 之间的 <br/> 标记被忽略。但是您的 sn-p 似乎有问题。其实是不会忽视的。 我已经纠正了剪断。这是在中间插入新行的正确方法，而不使用 css

<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</div>
<br/>
<div>Three lines because the br tag is not ignored</div>

<hr/>

<div>one line</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>

Answer 8

让 jQuery 引擎将 HTML 渲染为文本怎么样？看看下面的 sn-p，如果你点击“运行”，你会看到一个只显示文本的警告框：

var sample = $("#sample").text();
alert(sample);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head/>

<body>

  <div id="sample">

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

  </div>
</body>

</html>

您可以使用变量sample 的内容对其进行进一步处理，例如将其提交给AJAX 方法。

如果你运行它，你会发现所有的标签都被考虑了——这只是样式默认值如何定义的问题。话虽如此，我相信您不能完全忽略样式，因为它确实很重要 - 即使您不指定它，也会假定并应用一些样式。

您从$("#sample").text(); 得到的只是换行符和纯文本，这是我从您想要实现的问题中理解的。

Answer 9

根据规范，只有
和 元素用于换行：

• 
  元素只能用于实际上是内容一部分的换行符，如诗歌或地址。
• 
  元素不得用于分隔段落中的主题组（只需使用另一个

  元素）。

您也可以使用（更多信息here）

您可以在规范本身找到更多信息。 （单页版更好搜索）https://www.w3.org/TR/html/single-page.html#elementdef-br

PD：某些属性接受 LF (U+000A)，例如 标记中的 title attribute。

最后，任何空的块元素都可以完成这项工作。 （没有 CSS） 完整列表是here