如何防止HTML源格式影响输出？

Question

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

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

将显示：“ Hello.World ” - 看起来一切顺利

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

将显示：“ Hello。世界” - 点后面有额外空格！

有没有机会摆脱这种影响？ 我希望将代码放在不同的行上 - 而不是产生额外的空间。

Answer 1

您可以使用评论：

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

或将空格放在标签内：

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

Answer 2

不，没有，不是在这种情况下。

在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>

Answer 3

新行始终会转换为空格。当每个列表项元素都以新行写入时，它甚至会在IE上变得更糟。悲伤却又是真的。

Answer 4

我怕你不能。任何一组白色空间都被视为空间。

替代方案：

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

但是由于浮动元素，你还有另外一组需要解决的问题。

Answer 5

假设HTML按您希望的方式工作。然后说我想要空间。你怎么让我创造它们？每次都添加一个特殊字符