有空白折叠的原因

发布时间 2023-09-10 18:30:25作者: 小张的开发笔记

在HTML中,连续的空白符(多个空格,换行符,缩进)会被浏览器视为一个空格处理,这就是所谓的"空白折叠"。

例如:

<p>This is a          text.</p>
<p>
  This
  is
  a
  text.
</p>
<p>This is a text.</p>

以上三个段落在浏览器中呈现的效果都是相同的,即 "This is a text."(每个单词之间只有一个空格),无论HTML源代码中的空白字符有多少个或如何排列。

这是因为HTML是基于SGML(标准通用标记语言)的,而在SGML(包括HTML和XML)中,连续的空白字符被视为一个空格。这便是空白折叠的原因。

这种特性有时候会带来一些问题,比如我们想在文本中显示多个连续的空格,而浏览器会自动将其折叠为一个。解决这个问题的方法就是使用HTML实体 &nbsp; 来表示空格,或者使用 <pre> 标签保留文本的格式。
这样的设计主要是为了让 HTML 文档的编写更加灵活,使得 HTML 具有更好的可读性和整洁度。

如果连续的空格、换行等空白字符都被一一保留,那么在源码中对 HTML 的格式排版(如缩进、换行等)就会影响到最终的页面布局和呈现效果,这无疑会给开发者造成很大的不便。

另外,这样的空白字符折叠规则会使页面源码的大小更小,有助于减少网络传输的数据量,提高页面的加载速度。

总的来说,这样的设计是基于实践中的需要与便利性出发的,而且这也已经成为了 HTML 的一个标准。对于需要保留空白字符的场景,HTML 也提供了像 <pre> 标签或者 &nbsp; 等解决方法。