第 7 周：DOM、Git 与 2048 蓝湖设计图还原

本周目标

本周完成后，应能够：

使用 DOM 查询、修改、创建和删除页面元素
使用事件监听实现基础点击和键盘交互练习
解释事件对象、事件冒泡和阻止默认行为
使用 Git 完成暂存、提交、查看历史和推送
根据 2048 蓝湖设计图完成静态页面结构
使用 HTML 和 CSS 还原 2048 桌面端与移动端界面
使用响应式 CSS 或媒体查询完成桌面端和移动端布局切换
为第 8 周接入游戏逻辑准备清晰、可复用的页面结构

学习资料与范围

主课程：【JavaScript基础】2小时快速入门，全程无废话，入门到精通，前端 js 全套基础&实战教程，附源码+文档
视频范围：P41-P56

视频范围	学习模块	学习结果
P41-P43	DOM 概述、获取元素和创建元素	能够理解 DOM 树并完成元素查询与创建
P44-P46	Element 属性、元素位置和 CSS 操作	能够修改元素内容、属性、样式和位置相关状态
P47-P52	事件处理程序、鼠标事件、事件对象、键盘事件、表单事件和事件委托	能够使用事件监听完成点击、键盘和表单交互
P53-P54	`setTimeout` 和 `setInterval`	能够理解定时器的基本使用场景和清理方式
P55-P56	防抖和节流	能够理解高频事件优化的基本思路

本周 Git 与 GitHub 不在主课程视频范围内，按本周任务中的基础命令独立练习。2048 项目本周只完成设计图静态还原，不接入第 6 周的游戏逻辑；动态渲染、键盘控制、计分和胜负判断放到第 8 周完成。

需要掌握的知识点

DOM 操作

DOM 树及 HTML 与节点的关系
querySelector、querySelectorAll
文本内容、HTML 内容和表单值
元素属性、自定义属性、样式和 classList
创建、追加、插入和删除节点
遍历节点集合并批量更新页面

事件

addEventListener 和事件处理函数
点击、输入和键盘事件
事件对象及按键判断
事件冒泡和事件委托的基本概念
阻止默认行为
避免重复绑定事件

Git 与 GitHub

仓库、工作区、暂存区和提交历史
git init、git status、git add、git commit、git log
.gitignore 的用途
创建 GitHub 仓库、关联远程仓库和推送代码
使用清晰提交信息描述已完成的功能
每完成一个独立功能进行一次提交

蓝湖设计图分析

确认 2048 桌面端和移动端设计稿尺寸
读取标题区、分数区、棋盘区、状态说明区和操作区的布局关系
记录棋盘、方块、间距、圆角、颜色、字体和字号
判断哪些内容是固定文案，哪些内容后续需要由 JavaScript 动态更新
按真实页面结构拆分容器，而不是只按视觉位置堆叠元素

静态页面结构

使用语义化 HTML 组织页面主体
页面至少包含标题区、分数区、4×4 棋盘、状态说明区和操作区
棋盘先使用固定数字和固定颜色还原视觉效果
为分数、棋盘格子、状态文本和按钮预留稳定的类名或 data-* 标记
避免为了视觉还原写死不利于第 8 周动态渲染的结构

响应式布局

桌面端按 1920×1080 设计稿完成横向布局
移动端保留相同信息结构，并调整为纵向布局
桌面端和移动端使用同一套 HTML 结构
使用媒体查询切换容器宽度、排列方向、间距和字号
移动端不得出现意外横向滚动
棋盘格子和数字需要水平、垂直居中

必做练习

实现点击切换内容的标签页。
实现支持添加、完成和删除的待办事项列表。
实现方向键控制页面方块移动的独立练习。
创建 2048 项目 Git 仓库和 GitHub 远程仓库。
分析 2048 蓝湖设计图，整理页面结构、关键标注和资源清单。
编写 2048 静态页面 HTML 结构，按真实容器嵌套组织页面。
完成桌面端 1920×1080 设计稿静态还原。
完成移动端设计稿静态还原。
使用媒体查询实现桌面端和移动端布局切换。
提供设计图与页面截图对比，记录主要视觉偏差。

本周综合任务：2048 静态页面还原

根据提供的 2048 蓝湖设计图完成一个静态网页页面。本周不接入第 6 周游戏逻辑，不实现动态棋盘、键盘控制、计分变化、胜利判断或失败判断。

页面结构要求

外层页面容器
游戏主面板
头部标题区域
分数信息区域
4×4 棋盘区域
游戏状态说明区域
操作按钮区域

视觉实现要求

桌面端按 1920×1080 设计稿还原
移动端按移动端设计稿还原
棋盘、方块、间距、圆角、颜色和字体尽量贴近设计图
数字在棋盘格子中水平和垂直居中
按钮和状态区域在内容变化时不应挤压棋盘
移动端页面无横向滚动

代码结构要求

使用原生 HTML 和 CSS
JavaScript 只用于 DOM 和事件基础练习，不接入 2048 页面主流程
CSS 按基础样式、布局样式、棋盘样式和响应式样式组织
类名应表达结构和职责，便于第 8 周接入动态渲染
每完成一个主要区域进行一次 Git 提交

Git 提交要求

本周至少通过独立提交体现以下开发步骤：

初始化 2048 项目结构
完成页面 HTML 容器结构
完成桌面端主布局
完成棋盘和方块样式
完成状态区和操作区样式
完成移动端响应式布局
完成视觉对比和页面整理

本周产出

标签页与待办事项 DOM 练习
方向键交互独立练习
2048 GitHub 仓库
2048 静态页面源码
2048 蓝湖设计图标注记录
桌面端和移动端页面截图
设计图与实现页面的视觉偏差记录

完成检查

能够使用 DOM 和事件实现基础交互练习
能够使用 Git 完成主要开发步骤提交
已完成 2048 页面真实容器结构
桌面端页面接近 1920×1080 设计稿
移动端页面结构完整且无横向滚动
桌面端和移动端使用同一套 HTML 结构
棋盘格子和数字居中稳定
页面结构便于第 8 周接入动态渲染
2048 静态页面已推送至 GitHub