📖 零基础入门 · 第三课

网页是怎么搭出来的

HTML、CSS、JavaScript 三剑客的分工合作，用「盖房子」的方式彻底搞懂

↓
01

你看到的网页是什么？🤔

打开浏览器，你看到的每一个网页——新闻、购物、社交——本质上就像一张精心装饰好的海报，或者一间装修好的房间。

海报上有文字、有图片、有颜色搭配，有些地方你点了还会跳转到别的页面。但你有没有想过：这一切是怎么「搭」出来的？
🖼️

一张海报

有排版、有图文、有色彩——网页就像一张电子海报

🏠

一间房间

有墙壁、有装修、有家电——网页也是一层层搭起来的

🧩

三个角色

HTML 搭骨架、CSS 做装修、JS 装电器——各有分工

02

HTML = 骨架 🏗️

HTML（HyperText Markup Language）负责内容和结构。

想象你买了一套毛坯房：有墙壁、有隔间、有门洞——但没有刷漆，没有装修，灰扑扑的。HTML 就是这个毛坯房。它告诉浏览器：「这里放一个标题，那里放一段文字，下面来一张图片。」
🧱

毛坯房

墙壁和隔间 → 页面上有哪些内容、它们的先后顺序

📝

写清单

标题是什么、正文写什么、放哪张图——HTML 就是这份清单

03

CSS = 装修 🎨

CSS（Cascading Style Sheets）负责外观和样式。

毛坯房不能住人，得装修！刷漆、贴瓷砖、挂窗帘、铺地板。CSS 就干这个——它不改变房子的结构，但让一切变得好看：文字变大变红、背景变蓝、按钮变圆、卡片有阴影……
🖌️

刷漆贴砖

颜色、字体、大小、间距——都是 CSS 的活儿

🪟

挂窗帘

布局排列、居中对齐、响应式适配——让页面既好看又好用

04

JavaScript = 电器 ⚡

JavaScript 负责交互和动态行为。

房子装修好了，但灯不会亮、空调不能开、门铃不会响。你需要安装电器、接通电路、设置开关。JavaScript 就是这些电器——按一下按钮，灯亮了；滑一下遥控器，温度变了；说一声"开门"，智能锁自动打开。
💡

灯的开关

点击按钮 → 页面响应

🌡️

空调遥控

拖动滑块 → 数值变化

🏠

智能家居

自动触发 → 复杂逻辑

05

三者如何协作？🤝

来讲一个完整的「盖房子」故事：
1️⃣

HTML 打地基、砌墙

先把房间隔好——这里是客厅（导航栏），那里是卧室（内容区），门口放个玄关（页头）。
对应网页：标题、段落、图片、链接，结构全部就位。

2️⃣

CSS 装修美化

客厅刷白、卧室刷蓝、地板铺木纹、窗帘选了莫兰迪色。
对应网页：设置颜色、字体、间距、布局，让页面从"毛坯"变"精装"。

3️⃣

JavaScript 通电入住

灯装好了、空调能遥控了、门铃一按就响、窗帘一拉自动收。
对应网页：按钮能点、菜单能展开、表单能提交、动画在播放。

06

什么是标签 <tag>？🏷️

HTML 用标签（tag）来标注内容，就像你往物品上贴便利贴。

比如你在一本书上贴一张黄色便利贴，写「这是标题」；贴一张蓝色便利贴，写「这是正文」。浏览器看到这些"便利贴"，就知道怎么显示内容了。
<!-- 一对标签把内容"包"起来 -->
<h1>我是大标题</h1>
<p>我是一段正文</p>
<img src="cat.jpg"> <!-- 有些标签是自闭合的 -->
💡 记住：标签总是成对出现（开始标签 + 结束标签），像一对括号把内容框起来。少数标签（如 img）是「自闭合」的。
07

常见 HTML 标签 📋

这些是你最常见到的"便利贴"类型：
📰<h1>~<h6>标题，h1 最大，h6 最小
📄<p>段落，一段文字
🖼️<img>图片，用 src 指定图片地址
🔗<a>链接，点击可跳转到其他页面
📝<ul> / <ol>列表：无序（圆点）/ 有序（数字）
🔘<button>按钮，可以被点击触发操作
📦<div>容器/盒子，用来分组包裹内容
08

