什么时候空格在HTML中至关重要？ [英] When does whitespace matter in HTML?

问题描述

示例1

  < DIV><按钮 - 酮< /按钮><按钮>二< /按钮>< / DIV> 
 
< div> 
<按钮>一个< /按钮> 
<按钮>两个< /按钮> 
< / div> 
 
  

在第一个div中，两个按钮之间没有空格，在第二个现在让我们考虑另一个例子：

.net / g5FBv / 1 />示例2

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

没有空间在那之前 b 。

示例3

  A< b取代;粗体< / B个man 
  

现在加粗 显着

示例4

  a< b取代;粗体< / B个man 
  

现在只有一个空格（在a之后或bold之前）是显着的。

问题

什么是剥离或折叠空白时的确切规则？

解决方案

现实有点复杂。有两部分内容：

1. 解析功能。


2. 渲染功能。
>

解析实际上在解析文本时（与标记相反）删除了很小的空白区域。它会在<$ c $开头删除一个初始换行符c>< textarea> 和< pre> 元素以及无效< listing> ; 元素，但就是这样。

Jukka指HTML 4.01节 B.3.1换行符表示必须忽略开始标签之后的换行符，因为必须在结束标记之前立即换行，但这是在非规范性附录中，除了上述三个元素外，浏览器不遵循它。

这可以用Jukka的例子来证明这里在换行符上没有空格。请注意树显示中按钮渐变周围的 #text：节点，并且如果删除换行符，则不会再出现'#text：`节点。 p>

我们还可以看到，该规则不是通过使用规范中的第一个示例来应用的这里。通过添加 display：pre 很明显，换行符不会被完全忽略，但是呈现两个示例相同仅仅是默认空白处理的一个属性 white-space：normal

这将我们引向相关规范，即 16.6.1 CSS规范中的'空白'处理模型。这涵盖了要应用于每个空白设置值的文本字符的系统规则。

example 1

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

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

In the first div there is no space between the two buttons, in the second, there is.

Now let's consider another example:

example 2

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

There is no space before that b.

example 3

a<b> bold</b> man

Now the whitespace before bold is significant

example 4

a <b> bold</b> man

Now only one of the spaces (after the "a" or before "bold") is significant.

question

What are the exact rules behind when whitespace is stripped or collapsed?

解决方案

The reality is somewhat complicated. There are two parts

1. What the parsing does.
2. What the rendering does.

The parsing actually removes very little white space whilst parsing text (as opposed to markup). It will remove an initial line feed character at the start of <textarea> and <pre> elements and also on the invalid <listing> element, but that's about it.

Jukka refers to the HTML 4.01 section B.3.1 Line breaks saying that "a line break immediately following a start tag must be ignored, as must a line break immediately before an end tag" but that is in a non-normative appendix and browsers do not follow it except for the three elements mentioned above.

That can be demonstrated using Jukka's example here on line breaks with no spaces . Note the #text: nodes around the button elmeents in the tree display, and that if the line breaks are removed, the '#text:` nodes no longer appear.

We can also see that the rule is not applied by using that first example from the specification here. By adding display:pre it's clear that the line breaks are not exactly ignored but that the rendering the two examples the same is merely a property of the default white-space handling being white-space:normal

Which brings us to the relevant spec, which is 16.6.1 The 'white-space' processing model in the CSS spec. This covers the systematic rules to be applied to the text characters for each of the white-space setting values.

这篇关于什么时候空格在HTML中至关重要？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！