前端学习记录~2023.6.1~Web入门

---

前言

在经过前一个月的刷题与博客记录后，和已经工作两年多的两个前端同学聊天以及请教前端准备路线时，忽然才意识到似乎策略严重有问题。

还剩一个月左右就将开启24年的秋招，然而虽然算法和数据结构确实进步颇多，但作为前端工程师可能更重要或者说更为基础更必要的理应是前端相关的知识，前端三大件、浏览器、计算机网络、前端框架等，然而对于这些，目前的进展非常惨不忍睹，尤其是在当前这么紧张的时间下更应该重新审视和规划后续的任务计划，重新判定所有要做的事的优先级。

几个做前端的大学同学，现在帮我找资料的找资料，找系统路线的找系统路线，更是有跟我说每周抽出来两天直接给我上课，带着一起学，以及带着做可能需要的项目。

实在是开心之余满心感激与惶恐。想来这么多年遇见的人和事，自己确实在幸运上没输过，总碰到很好的人和不错的情况。

那么接下来，所有该有的或额外的外界帮助都已经齐备，就差我自己了。

即使本科没怎么好好听课，但是经过了算法的拷打，感觉已经没什么需要慌的了。

那就挑战下自己的速度吧。

---

Web入门

1. 必备工具

• 文本编辑器：使用VSCode
• 网络浏览器：Chrome、Safari
• 有时可能需要安装本地 Web 服务器

2. 网络服务器（Web server）

可以代指硬件或软件，或是它们协同工作的整体。

• 硬件：一台储存了网络服务软件以及网站组成文件（如 HTML 文档、CSS 样式表、Js 文件、图片等）的计算机。它接入到互联网并且支持与其他连接到互联网的设备进行物理数据的交互。
• 软件：一种能理解 URL（网络地址）和 HTTP（浏览器用来查看网络的协议）的软件。通过服务器上存储的网站的域名（比如 mozilla.org）可以访问这个服务器，并且还可以将它的内容分发给最终用户的设备。

流程：当浏览器需要一个托管在网络服务器上的文件的时候，浏览器通过 HTTP 请求这个文件。当这个请求到达正确的网络服务器（硬件）时，HTTP 服务器（软件）收到这个请求，找到这个被请求的文档（如果这个文档不存在，那么将返回一个 404 响应），并把这个文档通过 HTTP 发送给浏览器

• 静态网络服务器（static web server）：或者说堆栈。由一个计算机（硬件）和一个 HTTP 服务器（软件）组成。因为会把托管文件原封不动传送出去所以叫 静态。
• 动态网络服务器（dynamic web server）：由一个静态的网络服务器加上额外的软件组成，最普遍的是一个应用服务器和一个数据库。这个应用服务器会在通过 HTTP 服务器把托管文件传送到你的浏览器之前会对这些托管文件进行更新，因此被称为 动态。

举个例子，要生成你在浏览器中看到的最终网页，应用服务器或许会用一个数据库中的内容填充一个 HTML 模板。网站像 MDN 或者维基百科 [Wikipedia] 有成千上万的网页，但是它们不是真正的 HTML 文档，它们只是少数的 HTML 模板以及一个巨大的数据库。这样的设置让它更快更简单地维护以及分发内容。

3. 托管文件

一个网络服务器首先需要存储这个网站的文件，也就是说所有的 HTML 文档和它们的相关资源（related assets），包括图片，CSS 样式表，JavaScript 文件，字形（fonts）以及影像。

严格来说，可以在自己的计算机上托管所有的这些文件，但是在一个专用的网络服务器上存储它们会方便得多，理由如下

• 会一直启动和运行
• 会一直与互联网连接
• 会一直拥有一样的 IP 地址（不是所有的 ISP 都会为家庭线提供一个固定的 IP 地址）
• 由一个第三方提供者维护

4. 通过 HTTP 交流

一个网络服务器提供了 HTTP（超文本传输协议）支持。正如它的名字所示，HTTP 明确提出了如何在两台计算机间传输超文本（比如说链接的网络文档（linked web documents））

一个协议是一套为了在两台计算机间交流而制定的规则。HTTP 是一个文本化的（textual），**无状态的（stateless）**协议。

