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

news/2024/7/3 6:29:23

前几天写项目时,突然对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://lihuaxi.xjx100.cn/news/1137285.html

相关文章

【HarmonyOS】这些HarmonyOS应用开发的问题你都了解吗?

【关键字】 HTTP请求、requests exceeds 100、DNS域名解析、屏幕分辨率、ArkTS/JS 【问题描述1】 HTTP多次请求之后出现请求异常如何解决&#xff1f; 描述&#xff1a;接口是正常的&#xff0c;http多次请求出现提示“The requested has been canceled or the number of re…

JavaScript全解析——express

express 的基本使用 ●express 是什么? ○是一个 node 的第三方开发框架 ■把启动服务器包括操作的一系列内容进行的完整的封装 ■在使用之前, 需要下载第三方 ■指令: npm install express 1.基本搭建 // 0. 下载: npm install express// 0. 导入 const express express()…

腾讯VS百度:在AI上下大赌注

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 腾讯控股(00700)最近已经把基础模型和生成式人工智能应用方面的行业突破视为其业务的新增长机会了&#xff0c;并且正在大力投资人工智能&#xff0c;从而增强其现有产品的竞争力和拓展新的机会&#xff0c;比如腾讯已经把…

JAVA 一种用户密码加密规则

设计思路: a:以用户输入密码为基础 b: 根据加盐方法获取盐值 c: 先 密码加密 盐值 单独加密 再 把各自加密后密文进行加密 注意:盐值要存入数据库 登录时对比密码使用 1:引入加密工具包 <dependency> <groupId>commons-codec</groupId> &…

时钟同步-注意客户端和服务端都需要开启123端口 udp协议

确认时钟源 chronyc sources -v chronyc tracking Linux ❉ Chronyd时间同步服务器详解_wangjie722703的博客-CSDN博客 local stratum 10: 即使自己未能通过网络时间服务器同步到时间,也允许将本地时间作为标准时间授时给其它客户端 确认 端口是否打开 Nmap -sU -p 123 192…

【案例教程】Biome-BGC生态系统模型与Python融合技术应用

Biome-BGC是利用站点描述数据、气象数据和植被生理生态参数&#xff0c;模拟日尺度碳、水和氮通量的有效模型&#xff0c;其研究的空间尺度可以从点尺度扩展到陆地生态系统。 在Biome-BGC模型中&#xff0c;对于碳的生物量积累&#xff0c;采用光合酶促反应机理模型计算出每天…

vue页面无操作返回登录页

方法一、挂在定时器 const timing ref(1000 * 60 * 20)const timer ref(null)document.addEventListener(keyup, () > {timing.value 1000 * 60 * 20})document.addEventListener(mousemove, () > {timing.value 1000 * 60 * 20})timer.value setInterval(() > {…

可视化大屏适配/自适应现状

可视化大屏适配/自适应现状 三大常用方式 vw/vh方案 概述&#xff1a;按照设计稿的尺寸&#xff0c;将px按比例计算转为vw和vh 优点&#xff1a;可以动态计算图表的宽高&#xff0c;字体等&#xff0c;灵活性较高&#xff0c;当屏幕比例跟 ui 稿不一致时&#xff0c;不会出现两…