浏览器编码相关知识

发布时间 2023-03-23 16:43:36作者: 少年阿丁

浏览器在解析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解码