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

news2024/12/23 19:54:46

前几天写项目时,突然对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.coloradmin.cn/o/531540.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PDF文件转换工具Solid Converter PDF 10.1版本在Win10系统的下载与安装配置教程

目录 前言一、Solid Converter PDF安装二、使用配置总结 前言 Solid Converter PDF是一种PDF文件转换工具&#xff0c;可以将PDF文件转换为Microsoft Word、Excel、PowerPoint等格式。它还支持批量转换和OCR&#xff08;光学字符识别&#xff09;功能。 Solid Converter PDF的…

NIO基础

NIO 在学习Netty之前&#xff0c;我们需要先了解一下NIO&#xff0c;以便更好的学习Netty NIO是non-blocking io&#xff0c;也就是非阻塞IO 1.三大组件 1.1 channel & Buffer channel 有一点类似于 stream&#xff0c;它就是读写数据的双向通道&#xff0c;可以从 ch…

【YOLO系列】YOLO v3(网络结构图+代码)

文章目录 网络结构YOLO v3YOLOv3-SPP 多尺度预测损失函数参考 最近在研究YOLO系列&#xff0c;打算写一系列的YOLO博文。在YOLO的发展史中&#xff0c;v1到v3算法思想逐渐完备&#xff0c;后续的系列也都以v3为基石&#xff0c;在v3的基础上进行改进&#xff0c;所以很有必要单…

KD600A变频抗干扰精密介质损耗测量仪

一、产品概述 KD600A变压器介质损耗测试仪是发电厂、变电站等现场自动测量各种高压电力设备介损正切值及电容量的高精度仪器。由于采用了变频技术能保证在强电场干扰下准确测量。仪器采用中文菜单操作&#xff0c;微机自动完成测量。 该仪器同样适用于车间、试验室、科研单位测…

映射及有关概念

映射的概念:有两个集合A,B&#xff0c;若A的任何元素都有唯一的B中元素与之对应&#xff0c;B中元素与之对应的称为像&#xff0c;A中对应的元素称为原像 一个集合也有像&#xff0c;定义为各自像的集合 B中集合也有原像&#xff0c;定义为各自原像的集合 虽然采用了f-1的符号&…

端口隔离、MAC地址表项、MAC地址漂移防止与检测

目录 前言 端口隔离 MAC地址表项 端口安全 MAC地址漂移检测 前言 目前网络中以太网技术的应用非常广泛。然而&#xff0c;各种网络攻击的存在&#xff08;例如针对ARP、DHCP等协议的攻击&#xff09;&#xff0c;不仅造成了网络合法用户无法正常访问网络资源&#xff0c;…

【案例教程】山洪径流过程模拟及洪水危险性评价技术

GIS水文分析&#xff08;ArcHydro、Spatial Anlysist等模块&#xff09;是流域水文模拟建模的重要工具&#xff0c;能够自动提取及计算流域边界、河网水系、流向、汇流时间和其它流域特征参数。美国陆军工程兵团开发的开源、免费Hec-RAS软件具有强大的空间数据分析与整合功能、…

每日学术速递5.13

CV - 计算机视觉 | ML - 机器学习 | RL - 强化学习 | NLP 自然语言处理 Subjects: cs.CV 1.VideoChat: Chat-Centric Video Understanding 标题&#xff1a;VideoChat&#xff1a;以聊天为中心的视频理解 作者&#xff1a;KunChang Li, Yinan He, Yi Wang, Yizhuo Li, Wen…

计算机网络基础知识(五)——什么是TCPUDP协议?图文并茂的方式对两大传输层协议进行从头到尾的讲解

文章目录 01 | &#x1f4d5; 什么是 T C P &#xff1f; \color{red}{什么是TCP&#xff1f;} 什么是TCP&#xff1f;&#x1f4d5;特点三次握手 && 四次挥手超时重传滑动窗口 02 | &#x1f4d9; 什么是 U D P &#xff1f; \color{orange}{什么是UDP&#xff1f;} 什…

1. 链表

b站懒猫数据结构课程笔记&#xff1a;https://www.bilibili.com/read/cv8013121?spm_id_from333.999.0.0 一、链表的概念 单链表&#xff1a;线性表的链接存储结构 单链表存储特点&#xff1a; 逻辑次序和物理次序不一定相同 元素之间的逻辑关系用指针表示 举例&#xff1a…

