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

Question

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

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

将显示：“ Hello.World ” - 一切都和预期的一样好

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

将显示：“ Hello. World ” -点后有一个额外的空格！

有机会摆脱这种影响吗？我想把我的代码放在不同的行上——而不是产生额外的空间。

score 19 · Accepted Answer

你可以使用评论：

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

或将空格放在标签内：

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

score 7 · Accepted Answer

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

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

恐怕你不能。任何一组空白都被视为一个空格。

替代：

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

但是由于浮动元素，您将有另一组问题需要解决。

score 0 · Accepted Answer

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

5 回答 5