• 文本化：所有命令都是纯文本的（plain-text）和人类可读的（human-readable）
• 无状态：无论是服务器还是客户都不会记住之前的交流。举个例子，仅依靠 HTTP，一个服务器不能记住你输入的密码或者你正处于业务中的哪一步。你需要一个应用服务器来进行这样的工作

HTTP 为客户和服务器间的如何沟通提供清晰的规则：

• 只有用户可以制定 HTTP 请求，然后只会发送到服务器。服务器只能响应客户端的 HTTP 请求
• 当通过 HTTP 请求一个文件时，客户必须提供这个文件的URL
• 网络服务器必须应答每一个 HTTP 请求，至少也要回复一个错误信息

统一资源定位器（URL）：是指定在 Internet 上可以找到资源的位置的文本字符串。你的浏览器在其地址栏显示 URL，例如https://developer.mozilla.org
URL 也可用于文件传输（FTP） ，电子邮件（SMTP）和其他应用

在一个网络服务器上，HTTP 服务器负责处理和应答传入的请求：

1. 当收到一个请求时，HTTP 服务器首先要检查所请求的 URL 是否与一个存在的文件相匹配
2. 如果是，网络服务器会传送文件内容回到浏览器
3. 如果不是，一个应用服务器会建立必要的文件
4. 如果两种处理都不可能，网络服务器会返回一个错误信息到浏览器，最常见的是“404 未找到” [“404 Not Found”]

5. 设计网站外观

1. 计划：

   • 网站的主题是什么
   • 基于所选主题需要展示哪些信息
   • 网站采用怎样的外观

2. 绘制草图：

   • 画出大致的希望的网站的样子很关键，要保持这个习惯。

3. 选定内容：

   • 文本
   • 主题颜色
   • 图像
   • 字体

6. 处理文件

一个网站包含许多文件：文本内容、代码、样式表、媒体内容，等等。当你建立一个网站时，你需要在计算机上将这些文件以合理的结构组织起来，确保文件之间交互畅通，并在你最终将它们上传到服务器之前使你的所有内容看起来正确。处理文件讨论了一些你应该注意的问题，以便你能为你的网站建立一个合理的文件结构。

1. 网站应该保存在何处：对于本地网站，应将所有相关文件放在一个单独文件夹中，可以映射出服务器端站点文件结构。

2. 关于大小写和空格的提示：完全用小写字母命名文件夹和文件，不使用空格，单词之间使用连字符 “-” 来当作单词的分隔符。

3. 网站应该使用什么结构：最常见的是一个主页 HTML 文件和包含图像、样式文件和脚本文件的文件夹

   • index.html：这个文件一般会包含主页内容，也就是人们第一次进入网站时看到的文字和图片。使用文本编辑器，创建一个名为index.html的新文件，并将其保存在test-site文件夹内

   • images 文件夹：这个文件夹包含网站上使用的所有图片。在 test-site 文件夹内创建一个名为 images 的文件夹

   • styles 文件夹：这个文件夹包含用于设置内容样式的 CSS 代码（例如，设置文本和背景颜色）。在你的 test-site 文件夹内创建一个名为 styles 的文件夹

   • scripts 文件夹：这个文件夹包含所有用于向网站添加交互功能的 JavaScript 代码（例如，点击时加载数据的按钮）。在 test-site 文件夹内创建一个名为 scripts 的文件夹

4. 文件路径：为使文件间正常交互，应为每个文件提供访问路径，所以一个文件知道另一个文件的位置。下面介绍一些文件路径的通用规则：

   • 若引用的目标文件与 HTML 文件同级，只需直接使用文件名，例如：my-image.jpg
   • 要引用子目录中的文件，请在路径前面写上目录名，再加上一个正斜杠。例如：subdirectory/my-image.jpg
   • 若引用的目标文件位于 HTML 文件的上级，需要加上两个点。举个例子，如果 index.html 在 test-site 的一个子文件夹内，而 my-image.jpg 在 test-site 内，你可以使用…/my-image.jpg 从 index.html 引用 my-image.jpg
   • 以上方法可以随意组合，比如：…/subdirectory/another-subdirectory/my-image.jpg

现在文件夹结构应该看起来像这样：