PASCAL VOC数据集

一、前言 之前寒假好像就学了&#xff0c;但是没有记笔记&#xff0c;现在看来还是得记笔记&#xff0c;都忘得差不多了啊。 二、数据集的介绍 2.1数据集背景 分类类别 2.2数据集文件结构&#xff1a; 2.3文件夹 2.3.1Annotations文件夹 对于标注文件Annotations&#xff1a;里…

基于SpringBoot框架的程序开发步骤

SpringBoot简介 1. 入门案例问题导入1.1 入门案例开发步骤1.2 基于SpringBoot官网创建项目1.3 SpringBoot项目快速启动 2. SpringBoot概述问题导入2.1 起步依赖2.2 辅助功能 1. 入门案例 问题导入 SpringMVC的HelloWord程序怎么写&#xff1f; SpringBoot是由Pivotal团队提供…

死锁、生产者和消费者问题

目录 生产者和消费者问题 死锁的概念 内存的基础知识 内存管理的概念 覆盖与交换 介绍一下PCB 连续分配管理方式​编辑 生产者和消费者问题 死锁的概念 什么是死锁 进程死锁、饥饿、死循环的区别 死锁产生的必要条件 什么时候会发生死锁 死锁的处理策略 内存的基础知识 内存…

微三云润秋带你解析商城分销系统

管理大师德鲁克曾说过&#xff1a;当今企业间的竞争&#xff0c;不是产品之间的竞争&#xff0c;而是商业模式之间的竞争。创业不只是项目选择重要&#xff0c;好的商业模式同样重要&#xff0c;如果没有好的商业模式&#xff0c;企业将会被淘汰。 今天我们要聊的这个商城就有点…

怎样设置CRM目标?有什么作用?

实施CRM系统可以帮助企业提高客户保留率&#xff0c;增加收入&#xff0c;并推动业绩增长。然而&#xff0c;在实施CRM系统之前&#xff0c;必须设定明确的目标&#xff0c;与企业的整体战略保持一致。在这篇文章中&#xff0c;我们来讨论实施CRM目标是什么&#xff0c;如何设定…

基于AD9172/AD9176的4 通道12.6GSPS 采样率16 位DA 播放FMC JESD204B 接口子卡模块

板卡概述 FMC_XM131 是一款4 通道12.6GSPS 采样率16 位DA 播放FMC子卡模块&#xff0c;该板卡为FMC标准&#xff0c;符合VITA57.4 规范&#xff0c;可以作为一个理想的IO 模块耦合至FPGA 前端&#xff0c;16 通道的JESD204B 接口通过FMC连接器连接至FPGA 的高速串行端…

【Python TurboGears】零基础也能轻松掌握的学习路线与参考资料

Python TurboGears是一款开源的web框架&#xff0c;它篮了多种Python库和工具&#xff0c;可以更容易地开发和维护web应用程序。TurboGears具有优秀的文档和活跃的社区支持&#xff0c;是学习web开发的理想选择之一。以下是Python TurboGears学习路线&#xff0c;参考资料和优秀…

一句话简短解析 jsjiami.v6

jsjiami.v6 是一种广泛使用的 JavaScript 代码混淆工具&#xff0c;它提供了多种代码混淆技术&#xff0c;包括变量名重命名、函数名重构、字符串替换、代码结构混淆等&#xff0c;可以将代码转换为难以理解和阅读的形式。在本文中&#xff0c;我们将对 jsjiami.v6 进行分析&am…

【FMC137】基于 VITA57.4 标准的4 路2GSPS/2.6GSPS/3GSPS 14 位AD 采集子卡模块--AD9208得多通道中文资料

板卡概述 FMC137 是一款基于VITA57.4 标准规范的JESD204B 接口FMC 子卡模块&#xff0c; 该模块可以实现4 路14-bit 、2GSPS/2.6GSPS/3GSPSADC 采集功能。该板卡ADC 器件采用ADI公司的AD9208 芯片&#xff0c;&#xff0c;与ADI 公司的AD9689 可以实现PIN 脚兼容。该ADC 与FPGA…

Agisoft Metashape 基于影像的外部点云着色

Agisoft Metashape 基于影像的外部点云着色 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 例如:第一章 Python 机器学习入门之pandas的使用 提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 Agisoft Metashape 基于影像的外…