← FC Coder · HomePhase 01 · Lesson 07 · 60 min
Lesson07
Phase One · First App · Matchday 07 · Build From Blank

我自己写一张
哈兰德

Today's 3 Jobs · 今天这三件事
  1. 01
    在 sandbox 文件里 · 从空白写 7-8 行 HTML
    article / header / h1 / p / 头像 emoji
  2. 02
    用 Semantic 标签 · 一个 div 都不写
    h1 是角色 · 不是大字
  3. 03
    用 VoiceOver 听一下 · 它读「标题」那一下
    Cmd + F5 开/关

上节课你改了一行字 —— 改的是别人做好的。今天从一片白纸开始,7-8 行 HTML 写出一张属于你的哈兰德卡。学一件事:<h1> 不是大字,是「标题」这个角色 —— 读屏软件、搜索引擎、浏览器内部都认这个角色。

Essence · 本质点

Semantic = 用对的标签 · 表达对的角色

`<h1>` 像球衣 9 号 —— 是中锋的角色,不是因为这个数字好看。

Chalk Board · 一样大字 · 两种角色
<h1>哈兰德</h1> ←→ <p style="font-size: 80px">哈兰德</p>
眼睛看一样 · 读屏软件认得不一样
眼睛看
都是大字 · 一模一样
浏览器认
<h1> = 标题 / 80px p = 普通字
读屏软件
读「标题」 / 不读

Semantic 不是给眼睛看的,是给浏览器内部、读屏软件、搜索引擎认的。今天用 VoiceOver 你会真的听到这两个字的差别。

Essence · 你今天要写的骨架

7-8 行 HTML · 一张卡的完整结构

一个 div 都不写 —— 每一根都有角色。

Chalk Board · 目标
<article>
<header>
<h1>哈兰德</h1>
<p>ST · 9 号</p>
</header>
<p style={{ fontSize:"80px" }}>⚽</p>
<p>评分:91</p>
<p>国家:挪威</p>
</article>
外层
<article>
标题区
<header> + <h1> + <p>
头像 + 数据
<p> × 3

头像今天用大 emoji 假装 —— 不用真照片(看 docs/ethics §Phase 1)。`alt=""` 这个属性正式认识,Phase 1 后期 players.json 时真正用。

Roster · 今天 5 个有角色的标签

不用背 · 抄着用 · 一会儿全部出现

article 是盒子 · header 是顶部 · h1 是最重要标题 · p 是普通字 · img 自封带 alt

  1. 01
    <article>
    独立的一作品 —— 一张卡可以单独看,符合 article 的角色。
    外层包卡的盒子。不用 div —— 我们有更准的。
  2. 02
    <header>
    一段内容的顶部 —— 标题 + 简介那一块。
    卡的"名字 + 位置"那一区。
  3. 03
    <h1>
    最重要的标题 —— 像 9 号球衣,是角色不是装饰。
    读屏软件会念 "标题 · 哈兰德"。一张页面通常只一个。
  4. 04
    <p>
    一段普通文字 —— 位置、号码、评分都用它。
    Phase 0 你已经认识。
  5. 05
    <img alt="" />
    一张图 —— 没有结束标签(自封)。
    alt 必须写 —— 盲人靠它知道这是什么图。Web 的礼仪。
Half 2 · 在屏幕上

去 Cursor 写一张属于你的哈兰德

做完一步就点 ✓。Cursor + 终端 + 浏览器三同开。

01启动 · 找到 sandbox 文件
01Min

Cursor + 终端 + pnpm dev

上节课的三件套都开起来:Cursor 打开 talkhat、Cmd/Ctrl + ` 召唤终端、敲 pnpm dev、等 ✓ Ready。
02Min

找到 app/lessons/07-my-first-card/sandbox/page.tsx

左边文件树:app → lessons → 07-my-first-card → sandbox → page.tsx。双击打开。看到一个几乎空的文件,里面只有 <main> 外壳。
03Min

浏览器先访问空页

新开标签 · localhost:3000/lessons/07-my-first-card/sandbox · 一片空白(正常)。这就是你的画布。
02从空白写 · 一行一行长出来
04Min

第一行 · <article></article>

把 {/* 在这里写你的卡 */} 删掉 · 写 <article></article> · Cmd + S。浏览器还是空(article 里啥都没装)。
05Min

塞进 <header> + <h1>

在 <article></article> 中间回车 · 写 <header><h1>哈兰德</h1></header> · 保存。浏览器出现一行大字「哈兰德」。
06Min

h1 下面 · 加 <p>ST · 9 号</p>

在 </h1> 后面、</header> 前面加一段 p。保存 · 大字下面多一行正常字号「ST · 9 号」。
07Min

头像 · 一个大 emoji 假装是照片

</header> 后面加:<p style={{ fontSize: "80px" }}>⚽</p>。保存 · 看到超大球。今天不用真照片(看 ethics §Phase 1)。
08Min

评分 + 国家 · 收尾两段

头像下面 · </article> 上面 · 加 <p>评分:91</p> + <p>国家:挪威</p>。保存 · 卡的雏形出现。
03🌟 让 VoiceOver 听一下
09Min

🌟 Mac · Cmd + F5 开 VoiceOver

听它读你的卡。它应该说:「标题 · 哈兰德」。听到「标题」两个字了吗?这是 semantic 的真东西 —— <h1> 不是大字,是角色。Windows 没 VoiceOver:DevTools → ⋮ → More Tools → Accessibility,看 <h1> 标 「heading level 1」。
10Min

Cmd + F5 再按一次 · 关 VoiceOver

忘了关电脑会一直跟你说话。一定一定关。
04收官 · 玩 · 留念
11Min

玩 5 分钟 · 改名字 / 数字 / emoji

哈兰德 → 你自己 · 91 → 99 · ⚽ → 🦁 · 加一行 <p>我支持曼城</p>。每改一下 Cmd + S 立刻变。
12Min

📸 截图战利品

Mac Shift + Cmd + 4 框选你写的卡 · 存 2026-XX-XX-我写的第一张卡.png · Phase 1 第二张战利品。
Half Time · 中场 · 讲给爸爸听

4 题 · 用自己的话

答 3 个就过。Semantic 这一题最重要 —— 一定让他讲。

01<h1> 不是大字 —— 那它是什么?Hint ↓

标题这个角色。像 9 号球衣 —— 角色不是装饰。读屏软件 / 搜索引擎认的是角色,不是字号。

02如果你想要「大字」· 为什么不直接 <p style="font-size: 80px">?Hint ↓

眼睛看一样 · 但读屏软件 / 搜索引擎认的不一样。Semantic 是给浏览器内部认的,不是给眼睛看的。

03今天 8 行 HTML 里 · 哪一个是「外面包起来的盒子」· 哪一个是「最重要的字」?Hint ↓

<article> 是盒子 · <h1> 是最重要的字。一张页面通常只一个 <h1>。

04上节课改一行字 · 今天从空白写一段 · 差在哪里?Hint ↓

改 = 改别人做好的;写 = 从无到有。这是「看应用」和「做应用」的差别。

Player Rating · 本课温度计

给「第一次从空白写」打个分

说真话。爸爸会看到。

今天难度Difficulty
0
今天开心Fun
0
Final Whistle · 终场哨

你从一片白纸长出了一张卡 —— 角色都对。

还有 12 步没打勾。Step 5 那一刻看到大字「哈兰德」就算今天毕业 —— 其他下次补。

Next · Lesson 08 · Tailwind 上色 →