https://www.xiaobuteach.com/html/introduce/principle.html?from=bili

HTML 基本原理

我们访问jd.com看到京东首页，基本原理是什么？

BS架构的请求与响应模型。

1 浏览器

常用的浏览器包括：Chrome（Google公司）、Edge（微软公司）、FireFox（Mozilla公司）、360浏览器等国内大厂浏览器。

我们在浏览器输入网页地址，请求相应的网页，网页内容来源于服务器。

2 服务器

网站对应有自己的服务器主机，服务器主机部署网页服务，常用的HTML服务（也称WEB服务器）包括：nginx、apache等。

服务器主机有自己的域名与IP。

当服务器接收到我们浏览器传递的网页地址请求，会把HTML代码传给我们的浏览器，浏览器解析HTML、完成页面显示。

3 BS架构

上述使用浏览器向服务器请求网页的过程即BS架构，即：请求—响应模型。

B：Browser，浏览器；

S：Server，服务器。

浏览器（B）向服务器（S）请求网页，称为请求过程。

服务器（S）向浏览器（B）响应HTML代码，称为响应过程。

浏览器把"看不懂"的HTML代码解析显示成"好看"的网页。

CS架构

与BS架构相对的是CS架构。

C：Client，客户端；

S：Server，服务器。

CS架构需要下载安装的应用程序，如：QQ、360安全卫士，属于CS架构。

CS架构的缺点：升级需要用户重新下载与安装新版本；开发成本高；开发漂亮的界面成本高。

CS架构的优点：大型游戏需要响应速度非常快，CS架构更加合适；操作系统底层操作权限更高，如360。

BS架构的优点

1）升级方便：不需要用户重新下载与安装，各网站系统升级对于用户无需任何操作；

2）开发成本低，开发效率高；

3）容易开发好看的界面。

4 我们的hello页面，服务器在哪里

本节内容大家理解有服务器这么一个东东即可，不需要掌握。

我们安装的Open In Default Browser插件，它内置了服务器，当我们通过它打开页面时，会在本地启动服务。

服务的端口如下图是52330（可能会变化）。localhost表示当前主机的虚拟域名。

测试关闭服务器

通过DOS指令查找端口对应进程

netstat -ano | findstr 端口

查看进程ID对应的程序名

tasklist | findstr 进程ID

强制关闭进程

taskkill /pid 进程ID /F

浏览器刷新页面地址，无法访问。

VSCode通过Open In Default Browser再次打开网页，它又会自动启动服务。

上述过程，说明Open In Default Browser会自动启动服务器，非常方便开发。

生产环境的服务器

生产服务器部署项目时，我们会在服务器部署nginx或apache服务，不会通过vscode插件Open In Default Browser来启动服务。