网页如何工作

这一课你将能做到

1. 用自己的话说明：在浏览器地址栏输入网址并回车后，发生了什么
2. 准确区分 HTML、CSS、JavaScript 的职责边界，不再把三者混为一谈
3. 使用浏览器开发者工具的「元素」「网络」「控制台」面板调试本地页面

为什么要学

打开 CodeForge 学习平台，你看到的是课程卡片列表、响应式导航和登录表单。这些不是一张静态图片，而是浏览器根据三份「说明书」实时拼装出来的结果。理解这个过程，是排查「为什么我写的代码没效果」「为什么页面加载慢」等问题的前提。

如果把网页比作一栋房子：HTML 是钢筋骨架和房间划分（哪里是客厅、哪里是门），CSS 是装修风格（墙面颜色、灯具间距、家具摆放），JavaScript 是智能家居系统（点击开关后灯亮、空调调节温度）。任何框架——无论是 React、Vue 还是 Next.js——最终都要翻译成这三者，浏览器才能理解。

初学者最常见的误区是以为「学前端 = 学一个软件」。实际上，你写的是纯文本文件，浏览器负责读取并执行。用记事本就能写，只是 VS Code 等编辑器提供了语法高亮和自动补全，让效率更高。

先建立图像

你在地址栏输入 https://codeforge.example.com
           ↓
浏览器向服务器发送请求："请给我首页的说明书"
           ↓
服务器返回 HTML 文件（第一份说明书）
           ↓
浏览器边读 HTML，边发现还需要 CSS、图片、字体、JS...
           ↓
继续发送请求获取这些资源
           ↓
在内存中构建 DOM 树 + CSSOM 树 → 合并为渲染树 → 绘制到屏幕
           ↓
你看到的课程卡片、导航栏、登录按钮

技术	负责什么	不负责什么
HTML	页面上有哪些元素、它们的语义和层级关系	不管颜色、间距、动画
CSS	元素长什么样、在什么位置、如何响应不同设备	不管点击后的复杂业务逻辑
JavaScript	用户交互后页面如何变化、数据如何流动	也能改结构和样式，但不该用来堆砌初始内容

本地双击打开文件时，地址栏显示 file://；访问真实网站时显示 https://。两者的渲染原理完全一致，区别在于资源从本地磁盘读取还是从远程服务器下载。

跟着做

步骤 1：创建一个可运行的本地页面

新建文件夹 web-intro-lab，在其中创建 index.html，用 VS Code 打开并粘贴以下内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CodeForge 首页演示</title>
  <style>
    :root {
      --primary: #2563eb;
      --bg: #f8fafc;
      --text: #0f172a;
    }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: var(--bg);
      color: var(--text);
      padding: 2rem;
      line-height: 1.6;
    }
    .nav {
      display: flex;
      gap: 1rem;
      margin-bottom: 2rem;
    }
    .nav a {
      color: var(--primary);
      text-decoration: none;
      font-weight: 500;
    }
    .card {
      background: white;
      border-radius: 12px;
      padding: 1.5rem;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      max-width: 400px;
    }
    button {
      background: var(--primary);
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 6px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <nav class="nav" aria-label="主导航">
    <a href="#">课程</a>
    <a href="#">路线图</a>
    <a href="#">关于</a>
  </nav>

  <article class="card">
    <h1>HTML/CSS 基础</h1>
    <p>从零开始构建现代网页的完整入门课程。</p>
    <button type="button" id="joinBtn">立即加入</button>
  </article>

  <script>
    document.getElementById('joinBtn').addEventListener('click', () => {
      alert('欢迎加入 CodeForge！');
    });
  </script>
</body>
</html>