非零基础自学前端最后一遍零 Introduction 2 邂逅Web开发 2.2 网页显示的过程和服务器

た入场券 2024-03-26 18:27 30阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  零 Introduction
         *  2 邂逅Web开发
         *   *  2.2 网页显示的过程和服务器
             *   *  2.2.1 认识网页和网站
                 *  2.2.2 网页的显示过程 – 用户角度
                 *  2.2.3 网页的显示过程 – 前端工程师
                 *  2.2.4 服务器是什么

![在这里插入图片描述][027ccc8b429a435596d9dfacf2b49986.png_pic_center]

#### 零 Introduction ####

#### 2 邂逅Web开发 ####

##### 2.2 网页显示的过程和服务器 #####

###### 2.2.1 认识网页和网站 ######

什么是网页？

*  网页的专业术语叫做 Web Page；
 *  打开浏览器查看到的页面，是网络中的一“页”；
 *  网页的内容可以非常丰富：包括文字、链接、图片、音乐、视频等等

![在这里插入图片描述][4e1954be1cbc479798824127c80b6879.png_pic_center]

网站是什么呢？

*  网站是由多个网页组成的；
 *  通常一个网站由N个网页组成（N >= 1）；

###### 2.2.2 网页的显示过程 – 用户角度 ######

1.  用户在浏览器输入一个网站；
2.  浏览器会找到对应的服务器地址，请求静态资源（可以存放在世界上任何一个地方）；
3.  服务器返回静态资源给浏览器；
4.  浏览器对静态资源进行解析和展示；

###### 2.2.3 网页的显示过程 – 前端工程师 ######

1.  开发项目（HTML/CSS/JavaScript/Vue/React）
2.  打包、部署项目到服务器里面

![在这里插入图片描述][9af8a3f504bd46688364d79ebaa441df.png_pic_center]

###### 2.2.4 服务器是什么 ######

*  我们日常生活接触到的基本都属于客户端、前端的内容：
    
     *  比如浏览器、微信、QQ、小程序；
 *  我们知道自己的手机并不可能存放哪些多的数据和资源：
    
     *  比如你用《网易云听音乐》，音乐数据大部分都是存在“服务器”中的；
 *  那么服务到底是什么呢？
    
     *  服务器本质上也是一台类似于你电脑一样的主机；
     *  但是这个主机有几个特点：
        
         *  二十四小时不关机的（稳定运行）；
         *  没有显示器的；
         *  一般装的是Linux操作系统（比如centos）；
 *  那么我以后到公司是不是就看得见服务器了呢？
    
     *  目前公司大部分用的是云服务器（比如阿里云、腾讯云、华为云）；

![在这里插入图片描述][f1514e832a064fb6a3a4ffc7c9041388.png_pic_center]

[027ccc8b429a435596d9dfacf2b49986.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/56b6ff2c159e46d08171ad987952c5c5.png
[4e1954be1cbc479798824127c80b6879.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/2863c2814b384c4d9238f159ad84f009.png
[9af8a3f504bd46688364d79ebaa441df.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f95436a40cbf41488197bfcab1b09764.png
[f1514e832a064fb6a3a4ffc7c9041388.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/da29547a648e4526b96f898d0a2453af.png