在HTML中小心使用空格和回车

这篇文章介绍一点关于在HTML中使用回车和空格的时候会产生的一个小问题，问题虽小但是可使本人头痛了一阵子，找了好久才找到原因

所以我的最终建议是不要在HTML中强行键入空格和回车这种会占位的空白字符

下面看看这段HTML代码大家就明白是怎么回事了（经IE8测试）：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title ></ title >
</ head >
< body >

< div  id ="div1"   >< input  id ="hidden"  type ="hidden"   />                123 </ div > <!-- 123前面的空格和回车会导致div1的innerText和div1的innerHTML中在123前面出现一个空格 -->
< div  id ="div2"   >< input  id ="hidden1"  type ="hidden"   /> 123 </ div > <!-- 若123和hidden1之间没有空格或回车，那么div2的innerText和div2的innerHTML中在123前面就不会出现空格 -->
< div  id ="div3"   >                                     123 </ div > <!-- 虽然123前面有一大串空格，但是由于其前面无任何同级的HTML标签所以div3的innerText和div3的innerHTML中在123前面也不会产生空格 -->
< div  id ="div4"   >< span ></ span >                 123 </ div > <!-- 虽然123前面有一大串空格，而且前面也有同级的HTML标签span，但是经测试发现内部为空的span和a标签(可能还有其他标签，这里懒得去全部试了)，也不会让123前面出现空格，但是将本行的<span></span>改为<span>123</span>使标签中有文本子标签就另当别论了（事实上如果其内部包括会让空格出现的子标签比如input，也会使123前面出现空格），这样div4的innerText和div4的innerHTML中在123前面就会出现空格 -->

     < input   type ="button"  value ="查看有内标签有空格"  onclick ="alert(document.getElementById('div1').innerText+'\n123');"   />
     < input   type ="button"  value ="查看有内标签无空格"  onclick ="alert(document.getElementById('div2').innerText+'\n123');"   />
     < input   type ="button"  value ="查看无内标签无空格"  onclick ="alert(document.getElementById('div3').innerText+'\n123');"   />
     < input   type ="button"  value ="也不是所有的内标签产生空格"  onclick ="alert(document.getElementById('div4').innerText+'\n123');"   />
</ body >
</ html >

 

 

 

转载于:https://www.cnblogs.com/OpenCoder/archive/2010/06/29/1767851.html