杂记——24.HTML中空格的写法

前几天写项目时,突然对HTML中空格的写法感兴趣,于是搜了一下,现在对其进行总结

HTML不是一种编程语言,而是一种超文本标记语言 (markup language),是网页制作所必备的。超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。下面说一HTML中空格的一些写法

方法一:

在html页面中,我们可以通过键入“空格”键来插入空格。
例:我们在下面代码中输入空格。注:此时是半角状态键入“空格”:

<p class="p1">测试文字| HTML中文网! </p> 
<p class="p2">测试文字|     HTML中文网!</p>

效果图:

可以看出,无论我们在HTML中是键入1个空格或者5个空格,还是其他多个空格,Web浏览器都会自动将这些空格折叠为仅一个空格。
那么我们如何显示多个键入的空格?可以通过在全角状态键入“空格”键,例: 

<p class="p1">测试文字| HTML中文网!</p>  
<p class="p2">测试文字|      HTML中文网!</p>

效果图:

说明:全角空格会被解释为汉字,以空白汉字的形式显示,且是实数显示(有多少就显示多少)。

方法2:使用html的空格符
我们可以使用html中表示空格的字符实体来在html页面中插入空格,下面我们来看看在html中表示空格的字符实体有哪些: 

&nbsp;字符:不断行的空白格,该空格占据的宽度受字体影响(一个字符宽度)。
&ensp;字符:相当全角状态键入半个“空格”键(半个汉字的宽度,一个字符宽度)。
&emsp;字符:相当全角状态键入“空格”键(1个汉字的宽度,两个字符宽度)。

下面我们来看看效果:

<p class="p1">测试文字|&nbsp; 字符nbsp显示空格!</p><br /
<p class="p2">测试文字|&ensp;字符ensp显示空格!</p><br />
<p class="p3">测试文字|&emsp;字符emnsp显示空格!</p>

效果图:

说明:&ensp和&emsp字符所占据的宽度基本上不受字体影响,是相当稳健的。 

个人推荐使用方法二

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/20099.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

创建基于oracle jdk8的自定义docker镜像

创建基于oracle jdk8的自定义docker镜像 1:查看服务器java版本&#xff1a; 如果服务器的版本是open-jdk&#xff0c;则进行如下操作 拷贝相关jdk压缩包&#xff08;.tar.gz后缀&#xff09;到服务器目录&#xff08;例&#xff1a;/usr/local&#xff09; 解压&#xff1a;…

【18】SCI易中期刊推荐——计算机科学(中科院2区)

💖💖>>>加勒比海带,QQ2479200884<<<💖💖 🍀🍀>>>【YOLO魔法搭配&论文投稿咨询】<<<🍀🍀 ✨✨>>>学习交流 | 温澜潮生 | 合作共赢 | 共同进步<<<✨✨ 📚📚>>>人工智能 | 计算机视觉…

你真的会跟 ChatGPT 聊天吗?(下)

接《你真的会跟 ChatGPT 聊天吗&#xff1f;&#xff08;上&#xff09;》&#xff0c;本文下半部分没有无毛猫那么搞笑的内容啦&#xff01;即使如此&#xff0c;哪怕你对文中提及的技术不大了解&#xff0c;也可以毫无压力地看完这篇&#xff0c;描述如何更好地获得 ChatGPT …

Redis数据结构——动态字符串、Dict、ZipList

一、Redis数据结构-动态字符串 我们都知道Redis中保存的Key是字符串&#xff0c;value往往是字符串或者字符串的集合。可见字符串是Redis中最常用的一种数据结构。 不过Redis没有直接使用C语言中的字符串&#xff0c;因为C语言字符串存在很多问题&#xff1a; 获取字符串长度…

基于Python的学生成绩管理系统

末尾获取源码 开发语言&#xff1a;python 后端框架&#xff1a;django 数据库&#xff1a;MySQL5.7 开发软件&#xff1a;Pycharm 是否Maven项目&#xff1a;是 目录 一、项目简介 二、系统功能 三、系统项目截图 四、核心代码 4.1登录相关 4.2文件上传 4.3封装 一、项…

《程序员面试金典(第6版)》面试题 16.19. 水域大小(深度优先搜索,类似棋盘类问题,八皇后的简化版本,C++)

题目描述 你有一个用于表示一片土地的整数矩阵land&#xff0c;该矩阵中每个点的值代表对应地点的海拔高度。若值为0则表示水域。由垂直、水平或对角连接的水域为池塘。池塘的大小是指相连接的水域的个数。编写一个方法来计算矩阵中所有池塘的大小&#xff0c;返回值需要从小到…

【下载】【you-get】用电脑下载网页视频

分享一下&#xff0c;此方法是在网络上看到的&#xff0c;但忘了出处。 一、前提 电脑安装了python软件&#xff0c;版本无要求。建议上官网下载软件。记得配置好环境&#xff08;将pyhton的scripts文件夹的路径加到用户变量里&#xff09;。 二、方法 1、安装you-get库 &am…

Java8之Stream操作

Java8之Stream操作 stream干啥用的&#xff1f;创建流中间操作终结操作好文推荐----接口优化思想 stream干啥用的&#xff1f; Stream 就是操作数据用的。使用起来很方便 创建流 → 中间操作 → 终结操作 Stream的操作可以分为两大类&#xff1a;中间操作、终结操作 中间操作可…

