为什么HTML要求多个空格在浏览器中显示为一个空格?

我很早就认识到,HTML文件中的任何空格都将只显示为一个空格。 比如这个:

<p>Hello. Hello. Hello. Hello. Hello.</p> 

显示为:

你好。 你好。 你好。 你好。 你好。

这非常好,就好像你需要预格式化文本的多个空格,你可以使用<pre>标签。 但是是什么原因? 更确切地说, 为什么在HTML的规范中呢?

空格在HTML中是压缩的,因为HTML格式化和应该如何呈现是有区别的。 考虑一下这样的页面:

 <html> <body> <a href="mylink">A link</a> </body> </html> 

例如,如果HTML是使用空格缩进的,则链接前面会有几个空格。

试图解决“为什么”这可能是因为HTML是基于SGML的 ,这已经指明了这一点。 它是从60年代初开始基于GML 。 空白处理的原因很可能是因为数据在一段时间被input一张“卡”,这可能导致不希望的句子和段落的分解。 旧的GML的一个区别在于,它规定句子之间必须有两个空格(如旧的打字机规则),这可能已经确立了空格与标记无关的先例。

它不仅在规范中 ,而且还有一些意义。 如果空格不是压缩的,你将不得不把所有的HTML放在一行。 所以像这样的东西:

 <div> <h1>Title</h1> <p> This is some text <a href="#">Read More</a> </p> </div> 

会有一些奇怪的空间与整个地方alignment。 唯一正确的方法是压缩那些难以维护的代码。

“为什么多个空间转换为单个空间?”

首先,“为什么”的问题很难回答。 这是在规范。 这几乎是结束了。

考虑有几种白色空间。

  • 标签之间的空白区域。 <p>\n<b>hi</b>\n</p>

  • 标签内的空白空间。 <p>Hi <i>everyone</i>.</p>

  • <pre>或CDATA部分中有空格。

前两个很难区分。 标签之间的空白(即使是XML)也是“可选的”。 但是当你有所谓的“混合内容模式” – 与内容混合的标签 – “标签之间”和“内容之间但标签之间”和“内容之间而不是标签之间”的微妙之处是不可能的整理。

所以他们不把它整理出来。 内容中的标记和空白之间的空格全部是可选的。

正如其他人所说,这是在HTML规范。

如果要保留输出中的空格,可以使用<pre>标记 :

 <pre>This text has extra spaces and newlines</pre> 

但是这通常也会以不同的字体显示文本。

如果浏览器没有这样做,可能很难格式化您的HTML代码,使其易于阅读。 例如,你可能想要像这样格式化你的代码:

 <html> <body> <div> I like to indent all content that is inside div tags. </div> </body> </html> 

如果浏览器不忽略div标签中的文本之前的八个左右的空格,那么您的网页可能看起来不像您期望的样子。

这是在HTML规范。 这是关于字间空间被呈现为ASCII空间的部分。

http://www.w3.org/TR/html401/struct/text.html

很简单,这是在规范。

从HTML规范中, 第9.1节 :

特别是,用户代理应该在生成输出字间空间时折叠input空白序列。

要回答这是为什么在HTML的规范? 你必须考虑HTML的起源。

Tim Berners-Leedevise了用于共享科学文档的HTML。 他基于SGML中的预先存在的语法思想,也有类似的空白处理。

可以想象,早期的CERN的HTML编写者没有使用所见即所得工具的帮助,所以以这种方式处理空白的能力帮助了这种手写源文件的易读性。

还有一个印刷的答案:单词和句子之间应该只有一个空格,不pipe你打字的老师在学校告诉你什么。

在句子之间使用一个空格

在句子之间使用一个单词空格

通常,这些devise决定没有在任何规范中进行logging,只能从工作组讨论档案中收集,这些档案恰好可以公开访问,或由规范作者自己解释。 但是,在这种特殊情况下, HTML 3.2会声明以下内容:

除了在文本文本中(例如PRE元素),HTML将空白字符的连续序列视为等价于单个空格字符(ASCII十进制32)。 这些规则使作者在直接编辑标记文本时具有相当大的灵活性。 请注意,未来对HTML的修订可能允许对关联样式表定义的选项卡规则进行水平制表符(ASCII小数点9)的解释。

您今天看到的行为当然比HTML 3.2中的更复杂,但是我相信推理仍然适用。 这种灵活性可能有用的一个例子是,当你有一个长段落,你打算硬包装和缩进:

 <H1>Lorem ipsum</H1> <P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fastidii oportere consulatu no quo. Vix saepe labores an, pri illud mentitum et, ex suas quas duo. Sit utinam volutpat ea, id vis cibo meis dolorum, eam docendi accommodare voluptatibus no. Id quaeque electram vim, ut sed singulis neglegentur, ne graece alterum has. Simul partiendo quaerendum et his. 

如果空格没有被折叠,那么最后会出现一个段落,由于缩进,文本被硬包装的空隙会非常大。

没有其他HTML规范build议在这个devise决定背后有任何推理。 特别是HTML 4只描述了折叠行为,而HTML5和生活规范都遵循CSS,这也不能解释任何事情 。 早期版本的HTML也不包含任何解释,尽pipe下面的摘录确实出现在HTML 2.0的示例代码片段中:

 <OL> ... <UL COMPACT> ... <LI> Whitespace may be used to assist in reading the HTML source. </UL> ... </OL> 

HTML的定义/规范明确规定忽略多余的空格。

如果您想要包含多余的空格,请使用<pre>标记或者<pre>