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,浏览器也不会把它们拆成两行

引用

菜鸟教程

相关推荐
周周记笔记8 分钟前
初识HTML和CSS(一)
前端·css·html
chxii43 分钟前
在 IIS 中实现 SSL 证书的自动续期
前端
周星星日记1 小时前
vue3中静态提升和patchflag实现
前端·vue.js·面试
橘子编程1 小时前
React 19 全栈开发实战指南
前端·react.js·前端框架
DanCheOo1 小时前
AI Streaming 架构:从浏览器到服务端的全链路流式设计
前端·agent
我是小趴菜1 小时前
前端如何让图片、视频、pdf等文件在浏览器直接下载而非预览
前端
cg331 小时前
开源项目自动化:用 GitHub Actions 让每个 Issue 都被温柔以待
前端
haierccc1 小时前
Win7、2008R2、Win10、Win11使用FLASH的方法
前端·javascript·html
We་ct1 小时前
LeetCode 50. Pow(x, n):从暴力法到快速幂的优化之路
开发语言·前端·javascript·算法·leetcode·typescript·
柠檬味的Cat1 小时前
使用腾讯云COS作为WordPress图床的实践
前端·github·腾讯云