首页 » 网站建设 »

HTML的空格实体

2017年9月27日 / 82次阅读
HTML

打开支付宝首页,搜索“529018372”,即可领取红包!可重复领。

特色图片

在HTML中,如果连续输入多个空格(直接敲击键盘的space键),无论输入多少个,最后在浏览器显示时,都只有一个空格。如果要想输入多个空格,这时就需要使用HTML提供的空格实体(space entity)

空格实体是字符实体的一种,就是表示空格的实体。而所谓实体,在HTML中,用来输入预留字符的字符串就叫字符实体。比如我们不能再HTML文档中输入<>,浏览器会把<>当成一个HTML标签,这时就只能用实体&lt;和&gt;来代替。

本文只关注HTML的空格实体,涉及一点HTML页面显示空格的宽度问题。

 

在HTML中,一共有4中不同的空格实体:

&nbsp;

它叫不换行空格,全称No-Break Space,它是最常见和我们使用最多的空格,大多数的人可能只接触了&nbsp;它是按下space键产生的空格。

在HTML中,如果你用空格键产生此空格,无论输入多少个空格,最后显示只有1个。要连续使用多个此空格实体,才能表示多个空格。

这种空格是我们最常用的,但是这种空额占据的宽度受字体影响明显而强烈。在网页上,不同的字体导致&nbsp;的宽度不一样,有的时候,这个问题很重要,必须要解决。比如我们在网页上显示源代码代码的时候,就需要使用等宽字体。

&ensp;

它叫“半角空格”,全称是En Space。en是字体排印学的计量单位,为em宽度的一半。根据定义,它等同于字体度的一半(如16px字体中就是8px)。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性:透明的,此空格有个相当稳健的特性,就是其占据的宽度正好是1/2个中文宽度,而且基本上不受字体影响。

&emsp;

它叫“全角空格”,全称是Em Space,em是字体排印学的计量单位,相当于当前指定的点数。例如,1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性:透明的,此空格也有个相当稳健的特性,就是其占据的宽度正好是1个中文宽度,而且基本上不受字体影响。

&thinsp;

它叫窄空格,全称是Thin Space。我们不妨称之为“瘦弱空格”,就是该空格长得比较瘦弱,身体单薄,占据的宽度比较小。它是em之六分之一宽。

 

最后,我们来看一下以上4种HTML空格实体的显示效果:

<!DOCTYPE html>
<html>
<head>
<title>space test</title>
</head>
<body>

<p>|人|</p>
<p>|k|</p>
<p>|&nbsp;|</p>
<p>|&ensp;|</p>
<p>|&thinsp;|</p>
<p>|&emsp;|</p>

</body>
</html>

麦新杰使用360浏览器,在极速模式和兼容模式下,默认字体(360浏览器的默认字体是宋体,HTML文档中也没有指定字体)得到的效果是一样的,如下图:

HTML的空格实体

HTML的空格实体

在默认字体情况下,&nbsp;的宽度和一个因为字母一样。一个中文字的宽度是英文字符宽度的2倍,中文字里面,还有一种空格,叫做全角空格,这种空格,实际上就是一个中文字。

本文链接:http://www.maixj.net/wz/html-kongge-16568
云上小悟 麦新杰(QQ:1093023102)

相关文章

评论是美德

无力满足评论实名制,评论对非实名注册用户关闭,有事QQ:1093023102.


前一篇:
后一篇:

栏目精选

云上小悟,麦新杰的独立博客

Ctrl+D 收藏本页

栏目

AD

ppdai

©Copyright 麦新杰 Since 2014 云上小悟独立博客版权所有 备案号:苏ICP备14045477号-1。云上小悟网站部分内容来源于网络,转载目的是为了整合信息,收藏学习,服务大家,有些转载内容也难以判断是否有侵权问题,如果侵犯了您的权益,请及时联系站长,我会立即删除。

网站二维码
go to top