html中空格符号以及空格字符实体的总结

刚开始学习html的时候,会遇到一个这样的问题,html中空格怎么打?有的人可能就直接敲了一下空格键,但是这样是不正确的,毕竟敲的空格键不是一个代码,所以接下来本篇文章就来给大家介绍一下html中空格代码该怎么写。
在html中有五种空格的代码

( 以常用用户名密码登录界面来展示说明 )

html中空格代码的写法一:&nbsp (不换行空格)

<html>
<head>
    <title>Title</title>
</head>
<body>
    <form action="<%=request.getContextPath()%>/user?method=login" method="post">
        用户名:<input type="text" name="name"/> <br/>
        密&nbsp码:<input type="password" name="password"/>
        <input type="submit" value="登录"/>
    </form>
</body>
</html>


效果:

说明:一个 空格符只代表一个空格,如果要多个空格就需要敲多个 空格符,该空格占据宽度受字体影响明显而强烈。

html中空格代码的写法二:&ensp;(半角空格)

看一个小例子:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <form action="<%=request.getContextPath()%>/user?method=login" method="post">
        用户名:<input type="text" name="name"/> <br/>
        密&ensp;码:<input type="password" name="password"/>
        <input type="submit" value="登录"/>
    </form>
</body>
</html>

效果:



说明:&ensp全称是En Space,en是字体排印学的计量单位,为em宽度的一半。根据定义,它等同于字体度的一半(如16px字体中就是8px),其占据的宽度正好是1/2个中文宽度,而且基本上不受字体影响。

html中空格代码的写法三:&emsp;(全角空格)

小例子:

<html>
<head>
    <title>Title</title>
</head>
<body>
    <form action="<%=request.getContextPath()%>/user?method=login" method="post">
        用户名:<input type="text" name="name"/> <br/>
        密&emsp;码:<input type="password" name="password"/>
        <input type="submit" value="登录"/>
    </form>
</body>
</html>


效果:



说明:&emsp全称是Em Space,em是字体排印学的计量单位,相当于当前指定的点数。例如,1 em在16px的字体中就是16px。其占据的宽度正好是1个中文宽度,而且基本上不受字体影响。

html中空格代码的写法四:&thinsp;(窄空格)

小例子:

<html>
<head>
    <title>Title</title>
</head>
<body>
    <form action="<%=request.getContextPath()%>/user?method=login" method="post">
        用户名:<input type="text" name="name"/> <br/>
        密&thinsp;码:<input type="password" name="password"/>
        <input type="submit" value="登录"/>
    </form>
</body>
</html>



效果:



说明:该空格长得比较瘦弱,身体单薄,占据的宽度比较小。它是em之六分之一宽。

html中空格代码的写法五:&zwnj;(零宽不连字)



说明:&zwnj;

<html>
<head>
    <title>Title</title>
</head>
<body>
    <form action="<%=request.getContextPath()%>/user?method=login" method="post">
        用户名:<input type="text" name="name"/> <br/>
        密&zwnj;码:<input type="password" name="password"/>
        <input type="submit" value="登录"/>
    </form>
</body>
</html>

 

是一个不打印字符,放在电子文本的两个字符之间,抑制本来会发生的连字,而是以这两个字符原本的字形来绘制。

html中空格代码的写法六:&zwj(零宽连字)

说明:&zwj;是一个不打印字符,放在某些需要复杂排版语言(如阿拉伯语、印地语)的两个字符之间,使得这两个本不会发生连字的字符产生了连字效果。

 

 

  • 5
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值