前端自学好还是培训好?女生有多适合学前端,我来告诉你!

2023年了&#xff0c;你是否还在迷茫或者每个月拿着5/6k做着卷死的工作&#xff0c;不但存不下钱还不能好好享受生活&#xff0c;如果是&#xff0c;那你真该考虑一下转行了。 好程序员先说说前端到底怎么开始学&#xff1a; 有的伙伴说今年28岁了&#xff0c;学的会计&#xf…

Java --- redis7之布隆过滤器BloomFilter

目录 一、布隆过滤器BloomFilter 1.1、面试题 1.2、 布隆过滤器简介 1.2.1、设计思想 1.3、特点 1.4、布隆过滤器原理 1.4.1、实现原理与数据结构 1.4.2、添加key、查询key 1.4.3、hash冲突导致数据不精准 1.4.4、三步骤 1.4.5、布隆过滤器误判&#xff0c;为什么不…

xormplus是xorm的增强版,为xorm提供类似ibatis的配置文件及动态SQL支持

简介 xorm是一个简单而强大的Go语言ORM库&#xff0c;通过它可以使数据库操作非常简便。本库是基于原版xorm的定制增强版本&#xff0c;为xorm提供类似ibatis的配置文件及动态SQL支持&#xff0c;支持AcitveRecord操作。 github地址:https://github.com/armingli/xorm //安装…

FE_Vue学习笔记 条件渲染[v-show v-if] 列表渲染[v-for] 列表过滤 列表排序

1 条件渲染 v-show v-if 使用template可以使其里面的内容在html的结构中不变。条件渲染&#xff1a; v-if 1&#xff09;v-if“表达式” 2&#xff09;v-else-if“表达式” 3&#xff09;v-else {} 适用于&#xff1a;切换频率较低的场景。特点&#xff1a;不展示的DOM元素直…

( 位运算 ) 231. 2 的幂 / 342. 4的幂 ——【Leetcode每日一题】

❓题目一 231. 2 的幂 难度&#xff1a;简单 给你一个整数 n&#xff0c;请你判断该整数是否是 2 的幂次方。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 如果存在一个整数 x 使得 n 2 x n 2^x n2x &#xff0c;则认为 n 是 2 的幂次方。 …

智慧档案馆建设之八防十防常用的设备

档案八防十防常用的十款设备 序号 名称 1 温湿度传感器 2 空气质量云测仪 3 恒湿净化一体机 4 健康防护一体机 5 综合智能触摸一体化区域控制器 6 空调红外学习控制模块 7 漏水检测控制器及感应线 8 数字烟雾传感器 9 红外防盗传感器 10 系统软件平台 附…

连接器:一种可靠耐用、节约成本的同为科技(TOWE)工业连接器

随着我国经济建设水平的飞速发展&#xff0c;工业连接器被广泛应用于工业、化工、机场、船舶、码头、建筑、铁路、医疗、会展、商业演出等领域。工业连接器的作用是用于连接一个电路导体与另一个电路导体、或一个传输元件与另一个传输元件的装置&#xff0c;并且为两个电路子系…

涅槃重生,BitKeep如何闯出千万用户新起点

在全球&#xff0c;BitKeep钱包现在已经有超过千万用户在使用。 当我得知这个数据的时候&#xff0c;有些惊讶&#xff0c;也有点意料之中。关注BitKeep这几年&#xff0c;真心看得出这家公司的发展之迅速。还记得2018年他们推出第一个版本时&#xff0c;小而美&#xff0c;简洁…

Java每日一练(20230513) 输出最值、盛水容器、旋转数组II

目录 1. 输出最值 ※ 2. 盛最多水的容器 &#x1f31f;&#x1f31f; 3. 搜索旋转排序数组 II &#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每日一练 专栏 1. 输出最值…

阿里云备案服务码是什么?备案服务码申请及限制说明

阿里云备案服务码是什么&#xff1f;ICP备案服务码怎么获取&#xff1f;阿里云备案服务码分为免费和付费两种&#xff0c;申请备案服务码是有限制条件的&#xff0c;需要你的阿里云账号下有可用于申请备案服务码的云产品&#xff0c;如云服务器、建站产品、虚拟主机等&#xff…

LDAP配置与安装

LDAP配置与安装 一、安装LDAP1、安装OpenLDAP及相关依赖包2、查看OpenLDAP版本3、配置OpenLDAP数据库4、设置OpenLDAP的管理员密码5、修改配置文件5.1. 修改{2}hdb.ldif文件5.2. 修改{1}monitor.ldif文件5.3. 修改{-1}frontend.ldif文件 6、验证LDAP的基本配置7、修改LDAP文件权…

如何解决人力资本管理挑战?

人力资本管理&#xff08;HCM&#xff09;是任何企业成功的一个重要因素。得益于高效、多产和敬业的员工队伍&#xff0c;在此领域找到正确的方法和策略可以推动您取得更大的成果。 但是&#xff0c;除了关注HCM的好处和机会之外&#xff0c;你还需要做好准备&#xff0c;以克…