前端开发的发展(2)：起点——静态网页时代（1990s）

银安
74 阅读15分钟

前言

在上一篇文章中，小编向大家分享了前端的发展历史，本文小编将深入前端的起点——静态网页时代。

友情提示：想要较好地理解这一阶段，需要结合该时期的计算机硬件、操作系统及计算机网络的发展状况，如果嫌麻烦，可以暂且搁置硬件、操作系统（小编后面会简单提一下），但至少要了解计算机网络的发展状况（作为一名合格前端工程师，理解计算机网络也是必不可少的哟，尤其是TCP/IP，前端正是基于网络才得以发展与应用），这一点，小编会在专栏-计算机网络中，用最通俗易懂的方式，向大家分享~

下面，我们步入正文。

历史背景：信息如何在“网络”中流动？

在 1980s 末到 1990s 初，计算机科学家们面临一个核心问题：

“我们有很多文档（研究论文、实验结果、百科知识），如何让世界各地的科研人员快速共享、浏览、互相引用？”

那时的“网络”还主要是 FTP、Telnet、邮件列表。
问题在于：

  • 文件传输麻烦：要记住路径、命令，还要逐个下载。
  • 信息之间没有“超链接”，只能靠目录去找。
  • 对非技术人员极其不友好。

于是，人们开始思考：
能不能用一个统一的“文档展示语言”，让任何人用浏览器就能看到内容，并通过点击链接跳转？

HTML：为“内容”而生（1991）

1. 遭遇的问题
  • 如何把科研文档在网络上展示出来？
  • 如何让文档之间相互引用（跳转）？
  • 如何做到任何设备、任何系统都能打开？
2. 解决的思路

Tim Berners-Lee 在 CERN（欧洲核子研究中心）提出了 HTML（超文本标记语言） 。

  • “超文本”解决了信息之间的关联问题（即超链接）。
  • “标记语言”让内容能被结构化描述（标题、段落、列表等）。
3. 结果

HTML 1.0 很简单，基本只有结构：

<h1>标题</h1>
<p>一段文字</p>
<a href="xxx">超链接</a>

👉 用户第一次可以“点击跳转”，真正体验到“网络”的意义。

浏览器：为“阅读”而生（1993-1995）

1. 遭遇的问题
  • 即使有 HTML 文件，没有工具去打开，也白搭。
  • 科研人员能写 HTML，但普通人不会。
2. 解决的思路
  • 1993 年，第一个图形化浏览器 Mosaic 出现。
  • 不再需要命令行，普通人点开浏览器，就能看网页。
  • 1994 年，Netscape 浏览器问世，直接引爆了互联网。
3. 结果

👉 网页变成了人人都能“浏览”的东西，互联网正式进入大众视野。

CSS：为“美观与分离”而生（1996）

1. 遭遇的问题
  • HTML 把结构和样式混在一起，非常混乱。
<h1><font color="red">标题</font></h1>
  • 一旦要全站改颜色，得改成百上千个页面。
2. 解决的思路
  • 1996 年，CSS（层叠样式表）诞生。
  • HTML 专注于 结构，CSS 专注于 样式。
  • 支持“样式复用”：只改一份 CSS，全站生效。
3. 结果

👉 网页从“黑白报纸”变成了“彩色杂志”。
前端第一次有了 分工思想：内容与样式分离。

JavaScript：为“交互”而生（1995）

1. 遭遇的问题
  • HTML + CSS 只能展示，用户不能交互。
  • 想要表单验证？必须把数据发到服务器再返回，太慢。
  • 想要一些小动画？完全做不到。
2. 解决的思路
  • 1995 年，Netscape 招聘 Brendan Eich，用 10 天写出了 JavaScript。
  • 最初目标：让网页能“动”起来，支持简单逻辑。
3. 结果
  • 表单校验可以在浏览器里做。
  • 网页能弹窗、变色、交互。

👉 网页第一次有了“动态”的可能。

这一阶段的智慧总结

  1. HTML：解决“能展示”的问题（内容结构化 + 超链接）。
  2. 浏览器：解决“能阅读”的问题（降低门槛）。
  3. CSS：解决“能美观”的问题（结构与样式分离）。
  4. JavaScript：解决“能交互”的问题（用户端逻辑）。

在 1990s 的静态网页时代，人们的思考核心是：

  • 如何把信息“共享”出去（HTML + 浏览器）？
  • 如何把内容“更优雅”地展示（CSS）？
  • 如何让用户“简单交互”（JS）？