CSS 怎么改样式？🎨

CSS 的语法很简单：选中谁 { 改什么: 改成啥; }
/* 选中所有 h1 标签，改它的颜色和大小 */
h1 {
  color: #6ee7b7;    /* 颜色 → 绿色 */
  font-size: 36px;   /* 大小 → 36像素 */
  font-family: 'Noto Sans SC'; /* 字体 */
  text-align: center; /* 布局 → 居中 */
}
🎯

选择器 = 找到谁

标签名、class、id——告诉 CSS "我要改哪个东西"

🔧

属性:值 = 改成啥

color、font-size、margin、background——每个属性控制一个方面

09

JavaScript 怎么让页面动起来？🎮

JavaScript 的核心逻辑就是：当某事发生时 → 做某件事
// 当按钮被点击时 → 弹出一句话
button.addEventListener('click', function() {
  alert('你好，世界！');
});

// 当鼠标移入时 → 改变颜色
box.addEventListener('mouseenter', function() {
  box.style.background = '#6ee7b7';
});
👆

事件 = 开关

点击、滑动、输入——用户的每个操作都是一个"事件"

⚙️

处理 = 电路

事件触发后执行一段代码——改颜色、显示弹窗、播放动画

10

浏览器如何渲染网页？🌐

从你输入网址到看到完整页面，浏览器经历了这四步：
📡

① 请求（Request）

浏览器向服务器"打电话"：「你好，我要 www.example.com 的内容！」

📦

② 下载（Download）

服务器把 HTML、CSS、JS 文件"快递"回来，浏览器签收。

🔍

③ 解析（Parse）

浏览器"阅读"这些代码：HTML 建结构树，CSS 算样式，JS 执行逻辑。

🖥️

④ 显示（Render）

最终浏览器把一切"画"到屏幕上——你看到了完整的页面！

🧪 动手时间

互动实验区

光看不练假把式——来亲手试试！

实验 1 · 搭房子游戏
🏗️ 把左边的"建材"拖到右边的空地上，搭一间属于你的房子！然后切换模式体验 CSS 装修和 JS 电器。
① HTML 搭骨架
② CSS 装修
③ JS 电器
把建材拖到这里 ⬅️
实验 2 · 实时 HTML 编辑器
✏️ 在左边写 HTML 代码，右边会实时显示效果。试着修改文字、换个标签看看！
基础标签
列表 + 链接
带样式的卡片
实验 3 · CSS 调色板
🎨 拖动下面的滑块，实时观察卡片的颜色、字号、圆角、间距变化——这就是 CSS 的威力！

🌟 这是一张卡片

通过 CSS 可以随意改变我的样子

240
22px
16px
32px
实验 4 · JavaScript 魔法按钮
🪄 点击下面的按钮，看看 JavaScript 能做什么魔法！每个按钮触发不同的效果。
🎯
实验 5 · 标签配对游戏
🧩 先点左边的标签，再点右边对应的作用，把它们配对起来！看看你能答对几个 👀
已配对：0 / 6
实验 6 · 网页加载全过程
🌐 点击「开始加载」，看浏览器从输入网址到显示页面的完整过程！每个阶段都会可视化展示。
🔒 https://www.example.com
📡 DNS 查询 — 把域名翻译成 IP 地址 等待中
🤝 建立连接 — 和服务器"握手" 等待中
📦 下载 HTML — 收到网页的"骨架" 等待中
🎨 下载 CSS — 收到"装修方案" 等待中
⚡ 下载 JS — 收到"电器设备" 等待中
🔍 解析渲染 — 组装并"画"到屏幕上 等待中
✅ 加载完成 — 页面可以交互了！ 等待中
🎉

恭喜你，已经搞懂了！

HTML 是骨架，CSS 是装修，JavaScript 是电器。
三者协作，一个网页就搭出来了。

现在你再看任何网页，都可以想想：
「这部分是哪个角色在负责？」