字符集_6 字符集简介以及更改网页字符集

成长是一辈子的事儿！大家好！我是时问新(前几天改了名字，现在觉得还是用时问新这个名字更好点)。分享前端、Python等技术，以及个人成长路上的那些事儿。

用vscode生成HTML5骨架，

标签对儿里面的代码，是用来配置页面的。

而这行代码，表示设置这个页面代码的字符集。

像

、这种标签是成对儿出现的，叫做双标签。和叫开始标签，和叫结束标签。而标签是单标签，只有开始标签没有结束标签的标签就叫单标签。比如标签并没有这样一个结束标签来结束它。

meta这个英文单词就表示“元”，“元”有“基础的、最小的”意思，所以标签就是元标签，表示网页的最基础的配置。

这行代码中，charset这个单词，其中的char就是“字符”，set表示集合，所以sharset就表示“字符集”。这里的"UTF-8"就是一种字符集。charset是标签的属性，"UTF-8"是charset这个属性的值。属性和属性值之间用=连接起来，属性值要用英文格式的双引号包裹起来。HTML的标签上的属性，就是用来描述这个标签的性质。

中国常见的字符集

在咱们中国，常见的字符集就2种：UTF-8和gb2312。

vscode默认生成的字符集是UTF-8。UTF-8是全球通用的字符集，它涵盖了全世界所有国家、民族的文字和大量图形字符。

如果你的网页只是给中国人看的，那么就不需要兼容其他国家的文字和字符。此时你就用gb2312这个字符集就可以。因为gb2312这个字符集收录了所有的汉字，包括简体字和繁体字等字符，并且收录了所有的英文字符，以及少量的日语和韩语，以及图形字符。

gb2312也叫gbk，gb是汉语拼音国标的意思，gb2312是咱们国家制定的一个字符集标准。

UTF-8和gb2312的适用场景

如果你的网页是给全世界人民看的，那就用UTF-8，因为如果你用gb2312，它不包含中英文以及日语韩语以外的字符，那么俄罗斯、阿拉伯等国家的人民就没法看你的网页。

如果你的网页上，只有汉语和英语，那就可以使用gb2312。一个汉字，在UTF-8和gb2312这两种字符集下，占用的字节数是不同的。在UTF-8字符集下，一个汉字占用3个字节，而在gb2312下，一个汉字只占用2个字节。你的网页里面的代码，总共占用的字节数越少，你的网页文件就越小，用户访问你的网站时，网页打开速度就越快。

更改网页字符集

你的代码使用哪种字符集，就一定要在你的编辑器中，将你保存代码的这个文件，也设置成相同的字符集。否则会出现乱码。

注意：我们之前安装的live server这个插件，由于功能所限，是不支持gb2312(gbk)字符集的，它只支持UTF-8这个字符集。

所以，如果你代码使用了gb2312这个字符集，你做开发预览网页效果的时候，就不能使用热更新功能啦，只能手动点开网页，手动刷新浏览器啦。

现在我们来演示一下如何更改网页字符集。

由于live server这个插件不支持gb2312，也就是说这个插件不支持更改字符集，所以我们更改字符集时，不适用ctrl+shift+p来查看网页更改字符集后的效果。

现在我在vscode中打开之前创建的first.html这个网页，标签上默认是UTF-8字符集，

现在我把它改成gb312，然后保存。

接着在保存这个网页文件的文件夹中，找到first.html这个文件，双击打开它。

双击后，在浏览器中，效果如下：

我们看到网页打开后，是乱码。

这是为什么呢？这是因为我们只更改了标签的字符集，从UTF-8改为了gb2312，也就是说只改了代码的字符集，而并没有在编辑器上更改这个first.html这个文件本身的字符集。

这时候，我们找到vscode底部的UTF-8这个按钮，如下图：

点击它一下之后，会弹出一个菜单，询问你是否要更改字符集，此时你点击“通过编码保存”，如下图：

点击“通过编码保存”之后，就会弹出新的菜单，在菜单中找到gb2312或者gbk进行点击都可以，

或者在菜单的输入框输入gb，就会智能感应出带gb的选项，如下图：

然后点击gb2312或者gbk都可以，比如我点击gb2312，点击之后，就会看到vscode底部刚才UTF-8这个按钮，就变成了gb2312。

然后你再刷新一下网页，就会看到乱码又变回了正常的文字，如下图：

也就是说，当你要更改网页的字符集时，除了要更改标签上的charset的值，还要同时把vscode编辑器底部也改为同样的字符集。如下图：

以上是字符集的介绍，以及如何更改网页字符集的介绍。

感谢阅读！知识总结不易，请点个赞或转发鼓励一下呗！关注我，从零基础入门基本功扎实的前端工程师。