这些技术一环扣一环，带有非常明显的“连续性”：

先有内容 → 再有展示 → 再有美观 → 再有交互。

结语

看完上面的内容后，细心的读者可能意识到一个问题：如果先有 HTML，后有浏览器，那么在没有浏览器的那两年，HTML 是怎么被使用、怎么展示的？进而，我们可以延伸出一个新的问题：在 HTML 之前人们又是怎么共享文档的？

没有浏览器时如何使用HTML？

HTML 出现之前：网络信息的“黑白世界”

在 1991 年之前，人们主要依赖：

  • FTP（文件传输协议） ：下载别人的文件到本地，再打开。
  • Telnet（远程登录） ：像“共享黑屏终端”，只能远程输入命令，浏览文档。
  • Gopher（1991 前后） ：一个树形目录式的“信息检索系统”，你点目录，能看到文件。

👉 问题：

  • 信息孤立，文档之间没有直接的“引用关系”。
  • 不直观，普通人很难用。
  • 只能查目录、传文件，完全没有超链接的概念。

HTML 的诞生：解决“信息互联”

Tim Berners-Lee 在 1990 年底提出 HTML（1991 年正式发布），本质上是：

  • 一种“轻量化的 SGML（标准通用标记语言）子集”。
  • 他先写了一个叫 WorldWideWeb 的浏览工具（注意，这个是文本终端下的原型浏览器，不是后来 Mosaic 这种图形浏览器）。

所以，严格来说：

  • HTML 不是“放空两年没人用”。
  • 最早就配套有一个 原始浏览器（文本模式） 和一个 HTML 编辑器。
  • 但只有 CERN（欧洲核子研究中心）内部在用，非常小众。

没有图形浏览器时，HTML 的“使用场景”

在 1991–1993 这两年：

  1. 研究人员写 HTML 文件，用超链接把论文、实验报告连起来。

  2. 用 文本浏览器（比如 WorldWideWeb、后来的 Lynx）打开页面，看到的是纯文字加链接（按键跳转）。

  3. 相比 FTP/Gopher：

    • HTML 允许“超链接”，可以直接跳转到另一份文档，而不是一级级目录去找。
    • 语义化标签（标题、段落、列表）让内容更清晰。

👉 换句话说，HTML 在没有图形浏览器的时候，就是科研人员的“学术超链文档格式” ，用来在 CERN 内网快速跳转不同研究资料。

1993 之后：图形浏览器的爆发

  • 1993 年，Mosaic 图形浏览器问世，把 HTML 文档第一次以“排版 + 图片 + 链接”的方式呈现出来。
  • 这才让 HTML 从科研小圈子，进入大众互联网。
  • 于是 HTML 突然有了“可视化展示”的生命力，不再只是科研人员的超链文档。

关键认知总结

  1. 在 HTML 之前

    • 只有 FTP、Gopher 这类目录式文件共享，缺乏“超链接”的概念。

  2. HTML 刚出现时（1991–1993）

    • 已经有简单的文本浏览器，能看文档和点击链接。
    • 对科研人员来说，它的便利性在于：信息互联（超链接） + 结构化排版。
    • 虽然简陋，但比 Gopher/FTP 的目录跳转要高效得多。

  3. 图形浏览器出现后（1993）

    • HTML 的真正潜力才爆发，进入大众世界。

上面的内容，让我们对HTML出现前后，已经和浏览器的关系有了一个大致的了解，那么可不可以再深入一点，当时阅览文件究竟是什么样的呢？下面让我们继续深入看。

FTP/Gopher vs HTML（无浏览器）vs HTML（图形浏览器）

FTP（文件传输协议）

操作流程
  1. 打开命令行，输入：
ftp ftp.example.com
  1. 登录（输入用户名/密码）。
  2. 进入某个目录，输入：
cd /pub/research/papers
  1. 列出文件：
ls
  1. 选择某个文件，下载到本地：
get paper1.txt
  1. 在本地用编辑器打开，逐个阅读。
内容展示效果
  • 完全是纯文本文件，没有格式。
  • 没有链接，只能靠记住路径跳转。
  • 文件和文件之间没有“语义关系”，就像在文件夹里翻硬盘。

👉 本质：像去档案馆，翻目录，复印一份带回家。

Gopher（目录式信息系统）

操作流程
  1. 打开 Gopher 客户端，连接某个 Gopher 服务器。
  2. 看到一个“树状目录”：
Research Papers
   ├── 1990
   ├── 1991
   └── 1992
  1. 用上下键选择目录，按回车进入。
  2. 找到目标文件，再下载或查看。
