邂逅Web开发

认识网页和网站

• 什么是网页？
  • 网页的专业术语叫做 Web Page
  • 打开浏览器查看到的页面，是网络中的一页
  • 网页的内容可以非常丰富：包括文字、链接、图片、音乐、视频等等
• 网站是什么呢？
  • 网站是由多个网页组成的
  • 通常一个网站由 N 个网页组成（N >= 1）

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

• 用户在浏览器输入一个网站
• 浏览器会找到对应的服务器地址，请求静态资源
• 服务器返回静态资源给浏览器
• 浏览器对静态资源进行解析和展示

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

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

服务器是什么

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

世界上第一个网页

• 上世纪 90 年代，Berners-Lee上线了世界上第一个网站
  • http://info.cern.ch/hypertext/WWW/TheProject.html
• 虽然目前我们会认为这个网页简单到不值一提，但是在当时它的发明是 “天才之作”

网页的组成

• 那么网页是由什么开发出来的呢？
  • 阶段一：HTML 元素
    • HTML：网页的内容结构
  • 阶段二：HTML 元素 + CSS 样式
    • CSS：网页的视觉体验
  • 阶段三：HTML 元素 + CSS 样式 + JavaScript 语言
    • JavaScript：网页的交互处理

浏览器的作用

• 我们已经明确知道了网页的组成部分：HTML + CSS + JavaScript
• 那么这些看起来枯燥的代码，是如何被渲染成多彩的网页呢？
  • 我们知道是通过浏览器来完成
  • 浏览器最核心的部分其实是 “浏览器内核”

浏览器的渲染引擎

• 浏览器最核心的部分是渲染引擎（Rendering Engine），一般也称为浏览器内核
  • 负责解析网页语法，并渲染（显示）网页

不同浏览器的内核

• 常见的浏览器内核有
  • Trident（三叉戟）：IE、360 安全浏览器、搜狗高速浏览器、百度浏览器、UC 浏览器
  • Gecko（壁虎）：Mozilla、Firefox
  • Presto（急板乐曲）-> Blink （眨眼）：Opera
  • Webkit -> Safari、360 极速浏览器、搜狗高速浏览器、移动端浏览器（Android、iOS）
  • Webkit -> Blink：Chrome、Edge
• 不同的浏览器内核有不同的解析、渲染规则，所以同一网页在不同内核的浏览器中的渲染效果也可能不同