“awsl”是哪条HTML代码？nbsp=“牛x视频”？ ~ 挨拍的儿—

原来，我就是那个一直不明白网络拼音缩写的含义，同时在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