zoukankan      html  css  js  c++  java
  • 在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>
  • 相关阅读:
    Docker,用任何工具链和任何语言来构建任何应用
    从Docker在Linux和Windows下的区别简单理解Docker的层次结构
    Docker在Windows下的安装以及Hello World
    (译)学习如何构建自动化、跨浏览器的JavaScript单元测试
    由Python的super()函数想到的
    PS:蓝天白云的制作
    PS:缝线颜色随着鞋帮颜色的改变发生改变.files
    Windows8 64位运行Silverlight程序不能访问WCF的解决方案
    背景图片之background的用法
    12306订票助手更新
  • 原文地址:https://www.cnblogs.com/OpenCoder/p/1767851.html
Copyright © 2011-2022 走看看