代码之家  ›  专栏  ›  技术社区  ›  Andy

如何防止HTML源格式设置影响输出?

  •  7
  • Andy  · 技术社区  · 16 年前

    看起来HTML代码中额外的换行符可能会在最终输出中添加不需要的空格。我一直认为,无论我如何布局我的HTML代码,它都不会影响渲染结果的外观。但这里有一个例子:

    <h2>
        <a href="#">Hello.</a>World
    </h2>
    

    你好,世界 “-一切都像预期的那样好

    <h2>
        <a href="#">Hello.</a>
        World
    </h2>
    

    你好世界 “-带着

    有机会消除这种影响吗? 我希望我的代码在单独的行上,而不是产生额外的空间。

    5 回复  |  直到 11 年前
        1
  •  7
  •   Guffa    16 年前

    不,没有,在这种情况下没有。

    在HTML中,所有空格都算作空格,但后面的几个空格字符只算作一个。因此,您的代码相当于:

    <h2> <a href="#">Hello.</a> World </h2>
    

    将删除与块元素相邻的空格,但不会删除文本中的空格。由于锚定标记是一个内联元素,它不能删除它旁边的空格,因为这会更改内容。因此,在删除它可以使用的空间后,剩下的是:

    <h2><a href="#">Hello.</a> World</h2>
    

    所以,只要不是内容的一部分,你可以在任何你喜欢的地方有额外的空白。这:

    <h2    >
    
      <p >  test      test    </p     >
    
      <p   >  test       test  </p  >
    
    </h2   >
    

    <h2><p>test test</p><p>test test</p></h2>
    
        2
  •  19
  •   Ms2ger    16 年前

    <h2>
        <a href="#">Hello.</a><!--
        -->World
    </h2>
    

    或者将空格放在标记内:

    <h2>
        <a href="#">Hello.</a
        >World
    </h2>
    
        3
  •  1
  •   Eimantas    16 年前

    新行总是转换为空格。当每个列表项元素都写在新行中时,IE上的情况甚至变得更糟。悲伤但真实。

        4
  •  1
  •   o.k.w    16 年前

    <h2>
        <a href="#" style="float: left;">Hello.</a>
        <span style="float: left;">World</span>
    </h2>
    

        5
  •  0
  •   AmbroseChapel    16 年前

    假设HTML按照您希望的方式工作。然后说我想要空间。你要我怎么创造它们?添加一个特殊字符,如 &nbsp; 每一次?