认识网页和网站

什么是网页?

• 网页的专业术语叫做 Web Page;

• 打开浏览器查看到的页面，是网络中的一“页”;

• 网页的内容可以非常丰富:包括文字、链接、图片、音乐、视频等等

网站是什么呢?

• 网站是由多个网页组成的; p通常一个网站由N个网页组成(N >= 1);

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

• 1.用户在浏览器输入一个网站;

• 2.浏览器会找到对应的服务器地址，请求静态资源(可以存放在世界上任何一个地方);

• 3.服务器返回静态资源给浏览器;

• 4.浏览器对静态资源进行解析和展示;

image.png

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

• 1.开发项目(HTML/CSS/JavaScript/Vue/React)

• 2.打包、部署项目到服务器里面

image.png

服务器是什么?

• 我们日常生活接触到的基本都属于****客户端****、前端的内容:

  • 比如浏览器、微信、QQ、小程序;

• 我们知道自己的手机并不可能存放哪些多的数据和资源:

  • 比如你用《网易云听音乐》，音乐数据大部分都是存在“服务器”中的;

• 那么服务到底是什么呢?

  • 服务器本质上也是一台类似于你电脑一样的主机;

  • 但是这个主机有几个特点:

  ✔️ 二十四小时不关机的(稳定运行); ✔️ 没有显示器的; ✔️ 一般装的是Linux操作系统(比如centos);

• 公司大部分用的是****云服务器****(比如阿里云、腾讯云、华为云);

世界上第一个网页

• 上世纪90年代，Berners-Lee上线了世界上第一个网站:

  • http://info.cern.ch/hypertext/WWW/TheProject.html

image.png

• 虽然目前我们会认为这个网页简单到不值一提，但是在当时它的发明是“天才之作”。

现代的网页已经非常复杂

image.png

网页的组成

那么网页是由什么开发出来的呢?

• 阶段一:HTML元素;

• 阶段二:HTML元素 + CSS样式;

• 阶段三:HTML元素 + CSS样式 + JavaScript语言;

image.png

网页的组成

image.png

网页的组成

image.png

网页源代码的角度

image.png

网页开发的角度

image.png

浏览器的作用

我们已经明确知道了网页的组成部分:HTML + CSS + JavaScript****。

那么这些看起来枯燥的代码，是如何被渲染成多彩的网页呢?

我们知道是通过浏览器来完成;

image.png

浏览器最核心的部分其实是 “浏览器****内核****”;

浏览器的渲染引擎

• 浏览器最核心的部分是渲染引擎(Rendering Engine)，一般也称为“****浏览器****内核****”

• 负责解析网页语法，并渲染(显示)网页 n 常见的浏览器有很多:

不同浏览器的****内核

• 常见的浏览器内核有

  • Trident ( 三叉戟):IE、360安全浏览器、搜狗高速浏览器、百度浏览器、UC浏览器; pGecko( 壁虎) :Mozilla Firefox;

  • Presto(急板乐曲)-> Blink (眨眼):Opera

  • Webkit :Safari、360极速浏览器、搜狗高速浏览器、移动端浏览器(Android、iOS) pWebkit -> Blink :Google Chrome

image.png

• 不同的浏览器内核有不同的解析、渲染规则，所以同一网页在不同内核的浏览器中的渲染效果也可能不同。