Skip to content

什么是 Web？

理解万维网是什么、它与互联网有何不同，以及网页是如何被送达浏览器的。

你将学到

  • 用通俗语言理解万维网
  • Web 与互联网的区别
  • 驱动每个网站的客户端–服务器模型
  • 每个网页使用的三种语言：HTML、CSS、JavaScript

概念讲解

什么是 Web？

万维网（World Wide Web，简称"Web"）是一个由文档——网页——通过链接互联、在浏览器里查看的系统。你打开一个网站时，浏览器从世界各地的服务器取回页面，再显示到你的屏幕上。

Web vs. 互联网

人们常把两者混用，但它们不同：

  • 互联网（internet）是物理网络——线缆、路由器、把数据在计算机之间搬运的协议。
  • Web 是运行在互联网*之上*的一种服务。电子邮件、视频通话、文件传输也用互联网，但它们不是"Web"。

互联网是路，Web 是行驶在路上的交通工具之一。

客户端–服务器模型

每次 Web 交互都涉及两个角色：

  1. 客户端 —— 你的浏览器，负责*请求*页面。
  2. 服务器 —— 远端计算机，负责*响应*页面内容。

你输入网址（请求）→ 服务器找到文件 → 把 HTML 发回（响应）→ 浏览器渲染。这个"请求–响应"循环就是 Web 的心跳。

三种语言

每个网页都由三种语言协作构建：

  • HTML —— 结构与内容（骨架）。
  • CSS —— 外观与布局（皮肤）。
  • JavaScript —— 行为与交互（肌肉）。

并非每个页面都要三者齐全，但任何现代网站都会组合使用。本主题后续课程会逐一讲解，外加把它们串起来的协议（HTTP、URL）和数据格式（JSON）。

示例代码

              <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My First Page</title>
    <style>
      h1 { color: #2563eb; }   /* CSS: appearance */
    </style>
  </head>
  <body>
    <h1>Hello, Web!</h1>       <!-- HTML: structure -->
    <button onclick="alert('Hi!')">Click me</button>  <!-- JS: behavior -->
  </body>
</html>

一个文件里包含完整网页。HTML 提供结构、CSS 提供样式、JavaScript（通过 onclick）提供交互。真实项目通常拆成 .html、.css、.js 三个文件。

动手试一试

  • HTML ↔ Markdown

    在 HTML 和 Markdown 之间互转——看结构化内容如何映射为网页标记。

常见错误

错误写法

以为 Web 和互联网是一回事。

正确做法

互联网是底层网络，Web 是运行其上的一种服务。邮件、流媒体也用互联网，但不是"Web"。

错误写法

以为网站"住在你浏览器里"。

正确做法

网站住在服务器上。浏览器只是取回一份副本并渲染。刷新会重新从服务器取最新版本。

相关资源

相关速查表

查阅不认识的术语

新手友好的术语表用大白话解释编程术语——变量、函数、DOM、Promise 等等。

查看术语表

动手做项目

通过引导式项目应用所学，含起始代码与解决方案。

查看项目

解读错误信息

用大白话解释常见错误——什么意思、为什么发生、如何修复。

查看错误