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

引用

菜鸟教程

相关推荐
excel7 分钟前
Qiankun 子应用生命周期及使用场景解析
前端
weixin_4462608511 分钟前
Django - 让开发变得简单高效的Web框架
前端·数据库·django
ObjectX前端实验室1 小时前
【react18原理探究实践】异步可中断 & 时间分片
前端·react.js
SoaringHeart1 小时前
Flutter进阶:自定义一个 json 转 model 工具
前端·flutter·dart
努力打怪升级1 小时前
Rocky Linux 8 远程管理配置指南(宿主机 VNC + KVM 虚拟机 VNC)
前端·chrome
brzhang2 小时前
AI Agent 干不好活,不是它笨,告诉你一个残忍的现实,是你给他的工具太难用了
前端·后端·架构
brzhang2 小时前
一文说明白为什么现在 AI Agent 都把重点放在上下文工程(context engineering)上?
前端·后端·架构
reembarkation2 小时前
自定义分页控件,只显示当前页码的前后N页
开发语言·前端·javascript
gerrgwg3 小时前
React Hooks入门
前端·javascript·react.js
ObjectX前端实验室3 小时前
【react18原理探究实践】调度机制之注册任务
前端·react.js