HTML简介

HTML语法基础

HTML文档结构

HTML标签属性

文档类型定义

HTML语法规则

文本基础

标题与段落

文本格式化

列表

链接

图像

表格

多媒体

表单基础

表单进阶

表单验证

表单样式

语义化标签

HTML5新特性

HTML5文本语义

Canvas绘图

SVG图形

Web存储

IndexedDB

Web Workers

地理位置API

拖放API

历史记录API

剪贴板API

拖放API中级

WebSockets

通知API

全屏API

剪贴板API进阶

文件API

拖放API进阶

CSS集成基础

CSS选择器

CSS盒模型

CSS布局技术

响应式设计

代码规范

可访问性

Web安全

隐私保护

个人网站项目

博客系统项目

电商网站项目

社交平台项目

开发工具

版本控制

包管理器

构建工具

Web Components

PWA渐进式应用

WebAssembly

性能优化

Web发展趋势

AI与Web

Web安全未来

Web技术展望

版本控制

Git基础

版本控制是现代软件开发的基础,Git是目前最流行的分布式版本控制系统,掌握Git的使用对团队协作和代码管理至关重要。

东巴文(db-w.cn) 认为:版本控制就像时光机,能让你随时回到代码的任何历史状态。掌握Git,就是掌握了代码的时间管理能力。

