首先使用Git初始化仓库并提交初始文件，接着配置.gitattributes以优化差异识别，通过git diff查看未暂存更改，利用git add --patch分段暂存变更，最后用git log生成定制化日志追踪历史修改。
如果您希望在开发过程中精确掌握HTML和CSS文件的每一次修改细节，Git是一个强大且高效的版本控制工具。通过合理的操作流程，您可以清晰地追踪到每个样式或结构变更的具体内容。
本文运行环境：MacBook Pro，macOS Sonoma
一、初始化本地仓库并提交初始版本
在开始追踪代码变更之前，需要将项目目录初始化为Git仓库，并提交最初的代码状态，作为后续比对的基础。
1、打开终端，进入项目根目录，执行命令 git init 初始化本地仓库。
立即学习“前端免费学习笔记（深入）”；
2、使用 git add index.html styles.css 将HTML和CSS文件加入暂存区。
3、执行 git commit -m "Initial commit of HTML and CSS files" 提交初始版本。
二、配置.gitattributes以增强文本差异识别
通过设置特定的属性规则，Git可以更准确地区分HTML与CSS文件中的换行符和编码格式，从而提升diff输出的可读性。
1、在项目根目录创建名为 .gitattributes 的文件。
2、添加以下内容以确保正确处理文本文件：
*.html diff=html
*.css diff=css
* text=auto
3、保存文件后，Git将在后续比较中应用这些规则。
三、使用git diff查看未暂存的更改
当您对HTML或CSS文件进行修改但尚未添加到暂存区时，可通过git diff命令查看具体变动内容。
1、直接在终端输入 git diff 命令。
2、终端将高亮显示所有未暂存的变更，包括新增的CSS类名或修改的HTML标签结构。
3、观察输出结果中绿色（新增）和红色（删除）标记的部分，定位具体改动行。
四、利用git add --patch分段暂存变更
对于包含多个逻辑修改的大文件，可以通过交互式暂存功能选择性地提交部分变更，实现更精细的版本控制。
1、执行 git add -p style.css 启动分块暂存模式。
2、Git会逐个展示变更块，并提示是否暂存该块，输入 y 表示暂存，n 表示跳过。
3、完成选择后，仅被确认的变更将进入暂存区，便于后续独立提交。
五、生成定制化日志报告追踪历史变更
通过组合参数调用git log命令，可以输出包含文件级别变更信息的历史记录，帮助回溯关键调整节点。
1、运行命令 git log --oneline --stat 查看简洁的提交摘要及每次修改涉及的文件行数变化。
2、若需聚焦CSS文件，可使用 git log -- styles.css 过滤仅与此文件相关的提交。
3、结合 --since 和 --until 参数限定时间范围，快速定位特定周期内的视觉样式迭代。
