原来,我就是那个一直不明白网络拼音缩写的含义,同时在HTML里狂按空格的人……


前言

前一段时间,学习了网络流行词缩写大全,才算搞懂了弹幕里边一堆“awsl”是表达发自内心的赞美和感叹,而不是沉痛悼念阿伟先生的意思……
可能这就是村通网吧
最近,发现自己建站基础知识严重不足,看到“nbsp”又以为是什么新词出现了。那就借此机会,整理一下HTML里空格的用法吧!

正文

HTML中nbps和空格的区别


在html代码中每输入一个转义字符&nbsp就表示一个空格,输入十个&nbsp,页面中就显示10个空格位置。
而在html代码中输入空格,不管输入多少个空格,最终在页面中显示的空格位置只有一个。
效果区别如下:

HTML中6种空格标记


这是在cnblog上找到一个直观的比较

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML中的& nbsp; & ensp; & emsp;等6种空格标记</title>
        <style type="text/css">
            *{
                margin: 0 auto;
            }
            body{
                margin: 15vh 0;
            }
            button{
                /* font-family: "仿宋"; */
                display: block;
                height: 18vw;
                width: 70vw;
                border-radius: 50px;
                outline: none;
                font-size: 3rem;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <!-- &nbsp; 不会累加的(只算1个),且该空格占据宽度受【字体】影响明显而强烈 -->
        <button type="button">&nbsp;&nbsp;&nbsp;&nbsp;</button><br />
        <!-- &ensp; 占据的宽度正好是1/2个中文宽度,且基本上不受字体影响 -->
        <button type="button">&ensp;&ensp;</button><br />
        <!-- &emsp; 占据的宽度正好是1个中文宽度,且基本上不受字体影响 -->
        <button type="button">&emsp;</button><br />
        <!-- &thinsp; 占据的宽度比较小,它是em之六分之一宽 -->
        <button type="button">&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;</button><br />
        
        <!-- &zwnj; (零宽不连字)是一个不打印字符,放在电子文本的两个字符之间,抑制本来会发生的连字,
        而是以这两个字符原本的字形来绘制 -->
        <!-- &zwj; (零宽连字)是一个不打印字符,放在某些需要复杂排版语言(如阿拉伯语、印地语)的两个字符之间,
        使得这两个本不会发生连字的字符产生了连字效果 -->
        
    </body>
</html>

默认效果显示:

添加字体后效果显示:


新手上路,学海无涯
先一点点积累吧~

参考资料

[1]HTML中的空格标记 2019-05-10 https://www.cnblogs.com/Salicejy/p/css.html


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!

北冥有人,其名为坤 上一篇
宅家学习护眼攻略 下一篇