HTML 空格符

在网页中插入多个空格是html中经常用到的,实现html空格的方式有很多种,下面给大家一一介绍。

  1.   :一个字符的半角的不断行的空格,如果需要在网页中插入多个空格,可以将" "代码写多遍(常用方式);
  2.   :一个字符的半角的空格,也可以将" "写多遍来插入多个空格;
  3.   :两个字符的全角的空格,也可以将" "写多遍来插入更多的空格;
  4.   :小于一个字符的空格;说明:单词后面的分号记得带上,是不能省略的,它也是html代码中的一部分
xml 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>网页中怎么插入多个空格-基础教程</title></head>
<body>
<p>html空格&nbsp;&nbsp;&nbsp;空格&nbsp;&nbsp;&nbsp;基础教程</p>
<p>html空格&ensp;&ensp;&ensp;空格&ensp;&ensp;&ensp;基础教程</p>
<p>html空格&emsp;&emsp;&emsp;空格&emsp;&emsp;&emsp;基础教程</p>
<p>html空格&thinsp;&thinsp;&thinsp;空格&thinsp;&thinsp;&thinsp;基础教程</p>
</body>
</html>

如图:

为什么要使用html空格符号代码

我们为什么要使用html空格符号代码呢?为什么不直接在键盘上敲几个空格呢?当你实际操作的时候,你会发现:默认情况下,无论你在html源代码中敲几个空格,在浏览器中运行都只显示一个空格。所以我们就需要使用html空格符号代码来实现网页中多个空格的效果。

上面为什么会说在默认情况下呢?其实我们还可以使用css中的"white-space"属性来实现多个空格的效果。就是将"white-space"属性值设置为"pre",设置之后,浏览器就会保留html源代码中的空格和换行。这下你在源代码中敲几个空格,浏览器中运行就会用几个空格。

说明:一般在网页开发中,都是使用html空格符号代码来实现多个空格的效果。

HTML中各类空格占位符

符号 表示
&#32; 普通的英文半角空格
&#160; &nbsp; &#xA0; 普通的英文半角空格但不换行
&#12288; 中文全角空格(一个中文宽度)
&#8194; &ensp; 半角(en)空格 (半个中文宽度,不受字体影响)
&#8195; &emsp; 全角(em)空格 (一个中文宽度,不受字体影响)
&#8197; 四分之一全角(em)空格 (四分之一中文宽度)
&#32; 普通空格
&nbsp; 相比普通空格,不间断,按下space键产生的空格,不累加

em是字体排印学的计量单位,相当于当前指定的点数。例如,1 em在16px的字体中就是16px。

en是字体排印学的计量单位,为em宽度的一半。根据定义,它等同于字体度的一半(如16px字体中就是8px)。等于是小写字母n的宽度。

拥有不间断(non-breaking)特性指:

连续的nbsp会在同一行内显示。即 假使有无数个连续的nbsp,浏览器也不会把它们拆成两行

引用

菜鸟教程

相关推荐
计算机魔术师5 分钟前
GPT-6 Astra幻觉砍到2%,却被一种老招数轻松绕过
前端
cjy00011126 分钟前
2026AI 产品如何从一次性 Demo 变成可重复使用的业务工具?
前端·人工智能·fde
IT_陈寒32 分钟前
React的状态更新坑得我差点加班到天亮
前端·人工智能·后端
风骏时光牛马44 分钟前
深挖底层逻辑:XX源码深度拆解分析
前端
电商API_180079052471 小时前
电商商品价格监控工具淘宝京东商品价格抓取API项目实操分享
java·大数据·开发语言·前端·数据挖掘
sxmas1 小时前
用状态机与DAG建模四阶段业务流程:以MIND模型为例
前端
倔强的石头1062 小时前
【Linux指南】动静态库系列(七):符号表与重定位:链接器如何把函数调用接起来
linux·前端·javascript
a1117763 小时前
3D 脑图谱 / Bilingual 3D Brain Atlas 项目
前端
T1mzhou3 小时前
ARM64 Linux 6.10内核启动流程2-rootfs 怎么挂上
linux·服务器·前端
小小尚@4 小时前
WebGIS/ECharts 地图开发|MapLand 在线行政区划边界一键下载 GeoJSON 工具
前端·javascript·echarts