目录
- 一、本周学习概述
- 二、HTML 基础学习总结
- 三、网页设计思维提升
- 四、JavaScript 入门学习心得
- 五、实操进阶：GitHub Pages 部署网页（本周重点）
- 六、学习不足与自我复盘
- 七、下周学习计划
- 八、学习总结
一、本周学习概述
本周我重点学习了 HTML 网页基础、页面布局设计以及 JavaScript 基础语法，同时从零上手实操，完成了自己第一个静态网页项目，并成功部署上线到 GitHub Pages。
从只会在本地运行代码，到真正拥有属于自己的公开网页链接，是我前端学习路上一个非常有里程碑意义的阶段。相比枯燥的理论知识，前端可视化的学习效果让我学习积极性更高，也让我对“网页到底是怎么构成、怎么上线”有了完整、清晰的认知。
TL;DR：本周完成 HTML 结构入门、JavaScript 基础语法初探，并成功把首个静态网页部署到 GitHub Pages，实现从本地代码到公网访问的完整闭环。
二、HTML 基础学习总结
HTML 是前端开发的基石，负责搭建整个网页的结构骨架。本周我系统梳理了整套 HTML 基础体系，不再是零散敲标签，而是带着结构化思维写页面。
主要学习内容：
1. 掌握网页标准三层结构 html、head、body，理解网页运行的基本逻辑。
2. 熟练运用常用标签：标题、段落、换行、超链接、图片、列表、容器 div 等。
3. 区分块级元素与行内元素，理解不同标签的布局特性。
4. 学会模块化布局，写页面前先规划头部、主体内容、底部结构，让代码层次清晰、整洁规范。
通过大量实操练习，我改掉了之前标签堆砌、结构混乱的问题，能够独立完成简洁、完整、规范的静态展示页面。
三、网页设计思维提升
这周的学习，让我最大的改变是：不再只追求代码跑通，开始追求页面好看、结构合理。
我开始养成简单的设计思维：
1. 页面分区明确，内容层级清晰；
2. 排版整洁、留白舒适，不堆砌过多内容；
3. 统一页面风格，保证整体视觉协调；
4. 根据用户浏览逻辑排布内容，符合阅读习惯。
虽然目前还没有系统学习 CSS 美化，但已经可以通过结构规划，让页面看起来干净、规整，具备基础网页的展示效果。
四、JavaScript 入门学习心得
如果说 HTML 是网页的“骨架”，那 JavaScript 就是网页的“灵魂”。HTML 只能实现静态展示，JS 负责实现所有动态效果和用户交互。
本周入门掌握内容：
1. 了解 JS 的作用、优势和使用场景；
2. 学习变量定义、基础数据类型、简单运算符；
3. 掌握 JS 三种引入方式：行内 JS、内部 JS、外部 JS；
4. 熟悉基础输出语法，能够完成简单数值运算和字符串操作。
初次接触 JS，我感受到了编程逻辑的魅力，也明白了前端结构、样式、交互三层分离的开发思想，为后续深入学习循环、条件、事件打下了基础。
五、实操进阶：GitHub Pages 部署网页（本周重点）
本周最大的收获，就是成功将本地网页部署到公网，实现零成本上线。
完整操作流程总结：
1. 在 GitHub 创建公开仓库，仓库名遵循规范：用户名.github.io
2. 本地使用 Git 初始化仓库，配置用户信息
git init # 在当前项目文件夹初始化本地 Git 仓库
git config user.name "你的用户名" # 配置提交者姓名，仅对当前仓库生效
git config user.email "你的邮箱" # 配置提交者邮箱，需与 GitHub 账号邮箱一致
3. 将写好的 HTML、JS 等文件全部放入项目文件夹
git status # 查看当前工作区状态，确认新增文件已被 Git 识别
git add . # 将项目文件夹内所有文件添加到暂存区
4. 通过 git add、git commit、git push 将代码上传到远程仓库
git add . # 把改动加入暂存区（可重复执行，确保无遗漏）
git commit -m "feat: 完成首个静态网页并部署" # 提交暂存区内容并填写提交说明
git branch -M main # 将当前分支重命名为 main，与 GitHub 默认分支保持一致
git remote add origin https://github.com/用户名/用户名.github.io.git # 关联远程仓库地址
git push -u origin main # 首次推送并建立本地与远程分支的追踪关系
5. 在仓库 Settings 中开启 Pages 服务，选择主分支部署
6. 等待 1–3 分钟，生成公开访问链接，网页成功上线
为更直观地理解整个部署链路，下面用 Mermaid 流程图把上述 6 个步骤归纳为四个阶段：
flowchart TD
A[阶段一：本地初始化] –> A1[创建公开仓库 用户名.github.io]
A1 –> A2[git init 初始化本地仓库]
A2 –> A3[git config 配置用户名与邮箱]
A3 –> A4[放入 HTML、JS 等项目文件]
A4 –> B[阶段二：提交推送]
B –> B1[git add . 添加到暂存区]
B1 –> B2[git commit -m 提交说明]
B2 –> B3[git remote add origin 关联远程仓库]
B3 –> B4[git push -u origin main 推送代码]
B4 –> C[阶段三：开启 Pages]
C –> C1[进入仓库 Settings]
C1 –> C2[选择 Pages 服务]
C2 –> C3[指定发布分支 main 与根目录]
C3 –> D[阶段四：构建上线]
D –> D1[GitHub 自动构建 Pages]
D1 –> D2{构建是否成功}
D2 –>|是| D3[生成公开访问链接]
D2 –>|否| D4[查看 Actions 日志排查]
D4 –> D1
D3 –> E[网页成功上线 可公网访问]
整个流程可以概括为：先在本地完成仓库初始化与文件准备，再通过 Git 提交并推送到远程仓库，随后在 Settings 中开启 Pages 服务，最后由 GitHub 自动构建并生成公开访问链接，若构建失败则回到日志排查后重新推送触发构建。
同时记录自己踩过的坑，整理成下表方便以后排查：
| 页面图片、样式加载失败，控制台报 404 | 文件路径中出现中文或空格，浏览器无法正确解析 URL | 把文件名和目录名统一改为英文小写加短横线，如 my-page，并同步修改引用路径 |
| 访问仓库域名时显示目录列表或 404，无法识别首页 | 主页文件没有命名为 index.html，Pages 找不到默认入口 | 将首页文件重命名为 index.html，放在仓库根目录或 Pages 指定的发布目录下 |
| 上线后页面内容缺失、样式错乱 | 推送前未检查文件完整性，部分文件漏提交或未推送成功 | 推送前用 git status 确认改动，推送后到仓库页面核对文件列表是否齐全 |
| 自定义 404 页面未生效，访问错误地址仍显示 GitHub 默认页面 | 404 文件名不是 404.html，或没有放在发布目录根路径下 | 在发布根目录新建 404.html，等待 Pages 重新构建后再访问不存在的路径验证 |
| Pages 构建失败，仓库 Settings 中显示红色报错 | 分支或目录选择错误、仓库为空、构建过程出错，或使用了不支持的配置 | 在 Settings → Pages 中确认发布分支与目录，查看 Actions 构建日志定位报错，修正后重新推送触发构建 |
这次部署让我真正理解了本地开发、云端托管、公网访问的完整流程，以后可以长期用来托管个人博客、前端作业、实训项目。
六、学习不足与自我复盘
1. JavaScript 逻辑基础薄弱，目前只能写简单代码，复杂语法还需要多加练习
2. 缺少 CSS 美化加持，当前页面较为朴素，视觉效果单一
3. Git 操作指令不熟练，上传代码偶尔会出现操作失误
4. 页面布局经验较少，复杂结构排版还不够熟练
七、下周学习计划
1. 系统学习 CSS 基础，掌握选择器、样式、布局，美化个人网页
2. 强化 JavaScript 基础，练习判断、循环语句，尝试制作交互小案例
3. 多临摹优秀网页，提升布局能力和审美能力
4. 持续更新 GitHub 项目，迭代优化个人技术博客主页
八、学习总结
本周是我前端入门打基础、练实操、做上线的关键一周。从熟悉 HTML 结构、初识 JS 交互，到独立完成 GitHub 网页部署，我真正从零基础走进了前端开发。
技术学习最踏实的永远是动手实操。接下来我会继续保持每周打卡的习惯，不断积累项目经验，完善自己的个人博客网页，让自己的代码能力稳步提升。
