大家好！我是小遁。
下载好 Visual Studio Code后 先下一个中文翻译包。
学习英语是十分重要的,但不是当前的主要矛盾。
打开软件后，点击侧边栏的Extensions(安装插件的地方)，在搜索框输入Language
image.png
点击install,安装完成后重启软件
image.png
image.png
文件=>打开文件，打开上节课的index.html
image.png
文件自身的编码
可以在软件的右下角看到文件的编码
image.png
不是所有的编码格式都支持中文
输入小遁后，点击右下角的UTF-8 选择通过编码保存
image.png
在弹出的输入框中输入ISO 选择第一个
image.png
关闭文件
image.png
在重新打开，就会出现中文乱码了，这是真乱码。
image.png
读取文件使用的编码不对导致的乱码
恢复文档之前的编码，删掉乱码，接着输入小遁，依然点击右下角的UTF-8 ,选择=>通过编码重新打开，依然输入ISO,选择第一个
image.png
这个中文乱码是假乱码，我们选择对的编码格式重新读取就可以解决。
如果你拷贝乱码到其他文件中，那就是真乱码了，工作中会有很多小伙伴犯这样的错误
HTML文档的编码
在文本编辑器中输入! 点击Tab 你会得到下面的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
然后在body标签中加入 Hello World 小遁
image.png
lang="en"
lang属性规定元素内容的语言，它的属性值是en,并且它属于HTML元素，这标志文档是一个英文文档。
在中文环境下浏览器会弹出是否翻译
image.png
每次改动后，编辑器会出现如下标志
image.png
Ctrl + s 保存文件，切换到浏览器按F5 刷新查看效果
我们是中文环境，用zh就好 lang="zh"
charset="UTF-8"
这个属性是告诉浏览器文档是用什么编码的,方便浏览器正常解析
改成 charset="ISO-8859-1"
保存后刷新浏览器，又出现了乱码
image.png
还有一种情况浏览器读取文档时使用的编码不对，chrome 5.5 之后取消编码设置 这里就不进行演示。
上一章节- 什么是前端开发
英语学习推荐一款叫做轻听英语的APP,里面可以选择不同的教材，比如小学、中学等
