易混HTML Entities与正确使用方法

时间:2021-03-22 08:40:19

在页面上,表示HTML实体有多种方式,比如有“&+name;”、“&#+10进制ID”、“&#x+16进制ID”。而“\u+16进制”一般用于CSS的content样式属性。

空字符 – null

空字符:\u0000

空白 – whitespace

空字符表示没有字符,不占页面物理位置,空白是有物理位置的。空白包括空格、制表符、回车符和换行符。

空格-space: ,&#x20,\u0020;

不间断空格:  或   或 \u00A0;

Tab: 	 或 	 或 \u0009;

回车-CR:
 或&#xD 或 \u000D;

换行符-LF:
 或 \u000A;

  • 不间断空格和空格的区别是,后者出现多个凑在一起的时候会坍塌成一个空格,而不间断空格无论出现多少个都不会坍塌。
  • 在HTML页面中,元素换行不是通过CR或LF,而是通过<br>标签。CR和LF主要在<pre>标签中起作用。
  • 空格、制表符、回车符和换行符的显示受white-space样式的影响。

单引号、双引号

不同语言的引用符号不尽相同(https://en.wikipedia.org/wiki/Quotation_mark),如果直接在页面上输入,则需要很多页面,而且也太过繁琐,一般是通过CSS属性quotes,或者使用content结合:before和:after一起设置。

/* Set two levels of quotation marks*/

q { quotes: "«" "»" "‹" "›"; }

q:before { content: open-quote }

q:after  { content: close-quote }

如果再结合:lang选择器,就可以对任何本地化修改引号符了。

英文单引号(')

IE8不支持&apos;,所以一般使用&#39; 或&#x27; 或 \u0027。

英文双引号(")

&quot; 或&#34; 或&#22; 或 \u0022

中文单引号左(‘)

\u2018,&#8216; 或&#x2018;

中文单引号右(’)

\u2019,&#8217; 或&#x2019;

中文双引号左(“)

\u201C,&#8220; 或&#x201C;

中文双引号右(”)

\u201D,&#8221; 或&#x201D;

之所以大规模使用了(')和(")是因为以前的打字机和电脑中没有相应的对称引用符号,所以都用了垂直的符号。现在部分软件可以直接把垂直符改成对称引用符号。但这种自动转换不是很完善。因此,随着客户端字符集越来越丰富,我们也应该正确使用这些字符。

连字符、减号、破折号、下划线

下面几个字符差别非常小,需要仔细观察。从长度分析:mdash > ndash = 减号 > 连字符 = hyphen-minus;从位置高度分析:ndash = mdash = hyphen > minus = hyphen-minus > 下划线。

Hyphen-minus(-):&#45; 或&#x2D; 或 \u002D

下划线(_):&#95; 或或&#x5F; 或 \u005F

减号(−):&minus; 或 &#x2212; 或 \u2212

连字符(‐):&hyphen; 或&#x2010; 或 \u2010

Ndash(–):&ndash;或 &#8211 或 &#x2013; 或 \u2013

Mdash(—):&mdash; 或 &#8212 或&#x2014; 或 \u2014

  • Hyphen-minus是一般写代码时用到的符号,键盘上的小写符号就是它;
  • 在键盘上,hyphen-minus之上就是下划线,通过shift键可以获取;
  •  减号一般用于数学表达式;
  • 连字符顾名思义就是链接两个单词,组成一个新单词,比如left-handed。
  • ndash用于表示范围,比如2–9。
  • mdash用于链接句子,比如Star Wars is—as everyone knows—amazing。

省略符

有些人会用三个句号来表示,其实这是错误的表示方法,应该使用省略符。

省略符:&hellip; 或 &#8230; 或&#x2026; 或\u2026

大于号、小于号

因为HTML标签使用的就是这两个符号,如果直接在页面输入大于或小于号会导致页面显示异常。一般来说,只有初学者会误用这两个符号。

小于号:&lt; 或 &#60; 或&#x3c; 或\u003C

大于号:&gt; 或 &#62; 或&#x3E; 或\u003E。

和符号、或符号

容易误用的是&符号,在英文页面直接使用可能会导致单词显示有问题。因为“&+name;”会表示另一个特殊字符,如果&正好位于单词前面,而且后面有“;”,那就糟糕了。所以,一般用&amp;替代。

和符号:&amp; 或 &#38; 或 &#x26; 或\u0026