网页的结构、样式、行为与单文件交付
网页由结构、样式、行为三块组成：结构管有什么，样式管长什么样，行为管点了之后发生什么。三块的位置固定：样式在头部，结构在 body 里，行为在最后。
用成对的标签搭出页面内容。标签可以层层嵌套，删掉外层，里面的内容一并消失。
规定颜色、字号、间距、圆角。只改呈现方式，不改一个字的内容。
规定使用者做了某个动作之后页面怎样变化。没有这一块，页面只能看，点什么都没反应。
只把 .html 拷给别人
页面只剩纯文字
全部合并到一个 .html
拷一个文件，页面完整
三块靠名字连在一起。class 让样式找到结构，一对多；id 让行为找到结构，一对一。两边的名字差一个字母，就连不上。
给元素贴的分类名，可以贴给多个元素。CSS 里的 .item 找的是所有贴了 item 的元素。
元素的唯一名字，整页只能有一个。脚本用 getElementById 按名字取出它，再改它的内容。
写在按钮上，点击时执行指定的函数。onclick="showContact()" 把按钮和 showContact 函数连起来。
HTML 写 class="item"，CSS 写 .items
多一个字母，样式完全不生效
class="item" 对应 .item
三条信息的样式一起生效
HTML 和脚本里的名字对不上
点按钮没有反应
id="contact" 对应 getElementById('contact')
点按钮，邮箱显示出来
class="item" 改成 class="row"，CSS 那一行不动，页面会变成什么样？三条信息还在不在？判断依据：改名断开的是哪两块之间的连线；文字内容写在哪一块里。读网页代码不必逐字读：按位置找三块，顺着名字找连线。看不懂的地方让 AI 讲解，并且明确禁止它修改。
<!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>
| 问题 | 看哪里 | 用途 |
|---|---|---|
| 内容在哪一段 | body 里那些带文字的行，是这一页给人看的全部内容 | 要改文字，改这里 |
| 样子由哪一段决定 | 头部 style 那一块，配色、字号、间距都在里面 | 要改颜色和大小，改这里 |
| 重复的那一段在哪 | 三条信息长得一样，说明贴了同一个 class，样式只写了一份 | 要改一批，改那一份 |
| 提示词中的规定 | 缺少时的表现 |
|---|---|
| 全程不要重写或修改任何代码 | AI 往往重写一份给你：原来看不懂的仍看不懂，已经跑通的那份被换掉 |
| 指出每一块从第几行到第几行 | 泛泛地说"这是样式部分"，还是不知道该往哪里看 |
| 解释里不要出现英文术语 | 解释里堆满英文缩写，看不懂的东西只是换了一种写法 |
"给这份代码加上注释"
AI 常顺手调整了代码
拿到后和原文件比对一次
确认只多了注释行，别的一个字没变
头部的 viewport 一行，让手机浏览器按屏幕真实宽度排版。不写这一行，手机上整页缩成一团。
写在头部的一行设置，告诉手机浏览器按屏幕真实宽度排版。就是 4.3 代码的第 5 行。
<meta name="viewport" content="width=device-width, initial-scale=1.0">电脑上看一切正常就交出去
手机上缩成一团，两指放大才看得清
手机按屏幕真实宽度排版
字号正常，不用横着拖
页面引用了网上的字体或图标库，每次打开都要临时下载。断网、网速慢或地址失效时，页面就会变样。
页面引用网上的字体、图标或图片，每次打开都要临时下载。离开网络，页面就不完整。
全部内容装进一个文件，不依赖任何外部资源。本课程的作品统一采用单文件。
不检查代码头部
头部仍有一行指向网上的地址
搜到了，就要求删掉那一行，把样式写进本文件
断网打开和联网时一样
现在的多数网页背后是几十上百个文件，分散在好几台服务器上，任何一处失效，页面就不完整。单文件拷进 U 盘能用、断网能用、作为邮件附件能用，若干年后仍然打得开。代价是文件体积略大，样式没法在多个页面之间复用。
拿掉任何一块，页面都会以固定的方式坏掉。看现象判断是哪一块失效，只改那一块，不要整版重新生成。
三块都在、只是某处写坏一个符号时，也有固定的症状，可以反过来查：
| 看到的症状 | 代码上的样子 | 原因 |
|---|---|---|
| 配色圆角全部失效，只剩纯文字 | .card { … 少了一个 } | 样式块里的大括号没有闭合，后面所有样式一起作废 |
| 卡片外框整个消失，其余正常 | class="card 少了后引号 | 引号没有收尾，这个名字没能贴上去，样式落不下来 |
| 整页文字变成大号加粗 | <h1>李明 少了 </h1> | 标签没有闭合，后面的内容全被算进了标题里 |
| 点按钮没反应，Console 有红字 | 找不到 showContact | 函数名拼错，或者整块脚本没有复制进来 |
成对出现的符号最容易出错：大括号、引号、标签都是一出一进。
浏览器自带的检查台，按 F12 打开。本课程只用 Elements 和 Console 两个面板。
显示页面由哪些元素组成。鼠标移到某一行，页面上对应位置高亮；也能直接改文字和颜色，试效果。
显示脚本的报错，红字写清是找不到函数还是找不到元素。把红字原文交给 AI，比只说"点了没反应"快得多。
整版重新生成
得到一份全新的页面，问题换到了另一个位置
直接改那一块
通常一句话就够
以为已经改好了
刷新一次回到原样，文件一个字没动
Elements 只用来试效果
改动存进了文件
交出去之前先自检四条。再只发这一个文件给同组同学，不作任何说明；对方能打开、按钮可用，这一页才算做完。
| 自检项 | 说明 | 检查方法 |
|---|---|---|
| 代码里搜不到 http 这四个字母 | 没有引用网上的字体、图标或图片 | 在编辑器里按 Ctrl+F 搜 http，搜不到才算过 |
| 文件夹里只有一个文件 | 没有单独的样式文件、脚本文件，也没有图片 | 打开文件夹数一数，只有一个 .html |
| 头部有 viewport 那一行 | 手机上按真实宽度排版 | 把浏览器窗口拖到手机那么窄，看有没有横向滚动条 |
| 双击打开是页面，中文正常 | 不是满屏代码，也没有方块 | 关掉编辑器，回到文件夹双击一次 |
对方打不开时，问题在你这一侧。按下面的顺序排查，通常一次就能找到。
| 顺序 | 查什么 | 对方那边的现象 | 怎么查、怎么改 |
|---|---|---|---|
| 先查 | 文件是不是存成了 .html.txt | 双击打开是满屏代码 | 先在资源管理器里勾选显示文件扩展名，再看真实的文件名 |
| 再查 | 是不是引用了本地的图片 | 有空白图标 | 图片没有跟着一起发送，地址就指不到了；本章要求不使用图片，就是为了绕开这一条 |
| 最后查 | 是不是引用了网上的资源 | 字体、图标与你的不一致 | 搜代码里的 http，把那一行删掉，让 AI 把样式写进本文件 |
在你的电脑上有头像
发给别人，显示为空白图标
头像是画出来的
跟着文件走，在哪台电脑上都一样
先只要内容结构，不要代码；结构确认之后再生成界面。结构错了改一句话，界面错了要在整页上返工。
直接给出排好版的界面
只能在成品上修改
仍然给出代码时，回复"我只要结构列表"
拿到结构列表，不对就改一句话
| 提示词中的规定 | 缺少时的表现 | 见 |
|---|---|---|
| 全部合并到一个 .html 文件 | 样式被放进另一个文件，只拷了网页，页面就只剩纯文字 | 4.1 |
| 加上 viewport 那一行 | 手机上整页缩成一团，要两指放大才看得清 | 4.4 |
| 不引用任何外部链接、字体或图标库 | 断网之后字体变默认、图标变方块 | 4.5 |
| 不要使用任何图片 | 图片没有一起拷贝，发给别人显示为空白图标 | 4.7 |
本次上机的成果就是作业 1，当堂完成并提交。六步都有产出，第四步三次拆解是本章独有的，不要跳过。
三样：一句话定位、这一页有哪几块内容、三条验收标准，每条能用是或否回答
产出：规格三样先发第一步只要结构，看完顺序和块数确认无误，再发第二步。两步的原话都留在作业文档里
产出：结构清单 + 一整段代码另存为 .html，保存类型选「所有文件」、编码 UTF-8；双击打开；再在代码里搜 http
产出：一个干净的单文件轮流把样式、行为、结构注释掉，每次刷新截一张图，看是不是对应那三种坏法。截完把注释去掉复原
产出：三张故障截图拿自己写的三条验收标准逐条打勾，打不上的记下来，改过之后再打一次。修改前先判断是哪一块，不要整版重新生成
产出：打勾表 + 一次修改记录只发这一个文件，不发别的。对方能打开、按钮可用，才算交付完成
产出：他人设备的运行截图第四步之前先复制一份。注释符号是成对的，去掉时两边一起去掉；只去一边，页面仍然是坏的。复原不回来时，直接换回复制的那一份。
出了问题先按现象查表，找到原因再处理，不要整版重新生成。
| 现象 | 原因 | 处理 |
|---|---|---|
| 页面只剩文字，内容都在 | 样式那一块缺失，多半是被放进了单独的样式文件 | 让 AI 把样式写回同一个文件，重新给完整的一份 |
| 按钮点了没反应 | 行为那一块缺失，或者函数名对不上 | 按 F12 看 Console 的红字，把红字原文交给 AI |
| 外框在，里面没有内容 | 结构那一块没有复制完整 | 回去把代码从第一行到最后一行重新全选复制 |
| 手机上整页缩成一团 | 少了 viewport 那一行 | 让 AI 补上，或者照着 4.3 代码的第 5 行抄一份 |
| 同学打开时字体不一致 | 引用了网上的字体 | 搜代码里的 http，把那一行删掉，样式写进本文件 |
| 头像显示为空白图标 | 头像是一张网上的图，或是本地图片没有一起拷贝 | 改成姓氏首字加圆形底色，不使用图片 |
| 双击打开是一堆代码 | 存成了 .html.txt | 先显示文件扩展名，重新另存，保存类型选「所有文件」 |
| 注释掉一块之后复原不回来 | 注释符号只去掉了一边 | 两边一起去掉；实在复原不了，换回第四步之前留的那一份 |
作业 1 提交四项内容，按七条标准验收，评分分三项。
| 作业 1 评分 | 占比 |
|---|---|
| 规格与验收标准：三样齐全，标准能用是或否判断 | 30% |
| 页面完成度与可读性：内容完整、手机可读、有一处可交互 | 40% |
| 跨设备可运行：单文件、无外部资源、他人电脑能打开 | 30% |
按教师提供的作业模板（Word）填写，文档开头注明所选题目。提交渠道见课堂通知，当堂提交。
零代码应用开发 · 第 4 章 单页网页