WEB开发

Posted Jan 25, 2026 Updated Feb 6, 2026

By 何翌闻

17 min read

WEB开发

把client想象成一台计算机，server想象成另一台计算机，你要做的就是向server发送请求，比如：GET facebook.com

我们实际上接收到的是HTML文件，CSS文件负责为HTML添加样式，JS让这些文件实现交互功能，此外还有一些assets

GIT BASICS

我们如何协作写代码

我们用最简单的假设，A和B都有100个文件，他们同时修改了其中的大量文件，难道需要其中的一个人进行逐条检验和复制粘贴吗？那如果还有各种ROLLBACK呢？

总结一下问题：

代码库独立
合并自己和别人的版本
跟踪版本
知道哪个版本是最新的

Git的核心功能：跟踪所做的更改，存储添加和删除等更新的内容信息

如何使用Git

workspace：工作区
index/stage：暂存区
repository：仓库区（本地仓库）
remote：远程仓库

基础指令：ls cd mkdir

git init：创建一个新的git仓库，Git通过.git文件追踪所有的变更

假设我们已经有一些修改，然后想把这些更改打包并添加到提交历史中时，就会使用暂存区（staging area），暂存区放置所有想要打包到提交中的代码更改的地方

git add example.py：就是把example.py的所有更改添加到暂存区，使用git add .添加所有更改

git commit -m：提交并且附上描述该提交内容的信息，清空暂存区

git status：查看当前状态

git log：显示历史记录中的所有提交

git diff：展示差异

每一次提交都对应一个unique ID

  
heyween@heyiwendeMacBook-Pro WEBLAB % git log
commit 8aec1aab4e5e8a2c3fcf2261cc6ccaa12b54c206 (HEAD -> main)
Author: Yiwen He(何翌闻) <2548124362@qq.com>
Date:   Sat Jan 31 10:43:31 2026 +0800

    add a new file

Git Branching

每个圆圈都代表一次提交，都有一个unique ID，那也就代表了代码的一个版本，就像某个时间对代码状态的一次快照

为了能够同时处理不同的任务，就可以进行分支操作

git checkout name：从一个分支切换到另一个已经存在的分支name

git checkout -b name：创建并且切换到分支name

git branch：展示所有分支

Git Merging

merge是指将一个分支上的提交历史整合到另一个分支中。 Git 的提交历史可以看作一张 有向无环图（DAG），每个提交节点指向其父提交。

当执行合并操作时，Git 会基于两个分支的最近公共祖先（LCA, common ancestor），对比并整合两条提交路径上的变更。

基本操作

git merge name 在当前分支上，将分支 name 的提交合并进来。

合并类型

Fast-forward merge（快进合并） 当前分支没有新的提交，目标分支位于其后续提交路径上。合并时不产生新的提交，仅移动分支指针。
Three-way merge（三方合并） 两个分支在公共祖先之后均有独立提交。 Git 使用三方合并算法（公共祖先、当前分支、目标分支）生成一个新的 merge commit。
Merge conflict（合并冲突） 若同一文件的同一位置在两个分支中被修改，Git 无法自动合并。需要人工解决冲突并提交合并结果。

冲突处理流程

git status：查看冲突文件
手动修改冲突标记区域
git add <file>：标记冲突已解决
git commit：完成合并提交

合并提交（Merge Commit）

合并提交是一个有两个父节点的提交，用于显式记录分支的汇合关系。它保留了完整的分支结构和历史信息。

GitHub

GitHub 本质上是一个 远程 Git 仓库（remote repository）。以下命令用于 本地仓库 ↔ 远程仓库 之间的数据同步。

git clone

从远程仓库复制一个完整的本地仓库。

git clone <repo_url>

下载所有提交历史
自动创建 origin 远程
默认切换到主分支（main / master）

git remote

管理远程仓库。

git remote -v

显示已配置的远程仓库及其 URL。

git remote add origin <url>

添加远程仓库。

git fetch

从远程仓库 获取最新提交信息，但 不修改当前分支。

git fetch origin

只更新远程跟踪分支（如 origin/main）
不影响工作区和当前分支
安全、只读

git pull

从远程仓库拉取并合并到当前分支。

git pull origin main

等价于：

git fetch origin
git merge origin/main

会直接改变当前分支
可能产生 merge commit 或冲突

