Skip to main content

认识网页和网站

Windows 显示隐藏文件和扩展名​

查看所有隐藏的文件类型和文件扩展名 - Microsoft

推荐安装的软件​

开发工具选择​

  • 记事本可以开发一个网页吗？答案：可以。但是有很多的缺点：

    • 创建和管理文件不方便；
    • 没有颜色标识/没有智能提示/无法调试程序；

  • 专业的前端开发工具

    • WebStorm、Sublime Text、Visual Studio Code、Atom、HBuilder、IntelliJ IDEA、Dreamweaver
    • 智能提示、高亮识别、语法检测、集成环境、开发效率高

  • 上课推荐开发工具：

    • Webstorm

      • 优点：集成开发工具，包罗万象
      • 缺点：重（占用系统资源多），收费

    • VSCode（上课使用）

      • 优点：轻（相当于一个编辑器），免费
      • 缺点：需要安装一些插件来辅助开发

VSCode 工具安装​

  • VSCode 编辑器下载 - 安装：https://code.visualstudio.com

  • 安装插件（增加功能）：右侧图标最后一项，Extensions，查找需要的插件（联网）

    • 中文插件：Chinese
    • 颜色主题：atom one dark
    • 文件夹图标：VSCode Great Icons
    • 在浏览器中打开网页：open in browser、Live Sever
    • 自动重命名标签：auto rename tag

  • VSCode 的配置：

    • Auto Save 自动保存

    • Font Size 修改代码字体大小

    • Word Wrap 代码自动换行

    • Render Whitespace 空格的渲染方式 (个人推荐)

    • Tab Size 代码缩进

      • 推荐 2 个空格（公司开发项目基本都是 2 个空格）

认识网页和网站​

  • 什么是网页

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

  • 网站是什么

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

网页的显示过程​

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

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

网页的显示过程 - 前端工程师​

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

世界上第一个网页​

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

网页的组成​

  • 阶段一：HTML 元素；

  • 阶段二：HTML 元素 + CSS 样式；

  • 阶段三：HTML 元素 + CSS 样式 + JavaScript 语言；

  • HTML - 网页的内容结构

  • CSS - 网页的视觉体验

  • JavaScript - 网页的交互处理

浏览器内核​

网页的组成部分：HTML + CSS + JavaScript。

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

常见的浏览器内核有：

  • Trident（三叉戟）：IE、360 安全浏览器、搜狗高速浏览器、百度浏览器、UC 浏览器；
  • Gecko（壁虎） ：Mozilla Firefox；
  • Presto（急板乐曲）-> Blink（眨眼）：Opera
  • Webkit：Safari、360 极速浏览器、搜狗高速浏览器、移动端浏览器（Android、iOS）
  • Webkit -> Blink : Google Chrome

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