什么时候HTML中的空格很重要？

Question

<div><button>one</button><button>two</button></div>

<div>
    <button>one</button>
    <button>two</button>
</div>
?

在第一个div中,两个按钮之间没有空格,第二个按钮之间没有空格.

现在让我们考虑另一个例子:

例2

<div>a</div>
<div> b</div>????????????

之前没有空间b.

a<b> bold</b> man

现在之前的空白bold 是重要的

a <b> bold</b> man

现在只有一个空格(在"a"之后或"粗体"之前)很重要.

当空格被剥离或折叠时,背后的确切规则是什么？

Answer 1

现实有点复杂.有两个部分

解析实际上在解析文本时(与标记相反)删除非常少的空白区域.它将删除元素开头<textarea>和<pre>无效<listing>元素的初始换行符,但这是关于它的.

Jukka引用HTML 4.01部分B.3.1换行符说"必须忽略紧跟在开始标记之后的换行符,必须在结束标记之前的换行符",但这是在非规范性附录和浏览器中做的除了上面提到的三个要素之外,不要遵循它.

这可以通过Jukka的例子在没有空格的换行符上得到证明.请注意#text:树显示中按钮元素周围的节点,如果删除换行符,则不再显示'#text:`节点.

我们还可以看到,通过使用此处的规范中的第一个示例,不应用该规则.通过添加display:pre它清楚地表明换行没有被完全忽略但是两个示例的渲染相同仅仅是默认空白处理的属性white-space:normal

这带来了相关的规范,即16.6.1 CSS规范中的"白空间"处理模型.这涵盖了应用于每个空白区域设置值的文本字符的系统规则.

Answer 2

HTML将串行空格折叠为单个空格，但并没有消除它。换行符是空格，因此是空格。

这不仅是前导/尾随-元素内的串行空白也将呈现为单个空白。这些将呈现相同的结果：

<div>   a   b   </div>
<div> a b </div>
<div>a b</div>

Answer 3

对"HTML中的空白何时重要？"这一问题的完整答案将是相当漫长和详细的,并且需要讨论诸如属性规范之间的空白和具有特殊规则的元素之类的内容textarea.但这个地址似乎是主要关注点:

标签之间的空格通常会创建匿名文本节点.叶元素内的空白(不包含其他元素的元素)构成元素文本内容的一部分.

渲染的固定规则很少,但浏览器通常忽略元素文本内容中的前导和尾随空格.

如果在内联呈现的元素之间存在空格(例如button默认情况下为元素),则它通常用作等效于一个空格的分隔符.

但是,按规格忽略由一个换行符组成的空格 ~~通常在浏览器实践中,~~ 当它紧跟在开始标记之后或在结束标记之前.所以

<div>
<button>one</button>
<button>two</button>
</div>

将被视为没有换行符.但是当使用空格时,如同

<div>
  <button>one</button>
  <button>two</button>
</div>

然后在第一个button元素之前和两个button元素之间存在匿名文本节点.通常只有后者很重要,它就像一个普通的单词空间.

更新:如下面的评论和Alohci的答案所指出的,这个旧的(HTML 4.01)原则大部分都没有在浏览器中实现,并且大多数已经在HTML5中被删除.因此,在大多数情况下,元素之间的换行符会创建一个文本节点,其中包含换行符,该字符被视为等效于空格.