Git概述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git基础 - 东巴文</title>
    
    <style>
        body {
            font-family: 'Segoe UI', sans-serif;
            padding: 20px;
            background: #f5f5f5;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
        }
        
        h1 {
            color: #667eea;
            margin-bottom: 20px;
        }
        
        h2 {
            color: #764ba2;
            margin: 30px 0 15px;
            border-left: 4px solid #764ba2;
            padding-left: 15px;
        }
        
        .git-demo {
            background: #f8f9fa;
            padding: 20px;
            border: 2px solid #ddd;
            margin: 15px 0;
            border-radius: 10px;
        }
        
        .git-demo h3 {
            color: #667eea;
            margin-bottom: 10px;
        }
        
        .code-block {
            background: #2d2d2d;
            color: #f8f8f2;
            padding: 15px;
            border-radius: 5px;
            overflow-x: auto;
            margin: 10px 0;
        }
        
        .command-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        
        .command-table th,
        .command-table td {
            padding: 12px;
            text-align: left;
            border: 1px solid #ddd;
        }
        
        .command-table th {
            background: #667eea;
            color: white;
        }
        
        .command-table code {
            background: #f8f9fa;
            padding: 2px 6px;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Git基础</h1>
        
        <h2>Git概述</h2>
        
        <div class="git-demo">
            <h3>什么是Git?</h3>
            <p><strong>Git</strong> 是一个分布式版本控制系统,用于跟踪文件的更改和协调多人协作开发。</p>
            <ul>
                <li><strong>分布式:</strong> 每个开发者都有完整的代码仓库副本</li>
                <li><strong>高效:</strong> 快速处理从小型到大型项目的版本管理</li>
                <li><strong>分支管理:</strong> 强大的分支和合并功能</li>
                <li><strong>数据完整性:</strong> 使用SHA-1哈希确保数据完整性</li>
            </ul>
        </div>
        
        <h2>Git配置</h2>
        
        <div class="git-demo">
            <h3>初始配置</h3>
            <div class="code-block">
                <pre>
# 配置用户名
git config --global user.name "你的名字"

# 配置邮箱
git config --global user.email "your.email@example.com"

# 查看配置
git config --list

# 查看特定配置
git config user.name

# 配置默认编辑器
git config --global core.editor "code --wait"

# 配置默认分支名
git config --global init.defaultBranch main

# 配置换行符处理(Windows)
git config --global core.autocrlf true

# 配置换行符处理(Mac/Linux)
git config --global core.autocrlf input

# 配置别名
git config --global alias.st status
git config --global alias.co checkout
git config --global alias.br branch
git config --global alias.ci commit
                </pre>
            </div>
        </div>
        
        <h2>基本命令</h2>
        
        <div class="git-demo">
            <h3>仓库初始化</h3>
            <div class="code-block">
                <pre>
# 创建新仓库
git init

# 克隆远程仓库
git clone https://github.com/username/repo.git

# 克隆到指定目录
git clone https://github.com/username/repo.git my-project

# 克隆指定分支
git clone -b branch-name https://github.com/username/repo.git
                </pre>
            </div>
        </div>
        
        <div class="git-demo">
            <h3>文件操作</h3>
            <div class="code-block">
                <pre>
# 查看状态
git status

# 查看简洁状态
git status -s

# 添加文件到暂存区
git add filename

# 添加所有文件
git add .

# 添加所有修改的文件
git add -u

# 添加所有文件(包括删除)
git add -A

# 删除文件
git rm filename

# 删除文件(保留本地)
git rm --cached filename

# 重命名文件
git mv oldname newname

# 撤销修改
git checkout -- filename

# 撤销暂存
git reset HEAD filename
                </pre>
            </div>
        </div>
        
        <div class="git-demo">
            <h3>提交更改</h3>
            <div class="code-block">
                <pre>
# 提交更改
git commit -m "提交说明"

# 提交所有更改
git commit -am "提交说明"

# 修改最后一次提交
git commit --amend -m "新的提交说明"

# 查看提交历史
git log

# 查看简洁历史
git log --oneline

# 查看图形化历史
git log --graph --oneline --all

# 查看最近N次提交
git log -n 5

# 查看文件变更历史
git log --follow filename

# 查看提交差异
git show commit-hash
                </pre>
            </div>
        </div>
        
        <h2>Git工作流程</h2>
        
        <div class="git-demo">
            <h3>基本工作流程</h3>
            <div class="code-block">
                <pre>
工作区(Working Directory)
    ↓ git add
暂存区(Staging Area)
    ↓ git commit
本地仓库(Local Repository)
    ↓ git push
远程仓库(Remote Repository)
                </pre>
            </div>
        </div>
        
        <h2>常用命令速查表</h2>
        
        <table class="command-table">
            <thead>
                <tr>
                    <th>命令</th>
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><code>git init</code></td>
                    <td>初始化仓库</td>
                </tr>
                <tr>
                    <td><code>git clone</code></td>
                    <td>克隆远程仓库</td>
                </tr>
                <tr>
                    <td><code>git status</code></td>
                    <td>查看状态</td>
                </tr>
                <tr>
                    <td><code>git add</code></td>
                    <td>添加到暂存区</td>
                </tr>
                <tr>
                    <td><code>git commit</code></td>
                    <td>提交更改</td>
                </tr>
                <tr>
                    <td><code>git log</code></td>
                    <td>查看提交历史</td>
                </tr>
                <tr>
                    <td><code>git diff</code></td>
                    <td>查看差异</td>
                </tr>
                <tr>
                    <td><code>git reset</code></td>
                    <td>撤销更改</td>
                </tr>
                <tr>
                    <td><code>git rm</code></td>
                    <td>删除文件</td>
                </tr>
                <tr>
                    <td><code>git mv</code></td>
                    <td>重命名文件</td>
                </tr>
            </tbody>
        </table>
        
        <div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
            <strong>东巴文提示:</strong>Git是现代开发必备的版本控制工具。从基本命令开始,逐步掌握分支管理、远程协作等高级功能,能大幅提高开发效率和代码质量。
        </div>
    </div>
</body>
</html>

分支管理

分支是Git最强大的功能之一,合理的分支管理能让团队协作更加高效,代码管理更加清晰。

分支操作

<!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 {
            font-family: 'Segoe UI', sans-serif;
            padding: 20px;
            background: #f5f5f5;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
        }
        
        h1 {
            color: #667eea;
            margin-bottom: 20px;
        }
        
        h2 {
            color: #764ba2;
            margin: 30px 0 15px;
            border-left: 4px solid #764ba2;
            padding-left: 15px;
        }
        
        .branch-demo {
            background: #f8f9fa;
            padding: 20px;
            border: 2px solid #ddd;
            margin: 15px 0;
            border-radius: 10px;
        }
        
        .branch-demo h3 {
            color: #667eea;
            margin-bottom: 10px;
        }
        
        .code-block {
            background: #2d2d2d;
            color: #f8f8f2;
            padding: 15px;
            border-radius: 5px;
            overflow-x: auto;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>分支管理</h1>
        
        <h2>分支操作</h2>
        
        <div class="branch-demo">
            <h3>创建分支</h3>
            <div class="code-block">
                <pre>
# 查看分支
git branch

# 查看所有分支(包括远程)
git branch -a

# 创建分支
git branch feature-login

# 切换分支
git checkout feature-login

# 创建并切换分支
git checkout -b feature-login

# 基于指定提交创建分支
git branch feature-login commit-hash

# 基于远程分支创建分支
git checkout -b feature-login origin/feature-login

# 删除分支
git branch -d feature-login

# 强制删除分支
git branch -D feature-login

# 删除远程分支
git push origin --delete feature-login

# 重命名分支
git branch -m old-name new-name

# 重命名当前分支
git branch -m new-name
                </pre>
            </div>
        </div>
        
        <h2>分支合并</h2>
        
        <div class="branch-demo">
            <h3>合并分支</h3>
            <div class="code-block">
                <pre>
# 合并指定分支到当前分支
git merge feature-login

# 合并分支(不使用快进模式)
git merge --no-ff feature-login

# 合并分支(压缩提交)
git merge --squash feature-login

# 查看合并状态
git status

# 中止合并
git merge --abort

# 解决冲突后继续合并
git add .
git commit -m "解决合并冲突"
                </pre>
            </div>
        </div>
        
        <div class="branch-demo">
            <h3>解决冲突</h3>
            <div class="code-block">
                <pre>
# 冲突标记
&lt;&lt;&lt;&lt;&lt;&lt;&lt; HEAD
当前分支的内容
=======
要合并分支的内容
&gt;&gt;&gt;&gt;&gt;&gt;&gt; feature-login

# 解决冲突步骤:
1. 打开冲突文件
2. 找到冲突标记
3. 手动编辑解决冲突
4. 删除冲突标记
5. 保存文件
6. git add filename
7. git commit -m "解决冲突"

# 查看冲突文件
git diff --name-only --diff-filter=U

# 使用图形化工具解决冲突
git mergetool
                </pre>
            </div>
        </div>
        
        <h2>分支策略</h2>
        
        <div class="branch-demo">
            <h3>Git Flow工作流</h3>
            <div class="code-block">
                <pre>
# 主分支
master/main - 生产环境代码
develop - 开发环境代码

# 支持分支
feature/* - 功能分支
release/* - 发布分支
hotfix/* - 热修复分支

# 功能分支工作流
# 1. 从develop创建feature分支
git checkout -b feature/login develop

# 2. 开发功能
git add .
git commit -m "实现登录功能"

# 3. 合并回develop
git checkout develop
git merge --no-ff feature/login

# 4. 删除feature分支
git branch -d feature/login

# 发布分支工作流
# 1. 从develop创建release分支
git checkout -b release/1.0.0 develop

# 2. 修复bug和准备发布
git commit -m "准备发布1.0.0版本"

# 3. 合并到master和develop
git checkout master
git merge --no-ff release/1.0.0
git tag -a v1.0.0 -m "版本1.0.0"

git checkout develop
git merge --no-ff release/1.0.0

# 4. 删除release分支
git branch -d release/1.0.0

# 热修复分支工作流
# 1. 从master创建hotfix分支
git checkout -b hotfix/1.0.1 master

# 2. 修复bug
git commit -m "修复登录bug"

# 3. 合并到master和develop
git checkout master
git merge --no-ff hotfix/1.0.1
git tag -a v1.0.1 -m "版本1.0.1"

git checkout develop
git merge --no-ff hotfix/1.0.1

# 4. 删除hotfix分支
git branch -d hotfix/1.0.1
                </pre>
            </div>
        </div>
        
        <div class="branch-demo">
            <h3>GitHub Flow工作流</h3>
            <div class="code-block">
                <pre>
# 更简单的工作流,适合持续部署

# 1. 从master创建分支
git checkout -b feature-login master

# 2. 开发功能
git add .
git commit -m "实现登录功能"

# 3. 推送到远程
git push origin feature-login

# 4. 创建Pull Request
# 在GitHub上创建PR,进行代码审查

# 5. 合并到master
# 在GitHub上合并PR

# 6. 部署到生产环境
# 自动部署或手动部署
                </pre>
            </div>
        </div>
        
        <h2>分支最佳实践</h2>
        
        <div class="branch-demo">
            <h3>命名规范</h3>
            <div class="code-block">
                <pre>
# 功能分支
feature/功能名称
例如: feature/user-login, feature/shopping-cart

# 修复分支
fix/bug名称
例如: fix/login-error, fix/payment-issue

# 发布分支
release/版本号
例如: release/1.0.0, release/2.1.0

# 热修复分支
hotfix/版本号
例如: hotfix/1.0.1, hotfix/2.1.1

# 实验分支
experiment/实验名称
例如: experiment/new-algorithm
                </pre>
            </div>
        </div>
        
        <div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
            <strong>东巴文提示:</strong>合理的分支策略能让团队协作更加高效。根据团队规模和项目需求选择合适的工作流,制定清晰的分支命名规范和合并规则。
        </div>
    </div>
</body>
</html>

远程仓库

远程仓库是团队协作的核心,掌握远程仓库的操作能实现多人协作开发。

远程操作

<!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 {
            font-family: 'Segoe UI', sans-serif;
            padding: 20px;
            background: #f5f5f5;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
        }
        
        h1 {
            color: #667eea;
            margin-bottom: 20px;
        }
        
        h2 {
            color: #764ba2;
            margin: 30px 0 15px;
            border-left: 4px solid #764ba2;
            padding-left: 15px;
        }
        
        .remote-demo {
            background: #f8f9fa;
            padding: 20px;
            border: 2px solid #ddd;
            margin: 15px 0;
            border-radius: 10px;
        }
        
        .remote-demo h3 {
            color: #667eea;
            margin-bottom: 10px;
        }
        
        .code-block {
            background: #2d2d2d;
            color: #f8f8f2;
            padding: 15px;
            border-radius: 5px;
            overflow-x: auto;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>远程仓库</h1>
        
        <h2>远程操作</h2>
        
        <div class="remote-demo">
            <h3>管理远程仓库</h3>
            <div class="code-block">
                <pre>
# 查看远程仓库
git remote

# 查看远程仓库详细信息
git remote -v

# 添加远程仓库
git remote add origin https://github.com/username/repo.git

# 添加多个远程仓库
git remote add upstream https://github.com/original/repo.git

# 修改远程仓库URL
git remote set-url origin https://github.com/username/new-repo.git

# 删除远程仓库
git remote remove origin

# 重命名远程仓库
git remote rename old-name new-name

# 查看远程仓库信息
git remote show origin
                </pre>
            </div>
        </div>
        
        <h2>推送和拉取</h2>
        
        <div class="remote-demo">
            <h3>推送代码</h3>
            <div class="code-block">
                <pre>
# 推送到远程仓库
git push origin master

# 推送并设置上游分支
git push -u origin master

# 推送所有分支
git push --all origin

# 推送标签
git push origin v1.0.0

# 推送所有标签
git push --tags

# 强制推送(谨慎使用)
git push -f origin master

# 删除远程分支
git push origin --delete feature-login
                </pre>
            </div>
        </div>
        
        <div class="remote-demo">
            <h3>拉取代码</h3>
            <div class="code-block">
                <pre>
# 拉取并合并
git pull origin master

# 拉取并变基
git pull --rebase origin master

# 拉取所有分支
git pull --all

# 获取远程更新(不合并)
git fetch origin

# 获取所有远程更新
git fetch --all

# 查看远程分支
git branch -r

# 查看所有分支
git branch -a

# 跟踪远程分支
git checkout --track origin/feature-login

# 设置上游分支
git branch -u origin/feature-login
                </pre>
            </div>
        </div>
        
        <h2>协作工作流</h2>
        
        <div class="remote-demo">
            <h3>Fork和Pull Request</h3>
            <div class="code-block">
                <pre>
# 1. Fork项目
# 在GitHub上点击Fork按钮

# 2. 克隆Fork的仓库
git clone https://github.com/your-username/repo.git

# 3. 添加上游仓库
git remote add upstream https://github.com/original/repo.git

# 4. 创建功能分支
git checkout -b feature-new-function

# 5. 开发功能
git add .
git commit -m "添加新功能"

# 6. 推送到Fork仓库
git push origin feature-new-function

# 7. 创建Pull Request
# 在GitHub上创建PR

# 8. 同步上游更新
git fetch upstream
git checkout master
git merge upstream/master

# 9. 更新Fork仓库
git push origin master
                </pre>
            </div>
        </div>
        
        <div class="remote-demo">
            <h3>代码审查</h3>
            <div class="code-block">
                <pre>
# 拉取PR代码进行审查
git fetch origin pull/123/head:pr-123
git checkout pr-123

# 查看PR差异
git diff master...pr-123

# 审查后切换回主分支
git checkout master

# 删除PR分支
git branch -D pr-123

# 使用GitHub CLI审查PR
gh pr checkout 123
gh pr review 123 --approve
gh pr review 123 --request-changes
                </pre>
            </div>
        </div>
        
        <h2>SSH密钥配置</h2>
        
        <div class="remote-demo">
            <h3>生成SSH密钥</h3>
            <div class="code-block">
                <pre>
# 生成SSH密钥
ssh-keygen -t rsa -b 4096 -C "your.email@example.com"

# 按Enter使用默认路径
# 输入密码(可选)

# 启动SSH代理
eval "$(ssh-agent -s)"

# 添加SSH密钥到代理
ssh-add ~/.ssh/id_rsa

# 查看公钥
cat ~/.ssh/id_rsa.pub

# 复制公钥,添加到GitHub/GitLab
# Settings → SSH and GPG keys → New SSH key

# 测试SSH连接
ssh -T git@github.com

# 使用SSH URL克隆仓库
git clone git@github.com:username/repo.git

# 修改远程仓库URL为SSH
git remote set-url origin git@github.com:username/repo.git
                </pre>
            </div>
        </div>
        
        <div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
            <strong>东巴文提示:</strong>远程仓库是团队协作的核心。掌握推送、拉取、分支管理等操作,熟悉Fork和Pull Request工作流,能高效参与开源项目和团队开发。
        </div>
    </div>
</body>
</html>

学习检验

完成本章学习后,请尝试回答以下问题:

选择题: 以下哪个命令用于查看Git配置信息?
- A. git config
- B. git status
- C. git log
- D. git diff
填空题: 创建并切换分支的命令是____。
简答题: Git Flow工作流包含哪些类型的分支?各自的作用是什么?
实践题: 创建一个Git仓库,完成以下操作:
- 初始化仓库
- 创建README.md文件并提交
- 创建feature分支
- 在feature分支上修改文件并提交
- 合并feature分支到master分支
应用题: 在GitHub上Fork一个开源项目,创建功能分支,修改代码,提交Pull Request。

上一章：开发工具

下一章：包管理器