HTML的5种空格表示

HTML空格实体详解
本文详细介绍了HTML中的五种空格实体,包括非断行空格( )、半角空格( )、全角空格( )、窄空格( )及零宽不连字(‌)和零宽连字(‍),并解释了它们在不同浏览器中的表现和用途。
HTML提供了5种空格实体(space entity),它们拥有不同的宽度,非断行空格( )是常规空格的宽度,可运行于所有主流浏览器。其他几种空格(       ‌‍)在不同浏览器中宽度各异。
 
         
 
它叫不换行空格,全称No-Break Space,它是最常见和我们使用最多的空格,大多数的人可能只接触了 ,它是按下space键产生的空格。在HTML中,如果你用空格键产生此空格,空格是不会累加的(只算1个)。要使用html实体表示才可累加,
该空格占据宽度受字体影响明显而强烈。
 
         
 
它叫“半角空格”,全称是En Space,en是字体排印学的计量单位,为em宽度的一半。根据定义,它等同于字体度的一半(如16px字体中就是8px)。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性:透明的,此空格有个相当稳健的特性,
就是其占据的宽度正好是1/2个中文宽度,而且基本上不受字体影响。
 
 
         
 
它叫“全角空格”,全称是Em Space,em是字体排印学的计量单位,相当于当前指定的点数。例如,1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性:透明的,此空格也有个相当稳健的特性,
就是其占据的宽度正好是1个中文宽度,而且基本上不受字体影响。
 
         
 
它叫窄空格,全称是Thin Space。我们不妨称之为“瘦弱空格”,就是该空格长得比较瘦弱,身体单薄,占据的宽度比较小。它是em之六分之一宽。
 
‌ 
 
它叫零宽不连字,全称是Zero Width Non Joiner,简称“ZWNJ”,是一个不打印字符,放在电子文本的两个字符之间,抑制本来会发生的连字,而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为“”(zero width non-joiner,U+200C),HTML字符值引用为: ‌
 
‍
 
它叫零宽连字,全称是Zero Width Joiner,简称“ZWJ”,是一个不打印字符,放在某些需要复杂排版语言(如阿拉伯语、印地语)的两个字符之间,使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML: ‍ ‍)。
 
此外,浏览器还会把以下字符当作空白进行解析:空格( )、制表位(	)、换行(
)和回车(
)还有( )等等。

转载于:https://www.cnblogs.com/SimonHu1993/p/9257176.html

HTML 中,普通的空格键输入会被浏览器忽略,尤其是在多个连续空格的情况下。为了确保页面中能够正确显示所需的空格效果,HTML 提供了多种方式来表示空格。 ### 1. 使用普通空格字符 如果只需要一个或少量的空格,并且不介意在源代码中多次输入空格键,可以在 HTML 中直接使用空格键输入。不过需要注意的是,即使输入多个空格,浏览器默认只会显示为一个空格[^2]。 ```html <p>这是 一个 普通空格的例子</p> ``` 上面的代码在浏览器中会显示为: ``` 这是 一个 普通空格的例子 ``` ### 2. 使用 ` ` 表示不断行的空格 如果需要多个空格并且希望它们不会被浏览器合并,可以使用 HTML 转义字符 ` `(no-break space)。每输入一个 ` ` 就表示一个不可断行的空格[^1]。 ```html <p>这是   一个   固定空格的例子</p> ``` 上述代码会在浏览器中显示为: ``` 这是 一个 固定空格的例子 ``` ### 3. 使用其他特殊空格字符 除了 ` ` 外,HTML 还支持一些其他类型的空格符号,适用于不同的排版需求: - ` `:表示半个中文字符宽度的空格(通常等于两个普通空格的一半)。 - ` `:表示一个全角空格(通常等于一个中文字符的宽度)[^3]。 ```html <p>这是 一个 半宽空格的例子</p> <p>这是 一个 全宽空格的例子</p> ``` ### 4. 使用 CSS 控制空白间距 在现代网页开发中,也可以通过 CSS 的 `white-space` 属性控制空白符的处理方式。例如: ```css .white-space-pre { white-space: pre; } ``` 然后在 HTML 中使用: ```html <p class="white-space-pre">这是 一个 保留空白的例子</p> ``` 这样,所有空格和换行都会按照源代码中的格式保留下来[^2]。 --- ### 总结 根据实际需求选择合适的空格表示方法: - 若只需少量空格,可直接使用普通空格; - 若需要多个不被合并的空格,推荐使用 ` `; - 若需要特定宽度的空格,如半宽或全宽空格,可使用 ` ` 或 ` `; - 若需要保留整个段落中的空白格式,可以通过 CSS 的 `white-space` 属性实现。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值