kano个人技术博客:html字符实体详解

kano个人技术博客 web前端开发 3,587 次浏览 没有评论

今天来讲一个比较小的话题:html中的字符实体。想必大家在最初学习html的时候都接触过它,本篇kano博客就来带领大家“详解”一下。

html字符实体的英文名为Character Entity,又名html转义字符(HTML Escape Sequence),在网页中大家应该也见过类似于“ ”这样的字符串,这种以&开头以;结束的字符串就是字符实体了,那么首先的一个问题就是:为什么要使用字符实体呢?

图片1.png

举一个最为典型的例子:如何在网页中输出大于号小于号呢?这个问题似乎很简单,直接打“>”或者“<”字符不就可以么!但是仔细想一下的话html标签也是包围在“<>”中的,所以直接打符号字符的话,浏览器是会解析错误的!这时就需要我们的字符实体出场了。

比如在页面中输出“3 < 5”“7 > 2”:

3 < 5
7 > 2

kano个人博客

如图,页面中正确的打印出了符号,“<”的字符实体为“<”,“>”的字符实体为“>”。

实际上,上面所说的字符实体的另一个名字“html转义字符”已经告诉了我们字符实体的作用:将在html中有特殊作用的字符转换成普通的字符(想必大家对“转义字符”不陌生吧,在任何一门语言中都能见到它的身影)。

那么,很好理解,作为定义字符实体的“&”和“;”本身也是有字符实体的:

字符实体

我们知道html会将所有连续的空白字符视为一个空格,而“ ”字符实体可以帮助我们手动的增加空格:

空        格

空格

是半角空格,由于浏览器默认的字体的原因空格的占位更窄,所以上面的“空”和“格”之间显得并没有那么宽的空隙。

 

字符实体有两种使用方式:实体名称和实体编号。上面我们使用的都是实体名称,但实际上还可以使用实体编号来引用实体,语法为:“&#编号;”,如“<”也可以写成“<”:

< <

kano个人博客

效果实际上是相同的。

实体名称的好处是便于记忆,比如看到“<”我们就知道是小于的意思,即使我们英文不好不知道它的意思,但是总比“<”更易于记忆。但实体编号也是有好处的,浏览器对于实体编号的支持比实体名称更好,不同浏览器可能对实体名称支持的数量不同,而且实体编号还支持所有的字符实体,而实体名称则只支持一部分实体。

常用的字符实体:

html字符实体

※ 注意实体名称是区分大小写的,“$lT”将无法正确被识别。

有一个神奇的事情是,如果你使用实体编号,实际上可以把所有的Unicode字符都用字符实体的形式输出出来:

遵纪守法

当然这种奇葩的使用方法一般时候用不到就是了…

需要注意的一点是,注意上面输出汉字的字符实体的时候,实体编号是其十进制的Unicode编码,很多的语言都可以以编号的形式输出Unicode字符,但大部分用的是4位16进制的数字,而这里是十进制。

在将富文本的内容存入数据库中的时候,因为安全性的原因,通常会将html标签也会转换成字符实体,而后端的数据返回来的时候可能也没有经过处理,这里写了一个将常用的字符实体转换成html标签的方法:

// 字符实体转换成html
function charToHtml(str) {
  if (str) {
    str = str.replace(/&/g, '&');
    str = str.replace(/</g, '<');
    str = str.replace(/>/g, '>');
    str = str.replace(/"/g, "'");
    str = str.replace(/'/g, ' ');
  }
  return str;
}

关于字符实体的知识大概就是这么多,今后再看到iconfont中类似于“ɪ”这种字符时候,kano个人博客相信大家都能明白是什么意思了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Go