前端环境搭建，保姆式教学

前言❤️❤️

hello hello💕，这里是洋不写bug~😄，欢迎大家点赞👍👍，关注😍😍，收藏🌹🌹

这是本栏目的第一篇学习博客，内容是前端环境的搭建和基础使用

往后这个栏目的博客中会通过「知识点拆解 + 实操演示」的方式，讲清楚前端知识

🎆个人主页：洋不写bug的博客
🎆所属专栏：前端基础
🎆铁汁们对于前端的各种常用核心语法，都可以在上面的前端专栏学习，专栏正在持续更新中🏀，有问题可以写在评论区或者私信我哦~

1，前端简介

前端就是直接与用户交互的 "门面"，我们打开手机或者电脑，比如哔哩哔哩，点击一些按钮，就能跳转到其他的页面，也可以上下滑动，浏览内容，这些都是前端实现的。

前端分为3个部分：

HTML：定义页面结构（骨架）
CSS：定义页面样式（装修）
JavaScript：定义交互逻辑（功能）

对于前端的学习也是按照这个顺序，先学习HTML，能够写出网页的基本框架；再学习CSS，让网页的样式更加美观；最后学习JavaScript，实现更多的交互功能。

那前端跟后端有什么区别呢？

前端和后端是数字产品的 "前台" 和 "后台"，分工明确但协同工作。前端像餐厅的服务员和用餐区（直接对接顾客，提供体验），后端像厨房和仓库（负责准备食物、存储食材，具体的处理逻辑用户看不见）

2，软件下载

写前端代码是在一款叫Visual Studio Code（VS Code）的软件上来写，它是一款功能强大的轻量级代码编辑器，可以在上面安装各种扩展，作为Java，C，C++的开发环境，一些铁汁可能学习C语言时就是用这个软件来写代码的。
如果还没有下载这个软件，就点击下面的链接，到VS Code官网下载，如果是Windows操作系统就下载Windows，Mac版本就下载Mac，中间有个选项，选择创建桌面快捷方式，其他的点下一步即可

VS Code官网

3，环境搭建

打开软件后，是这样一个英文界面，学校的老师可能为了方便理解，会让大家下载中文扩展包
如果能适应英文的话，还是建议使用英文版编程（因为这里面的英语不是特别的复杂，很多是一些基础词汇，而且许多编程资料原版都是英文的）

创建文件就点击左上角的File，在下图中标出了每个选项的具体功能，用黑框圈住的是会平时使用到的：

这些选项的具体作用：

1，建立一个新的文本文件 :

这个文件是没有类型的，可以在这个文本文件中写入代码，然后保存时设置类型
由于在文本文件中写代码没有标签属性的自动补充，因此写前端代码时不会这样建立文件

2，建立一个自己定义文件类型的文件，这个是使用最多的，一般使用这个去建立文件，在里面写前端代码，具体一会演示

3，保存，一般保存的话按ctrl + s去保存，也不会去打开选型点击保存
建议把这个自动保存对号勾选上，这样写新的内容的时候连ctrl + s都不用按，直接自动保存

接下来试一下文件的创建

可以先在桌面上建立一个前端文件夹

然后点击New File，创建自定义类型的文件

就里会让输入文件名和文件类型，文件类型就是指定在了后缀名中

这里就是创建一个名字为1的html类型文件，前端代码是写在html文件中的

接着按enter键，选择保存到桌面的前端文件夹中，点击下面的打开，再点击下面的Create File，这时候文件就创建好了

4，第一个页面的编写

经过了前面的步骤，会进入这样一个界面，用英文输入法按一个感叹号，然后按enter键或者tab键，就生成了HTML5 的基础页面结构，就是在这个结构中写前端代码的

结构里面各部分的含义：

html的核心就是标签，像这里的 <title> 标题标签，<html>、<head>、<body>这些都是标签，学习html就是先从标签开始学起

这里把title里面的内容改为第一个页面，然后在body里面写上hello world

接着点击桌面的前端文件夹，点击打开这个文件，就打开了浏览器中的网页，网页的名字是第一个页面，内容是hello world

markup 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个页面</title>
</head>
<body>
    hello world!
</body>
</html>

在网页中右键点击检查，就会进入到浏览器的开发者工具中，我们可以在这里查看网页的html结构，这个后面会经常用到

5，扩展安装

刚刚先在VS Code中写好代码，再在文件夹中点击html文件打开网页

这样切换页面，就有点太麻烦了，那能不能直接在VS Code中打开网页呢？
这就需要安装扩展，点击左边的这个图标，就进入到了扩展中，接着在搜索框里搜索一个叫open in browser的扩展，然后点击install进行安装

安装完成之后，回到刚刚写html结构的页面中，按alt + shift + b，选择默认在哪个浏览器中打开，铁汁们可以根据自己电脑上安装的浏览器来选择，

安装好以后，在页面中就可以直接点击Open in Default Browser(在默认浏览器中打开)
点击后就可以直接打开当前的 HTML 代码文件，从而查看该代码对应的网页效果，非常方便

6，结语

前端的入门相比C语言，是更加友好的，倒不是说前端后面的部分不难，我们不用去考虑那些复杂的逻辑，像递归调用，复杂循环语句😢，包括查代码bug🤔

前端也就是写 HTML、CSS，改个颜色、调个布局，浏览器立马能看到变化，JS 做交互也是 "点按钮弹弹窗" 这类直白逻辑，只要多练习，是可以很好的掌握的😊💪
以上就是今天的所有内容啦～完结撒花～🥳🎉🎉