1.网页三大件：HTML、CSS、JS
HTML（HyperText Markup Language超文本标记语言）：构成网页的结构，结构由元素（标签）组成。
CSS（Cascading Style Sheets层叠样式表）：控制网页中的元素的样式，标签名控制、id控制、class控制。
JS（JavaScript网页脚本）：动态控制网页元素、数据等，发送与接收请求、计算等。
2.什么是前后端分离？
在很久很久以前，互联网攻城狮们通过这么一种方式来产生页面：
用户发送请求，服务器返回一个html文件，里面包含了html、css、js，如果要访问一个新的网页，就需要将整个页面刷新，重新请求服务器返回一个html文件。
但是随着互联网的发展，这种方式表现出了一些劣势：
- 资源浪费：重复的资源请求。
- 性能瓶颈：每次返回的东西太大了，占用网络带宽。
- 不方便维护：需要兼顾业务逻辑与视图。
- 交互性差：不能动态的加载一部分的数据，只能刷新整个网页。
…
于是呢，工程师们想出了前后端分离的方法（本质上是一种纵向分布式），让前端与后端各司其职：
- 前端管视图，需要数据就去问后端；
- 后端管业务逻辑，只返回数据（一般是JSON格式），不用管界面好不好看。
现在前后端分离架构已经成为web开发的主流。
你可以不去了解分布式、微服务架构，但至少，要做前后端分离。
前端框架：Vue，React
后端框架：Springboot，Express
3.用户和服务器交互的方式是通过API接口传输JSON数据
API（Application Programming Interface）：应用编程接口，从名字我们能够看出，这个东西应该是在编程时使用的，用户不应该感知出来。
第二个问题中，我们提出了前后端分离，那么前端如何与后端通信呢？
一般通过前端中的JS向后端的一个API接口（可以理解为一个网页地址），发送请求（这个请求实际上还是客户机发出的，一般为http或https），后端返回数据后再通过JS动态加载进页面中。
http流程：
1.用户向后端发送一个请求（request）
2.后端处理数据（计算、数据库交互、其他逻辑）
3.后端返回一个响应（response）
4.API接口分为两大类：GET和POST
GET请求
相当于直接在浏览器地址栏访问，可以携带若干个字符串形式的URL（Uniform Resource Locator）参数，总长度限制于浏览器有关，一般在5~10万，不同参数用&连接。
https://cn.bing.com/search?q=get%E6%8E%A5%E5%8F%A3%E9%95%BF%E5%BA%A6&cvid=26da819607ad4891a24f3e4c1defe6fe&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQABhA0gEIMzAyMWowajmoAgCwAgA&FORM=ANAB01&PC=CNNDDB
- 接口地址：https://cn.bing.com/search
- 参数（JSON格式）：{
“q”:“get%E6%8E%A5%E5%8F%A3%E9%95%BF%E5%BA%A6”,
“cvid”:“26da819607ad4891a24f3e4c1defe6fe”,
“gs_lcrp”:“EgZjaHJvbWUyBggAEEUYOTIGCAEQABhA0gEIMzAyMWowajmoAgCwAgA”,
“FORM”:“ANAB01”,
“PC”:“CNNDDB”,
}
POST请求
与GET的区别在于，它可以携带一个JSON作为请求体，而不是仅仅只能携带字符串参数，浏览器不能直接发送POST请求，需要借助工具或JS。
一个请求一般由请求头（Header）、请求体（GET没有，JSON）、Cookies（一小串信息，一般携带一些用户信息）组成。
关于POST的具体的知识，如果点赞过500，咱们就接着唠。
5.编写一个简单的前端网页，用于每次随机获取一张壁纸
<!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>
<button onclick="ChangeBG()">切换背景</button>
<script>
// ES6，ECMA
const ChangeBG = () => {
const urlList = [
'https://b0.bdstatic.com/daaa0535d569ce15f5301068353cc9e1.jpg@h_1280',
'https://b0.bdstatic.com/19fa4ab39078d78891031f43b5d13036.jpg@h_1280',
'https://b0.bdstatic.com/e1b147b8e75495df728a3f4f69c0f2ff.jpg@h_1280',
'https://b0.bdstatic.com/6d0437c07d8a5e1ccd60f22ba452c281.jpg@h_1280',
'https://pic2.zhimg.com/v2-bef6f460b30747888fc62b6d28907305_r.jpg'];
const num = Math.floor(Math.random() * urlList.length);
document.body.style.backgroundImage = `url(${urlList[num]})`;
}
ChangeBG();
</script>
</body>
</html>
![[调度算法]](https://img-blog.csdnimg.cn/direct/2236dcc6c0554879b9e425a12ac858b4.png)
