在不改变渲染输出的情况下,哪些HTML空白可以安全地丢弃或添加?

在不改变渲染输出的情况下,哪些HTML空白可以安全地丢弃或添加?,html,whitespace,removing-whitespace,Html,Whitespace,Removing Whitespace,我正在开发一个HTML格式化程序(这里有完整的源代码:)。虽然我试着通读了官方的HTML规范,但我仍然很难完全确定哪些地方空白重要,哪些不重要 似乎有三类空格的重要性: 完全重要-类似内部 inline: new Set(['a', 'abbr', 'acronym', 'b', 'basefont', 'bdo', 'big', 'br', 'cite', 'cite', 'code', 'dfn', 'em', 'font', 'i', 'img',

我正在开发一个HTML格式化程序(这里有完整的源代码:)。虽然我试着通读了官方的HTML规范,但我仍然很难完全确定哪些地方空白重要,哪些不重要

似乎有三类空格的重要性:

  • 完全重要-类似内部
    
    
      inline: new Set(['a', 'abbr', 'acronym', 'b', 'basefont', 'bdo', 'big', 'br', 'cite', 'cite', 'code', 'dfn',
                       'em', 'font', 'i', 'img', 'input', 'kbd', 'label', 'q', 's', 'samp', 'select', 'small', 'span',
                       'strike', 'strong', 'sub', 'sup', 'text', 'tt', 'u', 'var']),
    
    
    一个
    两个
    三四
    x
    1       2  
    34y
    Z
    
    • 酒吧
    • 巴兹

    在本讨论中,空格的定义如下:

    ASCII空白是U+0009制表符、U+000A LF、U+000C FF、U+000D CR或U+0020空格

    不间断的空格和其他Unicode空格字符的处理方式与任何其他非空格字符非常相似。(U+000B也可以作为空白,尽管上面没有列出。)

    因此,根据我目前所确定的,这是我现在对HTML空白处理的最好理解:

  • 是一种特殊情况,其中几乎所有的空格都很重要,因为它直接影响作为输入字段分配给textarea的值。虽然可以通过CSS更改此元素的呈现方式,但无论呈现方式如何,空白对于输入值都非常重要
  • 
    对于内联元素中的文本,所有内部连续空白都被视为单个空格。前导空格位于块元素的开头或紧跟在块元素之后时,前导空格将被修剪。当尾随空间位于块元素的末尾或紧靠块元素之前时,尾随空间将被修剪。出于呈现的目的,CDATA节被内联处理,就相邻文本而言

    考虑:

    你好,世界

    今天是星期二。

    “Hello”前面的空格将不会被渲染,因为它位于块的开头。然而,“世界”前面的空间将被渲染。
    之后的空格将不会被渲染,因为它位于块的末尾。“It’s”前面的空间将不会被渲染,因为它跟随一个块

    现在考虑一下:

    我不会为这个消声器花很多钱。

    “I'm”之后的空格和“not”之前的空格将一起视为单个空格。“不”之后的空格和“去”之前的空格也是如此。哪些空间被保留,哪些被丢弃?稍微添加一点CSS样式,给
    一个背景色,就可以看出前面的空格被舍弃,取而代之的是后面的空格:

    这在使用Chrome、Firefox、Safari、IE和Edge时看起来是一致的

    现在有一个非常简单的例子:

    树
    吠叫
    

    前导空格或尾随空格都不重要-它不会被渲染。没有前导空格,没有尾随空格,没有额外的换行符。只是“树皮”。

    浏览器在HTML内容中只呈现一个空格,默认情况下忽略所有其他空格。要添加多个空间,可以使用非中断空间:从html角度看,none*。您所描述的是CSS行为,这将取决于元素的计算样式。(*实际上,属性之间的那些属性将在解析时被删除。)@Massood,像
    这样的事情对我来说不是问题,我已经描述了我所知道的如何将空格序列作为单个空格处理@Kaido,我已经在上面提到了CSS的作用,但是(1)HTML格式化程序主要需要处理各种元素的默认CSS(由使用格式化程序的人来决定,如果他们的CSS发生变化,要小心),以及(2)一些事情,比如表元素之间的空白处理,不容易固定到CSS上(
    行为可能是一个更好的例子)。再一次,从html的角度来看,(几乎)所有这些空白都很重要。因此,如果您真的想要一个html答案,那么它只是“在两个属性声明之间时,只有空格字符跟在空格字符后面。”所有其他内容都是重要的并被保留。@Kaido,所有其他空格和换行符通常不会被保留和呈现,这就是问题所在。从纯粹主义的角度来看,所有内容是否都存储在DOM中在很大程度上是没有意义的。还有其他HTML格式化程序(我只想编写我自己的,以做一些稍微不同的事情),他们显然试图遵循一般规则,即在不使用CSS处理器的情况下,在何处修改或不修改空格,以及以何种方式修改。其他HTML格式化程序不会放弃并说:“天哪,这一切都取决于CSS。我最好根本不碰这个空格!”。
    <div>                 tree    
         bark           </div>