第 1 课
Git、代码托管与 HTML 基础
软件开发综合实践 · 2026 年秋季学期 · 第 1 周 周一 第 1-4 节
本课口令： ••••••
扫码或访问 sdev-2026f.dev-learn-hub.me/w1 → 输入上方口令 → 在自己设备上同步看幻灯片
下课后教师将关闭本课幻灯片，请当堂记好笔记
本节课你将完成什么
1个人代码仓库 — GitHub/Gitee 远程仓库，后续七次课的全部成果都提交到这里
2案例复现：个人主页 v1 — 跟随教师演示完成的基础 HTML 页面
3自主实践：主题介绍页 — 你独立选题完成的第一件个人作品
4课堂实践进度报告一 + 50 道选择题（当堂完成）
你手里的资源
讲义一《Git、代码托管与 HTML 基础》
本课随堂操作主线：每一步怎么做、为什么这么做、出错怎么办，全在里面。本页幻灯片只讲做什么，怎么做看讲义。本课幻灯片
扫码进入（口令在投影第一页），课后 24 小时内可回看复习在线教程
菜鸟教程 HTML / Git — 查不认识的标签和命令，先菜鸟后官方文档课程资源包
讲义 docx、作业要求 docx、图片素材 — 幻灯片最后一页有下载入口本课知识体系
①Git 版本控制 — 为什么要版本控制、四个区域、核心命令流
▼
②GitHub 远程托管 — 建仓库、关联推送、小步提交规范
▼
③HTML 基础 — 三种语言分工、页面骨架、常用元素、路径规则
主线先学管理代码（Git/GitHub），再学写页面（HTML）— 管理工具先就位，写的每一行代码从第一天就有版本记录
① Git 是什么 · 为什么需要它
没有版本控制的日常
报告.doc → 报告-最终.doc → 报告-最终2.doc → 报告-最终版-真的最终.doc
- 一周后：哪个是最新的？
- 想找回周三删掉的段落 → 找不回来了
- U 盘、邮件传来传去，版本爆炸
Git 帮你做什么
| 你手工做的 | Git 做的 |
|---|---|
| 复制文件改名备份 | 每次提交自动存快照 |
| 记不住改了什么 | 自动记录内容/时间/作者 |
| 不敢删内容 | 任何历史版本可恢复 |
| 传 U 盘发邮件 | push 到云端随处可取 |
Git vs GitHub（必辨析）
Git = 版本控制工具
装在你自己电脑上的软件（命令行）
负责：记录版本、管理历史、合并修改
可以完全脱离网络使用
GitHub / Gitee = 托管平台
保存仓库的网站（云端）
负责：云端备份、多人协作、代码展示
国内访问 Gitee 更顺畅，两者操作等价
误区"要用 Git 就得先注册 GitHub" — 错。Git 是工具，GitHub 是仓库管家；本课两者都配好，形成本地提交＋云端备份的完整循环
① Git 的四个区域（核心概念）
工作区
你正在编辑的文件
git add →
暂存区
准备提交的清单
git commit →
本地仓库
本机版本历史（.git 隐藏目录）
git push →
远程仓库
GitHub/Gitee 服务器
git pull ←—— 拉取云端更新，反方向回到工作区
记忆法打草稿（工作区）→ 勾选要交的（暂存区）→ 盖章存档（本地仓库）→ 寄到云端（远程仓库）。理解这张图，Git 就懂了一半
① 为什么要分暂存区？
场景
你一口气改了 5 个文件：
- 2 个和"添加导航栏"有关 ✓
- 3 个是顺手改的别的东西 ✗
这次提交只应该包含前 2 个
暂存区 = 勾选清单
bash
git add nav.html style.css
git commit -m "添加导航栏"
精确控制每次提交的内容，
让每条提交记录都干净、单一、可回溯
① 命令流：一次完整的提交循环
bash
mkdir git-practice && cd git-practice
git init
bash
# 新建 hello.txt 写一行字，保存
git status # 红色：Untracked files
git add hello.txt # 加入暂存区
git status # 绿色：Changes to be committed
git commit -m "创建练习文件"
git log # 查看 40 位编号的提交历史
第一常见报错
Please tell me who you are — 忘了配置署名。git config --global user.name/user.email 先配好（见讲义第三部分）② GitHub：建仓库并推送
bash
# GitHub 网页：New repository → 名字填 frontend-practice
# 选 Public → 不勾 README → Create
git remote add origin https://github.com/你的用户名/frontend-practice.git
git push -u origin main
安全红线
- 绝不提交密码、令牌、身份证号
- 提交过的东西，删了也留在历史里
- 他人素材注明来源
提交说明规范（评分项）
✅ "添加个人主页页面骨架"
✅ "修复图片路径错误"
❌ "111" / "修改" / "final"
③ HTML：三种语言各管什么
HTML · 结构
房子的骨架与房间 — 这里有标题、那里有段落、这里是图片CSS · 外观
装修 — 颜色、字体、间距、排版（第 2 课）JavaScript · 行为
水电与智能设备 — 点按钮会发生什么（第 3 课起）本课只学 HTML：先把内容和结构立起来
③ 第一个页面：文档骨架
html
我的第一个页面
你好，世界
这是我的第一个 HTML 页面。
必背
meta charset="UTF-8" 不写 → 中文乱码；文件本身也要存成 UTF-8入口约定文件名必须叫
index.html — 浏览器访问目录时默认找它③ 元素·标签·属性·嵌套
html
云南大学
| 概念 | 上例对应 | 规则 |
|---|---|---|
| 标签 | a |
尖括号里的名字，通常成对出现 |
| 元素 | 整行 | 开始标签＋内容＋结束标签 |
| 属性 | href target |
写在开始标签里，属性名="值"，引号必包 |
| 嵌套 | 元素包含元素 | 不能交叉：<p>一段<b>文字</b></p> 才对 |
③ 常用元素速览
文本与列表
<h1>~<h6>标题，h1 最大、一页一个<p>段落，段落间自动留白<br>换行、<hr>水平线<ul><li>圆点列表<ol><li>数字列表
链接
<a href="..." target="_blank">新标签页打开
图片
html
- 自闭合：没有结束标签
alt替代文字，规范上必写
块级 vs 行内
- 块级独占一行：p、h1、ul
- 行内随文流动：a、img
③ 路径：本课最容易翻车的地方
text
项目目录/
├── index.html
├── images/
│ └── photo.jpg
└── docs/
└── intro.html
| 引用场景 | 写法 | 规则 |
|---|---|---|
| index.html → photo.jpg | images/photo.jpg |
进入子文件夹 |
| intro.html → photo.jpg | ../images/photo.jpg |
.. 先回上一级 |
| 引用网上图片 | https://... |
完整网址 |
红线网页里绝不写 C:\ 本地盘符路径 — 换台电脑（含验收电脑）全部裂图。文件名统一小写英文＋数字
课堂作业总览（100 分）
案例复现 · 30 分个人主页 v1 — 跟随教师三步复现，每步一次提交
自主实践 · 50 分主题介绍页 — 八项基本要求逐项给分
独立研究 · 20 分三个选做研究任务，把成绩从 80 拉向 100
另50 道选择题当堂完成，成绩单独记录（具体安排课上说明）
案例复现：个人主页 v1（30 分）
第 1 步 homepage/index.html 搭骨架 → 提交
"添加个人主页页面骨架"第 2 步 填充：关于我 / 爱好列表 / 常用链接 → 提交
"补充自我介绍、爱好和链接列表"第 3 步 images/me.jpg 加入照片 → 提交
"添加个人照片"检查点
- [ ] GitHub 网页能看到三次提交
- [ ] 三条提交说明分别对应骨架/内容/图片
- [ ] 页面正常显示，图片正常加载
- [ ] git log 与远程历史一致
评分：复现完整 15 + 检查点 5 + 提交规范 5 + 报告记录 5
自主实践：主题介绍页（50 分）
任选你最有话说的主题：家乡 / 社团 / 球队 / 乐队 / 一门课 / 一位人物 / 一个游戏
| # | 基本要求 | 分 |
|---|---|---|
| 1 | 结构完整：doctype、html、head（charset+viewport）、title、body | 6 |
| 2 | h1 标题 + 至少两个 h2 小节 | 5 |
| 3 | 至少两个段落 p | 4 |
| 4 | 一个列表（ul 或 ol）不少于 3 项 | 6 |
| 5 | 至少 3 个链接 a，其中 1 个 target="_blank" | 6 |
| 6 | 至少 1 张本地图片放子文件夹，相对路径，alt 必写 | 8 |
| 7 | 不少于 3 次有效 Git 提交并推送，说明具体规范 | 7 |
| 8 | 浏览器正常显示，Console 无红色报错 | 8 |
禁止不用 AI 生成代码 · 不复制同学页面 · 不用本地盘符路径 — 不能现场解释的代码不计分
独立研究任务（差距分 · 20）
8 分.gitignore 研究 — 写 5 条规则、逐条解释、git status 验证生效
7 分README 研究 — 为仓库写 README.md，截图对比源码与 GitHub 渲染效果
5 分字符编码研究 — 删掉 charset 观察乱码截图；研究 2-3 个 HTML 实体并应用
规则课堂不讲授，自己查文档动手试。不做不扣基础分；做多少得多少，按完成质量与你的解释评分。结果写入进度报告
今天的节奏（4 节连堂）
第 1 节讲解与演示 — 教师带过知识体系 + 现场演示第一个页面
第 2 节动手：案例复现 — 个人主页 v1（三步三次提交）
第 3 节动手：自主实践 — 主题介绍页；快的同学冲研究任务
第 4 节收尾 — 进度报告一 + 自查 + 提交（方式课上说明）
求助阶梯卡住时：讲义对应部分 → 菜鸟教程 → F12 开发者工具 → 举手（按此顺序，前两步能解决 90% 的问题）
资源与下载
讲义一 · docx
随堂操作主线 + 命令速查表 + 常见报错表课堂作业一 · 作业要求 docx
评分表全文 + 自检清单课程案例代码仓库
8 个课堂案例完整代码＋统一数据集＋前端库离线副本github.com/thiswind/frontend-practice-cases
git clone 或下载 ZIP；断网时课堂照常运行
本课幻灯片
sdev-2026f.dev-learn-hub.me/w1 · 口令随堂公布下课后幻灯片关闭，复习请看讲义（内容更全）
现在，打开你的电脑
① 案例复现 — 个人主页 v1 · 三步三次提交
② 自主实践 — 主题介绍页 · 八项要求 50 分
③ 冲刺高分 — 独立研究任务 · 选做 20 分
三节课是你的讲义 → 菜鸟 → F12 → 举手。下课前完成进度报告一，提交方式课上口头说明