HTML中的空格字符_dw空格代码怎么打

HTML中的空格字符_dw空格代码怎么打在学习插入空格字符代码书写方法之前,我们要知道,html代码的空格字符,在浏览器中,总会被压缩为一个字符!也就是说,你在html文本中输入多个空格,但在浏览器中,只会保留显示一个字符,其余的都将被浏览器删除。再打个比如,你在html中输入了8个空格字符,如下图所示:在显示之前,浏览器会删除其余7个,而只保留一个空格字符,如下图所示:也就是说,无论你输入多少个空格字符,在浏览器中显示的永远和上图一样…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

在学习插入空格字符代码书写方法之前,我们要知道,html代码的空格字符,在浏览器中,总会被压缩为一个字符!也就是说,你在html文本中输入多个空格,但在浏览器中,只会保留显示一个字符,其余的都将被浏览器删除。

再打个比如,你在html中输入了8个空格字符,如下图所示:

5d4e6c3f389b683aba9cff490f15420d.png

在显示之前,浏览器会删除其余7个,而只保留一个空格字符,如下图所示:

6bcc6e930be460c2398056dce28df936.png

也就是说,无论你输入多少个空格字符,在浏览器中显示的永远和上图一样,只会显示一个字符的距离。

想要在浏览器中将所有的空格显示出来,就需要使用字符实体。

html中如何插入空格字符代码的6种书写方法

下面,我们就一起了解一下,html中空格的六种字符实体,分别是 、 、 、 、‌、‍,它们在不同浏览器中宽度各异。

第一种: 

 叫不换行空格,也叫做不间断空格,英文全称是No-Break Space,是最常见且使用最多的空格实体,它是按下space空格键产生的空格,它的字符编码是 

但在HTML中,如果你用space空格键产生的空格,是不会累加的(只算1个),也就是说,你使用space空格键产生了很多空格,也只会显示1个空格,而只有使用实体字符&nbsp表示才可以;

下面的演示案例中,使用了5个相同的字符实体 

a55f5f1bc199b48e5797190515dea371.png

以上五个字符实体 表示的空格,都会在浏览器中显示出来,如下图所示:

73eba1bf84206b2e588a1cda588db50e.png

第二种: 

 是半角空格(En-Space),它的字符编码 ,en是字体排印学的计量单位,en表示的宽度是em宽度的一半,名义上是小写字母n的宽度,其占据的宽度正好是1/2个中文宽,而且基本上不受字体影响。

第三种: 

 是全角空格(Em-Space),它的字符编码 ,em是字体排印学的计量单位。相当于当前指定的点数,如1em在16px的字体中就是16px。此空格有个相当稳健的特性,其占据的宽度正好是1个中文宽度,而且基本上不受字体影响。

第四种: 

 是窄空格(Thin-Space),占据的宽度比较小,它是em之六分之一,所以,该表示的空格是非常小的。

第五种:‌

‌是零宽不连字(全称是Zero Width Non Joiner,简称“ZWNJ”),是一个不打印字符,放在电子文本的两个字符之间,抑制本来会发生的连字,而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为(zero width non-joiner,U+200C),HTML字符值引用为‌。

第六种:‍

‍是零宽连字(全称是Zero Width Joiner,简称“ZWJ”),是一个不打印字符,放在某些需要复杂排版语言(如阿拉伯语、印地语)的两个字符之间,使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML字符值引用为‍ ‍)。

以上6个空格书写方法,在IE浏览器中显示效果如下:

f825588849acf3380a41944a2d5101e0.png

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/193776.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Python 实现毫秒级淘宝抢购脚本

    Python 实现毫秒级淘宝抢购脚本本篇文章主要介绍了Python通过selenium实现毫秒级自动抢购的示例代码,通过扫码登录即可自动完成一系列操作,抢购时间精确至毫秒,可抢加购物车等待时间结算的,也可以抢聚划算的商品。博主不提供任何服务器端程序,也不提供任何收费抢购软件。该文章仅作为学习selenium框架的一个示例代码。该思路可运用到其他任何网站,京东,天猫,淘宝均可使用,且不属于外挂或者软件之类,只属于一个自动化点击工…

    2022年4月28日
    209
  • HackBar破解(谷歌、火狐)-2020.0203 chrome (搬运工)[通俗易懂]

    HackBar破解(谷歌、火狐)-2020.0203 chrome (搬运工)[通俗易懂]1.谷歌打开Chrome插件列表,查看Hackbar的插件ID:djmoeo……,在文件搜索里搜这段字符,我这里用的是Everything。Everything搜索id找到djmoeo找到\2.2.4_0\theme\js找到disable_hackbar,注释掉下面的chrome.storage.local.get([‘license’]函数,然后重启浏览器OK完链接:https://www.lanzous.com/i9jc7b…

    2022年6月3日
    67
  • Python3.X出现AttributeError: module ‘urllib’ has no attribute ‘urlopen’错误[通俗易懂]

    研究用Python写爬虫,下载一个网页。报错代码如下importurllibdefgetHtml(url):page=urllib.urlopen(url)html=page.read()returnhtmlhtml=getHtml(“http://www.baidu.com”)print(html)运行时报错:Attribute

    2022年4月12日
    81
  • 初始化磁盘_c++怎么初始化

    初始化磁盘_c++怎么初始化磁盘在联机后要初始化,同样也有两种方法,一种是调用IOCTL_DISK_CREATE_DISK,还有一种是调用WMI的Initialize方法。1.首先说说简单的WMI的方法:大致思路同博客:C++实现磁盘联机 先获取磁盘的id,然后执行无参数方法Initialize 核心模块代码如下:wchar_tmsftDiskObjectID[256];GetWMIMSFTDiskObjectId(…

    2022年9月15日
    4
  • pycharm与python的关系_pycharm和python区别[通俗易懂]

    pycharm与python的关系_pycharm和python区别[通俗易懂]pycharm使用创建directory和Pythonpackage的区别pycharm能显示当前python文件下的函数和类的列表吗当然可以,调出Structure视图即可。①快捷键:Alt+7②鼠标移动到窗口左下角小方块,寻Structure”③点击View菜单,选ToolWindows,再寻Structure”pycharm教程(一)安装PyCharm是我…

    2022年8月29日
    4
  • Pytest(6)重复运行用例pytest-repeat「建议收藏」

    Pytest(6)重复运行用例pytest-repeat「建议收藏」前言平常在做功能测试的时候,经常会遇到某个模块不稳定,偶然会出现一些bug,对于这种问题我们会针对此用例反复执行多次,最终复现出问题来。自动化运行用例时候,也会出现偶然的bug,可以针对单个用例,

    2022年7月29日
    6

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号