从零开始学WEB前端——前置知识以及环境搭建

工欲善其事，必先利其器 ——《论语··卫灵公》

语雀地址：https://www.yuque.com/beilayanmen

Github地址：https://github.com/SuZui-cn/my-web

Gitee地址：https://gitee.com/north_gate/my-web

个人博客地址：https://foollyone.cn/

⌨本文知识点

---

• 前置知识

• Chrome浏览器

• 下载安装

• VSCode

• 下载安装

• 汉化

正文

---

前置知识

我们先简单的了解一下基础知识。

先介绍一下WEB，下面是维基百科的解释。

万维网（英语：World Wide Web）亦作WWW、Web、全球广域网，是一个透过互联网访问的，由许多互相链接的超文本组成的信息系统[1]。英国科学家蒂姆·伯纳斯-李于1989年发明了万维网。1990年他在瑞士CERN的工作期间编写了第一个网页浏览器[2][3]。网页浏览器于1991年1月向其他研究机构发行，并于同年8月向公众开放。

所谓WEB的话就是平常说的万维网，通俗一点就是我们平时浏览的网站网站也称之为WEB应用程序。网站和我们平时使用的手机APP不同，我们平时在使用手机APP的时候需要先将APP下载下来，而且如果APP存在更新的话我们还需要下载新的资源，同时手机端应用不能直接在电脑端使用；而网站依托于浏览器，不管是在手机上还是电脑上我们只要下载了浏览器就可以去访问网站，网站的跨平台性优于手机应用，而且在网站内容更新的时候我们不需要再次下载额外的资源。

网站和手机应用的区别实际上就是B/S架构和C/S架构的区别。

B/S架构即浏览器和服务器架构模式。B:brower浏览器；S:server服务端

C/S架构即客户端和服务器架构模式。C:client 客户端 ；S:server服务端

---

B（浏览器）和C（客户端）都具备用户可以直接看到的界面，而用户可以直接看到的界面统称为前端。

不管是B/S架构还是C/S架构都有一个S（服务端），也就是说一个完善的软件应该具备和用户交互的能力，同时一个软件应该是具备某种功能的，可以为用户提供一定的服务。在服务的过程中会产生一些具有实际作用意义的数据，而这些产生的数据又会影响到之后为用户的服务。为了更好的服务用户，我们需要将这些数据保存下来。由此得出，服务端应该具备的两个基本的功能：业务逻辑处理和数据存储。服务端也称之为后端。

总结起来就是：

• 前端负责展示用户可以看到的界面

• 后端负责处理业务逻辑和数据存储

在此基础上我们又可以深入探讨一下，一个软件（不管是WEB还是手机APP）需要可以直接被看到的界面，需要为用户提供服务，需要存储数据。这就是软件的三层架构。

软件的三层架构：表示层（UI）、业务逻辑层（BLL）和数据访问层（DAL）

一个只包含表示层的网站被称之为静态页面，含有服务端（后端）的网站被称为动态页面。

本系列文章就重点在于讲述WEB前端，也就是静态页面。（在讲到javascript的AJAX技术的时候会提供后端的接口以便学习）

环境搭建

大家在学习java或者python的时候都需要下载对应的开发环境，我们编写网页也一样需要开发环境，不过网页的开发环境相对来说十分简单。

一个合格的开发环境应该具备两个部分：①让开发者能够编写代码 ②能够将代码运行起来

对于网站开发来说运行代码的地方就是浏览器，所以我们还需要一个编辑器来编写代码。对于真正的大佬来说记事本充当编辑器足矣[手动狗头]。

但是对于我们新手来说还是要挑选一个好用的编辑器，这样可以减少我们在学习过程中的痛苦面具👹

这里给出推荐的开发环境：谷歌浏览器（Chrome） + VSCode

大家可能就要问了，不是是个浏览器就能访问网站吗，为啥还特意要用谷歌浏览器，而且谷歌搜索在国内又不能用，那和其他的浏览器又有什么区别呢。

先别着急，作为一个要学习网站开发的仔应该对浏览器有更深入的了解，谷歌浏览器是完全遵守W3C标准的浏览器，这里涉及到浏览器内核会在之后的文章中解释。而至于不能使用谷歌搜索那更不是什么难事了。下面就让我来带大家走进WEB前端的大门。

Chrome

下载安装

首先我们先搜索chrome浏览器，因为在百度上有太多的广告网站，所以我在这里直接给出谷歌浏览器的官方地址。（搜索引擎其实就是一个大大的网络爬虫，将用户搜索的信息作为关键字去全网爬去网站，在之后的学习中会深入讲解）

谷歌浏览器官方地址：https://www.google.cn/chrome/index.html

点击“下载Chrome”即可以下载。下载完成之后会有一个ChromeSetup，点击运行即可完成谷歌浏览器的安装。

更改搜索引擎

安装完成之后我们需要解决一下谷歌搜索在国内不能使用的问题，有两种方案：一是科学上网，二是更改搜索引擎。

这里教大家修改搜索引擎

打开谷歌浏览器（第一次打开可能会询问是否设置为默认浏览器，建议设置为默认浏览器）

点击右上角的三个竖着的点，然后点击设置。

在设置里选择搜索引擎，之后切换地址栏中使用的搜索引擎。推荐使用百度或者Bing。这样就可以正常的使用谷歌浏览器里。

这样浏览器就搞定了，现在让我们来搞定VSCode

VSCode

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！