# Web开发基础

LLMS index: [llms.txt](/wikis/llms.txt)

---

# Web开发基础

### 1. Web通信
Web通信是Web应用的核心，主要涉及客户端（通常是浏览器）与服务器之间的交互。其核心概念和框架如下：

#### **1.1 HTTP协议**
- **定义**：HTTP（HyperText Transfer Protocol，超文本传输协议）是Web通信的基础协议，用于定义客户端和服务器之间请求和响应的格式。
- **请求（HTTP Request）**：
  - **请求方法**：常用的有GET（获取资源）、POST（提交数据）、PUT（更新资源）、DELETE（删除资源）。
  - **参数传递**：可以通过路径（如`/info/aaa`）、查询字符串（如`?username=aaa`）或请求体（如JSON格式）传递数据。
  - **身份验证**：通过Cookies等方式实现用户身份验证，但也存在安全性问题（如第三方Cookies）。
- **响应（HTTP Response）**：
  - **状态码**：用于表示请求的结果，如200（成功）、400（请求错误）、403（禁止访问）、404（未找到）、500（服务器错误）。
  - **正文**：响应中可以携带文件或数据，如HTML页面、图片等。
- **HTTPS**：HTTP的加密版本，通过SSL/TLS协议实现数据加密传输，解决HTTP的不安全问题（如信息明文传输、无法验证身份等）。

#### **1.2 请求与响应流程**
以网上选课系统为例：
1. 用户通过浏览器访问选课系统（GET请求）。
2. 服务器返回选课页面（200 OK状态码）。
3. 用户输入用户名和密码并提交（POST请求）。
4. 服务器验证用户信息，返回课表数据（响应正文）。

#### **1.3 调试工具**
- **Postman/Apifox**：用于手动发送HTTP请求，测试API接口。

---

### 2. Web页面
Web页面是用户通过浏览器访问的内容，由HTML、CSS和JavaScript组成，统称为“前端三件套”。

#### **2.1 HTML（HyperText Markup Language）**
- **定义**：HTML是用于描述网页内容的标记语言，通过标签定义网页的结构和内容。
- **常用标签**：
  - **文本标签**：`<h1>-<h6>`（标题）、`<p>`（段落）、`<ul>`（无序列表）、`<ol>`（有序列表）、`<li>`（列表项）。
  - **图像和链接**：`<img>`（插入图片）、`<a>`（超链接）。
  - **容器标签**：`<div>`（分区容器）、`<span>`（文本片段）。
  - **其他**：`<header>`（页眉）、`<style>`（内部样式表）。
- **属性**：HTML标签可以有属性，如`class`（类名）、`id`（唯一标识符）、`style`（样式）、`src`（外部资源链接）。

#### **2.2 CSS（Cascading Style Sheets）**
- **定义**：CSS用于美化网页，定义HTML元素的样式。
- **使用方式**：
  - **内联样式**：通过`style`属性直接在HTML标签中定义样式。
  - **内部样式表**：在`<head>`中使用`<style>`标签定义样式。
  - **外部样式表**：将样式定义在单独的`.css`文件中，通过`<link>`标签引入。
- **层叠性（Cascading）**：当多个样式定义冲突时，优先级顺序为：内联样式 > 内部样式表 > 外部样式表。

#### **2.3 JavaScript（JS）**
- **定义**：JavaScript是一种脚本语言，用于实现网页的动态交互。
- **功能**：
  - 操纵HTML元素（如修改样式、内容）。
  - 响应用户事件（如点击按钮）。
  - 与服务器交互（如通过AJAX动态加载数据）。
- **使用方式**：
  - **嵌入HTML**：通过`<script>`标签直接写在HTML文件中。
  - **外部脚本**：将JavaScript代码写在单独的`.js`文件中，通过`<script src="...">`引入。

---

### 3. Web应用基础
Web应用是基于Web技术构建的应用程序，分为静态网页和动态网页，采用前后端分离的开发模式。

#### **3.1 静态网页**
- **定义**：内容固定不变的网页，服务器只需查找并返回请求的文件。
- **特点**：
  - 简单，无需服务器端逻辑处理。
  - 适合内容不经常更新的网站（如个人博客）。
- **服务器端**：使用通用的Web服务器软件（如Apache、Nginx）即可满足需求。

#### **3.2 动态网页**
- **定义**：内容根据用户请求动态生成的网页。
- **特点**：
  - 服务器端需要处理逻辑（如从数据库读取数据）。
  - 内容根据用户需求动态变化（如用户信息、搜索结果）。
- **实现方式**：
  - 服务器端使用模板文件，根据请求内容填充数据后返回。
  - 常用技术栈：PHP、Node.js、Python（Django/Flask）等。

#### **3.3 前后端分离**
- **定义**：将前端（用户界面）和后端（服务器逻辑）分离，各自独立开发。
- **优势**：
  - **开发效率**：前端和后端可以并行开发。
  - **用户体验**：前端可以快速响应用户操作，后端专注于数据处理。
  - **可维护性**：代码结构清晰，便于维护和扩展。
- **实现方式**：
  - 前端通过API（应用程序接口）与后端通信。
  - 前端框架（如React、Vue.js）负责页面渲染，后端框架（如Spring Boot、Express.js）提供数据服务。
- **安全问题**：前端代码可能被篡改，导致向后端发送恶意请求。

#### **3.4 持久化存储**
- **定义**：Web应用需要存储数据，以便在用户请求时提供。
- **存储方式**：
  - **服务器端存储**：使用数据库（如MySQL、MongoDB）保存用户数据、历史记录等。
  - **客户端存储**：使用Cookies、LocalStorage等技术保存用户偏好、登录状态等。

---

### 4. 学习路径与总结
- **Web开发基础**：掌握HTML、CSS和JavaScript，理解HTTP协议和Web通信流程。
- **前后端分离开发**：学习前端框架（如React、Vue.js）和后端框架（如Node.js、Django）。
- **数据存储**：学习数据库技术（如SQL、NoSQL）和API开发。
- **工具**：掌握浏览器开发者工具（如Chrome DevTools）、API测试工具（如Postman）。
