Merge pull request #78 from chenerApple/master

UbeCc · web-flow · commit 7a48e43087ec · 2025-03-04T22:39:41.000+08:00
web_foundation
diff --git a/docs/frontend/web b/docs/frontend/web
@@ -0,0 +1 @@
+
diff --git a/docs/frontend/web_foundation/Readme.md b/docs/frontend/web_foundation/Readme.md
@@ -0,0 +1,5 @@
+Web Foudation
+html.md
+css.md
+javascript.md
+hw.pdf
diff --git a/docs/frontend/web_foundation/css.md b/docs/frontend/web_foundation/css.md
@@ -0,0 +1,60 @@
+
+
+### **CSS（层叠样式表）**
+CSS 是一种用于控制网页样式和布局的语言，它可以让开发者定义网页的外观，例如字体、颜色、间距、布局等。CSS 的主要作用是将HTML文档的结构与样式分离，从而提高开发效率和页面的可维护性。
+
+#### **1. CSS 的作用**
+- **样式设计**：定义字体、颜色、背景、边框等视觉元素。
+- **布局控制**：通过CSS的布局模型（如Flexbox、Grid、定位等）来安排页面元素的位置。
+- **响应式设计**：通过媒体查询（Media Queries）实现不同设备上的自适应布局。
+- **动画和交互**：创建简单的动画效果（如过渡、关键帧动画）和交互反馈（如悬停效果）。
+
+#### **2. CSS 的基本语法**
+CSS 的基本语法由选择器和声明块组成：
+```css
+选择器 {
+    属性1: 值1;
+    属性2: 值2;
+    ...
+}
+```
+- **选择器**：用于选择页面中的HTML元素，例如类选择器（`.class`）、ID选择器（`#id`）、标签选择器（`div`）等。
+- **声明块**：包含一系列属性和值，用于定义样式。
+
+#### **3. 示例代码**
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS 示例</title>
+    <style>
+        /* 样式定义 */
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f0f0f0;
+            color: #333;
+        }
+        .box {
+            width: 200px;
+            height: 200px;
+            background-color: #4CAF50;
+            color: white;
+            text-align: center;
+            line-height: 200px;
+            border-radius: 10px;
+            transition: transform 0.3s ease;
+        }
+        .box:hover {
+            transform: scale(1.1);
+        }
+    </style>
+</head>
+<body>
+    <div class="box">Hover over me</div>
+</body>
+</html>
+```
+在这个示例中，CSS 定义了一个绿色的盒子，并在鼠标悬停时放大。
+
diff --git a/docs/frontend/web_foundation/foundation.md b/docs/frontend/web_foundation/foundation.md
@@ -0,0 +1,106 @@
+
+
+# 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）。
+
diff --git a/docs/frontend/web_foundation/html.md b/docs/frontend/web_foundation/html.md
@@ -0,0 +1,148 @@
+## HTML
+
+### 1. HTML（HyperText Markup Language）
+
+#### **1.1 HTML的定义与作用**
+HTML是用于构建网页结构的标记语言。它通过一系列的标签（Tags）定义网页的内容和结构，告诉浏览器如何显示页面内容。HTML文件以`.html`为扩展名，通常包含以下基本结构：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document Title</title>
+</head>
+<body>
+    <h1>Welcome to My Web Page</h1>
+    <p>This is a paragraph of text.</p>
+</body>
+</html>
+```
+
+#### **1.2 HTML文档结构**
+1. **`<!DOCTYPE html>`**：
+   - 声明文档类型，告诉浏览器这是一个HTML5文档。
+2. **`<html>`**：
+   - 根元素，包含整个HTML文档的内容。
+   - `lang`属性指定文档的语言（如`en`表示英语）。
+3. **`<head>`**：
+   - 包含文档的元数据（Metadata），这些内容不会直接显示在页面上。
+   - 常见的元数据包括：
+     - **`<meta charset="UTF-8">`**：指定字符编码为UTF-8。
+     - **`<meta name="viewport" content="width=device-width, initial-scale=1.0">`**：优化移动设备的显示效果。
+     - **`<title>`**：定义文档的标题，显示在浏览器的标题栏或标签页上。
+     - **`<link>`**：用于引入外部资源，如CSS文件。
+     - **`<script>`**：用于引入外部JavaScript文件或定义内联脚本。
+4. **`<body>`**：
+   - 包含用户可见的内容，如文本、图像、按钮等。
+
+#### **1.3 常用HTML标签**
+HTML标签分为块级标签（Block-level）和行内标签（Inline-level）。
+
+##### **1.3.1 文本标签**
+- **标题标签**：`<h1>`到`<h6>`，定义不同级别的标题。
+  ```html
+  <h1>This is a Level 1 Heading</h1>
+  <h2>This is a Level 2 Heading</h2>
+  ```
+- **段落标签**：`<p>`，定义段落。
+  ```html
+  <p>This is a paragraph of text.</p>
+  ```
+- **文本修饰**：
+  - **`<strong>`**：加粗文本。
+  - **`<em>`**：斜体文本。
+  - **`<u>`**：下划线文本。
+  - **`<s>`**：删除线文本。
+  ```html
+  <p>This is <strong>important</strong> text.</p>
+  <p>This is <em>emphasized</em> text.</p>
+  ```
+
+##### **1.3.2 列表标签**
+- **无序列表**：`<ul>`，列表项用`<li>`表示。
+  ```html
+  <ul>
+      <li>Item 1</li>
+      <li>Item 2</li>
+      <li>Item 3</li>
+  </ul>
+  ```
+- **有序列表**：`<ol>`，列表项用`<li>`表示。
+  ```html
+  <ol>
+      <li>First Item</li>
+      <li>Second Item</li>
+      <li>Third Item</li>
+  </ol>
+  ```
+
+##### **1.3.3 图像与链接**
+- **图像**：`<img>`，通过`src`属性指定图像路径，`alt`属性提供图像的描述。
+  ```html
+  <img src="image.jpg" alt="Description of Image">
+  ```
+- **超链接**：`<a>`，通过`href`属性指定链接目标。
+  ```html
+  <a href="https://example.com">Visit Example</a>
+  ```
+
+##### **1.3.4 表格**
+- **表格**：`<table>`，通过`<tr>`定义行，`<td>`定义单元格。
+  ```html
+  <table border="1">
+      <tr>
+          <th>Header 1</th>
+          <th>Header 2</th>
+      </tr>
+      <tr>
+          <td>Row 1, Cell 1</td>
+          <td>Row 1, Cell 2</td>
+      </tr>
+      <tr>
+          <td>Row 2, Cell 1</td>
+          <td>Row 2, Cell 2</td>
+      </tr>
+  </table>
+  ```
+
+##### **1.3.5 表单**
+- **表单**：`<form>`，用于收集用户输入。
+  ```html
+  <form action="/submit" method="post">
+      <label for="username">Username:</label>
+      <input type="text" id="username" name="username"><br><br>
+      <label for="password">Password:</label>
+      <input type="password" id="password" name="password"><br><br>
+      <input type="submit" value="Submit">
+  </form>
+  ```
+
+##### **1.3.6 容器标签**
+- **`<div>`**：块级容器，用于布局。
+- **`<span>`**：行内容器，用于文本包装。
+  ```html
+  <div class="container">
+      <h1>Welcome</h1>
+      <p>This is a paragraph inside a div.</p>
+  </div>
+  ```
+
+#### **1.4 HTML属性**
+HTML标签可以有属性，用于提供附加信息。属性以“名称-值”对的形式出现，放在开始标签中。常见的属性包括：
+- **`class`**：为元素定义类名，方便CSS样式化。
+- **`id`**：为元素定义唯一标识符，常用于JavaScript操作。
+- **`style`**：直接在标签中定义样式。
+- **`src`**：用于链接外部资源（如图片、脚本）。
+- **`href`**：用于指定超链接的目标URL。
+
+#### **1.5 HTML语义化**
+HTML5引入了许多语义化标签，用于更清晰地定义页面结构，提高可读性和搜索引擎优化（SEO）。常见的语义化标签包括：
+- **`<header>`**：定义页眉。
+- **`<footer>`**：定义页脚。
+- **`<nav>`**：定义导航链接。
+- **`<article>`**：定义独立的文章内容。
+- **`<section>`**：定义文档中的一个区域。
+- **`<aside>`**：定义与页面内容相关的辅助信息。
+
diff --git a/docs/frontend/web_foundation/hw.pdf b/docs/frontend/web_foundation/hw.pdf
diff --git a/docs/frontend/web_foundation/javascript.md b/docs/frontend/web_foundation/javascript.md
@@ -0,0 +1,54 @@
+
+### **JavaScript**
+JavaScript 是一种运行在浏览器中的脚本语言，用于实现网页的交互功能。它可以让网页“动起来”，例如响应用户输入、操作DOM（文档对象模型）、发送和接收数据等。
+
+#### **1. JavaScript 的作用**
+- **交互功能**：实现按钮点击、表单验证、动态内容更新等。
+- **DOM 操作**：动态修改HTML元素的属性、内容和样式。
+- **事件处理**：监听和响应用户操作（如点击、键盘输入、鼠标移动等）。
+- **异步通信（AJAX）**：在不刷新页面的情况下与服务器通信，实现动态加载数据。
+- **框架和库**：通过Vue.js、React.js、jQuery等框架和库，简化开发流程。
+
+#### **2. JavaScript 的基本语法**
+JavaScript 是一种基于对象的语言，支持函数式编程和面向对象编程。以下是基本语法：
+```javascript
+// 变量声明
+let name = "Kimi";
+const age = 25;
+
+// 函数定义
+function greet() {
+    alert("Hello, world!");
+}
+
+// 事件监听
+document.getElementById("myButton").addEventListener("click", function() {
+    alert("Button clicked!");
+});
+```
+
+#### **3. 示例代码**
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>JavaScript 示例</title>
+</head>
+<body>
+    <button id="myButton">Click me</button>
+    <script>
+        // 获取按钮元素
+        const button = document.getElementById("myButton");
+
+        // 添加点击事件监听
+        button.addEventListener("click", function() {
+            alert("Button clicked!");
+        });
+    </script>
+</body>
+</html>
+```
+在这个示例中，JavaScript 为按钮添加了一个点击事件，点击按钮后会弹出一个对话框。
+

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +Web Foudation
 +html.md
 +css.md
 +javascript.md
 +hw.pdf