html和js中对“空格”的使用

1. 

转义字符的写法。

在html标签中使用。

可以写多个，每有一个则会渲染出一个空格，不会像按多个空格键一样，最终只显示一个。

<div>1               2</div>    // 1 2

<div>1     2</div>    // 1    2

注意：&和结尾的;都不能少

 

2.&#32;

ASCII编码的写法。

在html标签中使用。

写一个和同时写多个一样，最终只显示一个，类似于按空格键

<div>1&#32;2</div>    // 1 2

<div>1&#32;&#32;&#32;&#32;2</div>    // 1 2

 

在js中使用。

可以使用String.fromCharCode()，参数是#后面的数字，可以输出多个空格

console.log(1+ String.fromCharCode(32) + String.fromCharCode(32) + String.fromCharCode(32) +2)    // 1   2

 

3.\xa0

\xa0属于latin（ISO/IEC_8859-1，拉丁字母）中的扩展字符集字符，代表空白符nbsp(non-breaking space)

在html标签中使用。

和 一样，可以写多个，显示多个

<div>1&#xa0;&#xa0;&#xa0;&#xa0;2</div>    // 1    2

 

在js中使用。

在js中不需要&#，且可以连续写而不用拼接

console.log(1+ '\xa0\xa0\xa0\xa0' +2)    //1    2

 

4.U+0020

属于Unicode字符

在js中使用。

用法和\xa0一样

 

console.log(1+ '\u0020\u0020\u0020\u0020' +2)    // 1    2

 

5.\x20

标准键盘码值表-十六进制

在html标签中使用。

只显示一个

 

<div>1&#x20;&#x20;&#x20;&#x20;2</div>  // 1 2

 

在js中使用。

console.log(1+ '\x20\x20\x20\x20' +2)  // 1    2

 

6.%20

对URI 进行解码的样式，需要用到decodeURIComponent

在js中使用。

console.log(1+ decodeURIComponent('%20')+decodeURIComponent('%20')+decodeURIComponent('%20') +2)  // 1   2

 

7.\t

这种相当于按了tab键，一个相当于4个空格

在js中使用.

console.log(1+ '\t\t\t\t' +2)  // 1                2