用于渲染新行的HTML规范？

Question

我试图将一些简单的HTML文档（主要包含div和br标签）渲染为纯文本，但是我在何时添加新行时苦苦挣扎。我认为<div>和<br/>生成新行很简单，但看起来有各种微妙的规则。例如：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

所以我正在寻找关于如何在HTML文档中呈现新行的规范（当没有应用CSS时）。知道在哪里可以找到这种文件吗？

Answer 1

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

我认为你混淆的原因是假设他们遵循相同的新行规则。 让我解释一下。

BR元素。

BR在HTML4 Specification Section 9.3中定义有关行和段落：

  

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

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

  

＆lt; br＆gt; element表示换行符。

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

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

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

关于您对其他答案的评论。

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

同一行：

div

不同的行：

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

对于第二个示例，您可以将 放在<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 6

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

在你的例子中＃2

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

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

br元素将始终打破内容流，之后节点将在新行上开始，无论该节点是否恰好是块级元素。

Answer 7

在你的问题中，你说两个div之间的<br/>标记是忽略的。但你的片段似乎有些错误。实际上它不会忽视。 我纠正了剪辑。这是在两者之间插入新行的正确方法，而不使用css

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 8

如何让 jQuery 引擎将HTML呈现为文字？如果您点击＆＃34;运行＆＃34;请查看下面的代码段。您将看到一个仅显示文本的警告框：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

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

Answer 9

根据规范，只有＆lt; br＆gt;和＆lt; wbr＆gt;元素用于换行：

• ＆LT峰; br＆GT;元素必须仅用于实际上是内容部分的换行符，如诗歌或地址。
• ＆LT峰; br＆GT;元素不得用于分隔段落中的专题组（只需另一个＆lt; p＆gt;元素）。

你也可以使用＆lt; wbr＆gt; （更多信息here）

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

PD：某些属性接受LF（U + 000A），如＆lt; abbr＆gt;中的title attribute。标签

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