4.2 HTML 基础：网页的内容骨架
一、本节你会做出什么
你会亲手写出一个能在浏览器里打开的网页（不借助 AI），并且能在任何一个真实网站上指着页面说出“这块大概是什么标签”。
📷 效果位：左边一个 12 行的 index.html，右边浏览器里打开的效果
说明一下为什么这一节要你亲手写——全课就这一次。HTML 简单到你 15 分钟就能摸到门，而亲手写过一次，和只看过，理解深度完全不同。之后所有的 HTML 都交给 AI。
二、开始前你需要
三、跟着做
第 1 步：标签就是给内容贴标签
HTML 的全部思想是一句话：
把内容包起来，告诉浏览器“这是什么”。
<p>这是一段文字</p>拆开看：
<p> 这是一段文字 </p> ↑ ↑ ↑开始标签 内容 结束标签 （多一个斜杠）p 是 paragraph（段落）的缩写。这句话的意思是：“中间这段内容是一个段落，请按段落来显示。”
就这么简单。整个 HTML 就是这种东西层层套起来。
两个变体你也会见到：
① 带属性的——给标签加附加信息：
<a href="https://example.com">点我</a><img src="/images/logo.png" alt="公司标志">| 部分 | 叫什么 | 作用 |
|---|---|---|
href / src / alt |
属性名 | 说明这是哪一类附加信息 |
"https://..." |
属性值 | 具体内容，用引号包起来 |
② 自己闭合的——内容就在属性里，不需要包东西：
<img src="/logo.png" alt="标志"><input type="text" placeholder="请输入姓名"><br>img、input、br 这几个没有结束标签，写了反而错。
第 2 步：够用的 15 个标签
认得这些，你就能看懂 90% 的 HTML。 不用背，扫一遍，知道去哪儿查就行。
骨架（每个网页都有，一般你不用动）
<!DOCTYPE html> <!-- 告诉浏览器：这是 HTML --><html lang="zh-CN"> <!-- 整个网页，lang 声明语言 --> <head> <!-- 页面信息：标题、字符集、引入的 CSS --> <title>页面标题</title> <!-- 显示在浏览器标签页上 --> </head> <body> <!-- 用户能看到的所有东西，都在这里 --> ... </body></html>🔑 记住一条：
<head>里的东西用户看不见，<body>里的才看得见。改页面内容 = 改<body>。
内容（最常打交道的）
| 标签 | 是什么 | 例子 |
|---|---|---|
<h1>~<h6> |
标题，h1 最大。一页只该有一个 h1 | <h1>遇见成都</h1> |
<p> |
段落 | <p>一座来了就不想走的城市</p> |
<a> |
链接，href 指目标 |
<a href="/about">关于</a> |
<img> |
图片，src 指文件，alt 是描述 |
<img src="/panda.jpg" alt="熊猫"> |
<ul> + <li> |
列表（ul 是容器，li 是每一项） | 导航菜单、景点清单 |
<button> |
按钮 | <button>提交</button> |
<input> |
输入框 | <input type="text"> |
容器（用来分区和包裹）
| 标签 | 是什么 |
|---|---|
<div> |
万能块容器，占一整行。AI 代码里最多的就是它 |
<span> |
万能行内容器，只包一小段文字，不换行 |
语义标签（和 div 一样是容器，但有名字）
| 标签 | 对应页面哪块 |
|---|---|
<header> |
顶部区域 |
<nav> |
导航菜单 |
<main> |
主要内容 |
<footer> |
页脚 |
第 3 步：为什么语义标签对你特别重要
<header> 和 <div> 在浏览器里显示效果完全一样。那为什么要分？
三个理由，第三个和你关系最大：
- 搜索引擎能看懂页面结构（第 11.6 节 SEO 会讲）
- 读屏软件能给盲人用户正确播报
- 🔑 你跟 AI 沟通时，有了共同的词汇。
对比一下：
❌ 「把上面那一条的高度调小一点」——AI：上面哪一条？ ✅ 「把
<header>的高度从 80px 调到 64px」——AI：收到
所以本课有一条建议，从现在开始用：
让 AI 生成页面时，加一句「结构用语义化标签，不要满屏 div」。 这会让你之后每一次沟通都省力。
第 4 步：嵌套——父子关系决定一切
标签可以套标签，套出来的是一棵树：
<div> ← 父 <h2>热门景点</h2> ← 子 <ul> ← 子（同时是下面 li 的父） <li>大熊猫基地</li> ← 孙 <li>宽窄巷子</li> </ul></div>一条铁律：先开的后关，不能交叉。
<p><strong>加粗文字</strong></p> ✅ 对<p><strong>加粗文字</p></strong> ❌ 错（交叉了）为什么父子关系重要——两个实际后果：
| 后果 | 说明 |
|---|---|
| 样式会继承 | 给父元素设字体颜色，里面的子元素默认跟着变。4.3 会用到 |
| 位置被父元素限制 | 子元素“跑出去了”或“被挤扁了”，问题常常在父元素身上 |
💡 排错经验：某个元素位置不对时，先看它的父元素。这是第 4.10 节（开发者工具）会反复用到的思路。
第 5 步：class 属性——通往 CSS 的那扇门
这是本节最该记住的一个属性：
<div class="attraction-card"> <h3 class="card-title">大熊猫繁育研究基地</h3></div>class 本身不产生任何视觉效果。它的作用是起名字，好让 CSS 和 JS 能找到它：
HTML: <h3 class="card-title">标题</h3> ↓ 用这个名字找到它CSS: .card-title { color: red; } ← "凡是叫 card-title 的，字变红"🔑 4.3 的 Tailwind 会把这件事玩到极致——你会看到
class里塞了十几个名字，像class="text-2xl font-bold text-gray-800 mb-4"。现在你知道那不是乱码了，那是在给元素贴样式标签。
另外还有个 id，和 class 类似但全页只能用一次（像身份证号）。见到了知道是什么就行。
第 6 步：动手——写出你的第一个网页
不用 AI，自己敲。 十分钟。
在 ai-course 文件夹里新建一个文件夹 html-practice，里面新建文件 index.html，敲进去：
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>我的第一个手写网页</title></head><body> <header> <h1>遇见成都</h1> <nav> <a href="#attractions">景点</a> <a href="#food">美食</a> </nav> </header>
<main> <h2 id="attractions">热门景点</h2> <ul> <li>大熊猫繁育研究基地</li> <li>宽窄巷子</li> <li>武侯祠</li> </ul>
<h2 id="food">特色美食</h2> <p>火锅、串串、钟水饺、龙抄手。</p> <button>我想去</button> </main>
<footer> <p>这是我手写的第一个网页</p> </footer></body></html>保存，然后双击这个文件（或在文件上右键 → 打开方式 → 浏览器）。
它在浏览器里出现了。 很丑——黑白、字体朴素、没有间距。
🔑 这个“丑”非常重要：你现在看到的，就是 4.1 讲的“只有第 ① 层”的真实样子。CSS 还没来。下一节我们给它装修。
📷 截图位 1：浏览器里打开的朴素版页面
三个值得注意的细节：
| 细节 | 说明 |
|---|---|
<meta charset="UTF-8"> |
少了这行中文会变乱码。 这是中文开发者第一大坑 |
href="#attractions" |
# 开头是页内跳转，跳到 id="attractions" 那个元素 |
| 点那个按钮没反应 | 正常。按钮的“行为”属于第 ③ 层（JS），4.4 讲 |
动手试三件事，改完保存、刷新浏览器：
- 把
<h1>的文字改掉 - 在
<ul>里加一个<li> - 把
<p>里的“火锅”用<strong>火锅</strong>包起来
改 → 保存 → 刷新 → 看变化，这个循环你会重复几千次。
第 7 步：练眼力——在真实网站上找结构
这才是本节真正的交付能力。
- 打开任意一个网站
- 开发者工具（F12）→ Elements（元素） 面板
- 点面板左上角那个箭头图标（或 Ctrl/Cmd+Shift+C）
- 把鼠标移到页面上任意位置 —— Elements 面板会自动高亮对应的标签
找出这五样：
- 顶部导航 → 是
<header>/<nav>还是一堆<div>？ - 页面大标题 → 是
<h1>吗？ - 一张图片 → 看它的
src和alt - 一个链接 → 看它的
href指向哪 - 任意一个元素 → 看它的
class叫什么名字
📷 截图位 2：Elements 面板高亮某个 header 元素
💡 这个动作值得练熟。以后你想让 AI 改某块东西，先用它查出那块是什么标签、class 叫什么，然后直接把名字告诉 AI——这是 3.5 讲的“精确描述”在前端里最高效的形式。
四、完成的标志是
- 我知道标签的形状：
<标签>内容</标签>，以及属性写在开始标签里 - 我知道
<img><input><br>没有结束标签 - 我分得清
<head>（看不见）和<body>（看得见） - 我认得 h1~h6、p、a、img、ul/li、button、div、span
- 我知道
<header><nav><main><footer>和 div 效果一样，但沟通起来方便得多 - 我知道标签不能交叉嵌套，以及“元素位置不对先看父元素”
- 我知道
class是起名字用的，CSS 靠它找到元素 - 我手写了 index.html 并在浏览器里打开了
- 我改了三处内容，刷新看到了变化
- 我在一个真实网站上用 Elements 面板指认出了 5 样东西
五、卡住了看这里
Q：双击 index.html 没有在浏览器里打开，而是弹出别的程序。 右键文件 → 打开方式 → 选 Chrome/Edge。或者直接把文件拖到浏览器窗口里。
Q：页面上中文全是乱码（æˆ'çš"这种）。
<meta charset="UTF-8"> 这行漏了，或者文件保存时编码不对。先确认有这行；还乱码的话，用编辑器“另存为 UTF-8”。
Q：我改了文件，浏览器里没变化。 ① 忘了保存（最常见，Cmd/Ctrl+S）；② 忘了刷新（F5）；③ 都做了还不变，试 强制刷新：Cmd+Shift+R / Ctrl+Shift+R（跳过缓存）。
Q：标签写错了，浏览器会报错吗？ 基本不会，这是 HTML 最阴险的地方。 它会尽力猜你的意思，猜错了就显示得乱七八糟，但控制台一声不响。所以 HTML 的问题要靠 Elements 面板看结构（4.10 会讲），不是靠控制台。
Q：我要背下这些标签吗？
不用。你要做的是“认得”，不是“写得出”。 看到 <nav> 知道那是导航，这就够了——写是 AI 的活儿。真要查，让 AI 解释，或看 [附录 B 术语表]。
Q：既然都交给 AI，我手写这一遍的意义在哪？ 你刚才经历了三件只有动手才有的事：改一个字 → 刷新 → 页面真的变了的因果感；看到没有 CSS 的网页长什么样；自己踩一次 charset 的坑。这三样在后面每一章都会回本。
六、本节提示词
① 让 AI 给你讲解一段 HTML（看不懂项目里的结构时）：
我是零基础，正在学看懂 HTML。这是我项目里的一段代码：【粘贴代码】
请你：1. 用一句话说明这段对应页面上的哪一块；2. 逐个标签解释它是什么、为什么用它；3. 指出哪些 class 名字是有含义的，分别控制什么；4. 如果我想改【具体某个东西】，应该动哪一行？
说人话，不要用术语解释术语。② 让 AI 生成 HTML 时的标准要求（存起来，以后一直加这几句）：
请帮我写一个【具体描述】的页面结构。
要求：1. **用语义化标签**（header / nav / main / section / footer），不要满屏 div；2. 每个主要区块加上有意义的 class 名字，方便我之后指给你改；3. 图片都要写 alt 描述；4. 不要写样式，只要 HTML 结构；5. 写完用一个缩进的目录，列出页面的结构层级给我看。③ 结构体检（页面布局莫名其妙时）：
我的页面结构好像有问题。这是相关的 HTML：【粘贴代码】
请检查：1. 有没有标签没闭合、或者交叉嵌套？2. 有没有该用语义标签却用了 div 的地方？3. h1~h6 的层级是否合理（有没有跳级、有没有多个 h1）？4. 有没有嵌套层数过深、可以简化的地方？
逐条告诉我结果，有问题的指出在第几行。上一节 ← 4.1 AI 时代的前后端核心概念 下一节 → 4.3 CSS 基础：样式与布局，以及 Tailwind 是什么