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

And*_*ndy 7 html whitespace code-formatting

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

<h2>
    <a href="#">Hello.</a>World
</h2>
Run Code Online (Sandbox Code Playgroud)

将展示:" Hello.World " - 所有看起来都很好

<h2>
    <a href="#">Hello.</a>
    World
</h2>
Run Code Online (Sandbox Code Playgroud)

将显示:" Hello.World " - 点后面有一个额外的空格!

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

Ms2*_*ger 19

你可以使用评论:

<h2>
    <a href="#">Hello.</a><!--
    -->World
</h2>
Run Code Online (Sandbox Code Playgroud)

或者将空格放在标签内:

<h2>
    <a href="#">Hello.</a
    >World
</h2>
Run Code Online (Sandbox Code Playgroud)


Guf*_*ffa 7

不,没有,不是在这种情况下.

在HTML中,所有空格都计为空格,但是几个空白字符之后只计为一个.所以,你的代码相当于:

<h2> <a href="#">Hello.</a> World </h2>
Run Code Online (Sandbox Code Playgroud)

删除块元素旁边的空格,但不删除文本内的空格.由于锚标记是内联元素,因此无法删除其旁边的空间,因为这会更改内容.因此,在删除空间后,这就是剩下的:

<h2><a href="#">Hello.</a> World</h2>
Run Code Online (Sandbox Code Playgroud)

因此,只要不是内容的一部分,您可以在任何地方拥有额外的空白区域.这个:

<h2    >

  <p >  test      test    </p     >

  <p   >  test       test  </p  >

</h2   >
Run Code Online (Sandbox Code Playgroud)

将等效于(删除不影响结果的空格后):

<h2><p>test test</p><p>test test</p></h2>
Run Code Online (Sandbox Code Playgroud)

  • 它实际上相当于:<h2> <p>测试测试</ p> <p>测试测试</ p> </ h2> (9认同)