为什么要用转义字符串？

HTML中**<，>，&等有特殊含义（<，>，用于链接签，&用于转义），**不能直接使用。这些符号是不显示在我们最终看到的网页里的，那如果我们希望在网页中显示这些符号，该怎么办呢？

这就要说到HTML转义字符串（Escape Sequence）了。

转义字符串（Escape Sequence）也称字符实体(Character Entity)。在HTML中，定义转义字符串的原因有两个：

第一个原因是像“<”和“>”这类符号已经用来表示HTML标签，因此就不能直接当作文本中的符号来使用。为了在HTML文档中使用这些符号，就需要定义它的转义字符串。当解释程序遇到这类字符串时就把它解释为真实的字符。在输入转义字符串时，要严格遵守字母大小写的规则。

第二个原因是，有些字符在ASCII字符集中没有定义，因此需要使用转义字符串来表示。

转义字符串的组成

转义字符串（Escape Sequence），即字符实体（Character Entity）分成三部分：

第一部分是一个&符号，英文叫ampersand；

第二部分是实体（Entity）名字或者是#加上实体（Entity）编号；

第三部分是一个分号。

比如，要显示小于号（<），就可以写 < 或者 < 。

用实体（Entity）名字的好处是比较好理解，一看lt，大概就猜出是less than的意思，但是其劣势在于并不是所有的浏览器都支持最新的Entity名字。而实体(Entity)编号，各种浏览器都能处理。

提示：实体名称（Entity）是区分大小写的。

备注：同一个符号，可以用“实体名称”和“实体编号”两种方式引用，“实体名称”的优势在于便于记忆，但不能保证所有的浏览器都能顺利识别它，而“实体编号”则没有这种担忧，但它实在不方便记忆。

如何显示空格？

通常情况下，HTML会自动截去多余的空格。不管你加多少空格，都被看做一个空格。比如你在两个字之间加了10个空格，HTML会截去9个空格，只保留一个。为了在网页中增加空格，你可以使用表示空格。

HTML特殊转义字符列表

最常用的字符实体

Character Entities

ISO 8859-1 (Latin-1)字符集

HTML 4.01 支持 ISO 8859-1 (Latin-1) 字符集。

备注：为了方便起见，以下表格中，“实体名称”简称为“名称”，“实体编号”简称为“编号”

数学和希腊字母标志

symbols, mathematical symbols, and Greek letters

重要的国际标记

markup-significant and internationalization characters

JavaScript转义符

编程的时候要注意特殊字符的问题，很多运行时出现的问题都是因为特殊字符的出现而引起的。

注意，由于反斜杠本身用作转义符，因此不能直接在脚本中键入一个反斜杠。如果要产生一个反斜杠，必须一起键入两个反斜杠 (\)。

编码转换（to Unicode）

（程序代码来源于网络）

Js版

<script>test = "你好abc"str = ""for( i=0;    i<test.length; i++ ){temp = test.charCodeAt(i).toString(16);str    += "\\u"+ new Array(5-String(temp).length).join("0") +temp;}document.write (str)

vbs版

Function Unicode(str1)Dim str,tempstr = ""For i=1    to len(str1)temp = Hex(AscW(Mid(str1,i,1)))If len(temp) < 5 Then    temp = right("0000" & temp, 4)str = str & "\u" & tempNextUnicode = str
End Function

Function htmlentities(str)For i = 1 to Len(str)char = mid(str, i, 1)If Ascw(char) > 128 thenhtmlentities = htmlentities & "&#" & Ascw(char) & ";"Elsehtmlentities = htmlentities & charEnd ifNext
End Function

coldfusion版

function nochaoscode(str)
{var new_str = “”;for(i=1; i lte len(str);i=i+1){if(asc(mid(str,i,1)) lt 128){new_str = new_str & mid(str,i,1);}else{new_str = new_str & “&##” & asc(mid(str,i,1));}}return new_str;
}

如果大家对编程，web前端感兴趣，想要了解学习，打算深入了解这个行业的朋友，可以加下我们的前端学习扣qun : 784783012 ，不论你是学生还是想转行的朋友，我都欢迎，不定期分享干货，整理的一份2019最新的web前端学习资料和0基础入门教程分享给大家：学习前端我们是认真的

附：

在php中我们可以用mbstring的mb_convert_encoding函数实现这个正向及反向的转化。如：

mb_convert_encoding (“你好”, “HTML-ENTITIES”, “gb2312”); //输出：你好

mb_convert_encoding (“你好”, “gb2312”, “HTML-ENTITIES”); //输出：你好

如果需要对整个页面转化，则只需要在php文件的头部加上这三行代码：

mb_internal_encoding(“gb2312”); // 这里的gb2312是你网站原来的编码

mb_http_output(“HTML-ENTITIES”);

ob_start(‘mb_output_handler’);

web前端入门到实战：HTML字符实体，转义字符串相关推荐

html前端页面的基本骨架是,web前端入门到实战：css实现的骨架屏方案
web前端入门到实战:css实现的骨架屏方案发布时间:2020-08-04 01:32:03 来源:51CTO 阅读:152 作者:前端向南优点简单,不需要工程,不用puppeteer生成骨架d ...
转圈加载html,web前端入门到实战：纯CSS实现加载转圈样式
web前端入门到实战:纯CSS实现加载转圈样式发布时间:2020-05-27 18:11:33 来源:51CTO 阅读:134 作者:前端向南不同的项目中对于等待加载时转圈圈的样式是不同的,有的是 ...
web前端入门到实战：实现图形验证码
什么是图形验证码图形验证码是验证码的一种.验证码(CAPTCHA)是"Completely Automated Public Turing test to tell Computers a ...
web前端入门到实战：CSS实现平行四边形布局效果
如何实现下图所示的平行四边形布局效果? 一.skewX的局限一提到平行四边形,条件反射般的就会想起CSS transform中的skew()/skewX()/skewY()方法,可以让元素斜切,从而 ...
web前端入门到实战：JavaScript字符串转换数字
js 字符串转换数字方法主要有三种: 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者 ...
web前端入门到实战：HTML5新增和废弃的标签
一.废弃的标签以下的 HTML 4.01 元素在HTML5中已经被删除,虽然浏览器为了兼容性考虑都还支持这些标签,但建议使用新的替代标签,矛盾的是老浏览器对新标签的支持度又不够,视项目的受众对象而定 ...
web前端入门到实战：HTML5 VideoAPI，打造自己的Web视频播放器
本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签.以及HTML5提供的对JavascriptAPI的扩展. 一.基础知识 1.用法 <v ...
web前端入门到实战：HTML属性选择器（下）
一.格式标签[属性=值]:{属性:值:} 1.属性的取值是以什么开头的 attribute |= value(CSS2)attribute^=value(CSS3)两者之间的区别:CSS2中只能找到 ...
web前端入门到实战：CSS文字下波浪线动画效果
之前有至少5个人在评论中询问我文章中链接hover时候波浪下划线动画是怎么实现的,类似下图gif示意: 这里就介绍下是如何实现的. 有两种实现方法,各有优劣. 一.使用径向渐变纯CSS实现就是使用径 ...

web前端入门到实战：HTML字符实体，转义字符串