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

引用

菜鸟教程

相关推荐
脾气有点小暴7 小时前
uniapp通用递进式步骤组件
前端·javascript·vue.js·uni-app·uniapp
问道飞鱼7 小时前
【前端知识】从前端请求到后端返回:Gzip压缩全链路配置指南
前端·状态模式·gzip·请求头
小杨累了7 小时前
CSS Keyframes 实现 Vue 无缝无限轮播
前端
小扎仙森7 小时前
html引导页
前端·html
小飞侠在吗8 小时前
vue toRefs 与 toRef
前端·javascript·vue.js
csuzhucong8 小时前
斜转魔方、斜转扭曲魔方
前端·c++·算法
燃烧的土豆8 小时前
100¥ 实现的React项目 Keep-Alive 缓存控件
前端·react.js·ai编程
半生过往8 小时前
前端运行PHP 快速上手 使用 PHPStudy Pro 详细搭建与使用指南
开发语言·前端·php
zlpzlpzyd8 小时前
ecmascript中Promise和async/await的区别
开发语言·前端·ecmascript
streaker3038 小时前
从零实现一个“类微信”表情输入组件
前端·vue.js·element