网页是怎么
长出来的?
- 01把哈兰德的名字改成你自己 → 你的名字双击一下,打字。
- 02凭空长出一根新骨头原本没有 · 你让它有。
- 03穿一扇 HTML 的门看看它通向哪里。
不写一行代码。不安装任何东西。整节课只用一个浏览器 + 一张球员卡。
HTML 到底做了什么?
左边和右边有同样的字。为什么右边像球星卡、左边像作业本?中间差的那一层,就是 HTML。
Erling Haaland Manchester City Striker 93 Rating Born 2000 Leeds Norway Height 195cm Foot Left Add to squad View all players Pace 89 Shooting 93 Physical 88 Passing 65 Dribbling 80 Defense 45
所有字堆在一起,分不清谁是名字、谁是评分、谁是按钮。
同一堆字,被 HTML 标记成"这是名字、这是评分、这是位置"之后,浏览器就知道该怎么画了。
网页 = 三层东西
像一个人 —— 骨头 / 皮肤 / 大脑。今天只看最里面那一层。
- 01今天只看这个
骨头
HTML决定网页有几张卡、每张卡里装什么 —— 结构。
- 02
皮肤
CSS决定颜色、字体、大小 —— 样子。下节课。
- 03
大脑
JavaScript决定会不会动、会不会算数 —— 会做什么。第 3 课。
<h1>哈兰德</h1><h1>哈兰德</h1>整坨 = 一个 元素 (element)。
HTML 说'是什么',不说'长什么样'
对比一下这两种口气。哪一种是 HTML 的?
「我要 4-3-3,前锋放哈兰德、左边锋放多库。」
你跟游戏说是什么。剩下的"怎么摆、卡多大、字什么颜色"、游戏自己算。
「把哈兰德挪左 120 像素,加金色描边、字体 48 号、行距 1.2……」
这是画画,不是 HTML。画画是浏览器的活,它自己搞。
HTML 是贴名字的,不是画画的。
5 根最常见的骨头
不用背。一会儿去 ea.com 上你真的会看到它们。
- 01
<h1>最大的标题卡上那个大大的 Haaland 三个字 - 02
<p>一段文字卡背面 'Born in Leeds, 2000' - 03
<img>一张图哈兰德的头像 · 没有 </img> 结束标签 - 04
<a>↓ 下面细讲可以点的字右下角 'View all players' · 这是一扇门 - 05
<button>一个按钮'Add to squad'
一根骨头,藏着整个互联网的秘密
1989 年,一个英国人发明了 <a>,让全世界的网页连成一张网。
<a href="https://www.mancity.com">曼城</a>
曼城mancity.com<a><a> = anchor(锚),也可以想成门。字是牌子,真正厉害的是门本身。
HyperText 的 Hyper 就是"超过普通文本"的意思 —— 字里能藏门,你点一下就跳走。
你每天在手机上从一个页面跳到另一个,没有一次不是在穿 HTML 的门。Tim Berners-Lee 1989 年发明的就是这东西。
先在这儿试一次
下面这张卡和 ea.com 的是亲戚。你在右边打名字,左边立刻变 —— 等会儿去真网站上做的,就是这个。
感觉到了吗?你在这边打字,左边的卡立刻变。等会儿去 ea.com 做的,就是这个 —— 只不过那张卡在别人写的网页上。
现在去真的球场
做完一步就点 ✓。关掉浏览器也不丢,下次回来继续。
打开球员页
Chrome 地址栏输入 ea.com/games/ea-sports-fc/ratings。找到哈兰德(曼城 9 号),或任何你喜欢的球员。
召唤 DevTools
Mac ⌘ + ⌥ + I · Windows F12。屏幕右边或下面弹出满是尖括号的工具 —— 今天的显微镜。
认出 3 种不同的骨头
点 DevTools 左上角 🖱️ 箭头。依次把鼠标放到:(a) 哈兰德名字 (b) 哈兰德头像 (c) 任意可以点的链接。看 DevTools 里高亮什么标签,至少认出 2 种。
改名字成你自己
双击 "Erling Haaland" 这几个字,删掉,打你自己的名字,按 Enter。再回头看球员卡。
改评分到 99
一样的方法找到评分数字(93 / 94 /…),双击改成 99。现在你是世界球王。
穿一扇 <a> 门
在 DevTools 里找任意一个 <a> 元素,先读它 href="…" 里写了什么地址 —— 这扇门通向哪里。然后回到网页,点一下那个字,网页跳走了。你穿过了一扇 HTML 的门。
种一根新骨头 <p>
在球员卡外层元素上右键 → Edit as HTML。找合适的位置加一行 <p>我是世界第一</p>,点框外退出。网页多了一行字 —— 凭空长出来的。
截图留念
Mac ⇧ + ⌘ + 4 框选卡片,Windows Win + Shift + S。存桌面,起名 2026-XX-XX-我的第一张球员卡.png。
刷新 · 看一切消失
⌘ + R 或 F5。你改的名字、99 评分、凭空加的那行字 —— 全没了。为什么?因为 HTML 像战术板,浏览器每次都去 EA 服务器拿原版重新画一次。你这张板子别人看不到,也留不下。
讲给爸爸听
关掉 DevTools。看着爸爸。用自己的话回答。说不出来 —— 爸爸再讲一次,或者画出来。
01HTML 像什么?为什么它更像'骨头',不是皮肤也不是大脑?Hint ↓
三层比喻。骨头决定什么?皮肤和大脑各管什么?
02HTML 说'是什么',不说'长什么样' —— 举一个你刚在 ea.com 看到的例子。Hint ↓
想想你在 FUT 里怎么组阵容:你跟游戏说什么、没说什么。
03<a> 这根骨头叫什么?为什么说它是'整个互联网的秘密'?Hint ↓
anchor,也就是门。Tim Berners-Lee 1989 年发明了什么?
04刷新之后你改的全没了。为什么?别的人打开 ea.com 看到的是你改的还是原来的?Hint ↓
EA 服务器那张战术板,和你手上这张,是不是同一张?
给今天打个分
没有对错。说真话就行。爸爸会看到。