Question

html 代码空格或换行对执行结果产生影响

代码段1:
<span style="background:#0099CC;">db</span> <span style="background:#0099CC;">db</span>
代码段2:
<span style="background:#0099CC;">db</span>
<span style="background:#0099CC;">db</span>
代码段3:
<span style="background:#0099CC;">db</span><span style="background:#0099CC;">db</span>

代码段1与代码段2由于在代码中多加了回车和空格,运行结果时居然会使2个span有间隙,而代码段3则没有,这是为什么?
那代码中的空格与 有什么区别,为什么代码中的空格也会被真的解析为空格,谢谢你们可不可以也回答一下

Answer 1

<>内的是标签名和标签的属性，
并不一定是要向外显示的内容，
所以 代码段3 没有空格，

代码段1 中空格在两个标签之间，所以他可以被显示，

代码段2 标签之间之间的回车表示两个标签不是直接前后连接的，所以他们之间也会有空格显示，
如果，他们是包含在一个<pre>标签内，这个回车将会以换行形式表现出来。

Answer 2

有影响。
对于html内置的内联级标签以及表单元素标签，源代码中连续几个内联级标签中的换行在浏览器中会被解释为一个空格。
　　包括ie和ff。而这个空格是会被当作一个空白节点（nodeType等于3的节点，就是文字节点）。

　　对于html内置的块级标签使用了display:inline;则没上述问题。

　　对于html内置的块级标签之间的换行，ff会当作一个空白节点（用js可以获取到），ie则会忽略掉这个换行。

　　这个换行在ie和ff的页面上并无任何影响，不会出现空格。

Answer 3

因为空格在HTML中算做一个字符,所以在解析时会当成代码处理