内容展示效果
  • 有了“目录树”，比 FTP 更友好。
  • 但依然是逐级展开，没有直接的“文章内跳转”。
  • 阅读内容依旧是纯文本，排版有限。

👉 本质：像在图书馆里，翻目录卡片，一层层找到书。

HTML（无图形浏览器，1991–1993）

操作流程
  1. 打开 文本浏览器（比如 Tim Berners-Lee 写的 WorldWideWeb，或 Lynx）。
  2. 输入一个 URL：
http://cern.ch/info.html
  1. 浏览器会显示文档：
CERN Information
----------------
Welcome to CERN Info Page.

[1] Research Papers
[2] Experiment Results
[3] Contacts
  1. 用键盘选择 [1]，直接跳到“Research Papers”文档。
内容展示效果
  • 支持 超链接（能一键跳转，而不是层层目录）。
  • 支持基本结构（标题、段落、列表）。
  • 依旧是纯文本，但逻辑性强得多。

👉 本质：像百科全书，可以直接点脚注跳转到另一篇文章。

HTML（有图形浏览器，1993 Mosaic 之后）

操作流程
  1. 打开 Mosaic 浏览器。
  2. 地址栏输入：
http://cern.ch/info.html

  1. 页面显示为：

    • 有标题（加粗、字号大）。
    • 有段落（换行，排版舒适）。
    • 有超链接（蓝色文字，下划线）。
    • 后来还能显示图片。

  2. 鼠标直接点击蓝色文字即可跳转。

内容展示效果
  • 图文并茂，排版清晰。
  • 链接直观（蓝字 + 下划线）。
  • 完全可视化，普通人无需学习命令行。

👉 本质：像一本带插图的杂志，还能随时点链接去下一篇文章。

关键对比总结

方式操作流程内容展示用户体验局限
FTP命令行输入路径 → 下载文件 → 本地打开纯文本，无排版技术门槛高，效率低文件孤立，无互联
Gopher树状目录逐级选择 → 查看/下载目录结构 + 纯文本比 FTP 好，但仍笨重只能上下钻目录，无超链
HTML（无浏览器）输入 URL → 文本浏览器跳转标题 + 段落 + 超链接结构化明显，支持跳转仍是黑白文字
HTML（图形浏览器）打开浏览器 → 输入地址 → 点击链接图文并茂，超链直观低门槛、直观、舒适初期功能有限

为什么 HTML 注定取代旧方式？

  1. 降低门槛：

    • FTP/Gopher 需要记命令或走目录树；
    • HTML + 浏览器只要“点一下超链接”。

  2. 增强信息互联：

    • FTP/Gopher 是“树形结构”；
    • HTML 是“网状结构”（任意文档之间可相互跳转）。

  3. 展示效果升级：

    • FTP/Gopher 是“纯文本”；
    • HTML 支持结构化 + 图文并茂。

  4. 扩展性强：

    • HTML 很快能接入 CSS/JS，让网页进化为“应用”。
    • FTP/Gopher 注定停留在“文件目录”层次。

👉 所以从一开始，HTML 的“超链接”+“结构化内容”就具备颠覆性优势。
只要有了图形浏览器，它几乎天然会取代 FTP/Gopher，成为互联网的核心语言。

看到这里，想来大家还有很多困惑，站在今天的角度，很难想象当时为什么会这样，事实上，技术的发展无法脱离于其所依托的载体，下面我们需要对当时的计算机环境有一个大致的了解，就聚焦于FTP → Gopher → HTML这段时期，思考：用户使用的物理设备是什么样的？期间如何发展的？早先没有图形化浏览器，是不是因为当时的物理设备及相关操作系统等较为局限，导致软件、技术的开发缺乏基层依赖？

在此期间的计算机环境

要理解 为什么 FTP、Gopher、HTML 在那个阶段以那样的形态出现，就必须把目光放回到当时的 物理设备 + 操作系统环境。
也就是说：不是人们不想做图形化，而是硬件和操作系统的条件没跟上。

1980s–1990s 初期：设备环境概览

  1. 主机/小型机时代（Mainframe & Minicomputer）

    • 大学、研究所、企业：IBM 大型机、DEC VAX 小型机。
    • 接入方式：学生/科研人员用 哑终端（green screen，黑底绿字） 连接。
    • 输入输出：键盘命令 + 文本输出，没有本地算力。
    • 操作系统：Unix、VMS、早期的 DOS。

  2. PC 刚起步

    • 1981：IBM PC 发布。
    • 1980s 末：80286 / 80386 CPU，内存 640KB–2MB，硬盘几十 MB。
    • 操作系统：MS-DOS（文本界面），后来才有 Windows 3.0（1990 年发布）。
    • 显示：CGA/EGA/VGA 显卡，分辨率 320×200 到 640×480，彩色还比较奢侈。