git push

将本地分支的提交推送到远程仓库。

git push origin main

前提条件：

本地分支历史必须是远程分支的快进
否则会被拒绝（需要先 pull）

git reset

移动当前分支指针，用于回退或重置状态。

git reset <commit>

常用模式：

--soft：只移动 HEAD，保留暂存区和工作区
--mixed（默认）：清空暂存区，保留工作区
--hard：清空暂存区和工作区（危险）

git reset vs git revert

reset：改历史（不安全，慎用于公共分支）
revert：新增一个反向提交（安全，推荐用于 main）

常见工作流

clone  → fetch → pull → commit → push

clone：第一次拿代码
fetch：只看远程更新
pull：拿并合
push：发给远程
reset：回退本地状态

HTML/CSS

HTML和CSS是前端两大核心工具，HTML全称超文本标记语言，是网络浏览器用来描述所浏览网页内容的一种语言，如果把网页比做一个完整的人，HTML就是支撑结构的骨架，而CSS（层叠样式表 Cascading Style Sheets）更像让网页更华丽的点缀

HTML

核心观点：HTML = Nested Boxes

“嵌套”规则避免了诸如<a><b></a></b>的格式

<html>    -> opening tag

   content goes here

</html>   -> closing tag

Basic Tags

<html>

<head

<body>

<h1>,<h2>,<h3>

<p>

<div>

<span>

Attributes

在opening tag后面添加attribute和value

<tagname abc = "xyz">

使用场景：

插入链接

<a href = "link here"> content </a>

插入图片

<img src = "image.gif"></img>
<img src = "image.gif" />

alt属性在用户由于一些原因看不到图片的时候也有对应的解释

div & span

div：块级容器（block-level）
span：行内容器（inline）

它们本身没有语义，唯一作用就是：包东西，并且方便 CSS / JS 操作

div

块级元素
默认：
- 独占一行
- 前后自动换行
可以包含：
- 几乎所有 HTML 元素（文本、图片、div、span、表单等）

常见用途

页面结构划分
作为布局容器
批量应用 CSS 样式

示例

  
<div>
  <h1>title</h1>
  <p>content</p>
</div>

渲染效果（逻辑上）：

[ div
    h1
    p
]

span

行内元素
默认：
- 不会换行
- 只占自身内容的宽度
只能包含：
- 文本或其他行内元素

常见用途

对局部文字或内容进行样式控制
精细化标注

示例

  
<p>
  这是一个
  <span style="color: red;">重要</span>
  的词
</p>

不要为了样式滥用 div / span，如果有有语义的标签，优先用其他的，div / span 是 “没语义的最后选择”

CSS

“层叠”指的是样式规则的运用方式，因为这些规则会根据编写的顺序相互覆盖，某些规则会优先于其他规则生效

核心观点： CSS = A List of Discriptions

selector {
   property : value;
   ...
}

建议使用class（类选择器）

  
<!DOCTYPE html>
<html>

<head>
    <title>Hello WEB</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="info">
        <p>this is a div sentence</p>
        <p>and we will use css here</p>
    </div>
</body>

</html>

  
.info {
    color: rebeccapurple;
    font-family: 'Courier New', Courier, monospace;
    font-size: 96pt;
}

这样，.info就对应了.html文件里的info块

另一种选择是使用ID

  
<div ID="unique">

  
#unique {
   
}

对比维度	class	id
是否唯一	❌ 不唯一	✅ 必须唯一
使用次数	可被多个元素使用	只能用于一个元素
主要用途	批量样式、分类	唯一标识、精确定位
CSS 选择器	`.className`	`#idName`
JS 获取方式	`document.querySelectorAll('.class')`	`document.getElementById('id')`
CSS 优先级	低	高
一个元素能否有多个	✅ 可以多个	❌ 只能一个
典型使用场景	列表项、按钮、卡片	header、main、modal

CSS层级关系

元素选择器div{...} <

class / 属性 / 伪类 .info{...} <

id #unique{...} <

行内样式（使用style，但是一般不用） <

!important

BEST PRACTICE : ONLY use classes for CSS styling!

JavaScript

Js：让一切工作的器官和肌肉，能够获取网页的内容并对其进行操作，使得网站在互动时能实时发生变化，和java有0个关系

数据类型：Boolean Number String Null Undefined

