HTML的空格你知道几个?

本文深入探讨HTML中各种空格实体的使用,包括不换行空格、半角空格、全角空格、窄空格、零宽不连字及零宽连字,解析它们的特性和应用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言 :
HTML目前使用比较多的超文本语言,在编写HTML文件的时候,往往会遇到一些问题。
我们都知道在编写时HTML是不识别空格的,无论输入多少空格都是不会累加。今天就给大家分享一下空格的使用。

1、&nbsp”

它叫不换行空格,全称No-Break Space,它是最常见和我们使用最多的空格,大多数的人可能只接触了&nbsp,它是按下space键产生的空格。在HTML中,如果你用空格键产生此空格,空格是不会累加的(只算1个)。要使用html实体表示才可累加,该空格占据宽度受字体影响明显而强烈。

2、&ensp

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

3、&emsp

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

4、&thinsp

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

5、&zwnj

它叫零宽不连字,全称是Zero Width Non Joiner,简称“ZWNJ”,是一个不打印字符,放在电子文本的两个字符之间,抑制本来会发生的连字,而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为“”(zero width non-joiner,U+200C),HTML字符值引用为: &#8204

6、&zwj
它叫零宽连字,全称是Zero Width Joiner,简称“ZWJ”,是一个不打印字符,放在某些需要复杂排版语言(如阿拉伯语、印地语)的两个字符之间,使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML: &#8205 , &zwj )。

小结:
HTML是非常有意思的,其中有好多奥秘等着去发现。

HTML中,图表通常指的是通过`<img>`标签插入的图片。HTML中的空格是指文本间的空格、制表符(Tab)、换行符(LF)和回车符(CR)。当你在图表标签之间直接输入空格符时,这些空格通常不会在网页上显示为实际的空格,因为HTML会忽略连续的空白符,并且只保留一个空格。 如果你想要在图表之间有空格显示,你可以使用几种方法: 1. 使用HTML实体` `(Non-Breaking Space),它代表一个空格,且不会因为HTML的压缩而消失。例如: ```html <img src="chart1.png" alt="图表1" /> <img src="chart2.png" alt="图表2" /> ``` 2. 使用CSS样式,将`margin`或`padding`属性应用于`<img>`标签,从而为图表创建空间。例如: ```html <img src="chart1.png" alt="图表1" style="margin-right: 10px;" /> <img src="chart2.png" alt="图表2" style="margin-left: 10px;" /> ``` 或者在CSS文件中设置: ```css img { margin: 0 10px; } ``` 3. 使用HTML的`<br>`标签或其他容器标签(如`<div>`或`<span>`)来添加换行或分隔,从而在图表之间插入空间。例如: ```html <img src="chart1.png" alt="图表1" /><br /><img src="chart2.png" alt="图表2" /> ``` 或者使用`<div>`: ```html <div style="margin-bottom: 10px;"><img src="chart1.png" alt="图表1" /></div> <div style="margin-top: 10px;"><img src="chart2.png" alt="图表2" /></div> ``` 需要注意的是,HTML的显示效果还受到浏览器、CSS和页面布局的综合影响。
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Adam`南帝·梁

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值