👉 在这个阶段，文本是主流交互方式，命令行才是常态。
所以 FTP、Gopher 这种“目录 + 文件”式的工具，其实正好适配了当时的硬件。

为什么早期没有图形化浏览器？

  1. 硬件算力不足

    • 图形渲染比文本渲染要耗费更多内存和 CPU。
    • 早期的 PC 内存普遍只有几百 KB 到几 MB，运行大型 GUI 程序捉襟见肘。

  2. 操作系统支持有限

    • Unix：当时大多数还是 字符终端为主，图形界面（X Window System）虽然在 1984 就诞生，但普及度有限，且学习成本高。
    • DOS：本质是纯命令行，没有 GUI 概念。
    • Windows 3.x：1990 出现，但一开始只算是 DOS 上的“外壳”，且很不稳定。

  3. 网络带宽低

    • 1980s–1990s 初期，科研机构上网主要靠 拨号上网（56kbps 以下） 或专线（T1 1.5Mbps，但极少）。
    • 带宽有限 → 不可能传输高质量图形。文本才是最节省资源的方式。

👉 换句话说，当时即使有人想写一个“图形化浏览器”，也没有足够普适的硬件/系统环境来承载。
所以先走了“文本浏览器 + HTML 超链接”的道路。

1990s 初中期：物理条件逐渐成熟

  1. 个人电脑性能提升

    • 1990 年：Intel 80386/80486 普及，内存 4–16MB，VGA 彩色显示器进入主流。
    • 1993 年：Pentium 处理器发布，带宽与图形能力提升显著。

  2. 操作系统图形化

    • 1990：Windows 3.0 问世，第一次让 PC 用户能比较稳定地用窗口界面。
    • Mac OS（1984 起）：率先普及 GUI，虽然贵，但对 GUI 的推广起了示范作用。
    • Unix 世界：X Window System 越来越稳定，MIT、Sun 等厂商推动图形工作站。

  3. 显示技术进步

    • CRT 显示器分辨率提升，支持更清晰的字体和图片。
    • 显卡厂商（如 S3、Tseng Labs）推出支持 2D 图形加速的芯片。

👉 到了 1993 年，硬件和 OS 终于具备了运行“图形浏览器”的条件，这时 Mosaic 才应运而生。

历史脉络串联

  1. FTP（1970s–1980s）

    • 硬件环境：主机/小型机 + 哑终端（黑底绿字）。
    • 操作模式：命令行 + 目录树。
    • 符合当时“纯文本 + 远程终端”的物理现实。

  2. Gopher（1991）

    • 硬件环境：PC 已经普及，但主要还是 DOS/Unix 终端。
    • 目录树式 UI，更人性化，但依旧基于文本。

  3. HTML（1991–1993，无图形浏览器）

    • 设备：Unix 终端 / DOS PC。
    • 软件：文本浏览器（WorldWideWeb 原型、Lynx）。
    • 创新点：结构化文档 + 超链接。

  4. HTML + 图形浏览器（1993 Mosaic）

    • 硬件：486/Pentium + VGA 彩显。
    • 系统：Windows 3.1 / Mac OS / Unix + X11。
    • 软件：Mosaic 图形浏览器，支持图片 + 文字混排。
    • 从科研走向大众。

关键总结

  1. 1980s：哑终端 + 大型机 → FTP
  2. 1991：PC + DOS/Unix → Gopher / HTML（文本浏览器）
  3. 1993：486 PC + Windows 3.x → Mosaic 图形浏览器

  • 早期没有图形化浏览器，并不是人们没想到，而是物理条件不允许。

    • 计算机算力不足（CPU/内存限制）。
    • 操作系统 GUI 支持差。
    • 网络带宽有限，不适合传输图形。

  • HTML 的“文字 + 超链接”设计，非常聪明：

    • 轻量 → 低硬件要求。
    • 可拓展 → 后来能加 CSS/JS。
    • 普适 → 无论是 Unix 终端还是 PC，都能用。

  • 当硬件/操作系统逐渐成熟时（1993 以后），图形浏览器自然诞生。

    • 这不是偶然，而是“条件成熟后的必然爆发”。
avatar
文章
阅读
粉丝