原来,我就是那个一直不明白网络拼音缩写的含义,同时在HTML里狂按空格的人……
前言
前一段时间,学习了网络流行词缩写大全,才算搞懂了弹幕里边一堆“awsl”是表达发自内心的赞美和感叹,而不是沉痛悼念阿伟先生的意思……可能这就是村通网吧
最近,发现自己建站基础知识严重不足,看到“nbsp”又以为是什么新词出现了。那就借此机会,整理一下HTML里空格的用法吧!
正文
HTML中nbps和空格的区别
在html代码中每输入一个转义字符 就表示一个空格,输入十个 ,页面中就显示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>
<!-- 不会累加的(只算1个),且该空格占据宽度受【字体】影响明显而强烈 -->
<button type="button">提 交</button><br />
<!--   占据的宽度正好是1/2个中文宽度,且基本上不受字体影响 -->
<button type="button">提  交</button><br />
<!--   占据的宽度正好是1个中文宽度,且基本上不受字体影响 -->
<button type="button">提 交</button><br />
<!--   占据的宽度比较小,它是em之六分之一宽 -->
<button type="button">提      交</button><br />
<!-- ‌ (零宽不连字)是一个不打印字符,放在电子文本的两个字符之间,抑制本来会发生的连字,
而是以这两个字符原本的字形来绘制 -->
<!-- ‍ (零宽连字)是一个不打印字符,放在某些需要复杂排版语言(如阿拉伯语、印地语)的两个字符之间,
使得这两个本不会发生连字的字符产生了连字效果 -->
</body>
</html>
默认效果显示:
添加字体后效果显示:
新手上路,学海无涯
先一点点积累吧~
参考资料
[1]HTML中的空格标记 2019-05-10 https://www.cnblogs.com/Salicejy/p/css.html
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!