浏览器编码问题

Posted 2020-06-15

浏览器在解析html时，是按照一定的格式和编码来解析的，为了不扰乱HTML结构，有HTML编码（比如：<对应&lt;）;为了 不扰乱JS的语法，有JS编码（比如：‘对应\‘），为了正常解析URL，有URL编码（比如：&对应%26）。总结起来也就三类，但是有不同的 编码形式。

1.1.1 HTML编码

HTML编码形式最常见的有三种：别名形式、16进制形式、10进制形式，比如：<>"‘采用这三种方式编码后分别如下：

别名形式：&lt;&gt;&quot;&apos;

16进制形式：&#x3c;&#x3e;&#x22;&#x27;

10进制形式：&#60;&#62;&#34;&#39;

HTML编码的这几种方式可以混合出现，浏览器都可以正常解析。

1.1.2 JS编码

JS编码形式最常见的有四种：斜杠转义形式、16进制形式、Unicode编码形式。<>"‘采用这几种方式编码后分别如下：

斜杠转义形式：\<\>\"\‘

16进制形式：\x3c\x3e\x22\x27

Unicode编码形式：\u003c\u003e\u0022\u0027

这几种方式也可以混合出现。需要指出的是，一般的斜杠转义形式不对字母、数字进行转义，因为可能出现混乱的情况，比如：\x\3\c并不会按想象中那样解析成x3c，而是会报语法错误。

1.1.3 URL编码

URL编码估计大家都非常熟悉，编码都采用%XX的形式，比如同样的<>"‘经URL编码后得到%3C%3E%22%27。

URL编码需要注意的是，只需对URL中的参数值进行编码，比如：http://xxx.com?p1=%3C%3E%22%27，浏览器可以正常识别出url和参数。

如果对整个URL都编码，浏览器是无法识别的，将作为相对路劲识别，见下图。

1.2 编码位置

HTML页面中我们可以按照指定的编码格式去编码，但是，必须符合浏览器的解码规则和顺序，否则浏览器也无法识别。

1.2.1 HTML编码适用位置

HTML编码适用于属性值、标签内的内容，看如下示例：

浏览器解析后如下图：

 

可以看到：

1、  标签内使用html编码，被解析出来了，并且不影响DOM结构。

2、  属性值使用html编码，被解析出来了，并且在url、js事 件、css中也是如此。

3、  属性名使用html编码，没有被解析出来。

但是，在<script>标签内的js内容以及<style>中的css内容，浏览器是不会使用html编码解码的：

1.2.2 JS编码适用位置

JS编码则只适用于JS代码中，包括<script>内和JS事件中：

 

1.2.3 URL编码使用位置

URL编码则只适用于为URL的属性值，且只能对URL中的参数进行URL编码。比如：<a>标签的href属性、<iframe>的src属性等。

1.3 解码顺序

既然各个编码有适合自己的位置，并且这种位置必定会重合，所以，浏览器解码必定有一定的顺序。一般的解码顺序为：html解码 > URL解码 > JS解码，看一个简单的例子：

这个示例中，<a>的href属性值是一段js代码，所以，这里会涉及到三种解码：html解码、URL解码、JS解码。按照上面说的顺序，浏览器先做html解码，html解码后如下：

         之后再做url解码，解码后如下：

 

         最后再做js解码，所以最终弹窗的内容应该是‘‘xxx。实际弹窗的内容也是这样的。