undefined：已经声明，但没赋值

null：没有值

使用 === 和 !==

为什么不用 == ? — 因为js会进行强制类型转换

用let定义变量，用驼峰命名法命名

js的对象更像python的字典

  
let person1 = {
    name: 'Alice',
    age: 30,
    city: 'New York'
};
let person2 = person1;
person2.age = 31;
console.log(person1.age);  // 31

person3 = { ...person1 };
person3.age = 32;
console.log(person1.age);  // 31 (unchanged)

function

(parameters) => {body}

函数是一等公民

  
const isPrime = (num) => {
    if (!Number.isInteger(num)) return false;
    if (num <= 1) return false;
    for (let i = 2; i <= Math.sqrt(num); i++) {
        if (num % i === 0) return false;
    }
    return true;
}

回调函数和数组

  
let arr = [1, 2, 3, 4, 5];
let squaredArr = arr.map(x => x * x);
console.log(squaredArr);  // [1, 4, 9, 16, 25]

let evenNumbers = arr.filter(x => x % 2 === 0);
console.log(evenNumbers);  // [2, 4]

React

React是js的一个库，将一系列JavaScript逻辑、HTML渲染和CSS样式打包在一起

  
import React, {useState} from "react";

const CommentReply = (props) => {
    // Function Logic
    return (
        //What you want to render (JSX)
    )
}

export default CommentReply;

核心：构造“伪html标签”作为React构建的基本单元，通过组件之间的依赖关系，实现组件的复用，本质上都是函数调用

props

props : information(inputs) passed down from a parent to a child component

在传递props时，子组件不能直接修改这些props，也不能从子组件传递回父组件

state

如何追踪网站的变化？

state是组件维护的某种信息，用state将props传递给子组件，一旦传递下去，子组件就能渲染出state中存储的内容

  
import React, {useState} from "react";

const CommentReply = (props) => {
    // Function Logic
    return (
        //What you want to render (JSX)
        <div className = "comment-text">
            <h5>HEYWEEN</h5>
            <p>This is a comment reply component!</p>
        </div>
    )
}

export default CommentReply;

实现抽象：

  
import React, {useState} from "react";

const CommentReply = (props) => {
    // Function Logic
    return (
        //What you want to render (JSX)
        <div className = "comment-text">
            <h5>{props.name}</h5>
            <p>{props.content}</p>
        </div>
    )
}

export default CommentReply;

JSX和HTML相似，其中一个区别在于，在JSX中，可以嵌入js代码以便于执行一些逻辑，如{props.name}

加入state：

  
import React, { useState } from "react";

const CommentReply = (props) => {
    // Function Logic
    const [isLiked, setIsLiked] = useState(false);
    return (
        //What you want to render (JSX)
        <div className="comment-text">
            <h5>{props.name}</h5>
            <p>{props.content}</p>
            <button
                onClick={() => {
                    setIsLiked(!isLiked);
                }}>
                {isLiked ? "Liked" : "Like"}
            </button>
        </div>
    )
}

export default CommentReply;

API/承诺

后段用于数据存储和数据处理，前端向后端发送请求，后段返回前端所需要的信息

C/S架构：服务器是存储所有信息的地方

如何向服务器发送请求？ — HTTP

HTTPS = HTTP Secure

HTTP(S) Methods : GET, POST, PUT, DELETE

状态码 status codes

404 NOT FOUND 输入错误网址资源已被移动

400 BAD REQUEST 错误设置查询参数

500 Internal Server Error 服务器出错

200 OK 请求成功发送

API

Application Program Interface 应用程序编程接口

本质上是一组由某个服务提供的端点，允许你向该服务发起请求以执行特定功能

WEB开发

笔记

This post is licensed under CC BY 4.0 by the author.

GIT BASICS

如何使用Git

Git Branching

Git Merging

基本操作

合并类型

冲突处理流程

合并提交（Merge Commit）

GitHub

git clone

git remote

git fetch

git pull

git push

git reset

git reset vs git revert

常见工作流

HTML/CSS

HTML

Basic Tags

Attributes

使用场景：

div & span

div

常见用途

示例

span

常见用途

示例

CSS

CSS层级关系

JavaScript

function

回调函数和数组

React

props

state

API/承诺

状态码 status codes

API

Trending Tags