零基础学前端（一）前端开发环境：vscode、chrome 完成最基础的代码编写和运行

「爱情、让人受尽委屈。」 2024-04-22 15:17 104阅读 0赞

> 该篇适用于从零基础学习前端的小白

## 一、导言 ##

我们编程都需要在一个特定的环境下才能运行。初学的新手可以暂时不用去理解为什么需要这样的环境，先跟着用起来，后面再回来理解就会顺利很多。

## 二、安装google chrome 浏览器 ##

### 1. 为什么我们要安装浏览器呢？ ###

答：因为我们开发的网站要在电脑的浏览器运行，而chrome是业内公认支持各种Api最多的浏览器，当然你也可以使用火狐(firfox)、360极速浏览器。

### 2. 下载google-chrome浏览器 ###

![c74580a6c3fc46f985bf34424d6cb634.png][]

进入网站内部，点击下载按钮，下载完成后，双击exe安装包，运行，默认安装就好

![7ef1bdb0f78448d7a7f4bf45862a2603.png][]

## 三、安装编辑代码工具 vscode ##

### 1. 为什么使用vscode作为代码编辑工具 ###

答：前端编写代码，可以用记事本，但不建议使用，因为很不方便，初学者很多地方写错一点，就会运行不成功，或者和中文乱码。而使用成熟Vscode工具，提示清晰好用。当然你也可以选择Sublime Text、Atom

### 2. 下载VsCode ###

![6015cde1bf8d47e59ff8774050579342.png][]

进入官网点击download下载

![14115586d7544332985b16dc18f76dfe.png][]

### 3. 运行VsCode，在里面写第一段代码 hello world ###

在桌面新建一个文件夹，在里面新建一个 **helloWord.html** 文件，

![63837a0b36d34935b81ae8cbebad9ecf.jpeg][]

之后打开VsCode，使用**VsCode打开文件夹**进行编辑

![51eb8edf96e744018f6dd059f02125fd.png][]

之后我选择了**前端基础**这个文件夹

![b8b62c37595b4556bab6e17964d6b9b4.png][]

### 4. 我们准备写下自己的第一段代码 ###

#### （1） 输入英文叹号，之后按enter回车键，就能生成基础代码结构 ####

![b660128d12934ffab86ed6d912d841d1.png][]

![610d26d7c4c0473884e586db68a7a741.png][]

####  ####

#### （2）在body标签内部添加一个h1标签，并写下hello world（你好世界） ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h1>hello world（你好世界）</h1>
    </body>
    </html>

####  ####

#### （3）将helloWorld.html文件，拖拽进入 chrome浏览器里面显示 ####

![a43e528249174984b1caea524fdc9e0f.png][]

## 四、结束语 ##

目前我们已经完成最基本的代码开发和运行。但是我们作为初学者，对写的代码不理解，不明白。此时，我们就要学习，前端编程里面最基本的三个东西：HTML 、CSS、 JavaScript。

可以看一下我的下一篇内容

[零基础学前端（二）用简单案例去理解 HTML 、CSS 、JavaScript 概念][HTML _CSS _JavaScript]

[c74580a6c3fc46f985bf34424d6cb634.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/f6e9a10fcd504184985013c1c27cbb27.png
[7ef1bdb0f78448d7a7f4bf45862a2603.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/7ac2c3ccbe924442b7851d1736146a26.png
[6015cde1bf8d47e59ff8774050579342.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/787fc984c06c4a1189f5274590df67c0.png
[14115586d7544332985b16dc18f76dfe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/364dfa0e34204ff68a547dd8d37d5ed0.png
[63837a0b36d34935b81ae8cbebad9ecf.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/8ff5c50c35a8457981fed52cab2e2020.jpeg
[51eb8edf96e744018f6dd059f02125fd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/e673c65b1c2644e48983a362a821afad.png
[b8b62c37595b4556bab6e17964d6b9b4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/e3ef8e5a4411456ab4170746a12d0771.png
[b660128d12934ffab86ed6d912d841d1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/562f5f85c3cd4ede8d51c36af3a1d5af.png
[610d26d7c4c0473884e586db68a7a741.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/faf97d9e49fd4e86a59dd192b275f0dc.png
[a43e528249174984b1caea524fdc9e0f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/e1d9dfc3228c4360a31b812927c6cfbf.png
[HTML _CSS _JavaScript]: https://blog.csdn.net/tengyuxin/article/details/132857131