【第一周】走进前端、Vscode插件安装与使用

走进前端

web系统

1. 概念：以网站形式呈现，通过浏览器访问，具有一定功能的系统。
2. 举例：

• 电商网站， 如 淘宝，京东；
• 综合门户网站， 如 新浪，搜狐；
• 管理系统, 如 东师教务管理网站。

3. 分类
（1）前端：网页上为用户呈现的部分,以网页形式呈现。
（2）后端：与数据库进行交互，完成数据存取。

前端

1. 什么是开发：通过代码编程的方式，将网页源代码写出来。
2. 开发过程：

• 网站架构师按照用户需求，将网站的整个架构设计出来
• 网页美工人员将每个页面设计出一个效果图
• 前端开发人员将效果图这样的图片转换成代码，也就是通过代码编程的方式形成一个网页文件。 [^这个网页文件就是网页源代码]

网站和网页

1. 网站web site：
从用户角度，互联网上用于展示特定内容的相关网页的集合。
从开发人员角度看，网站是一个文件夹（站点文件夹）。

2. 网页web page：
是网站中的一页，网站中的网页通过“超链接”的方式被组织在一起。
从开发人员的角度看，网页就是符合特殊规范的可以被浏览器解析的文件。

3. 主页homepage：
进入网站看到的第一个网页，文件名通常是index

4. 网页元素：
站标，表单文字，超链接，广告横幅，导航栏

5. 网站发布 ：
Web系统开发完成后，需要将站点文件夹上传至Web服务器上，用户才可以访问该服务器浏览网站内容。访问Web服务器时需要定位到该服务器，这个过程被称为寻址。

寻址主要涉及以下几类地址：IP地址，域名，URL。

浏览器与搜索引擎

1. 浏览器
客户端安装了浏览器，才可以访问Web系统中的网页，它的主要作用就是对Web服务器提出访问请求，在收到服务器端的应后响应后，将服务器传送回来的网页文件进行解析，渲染，并以可视化的方式呈现出来。

浏览器内核主要包含渲染引擎和JS引擎，用于解析网页源代码并在屏幕上绘制网页。

2. 搜索引擎
搜索引擎就是根据用户需求，运用特定策略从互联网检索出特定信息反馈给用户的一种检索系统

Web前端开发技术

1. 技术构成
HTML用于设定网页结构。
CSS用于设定网页样式，主要包括页面元素的样式和网页布局。
JavaScript是一种客户端脚本语言，能够设定网页行为，用于完成网页的一些动态效果与用户的交互效果。

2. 技术标准
W3C（万维网联盟）是Web技术领域最具权威的技术标准机构

---

Vscode插件安装与使用

1. 下载地址

2. 插件

上图是我自己下载好的插件，在右边区域选择“扩展”→“在应用商店中搜索扩展”

• 汉化插件

- Live Server插件

在html源代码里右键，点击Open with live server即可使用，如下图

- 还有一个文件图标的插件，更直观的显示文件类型了