本章精髓 一份网页永远是三大块：结构管有什么，样式管长什么样，行为管点了之后发生什么。页面出毛病时先判断是哪一块失效，直接改那一块，不要整版重新生成。
学完本章后，你应该能够：
- 拿到任何一份网页代码，指出结构、样式、行为三块各在哪一段；
- 说明 class 与 id 的区别，并顺着名字找到样式和脚本作用在哪一处；
- 看页面的坏法反推是三块中的哪一块出了问题，不必逐字读代码；
- 用开发者工具定位元素、读报错、在页面上试改动；
- 做出一个不引用任何外部资源的单文件页面，拷到别人的电脑上照样能用。
成品 · 分两步 · 单文件
先把这一页做出来，三大块的道理放在下一部分讲。
1.1本章成品：《扫码认识我》
一页个人简历：姓名与专业、一段自我介绍、三条信息、一个点了才显示联系方式的按钮。做完只有一个文件，拷进 U 盘，在任何一台电脑上双击都能打开，断网也不变样。
这一页有两个硬要求，本章的全部讲解都围着它们转：只有一个文件，不引用任何外部资源。做到这两条，它才是一件能交出去的作品，而不是只在你这台电脑、你这个网络下才成立的东西。
1.2本章新技巧：分两步生成
一开始就索要成品，是最费时间的做法。它会直接给出一份排版完整的页面，而你一看内容顺序不对、少了一块或多了一块。这时候再改，动的是已经排好版的整页。
先只要内容结构，不要代码。它会给出一份列表：这一页从上到下有哪几块、每块放什么。此时发现不对，改一句话即可。确认之后再让它生成界面。
1.3可直接复制的提示词
这几句约束，分别防住的是本章后面要讲的坑：
1.4大模型的常见偏差
http 这四个字母，头部若有一行指向网上的地址，就是没有照做。要求它删掉那一行，把样式写进本文件。
第04章演示_完整版.html，成品是现成的；三种坏法可以用 第04章演示_三次拆解.html 当场演示，不必现改代码。
结构 · 样式 · 行为 · class · id
本章的核心内容集中在这一部分和下一部分。
这八个术语会原样出现在浏览器菜单、报错信息与技术文档中。前五个在本部分讲解，后三个在第三部分讲解。
2.1五个知识点，一个一个看
每一条都先摆出你在屏幕上会看到的现象，再说它背后是什么。
缩进不是为了好看，是让层级看得见
现象：代码里全是尖括号，一层缩进一层。
概念：网页的结构由一对对标签搭成，写法是 HTML（HyperText Markup Language）。大标签里可以套小标签，外层的范围包含里面所有层，删掉外层，里面的内容会一并消失。
类比：快递箱里装小盒，小盒里装东西。扔掉大箱子，里面的也一并没了。
样式不改内容，只改样子
现象：同样的一段内容，一份有配色圆角，一份是从上到下的一片黑字。
概念：CSS（Cascading Style Sheets）规定每一块内容长什么样：颜色、字号、间距、圆角。它一个字的内容都不改，只改呈现方式。
类比：房子的墙和房间是结构，刷墙铺地挂窗帘是样式。
只动被点名的那一处
现象：点一下按钮，页面上某一处的文字变了，别的地方没有任何变化。
概念：JavaScript 负责行为，也就是使用者做了某个动作之后，页面要发生什么改变。没有这一块，页面就只能看，点什么都不会有反应。
类比：装了开关和门铃的房子，按下去才有动静。
前面那个点就是"去找贴了这个标签的"
现象：HTML 里有 class="item"，CSS 里有 .item { }，两个名字一模一样。
概念：class 是给元素贴的分类标签。同一个 class 可以贴给多个元素，样式改一次，它们一起变化。CSS 里写成 .items，多一个字母就对不上，样式完全不会生效。
类比：给一批货贴同样的标签，仓库按标签一次性处理。
脚本得先找到人，才能动它
现象：点一下按钮，页面上那一处从"点下方按钮显示"变成了一串邮箱。
概念：id 是元素的身份证，整页只能有一个。脚本用 getElementById 按这个名字把它取出来，再修改它的内容。id 写错或者重复，点按钮就没有反应。
类比：class 相当于班级，id 相当于学号。通知全班用班级，找某一个人用学号。
2.2这就是那段代码
整页四十来行，与 第04章演示_完整版.html 逐字一致。三大块的位置是固定的：样式在头部，结构在 body 里，行为在最后。拿到任何一份大模型生成的网页，按这个顺序看一遍，就知道每一段的用途。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>扫码认识我</title>
<style>
/* 样式：长什么样 */
body { background:#f5f7f4; padding:28px 16px; }
.card { max-width:420px; margin:0 auto; background:#fff;
border-radius:16px; padding:26px 24px; }
.ava { width:52px; height:52px; border-radius:50%; background:#2f6b45;
color:#fff; line-height:52px; text-align:center; }
h1 { color:#2f6b45; font-size:23px; margin:12px 0 2px; }
.major{ color:#7b8a80; font-size:14px; margin:0 0 14px; }
.item { border-top:1px solid #ecefe9; padding:13px 0; }
.label{ color:#2f6b45; font-weight:600; margin-right:8px; }
button{ width:100%; background:#2f6b45; color:#fff; border:0;
border-radius:9px; padding:13px; margin-top:14px; }
</style>
</head>
<body>
<!-- 结构：有什么 -->
<div class="card">
<div class="ava">李</div>
<h1>李明</h1>
<p class="major">大数据学院 · 数据科学与大数据技术 2023 级</p>
<div class="item"><span class="label">擅长</span>Excel 数据整理</div>
<div class="item"><span class="label">项目</span>班级活动报名表</div>
<div class="item"><span class="label">联系</span><span id="contact">点下方按钮显示</span></div>
<button onclick="showContact()">显示联系方式</button>
</div>
<script>
/* 行为：点了怎样 */
function showContact() {
document.getElementById('contact').textContent = 'liming@example.edu.cn';
}
</script>
</body>
</html>2.3三块靠两条连线挂在一起
三块不是各写各的。它们靠两样东西挂钩：class 让样式找到结构，id 让行为找到结构。高亮的那三行里，两条连线都在。
打开 第04章演示_两条连线.html，可以把两个名字当场改掉一边：只改 HTML 里的 class 名字，CSS 不动，页面的样式立刻塌掉；只改 id 名字，脚本不动，按钮立刻点不动。名字对不上，样式就落不下去，脚本也找不到人。
class="item" 改成 class="row"，但 CSS 里那一行不动，页面会变成什么样？三条信息还在不在？2.4读代码三问：不必逐字读
这门课不要求你逐行读懂代码。拿到一份网页，只问三件事就够用：
三种坏法 · 症状反查 · 开发者工具
看现象反推是哪一块出了问题，比逐字读代码快得多。
3.1另外三个知识点
只是一行代码，差别很大
现象：电脑上好好的页面，手机上整个缩成一小团，得两指放大才看得清。
概念：头部那行 viewport 告诉手机浏览器按屏幕真实宽度排版。不写这一行，手机会先按一块电脑那么宽的屏幕排版，画完再整体缩小塞进屏幕。
类比：没有告诉裁缝这件衣服给谁穿，他按标准尺码做完，再由你自己去改。
机房网络不稳时最容易暴露
现象：它演示时页面显示正常，自己打开却是另一副样子。
概念：页面在头部引用了网上的字体或图标库，每次打开都要临时下载，这叫外部资源依赖。断网、网速慢、若干年后那个地址失效，页面就会变样。本地图片也是同一类问题：网页里存的是图片的地址，不是图片本身，单独发送网页文件，地址就指不到了。
类比：菜谱里写明用某一家的酱油，那家店关门之后，这道菜就做不出原来的味道。
看结构
看报错
按 F12 打开，两个面板够用一整个学期
现象：按一下 F12，浏览器右边或下边弹出一个满是代码的面板。
概念：开发者工具是浏览器自带的检查台。这门课只用两个面板：Elements 看这一页由哪些元素组成、鼠标移上去页面会高亮；Console 显示脚本的报错，点按钮没反应时，红字就在这里。
类比：Elements 是骨架的透视片，Console 是它喊疼的地方。
3.2拿掉一块，页面会以特定方式坏掉
打开 第04章演示_三次拆解.html，把三块轮流关掉一块，右边的页面立刻变成对应的坏法。三种坏法互不相同，看现象就能反推是哪一块出了问题。
3.3症状反查：看症状开药方
上一节按"哪一块没了"分类。还有一类更常见：三块都在，只是某处写坏了一个符号。这类问题有固定的症状，可以反过来查。
3.4开发者工具的三种用法
id="contact" 那一行，鼠标移上去，页面上对应的位置会高亮。
这正是 id 的作用，看得见的实证。3.5前沿三分钟：一个文件就是一件作品
现在打开的大多数网页，背后是几十上百个文件：脚本、样式、字体、图标，分散在好几台服务器上。任何一处失效，页面就不完整。已经有不少统计指出，十年前的网页链接，如今有相当一部分已经打不开或者变了样。
与之相对的做法称为单文件：把全部内容装进一个文件，不依赖任何外部资源。它换来的是拷进 U 盘能用、断网能用、作为邮件附件能用、若干年后仍然打得开。代价也要说清楚：文件体积略大，样式没法在多个页面之间复用。
本课程统一采用单文件，理由很直接：作品要能交到别人手上，而不是只在你的电脑上、你的网络下、你打开的那个平台里有效。
只讲解不重写 · 单文件自检 · 跨设备
页面在自己这里能看，和别人能用，是两回事。
4.1让它当讲解员，不让它重写
看不懂某一段代码时，最自然的做法是把它贴给大模型问一句。这里有一个要提前挡住的默认行为：它的第一反应往往是重写一遍给你，而不是解释原来那一份。拿到一份你没见过的新代码，原来看不懂的地方仍然看不懂，而且你手上那份已经跑通的东西被换掉了。
4.2交出去之前，自检四条
这四条都能在一分钟内查完，缺一条就可能出现"在我这里明明是好的"。
http 这四个字母，是本章最省事的一条自检。它一句"已经合并成单文件了"并不作数，头部那一行指向网上的地址还在不在，搜一下就知道。4.3跨设备验证：只发一个文件
自检四条全过，还剩最后一步：把这个文件发给同组同学，让他在自己的电脑上打开。只发这一个文件，不发别的，也不作任何说明。他能正常打开、按钮可用，这一页才算做完。
对方打不开时，问题在你这一侧，按下面的顺序排查通常一次就能找到：
三选一 · 六步走完 · 跨设备验
上机环节由此开始，本次上机的成果就是作业 1，当堂完成并提交。
5.1三个题目，任选其一
个人简历页：基本信息、一段介绍、三条信息、点按钮显示联系方式。
通用给新生看的专业介绍：学什么、将来做什么、三门代表课程。
偏文科背景、方法、结果三段，点按钮展开其中某一段的细节。
偏理工三个题目都要求单页、单文件、并且有一处点击之后会发生变化，难度相当。允许更换题材，验收标准不变。
5.2上机六步
照着走，每一步都有产出。第四步是本章独有的，不要跳过，它把本章的知识点变成了可以动手做的操作。
5.3共同验收标准
5.4常见错误与处理
5.5提交内容
提交方式：按教师提供的作业模板（Word）填写，文档开头注明所选题目。提交渠道见课堂通知。当堂提交。
5.6再进一步（选做）
把自己的页面发给一个不在本课程上的人，室友或家人都可以。只发文件，不作任何说明。
然后问他两个问题：这是干什么的，你会点哪里。他的回答会告诉你，你以为一看就懂的地方，别人看不看得懂。
- 一份网页永远是三大块：结构管有什么、样式管长什么样、行为管点了之后发生什么，位置固定在头部、body 与末尾。
- 三块靠两条连线挂在一起：class 相当于班级，一对多，样式靠它找到元素；id 相当于学号，一对一，脚本靠它找到元素。名字对不上，样式就落不下去，脚本也找不到人。
- 三种坏法互不相同：只剩文字是样式缺失，按钮没反应是行为缺失，空壳子是结构缺失。看现象反推，不必整版重新生成。
- 不必逐字读代码。内容在哪、样子由哪一段决定、重复的那一段在哪，三问加两条连线，就能读懂它生成的任何一份网页。
- 能拷给别人打开，才算做完。一个文件、不引外部资源、不使用图片，缺一样就可能只在自己的电脑上有效。