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

引用

菜鸟教程

相关推荐
sunywz21 分钟前
【c#】 Web Deploy一键发布,IIS部署全流程
开发语言·前端·c#
宁&沉沦26 分钟前
Chrome 扩展 Manifest 字段版本支持一览(全量)
前端·后端·编辑器
乖孩子39 分钟前
Service Worker + IndexedDB 实践
前端
浮生望1 小时前
BFF架构实战:用Express+SSE为Vue3搭建安全的流式对话中间层
前端
先吃饱再说1 小时前
React 组件通信:从 Props 单向传递到自定义事件
前端·react.js·前端框架
swipe1 小时前
05|(前端转后全栈)不手写一堆 SQL,后端怎么操作数据库?MyBatis-Plus 入门
前端·后端·全栈
swipe1 小时前
04|(前端转后全栈)前端状态为什么不够用?从页面数据到 MySQL 持久化
前端·后端·全栈
橘子星1 小时前
别光看教程!手把手拆解 React Todo 项目,一文吃透 5 个核心概念
前端·javascript
大白要努力!1 小时前
纯前端实现 PDF 加水印工具 —— 零后端、支持中文、实时预览
前端·pdf·html
石小石Orz2 小时前
TRAE SOLO实战:实现一个桌面3D助手
前端·人工智能