在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>
<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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架