开发环境配置
开发环境配置
写在前面
本章算是教学关，对自己有信心的同学，只需要看下面三点：
- 使用VSCode+LiveSever插件进行代码编写。
- 直接在浏览器上运行并调试，F12打开开发者模式。
- 记住F12！
如果你能完成以下的页面，就算你通过了教学关：
代码编辑器
VSCode下载与安装
我们会使用目前最流行的VSCode作为代码的编辑器。请注意，在前端开发领域，开发人员很少采用All in One的IDE进行开发。 而是代码编辑归代码编辑、调试测试归调试测试，每个工具完成一项功能。
先到官网下载： https://code.visualstudio.com/
务必前往官网下载！
出于众所周知的原因，搜索引擎搜到的第一个链接不一定是真正的官网，要注意鉴别！
大多数我们推荐的开发工具都是不收费的。例如VSCode，是一个免费开源的编辑器。 而Visual Studio也有对应的社区免费版供学生使用。
不要出现69块钱买Visual Studio的悲剧了！
官网是英文的，请从现在开始习惯（至少要不惧怕）英语环境。多积累常用的专业英语词汇。
点击那个巨大的Download for Windows按钮下载：
下载之后安装，安装的选项建议将这几个选项选上。
红框里会在右键菜单里增加两个选项，方便我们启动vscode。最后一个选项可以令你直接在命令行里启动vscode。
现在你可以直接在开始菜单里启动VSCode。或者利用我们打开的两个选项，新建一个文件夹，然后在空白区域右击，选择通过Code打开：
就可以启动vscode了。
我安装的是什么版本?
安装只是一个非常正常的操作，但依然有很多东西可以tip一下。
- 如果你（或者你同学）是mac os，或者linux，你会发现下载的地方会自动适配他对应的额操作系统平台。这难道不是很神奇的事吗？怎么做到的？
- 你应该注意到，安装时的位置跟很多软件安装的位置是不同的。vscode被安装到什么
AppData啊，什么Local啊这种你听都没听说过的位置。为什么？
以上两点问题如果你没注意，或者是注意到了却认为是理所应当，那么很遗憾你失去了一次很好的学习机会。
请记住：计算机科学里很多看上去非常神奇，又或者理所应当的内容都有内在的原因。
事实上第一个问题跟我们要学的东西可以说联系非常紧密，你可以了解一下User-Agent。
第二个问题则体现你对你正在使用的系统是否了解，理由很简单，你下载的这个VSCode是只为当前用户服务的。如果机器上有其他用户，他们无法使用他。
那么问题来了，要如何安装一个让所有用户都能访问的VSCode呢？在主页上找找，实际上很多软件的主页都非常相似，显眼的地方只有最优的版本，其他版本要你自己去找。
插件
VSCode之所以非常之强大，大家都喜欢用，至少有50%以上的原因是因为他有着非常强大的插件系统。
你可以在后期慢慢学习他，我们的课程必须的插件是Live Server。
点击侧边栏的扩展按钮：
会列出你已经安装的所有插件，对于空机来说，一般只有一个简体中文的Language Pack。
在上面的搜索栏里键入live server搜索一下，一般第一个就是，如果你不知道如何选择，比较简单的判断标准是看他的star和下载数。
这个插件的作用我们后面再说。
此外一般来说，建议可以装Mithril Emmet插件。这个插件针对html页面的编码进行了一定优化。
最后出于查看本课程作业的考虑，建议装下Markdown Preview Enhanced，方便查看md文件。
至此开发环境就准备好了。
运行和测试
运行、测试和调试
在整个网页设计的课程中，你只需要浏览器就可以完成运行、测试和调试的所有功能。就在当前页面，请按下F12按键。你就打开了浏览器的开发者模式：
点击红框的按钮，可以任意在页面上选择页面元素，同时右侧的元素视图也会同步跳到对应的源码上。
同理如果你在右侧的元素视图里点击了对应的代码，左侧页面也会同步显示。所有，注意是所有浏览器都支持开发者模式。
当然开发者模式的作用远不止于此，就留待你慢慢探索了。
我按了F12为什么没有效果？
请默念：计算机没有错，一定是我错x3
对于大多数笔记本来说，F1~F12默认情况下是功能键（例如增加音量，增减亮度等）。要实现F1~F12，你可能需要按下Fn+F1~F12的组合键才可以。 通常笔记本的bios里可以设置默认是功能键还是默认是F1~F12。
看，再次证明你并不了解你的电脑。
在今后的课程中都请牢记这一点：出现了任何问题，都要先按F12，就像C语言里出现了任何问题，都要先设断点一样！
当你来问老师问题时，我第一个要问的也是：F12看了吗？
什么网站都能看的吗？这么diao的吗？
试试，计算机是一门实践性学科，任何时候有想法了去试试总是没错的。
我看看B站主页……晕了
请带着我一定要看懂B站主页的信念学习。
这么多浏览器我怎么选？
实际上目前世界上只有2个浏览器：Chromium和Firefox。当然如果你运气不好，你可能还必须适配旧的IE（噩梦）。
其他的浏览器大多数都可以划入这这两个阵营。实际上如果你明白浏览器内核和浏览器的区别，就很容易理解。
对我们页面效果有影响的，主要是浏览器内核，而不是浏览器本身。
实际上当然不止两种
例如UC浏览器，就是一种不同的内核。
MacOS的Saferi也是另一种内核。
此外旧的Edge也是，更早的Opera也是。
但现在广泛使用的就这两种（或者说Chrome一种）。
那么你应该如何适配和？回答是都要适配。实际上现在浏览器的兼容性已经趋于统一，你基本很难遇到兼容性问题。
从兼容大多数平台的角度出发，应该优先适配Chrome类浏览器。Chrome的市占率在60%以上
| 浏览器 | 全球市场份额 |
|---|---|
| Chrome | 64.62% |
| Safari | 19.91% |
| Edge | 5.45% |
| Opera | 3.31% |
| Firefox | 3.06% |
| Samsung Internet | 2.33% |
但作为一个合格的前端开发工程师，你应当测试尽可能多的（现代）浏览器，保证兼容性。
Hello World!
现在我们来做每个语言都需要的规定动作：写一个Hello World页面。
用vscode打开一个新的文件夹作为工作目录，有两种方法：
- 新建一个空文件夹，在该空文件夹空白处右击选择
用Code打开，这在上面已经讲过了。 - 打开vscode之后，在资源管理下点击
打开文件夹，然后选择你要工作的路径。
什么是目录
目录是文件夹的旧称（也是更广泛的称呼，尤其是在Linux系统下）。
鼠标移动到文件夹名称那一行上，点击新建文件的按钮，输入index.html，创建一个html文件：
在创建的文件里键入：html，此时会出现补全选项，选html:5那项：
如果你操作都正确，vscode应该会生成代码片段：
接下来该轮到我们安装的插件Live Server干活了，看窗口的右下角，有一个Go Live的按钮，点击他：
vscode应该会打开（你的默认）浏览器，显示一个空白页面。如果没有自动打开，请注意终端窗口的输出：
把这里的地址（任意一个）复制到浏览器上打开，也可以打开空白页面。
在<body>和</body>之间新开一行，并输入：
<h1>Hello World!</h1>
存盘！存盘！存盘！
若某个文件没有存盘，标签的右边会出现一个圆形标记。作为一个已经C语言入门的程序员，你应该明白任何没有存盘的修改都不会体现到最后的结果上。
存盘之后回去看你的浏览器，应该可以看到页面的内容变了。
这么神奇！为什么会自动刷新？
这就是Live Server这个插件所做的工作。Live Server会监视文件的修改（你存盘时，就是文件被修改了），当文件被修改后自动刷新页面。
结束了吗？
你忘了对一个陌生的页面应该做什么吗……
此外
你考虑过吗？
- 为什么文件要命名成
index.html？其他文件名不可以吗？ - 为什么在Windows的资源管理器里我（一部分人）只能看到
index，看不到.html？ - 为什么是
html:5，不能选html和html:xml吗？他们有什么关系？ - 为什么要把
<h1>Hello World!</h1>放在<body>和</body>的中间，其他位置不可以吗？d - 你可以试试输入
h1{Hello World!}，并保证最后输入的是}（如果括号自动补全，你需要删除他再重新输入}），再按tab键，发生了什么？ - 为什么会有这么多地址，他们访问的是同一个页面吗？
- 右下角状态条都有哪些信息？
UTF-8是什么？CRLF又是什么？ - 为什么输入
127.0.0.1:5500也可以访问，这个地址明明不在上面的地址里。 127.0.0.1:5500和127.0.0.1:5500/index.html有区别吗？- 为什么一定是
:5500，这个号码有什么含义吗？ - 一定要
h1吗？h2，h3行不行？
如果你认为一切都理所应当，那么你应该思考下你之前的学习方式是不是有问题，否则你将很难应对后续的学习。