docs(web): 更新javascript基础文档中函数部分的描述

添加函数声明格式说明并完善函数定义描述
Merge branch 'main' of https://gitea.simengweb.com/si-meng-spec/SiMengWebSite_Notes
2025-12-05 13:32:37 +08:00 · 2025-12-01 15:21:44 +08:00 · 2025-12-01 15:21:37 +08:00 · 2025-11-21 19:38:57 +08:00 · 2025-11-11 21:44:20 +08:00 · 2025-11-11 21:34:46 +08:00
14 changed files with 2203 additions and 250 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,4 @@ docs/.vuepress/dist
 .trae/
 .DS_Store
 *.log
+_publish/
--- a/build-and-publish.bat
+++ b/build-and-publish.bat
@@ -0,0 +1,133 @@
+@echo off
+setlocal EnableExtensions
+
+chcp 65001 >nul
+
+REM Paths and settings
+set "ROOT_DIR=%~dp0"
+set "PROJECT_DIR=%ROOT_DIR%"
+set "DIST_DIR=%PROJECT_DIR%docs\.vuepress\dist"
+set "PUBLISH_DIR=%PROJECT_DIR%_publish"
+set "REMOTE_URL=https://gitea.simengweb.com/si-meng-spec/build_notes_simengweb.git"
+set "BRANCH=main"
+
+REM Args
+set "LIGHT_FLAG=%~1"
+set "COMMIT_MSG=%~2"
+
+echo [Info] Working dir: %PROJECT_DIR%
+
+REM Pre-checks
+where npm >nul 2>&1
+if errorlevel 1 goto :npm_missing
+where git >nul 2>&1
+if errorlevel 1 goto :git_missing
+
+REM Install deps on first run
+if not exist "%PROJECT_DIR%node_modules" (
+  echo [Info] Installing deps ^(npm ci^)...
+  call npm ci
+  if errorlevel 1 goto :fail
+) else (
+  echo [Info] node_modules exists, skip install.
+)
+
+REM Light build mode
+if /I "%LIGHT_FLAG%"=="light" (
+  set "LIGHT_BUILD=1"
+  echo [Info] LIGHT_BUILD=1 enabled
+)
+
+set "NODE_OPTIONS=--max-old-space-size=4096"
+
+echo [Info] Building docs...
+call npm run docs:build
+if errorlevel 1 goto :fail
+
+if not exist "%DIST_DIR%" goto :no_dist
+
+REM Prepare publish repo
+if not exist "%PUBLISH_DIR%\.git" (
+  echo [Info] Cloning publish repo...
+  git clone "%REMOTE_URL%" "%PUBLISH_DIR%"
+  if errorlevel 1 goto :fail
+) else (
+  echo [Info] Updating publish repo...
+  pushd "%PUBLISH_DIR%"
+  git fetch --all
+  if errorlevel 1 goto :gitfail
+  git checkout "%BRANCH%"
+  if errorlevel 1 goto :gitfail
+  git reset --hard "origin/%BRANCH%"
+  if errorlevel 1 goto :gitfail
+  popd
+)
+
+echo [Info] Cleaning publish directory ^(keep .git^)...
+pushd "%PUBLISH_DIR%"
+for /f "delims=" %%F in ('dir /a /b') do (
+  if /I not "%%F"==".git" (
+    if exist "%%F" (
+      attrib -R "%%F" >nul 2>&1
+      rd /s /q "%%F" 2>nul
+      del /f /q "%%F" 2>nul
+    )
+  )
+)
+popd
+
+echo [Info] Copying dist to publish...
+robocopy "%DIST_DIR%" "%PUBLISH_DIR%" *.* /E /NFL /NDL /NP /NJH /NJS >nul
+if errorlevel 8 goto :fail
+
+pushd "%PUBLISH_DIR%"
+if defined GIT_USERNAME git config user.name "%GIT_USERNAME%"
+if defined GIT_EMAIL git config user.email "%GIT_EMAIL%"
+
+git add -A
+
+if "%COMMIT_MSG%"=="" set "COMMIT_MSG=Build: %DATE% %TIME%"
+
+set "HAS_CHANGES=1"
+git diff --cached --quiet
+if not errorlevel 1 set "HAS_CHANGES=0"
+
+if "%HAS_CHANGES%"=="0" (
+  echo [Info] No changes to commit; skipping push.
+) else (
+  git commit -m "%COMMIT_MSG%"
+  if errorlevel 1 (
+    popd
+    goto :fail
+  )
+  git push origin "%BRANCH%"
+  if errorlevel 1 (
+    popd
+    goto :fail
+  )
+  echo [Info] Pushed to %REMOTE_URL% ^(branch %BRANCH%^).
+)
+popd
+
+echo [Success] Build and publish done.
+exit /b 0
+
+:npm_missing
+echo [ERROR] npm not found. Please install Node.js.
+goto :fail
+
+:git_missing
+echo [ERROR] git not found. Please install Git.
+goto :fail
+
+:no_dist
+echo [ERROR] Dist directory not found: %DIST_DIR%
+goto :fail
+
+:gitfail
+echo [ERROR] Git operation failed.
+popd
+goto :fail
+
+:fail
+exit /b 1
--- a/docs/.vuepress/config.ts
+++ b/docs/.vuepress/config.ts
@@ -18,6 +18,8 @@ export default defineUserConfig({
  shouldPrefetch: false,

  theme: plumeTheme({
+    /* 站点域名，启动 SEO 优化 */
+    hostname: 'https://notes.simengweb.com',
    /* 博客文章页面链接前缀 */
    article: '/article/',

--- a/docs/.vuepress/notes.ts
+++ b/docs/.vuepress/notes.ts
@@ -104,7 +104,8 @@ const cryptography = defineNoteConfig({
    { text: "密码学基础", link: "/theory/cryptography/" },
    {
      text: "古典加密算法", prefix: "/theory", items: [
-        { text: "替换密码", link: "/theory/cryptography/substitution-ciphers/" }
+        { text: "替换密码", link: "/theory/cryptography/substitution-ciphers/" },
+        { text: "置换密码", link: "/theory/cryptography/permutation-encryption/" },
      ]
    },
  ]
@@ -149,6 +150,9 @@ const web = defineNoteConfig({
    {
      text: "基础知识", prefix: "/basic-syntax", items: [
        { text: "Web 前端基础讲解", link: "/programming/web/basic-syntax/html-css-js/" },
+        { text: "HTML 常用标签与属性", link: "/programming/web/basic-syntax/html-tags-attributes/" },
+        { text: "HTML 列表与语义布局", link: "/programming/web/basic-syntax/html-lists-and-semantic-layout/" },
+        { text: "JavaScript 基础知识", link: "/programming/web/basic-syntax/javascript-basics/" },
      ],
    },
  ]
--- a/docs/blog/collect/free_model_pai.md
+++ b/docs/blog/collect/free_model_pai.md
@@ -0,0 +1,249 @@
+---
+title: 便宜免费的大模型 API 整合 （ 2025年11月11日 ）
+createTime: 2025/11/11 13:54:02
+permalink: /article/free_model_api/
+---
+
+## 免费的大模型 API 整合
+
+嗨～如果你在找既温柔又省荷包的小模型，就把它们悄悄收进这里吧！它们也许不是夜空最亮的那颗星，却能在摘要、划重点、轻声问答的小角落里，给你软软又稳稳的陪伴哦～
+
+
+### 百度千帆大模型平台
+
+先从千帆开始吧～下面是常用模型的参考价格：
+
+| 模型名称 | 版本名称 | 服务内容 | 子项 | 在线推理 | 批量推理 | 单位 |
+|---|---|---|---|---|---|---|
+| ERNIE Speed | ernie-speed-128k | 推理服务 | 输入 | 0 | 0.00012 | 元/千tokens |
+| ERNIE Speed | ernie-speed-128k | 推理服务 | 输出 | 0 | 0.00024 | 元/千tokens |
+| ERNIE Lite | ernie-lite-8k | 推理服务 | 输入 | 0 | 0.0012 | 元/千tokens |
+| ERNIE Lite | ernie-lite-8k | 推理服务 | 输出 | 0 | 0.0024 | 元/千tokens |
+| ERNIE Tiny | ernie-tiny-8k | 推理服务 | 输入 | 0 | 0.00008 | 元/千tokens |
+| ERNIE Tiny | ernie-tiny-8k | 推理服务 | 输出 | 0 | 0.00016 | 元/千tokens |
+
+> 提示：单纯调用 API 接口属于在线推理，当前显示为 0 元；批量推理按量计费。
+
+#### 快速上手
+
+1. 访问控制台并获取 API Key。
+2. 使用下方示例进行快速测试。
+3. 若遇错误，请检查模型名称与凭证有效期。
+
+控制台：[https://console.bce.baidu.com/qianfan/ais/console/apiKey](https://console.bce.baidu.com/qianfan/ais/console/apiKey)
+
+```python
+import requests
+import json
+
+def main():
+    url = "https://qianfan.baidubce.com/v2/chat/completions"
+    API_KEY = 'YOUR_API_KEY'
+    payload = json.dumps({
+        "model": "ernie-speed-128k",
+        "messages": [
+            {
+                "role": "system",
+                "content": "You are a helpful assistant."
+            },
+            {
+                "role": "user",
+                "content": "你好"
+            }
+        ]
+    })
+    headers = {
+        'Content-Type': 'application/json',
+        'Authorization': F'Bearer {API_KEY}'
+    }
+    response = requests.request("POST", url, headers=headers, data=payload)
+    print(response.text)
+    
+
+if __name__ == '__main__':
+    main()
+```
+
+> 小贴士：将 `YOUR_API_KEY` 替换为你的密钥，建议使用环境变量管理凭证；请勿在公共仓库提交 Key。
+
+更多文档：[https://cloud.baidu.com/doc/qianfan-api/s/3m9b5lqft](https://cloud.baidu.com/doc/qianfan-api/s/3m9b5lqft)
+
+### 讯飞星火大模型
+
+接着，我们轻盈地来到星火～
+
+- 官网：[https://xinghuo.xfyun.cn/sparkapi](https://xinghuo.xfyun.cn/sparkapi)
+- 控制台：[https://console.xfyun.cn/services/cbm?from=desk](https://console.xfyun.cn/services/cbm?from=desk)
+- 模型说明：可见 Spark Lite，Token 余量为无限。
+
+#### 快速上手
+
+> 小贴士：如需联网检索，启用 `web_search`；流式输出可以提升交互体验。
+
+1. 在控制台获取授权凭证并替换到示例中。
+2. 选择 `Lite` 模型，按需开启 `web_search` 与 `stream`。
+3. 若需要长内容输出，注意 8K tokens 限制，合理裁剪上下文。
+
+```python
+# encoding:UTF-8
+import json
+import requests
+
+
+# 请替换XXXXXXXXXX为您的 APIpassword, 获取地址：https://console.xfyun.cn/services/bmx1
+api_key = "Bearer XXXXXXXXXX"
+url = "https://spark-api-open.xf-yun.com/v1/chat/completions"
+
+# 请求模型，并将结果输出
+def get_answer(message):
+    #初始化请求体
+    headers = {
+        'Authorization':api_key,
+        'content-type': "application/json"
+    }
+    body = {
+        "model": "Lite",
+        "user": "user_id",
+        "messages": message,
+        # 下面是可选参数
+        "stream": True,
+        "tools": [
+            {
+                "type": "web_search",
+                "web_search": {
+                    "enable": True,
+                    "search_mode":"deep"
+                }
+            }
+        ]
+    }
+    full_response = ""  # 存储返回结果
+    isFirstContent = True  # 首帧标识
+
+    response = requests.post(url=url,json= body,headers= headers,stream= True)
+    # print(response)
+    for chunks in response.iter_lines():
+        # 打印返回的每帧内容
+        # print(chunks)
+        if (chunks and '[DONE]' not in str(chunks)):
+            data_org = chunks[6:]
+
+            # print(f"DEBUG: raw data_org: {data_org}")
+            chunk = json.loads(data_org)
+            text = chunk['choices'][0]['delta']
+
+            # 判断最终结果状态并输出
+            if ('content' in text and '' != text['content']):
+                content = text["content"]
+                if (True == isFirstContent):
+                    isFirstContent = False
+                print(content, end="")
+                full_response += content
+    return full_response
+
+
+# 管理对话历史，按序编为列表
+def getText(text,role, content):
+    jsoncon = {}
+    jsoncon["role"] = role
+    jsoncon["content"] = content
+    text.append(jsoncon)
+    return text
+
+# 获取对话中的所有角色的content长度
+def getlength(text):
+    length = 0
+    for content in text:
+        temp = content["content"]
+        leng = len(temp)
+        length += leng
+    return length
+
+# 判断长度是否超长，当前限制8K tokens
+def checklen(text):
+    while (getlength(text) > 11000):
+        del text[0]
+    return text
+
+
+#主程序入口
+if __name__ =='__main__':
+
+    #对话历史存储列表
+    chatHistory = []
+    #循环对话轮次
+    while (1):
+        # 等待控制台输入
+        Input = input("\n" + "我:")
+        question = checklen(getText(chatHistory,"user", Input))
+        # 开始输出模型内容
+        print("星火:", end="")
+        getText(chatHistory,"assistant", get_answer(question))
+```
+
+### 腾讯混元大模型
+
+ - 计费与价格：[https://cloud.tencent.com/document/product/1729/97731](https://cloud.tencent.com/document/product/1729/97731)
+ - 文档与控制台：[https://cloud.tencent.com/document/product/1729/111008](https://cloud.tencent.com/document/product/1729/111008)
+ - 模型说明：`hunyuan-lite` 免费可用，适合轻量任务。
+
+```python
+import os
+from openai import OpenAI
+
+# 构造 client（建议使用环境变量管理密钥）
+api_key = os.getenv("HUNYUAN_API_KEY", "YOUR_API_KEY")
+client = OpenAI(
+    api_key=api_key,  # 混元 APIKey
+    base_url="https://api.hunyuan.cloud.tencent.com/v1",  # 混元 endpoint
+)
+
+completion = client.chat.completions.create(
+    model="hunyuan-lite",
+    messages=[
+        {
+            "role": "user",
+            "content": "泥嚎"
+        }
+    ],
+    extra_body={
+        "enable_enhancement": True,
+    },
+)
+print(completion.choices[0].message.content)
+```
+
+> 小贴士：请勿在公共仓库提交任何真实密钥；使用环境变量或密钥管理服务更安全。
+
+## 低价大模型
+
+### SCNet 平台
+
+#### 简介
+SCNet 是一个面向人工智能和科学计算的一站式算力与 AI 平台，提供从数据管理、模型训练到部署的完整链路服务，同时结合国产超算硬件和多模态模型生态，让企业和开发者能更高效地使用 AI。
+
+#### 链接与文档
+- 官网：[https://www.scnet.cn/](https://www.scnet.cn/)
+#### 价格一览
+| 模型 | 上下文长度 | 百万 tokens 输入价格 | 百万 tokens 输出价格 |
+|---|---|---|---|
+| Qwen3-235B-A22B | 32K | 0.1 元 | 0.1 元 |
+| DeepSeek-R1-Distill-Qwen-7B | 32K | 0.1 元 | 0.1 元 |
+| DeepSeek-R1-Distill-Qwen-32B | 32K | 1 元 | 4 元 |
+| DeepSeek-R1-Distill-Llama-70B | 32K | 0.1 元 | 6 元 |
+| QwQ-32B | 32K | 1 元 | 4 元 |
+| Qwen3-30B-A3B | 128K | 1 元 | 6 元 |
+| Qwen3-Embedding-8B | - | 0.1 元 | - |
+
+- 文档（计费与说明）：[https://www.scnet.cn/ac/openapi/doc/2.0/moduleapi/tutorial/modulefee.html](https://www.scnet.cn/ac/openapi/doc/2.0/moduleapi/tutorial/modulefee.html)
+
+目前看到的价格最低的 Qwen3-235B-A22B 模型的 API，相比前面的免费模型，性能更强。
+- API 接口使用样例：[https://www.scnet.cn/ac/openapi/doc/2.0/moduleapi/tutorial/apicall.html](https://www.scnet.cn/ac/openapi/doc/2.0/moduleapi/tutorial/apicall.html)
+
+## 小结
+
+把上面这些“零钱包”级别的模型都翻完啦～  
+- 百度千帆、讯飞星火、腾讯混元都给出「免费在线额度」，日常轻量问答、摘要、润色完全够用；记得把 Key 藏进环境变量，别手滑推到 GitHub。  
+- 如果任务量突然暴涨，SCNet 的 Qwen3-235B-A22B 只要 0.1 元/百万 tokens，性价比直接拉满，当“备胎”也安心。  
+
+一句话：先薅免费的，薅不动再掏 0.1 元，让荷包和模型一起“稳稳幸福”吧！
--- a/docs/blog/technology/Xinchuang_Competition.md
+++ b/docs/blog/technology/Xinchuang_Competition.md
@@ -0,0 +1,75 @@
+---
+title: Linux 系统适配环境搭建
+createTime: 2025/10/29 15:39:35
+permalink: /article/xinchuang-competition-2025/
+password: simeng
+---
+
+## 赛题要求
+- yum 仓库地址：http://192.168.122.1:58000/content
+- 软件包下载地址：http://192.168.122.1:58000/software
+
+系统信息列表
+
+| 序号 | 标签名称 | 操作系统 | 账号信息 |
+|----|---------|----------|----------|
+| 1  | Server1 | openEuler 22.03（已安装） | root / openEuler12#$ |
+| 2  | Server2 | openEuler 22.03（已安装） | root / openEuler12#$ |
+| 3  | Server3 | openEuler 22.03（待安装） | N/A |
+| 4  | Desktop | Kylin v10（已安装） | admin / admin@0000 |
+
+## 第一部分 【适配环境搭建】
+
+### 基础配置 yum 源
+这里题目中没有提到，但是需要进行一下配置
+
+
+
+### 系统安装与配置
+为 Server3 安装 openEuler 操作系统
+
+配置系统语言：English
+
+配置系统时区：Asia/Shanghai
+
+配置安装类型：Server
+
+系统启动分区保持不变，其他分区要求如下：
+
+位置 容量 文件系统
+
+| 挂载点 | 容量 | 文件系统 |
+|--------|------|----------|
+| /      | 剩余所有容量 | ext4 |
+| swap   | 4G   | swap |
+| /opt   | 40G  | xfs  |
+
+其他未提及的配置内容保持系统默认设置。
+
+确认并且配置服务器地址及名称：
+
+| 服务器  | FQDN                  | IP               |
+|---------|-----------------------|------------------|
+| Server1 | app1.system.org.cn    | 172.16.50.101/24 |
+| Server2 | app2.system.org.cn    | 172.16.50.102/24 |
+| Server3 | sts.system.org.cn     | 172.16.50.103/24 |
+| Desktop | -                     | 172.16.50.111/24 |
+
+```bash title='配置服务器地址以及名称'
+hostnamectl
+```
+
+确认并且配置系统网关为 172.16.50.1，确保服务器能与网关通信。
+
+为所有 Server 主机启用防火墙，防火墙区域为 public ，根据不同服务在防火墙中使用添加端口的方式添加策略。
+
+确认并且保持 root 用户密码为：admin@0000，确保该账户能够通过 SSH 远程登录
+
+为所有 Server 主机生成 2 组（RSA 算法和国密算法）SSH 公私钥对，其中 RSA 密钥长度为 4096。配置实现 Server 主机之间的 SSH 免密登录。
+
+所有主机间的访问均通过 FQDN 的形式进行访问。
+
+使用 chrony 进行时间同步。Server1 与 172.16.50.1 进行时间同步，同时为其他服务器提供时间服务。
+## 第一部分 
+## 第一部分
+## 第一部分
--- a/docs/notes/programming/web/basic-syntax/html-css-js.md
+++ b/docs/notes/programming/web/basic-syntax/html-css-js.md
@@ -59,7 +59,7 @@ HTML 并不是一种编程语言，而是一种标记语言。它使用标签来
 <html>
 <head>
 <meta charset="utf-8">
-<title>祀梦的花园(notes.simengweb.com)</title>
+<title>仲夏夜之梦(notes.simengweb.com)</title>
 </head>
 <body>
 <h1>我的第一个标题</h1>
@@ -81,7 +81,7 @@ HTML 并不是一种编程语言，而是一种标记语言。它使用标签来

 第四行：`<meta charset="utf-8">`，这是一个元数据标签，用于指定文档的字符编码为 UTF-8。UTF-8 是一种常用的字符编码，能够表示世界上几乎所有的字符。如果不写的话可能会导致中文乱码的问题。

-第五行：`<title>祀梦的花园(notes.simengweb.com)</title>`，这是文档的标题，会显示在浏览器的标题栏或标签页上。
+第五行：`<title>仲夏夜之梦(notes.simengweb.com)</title>`，这是文档的标题，会显示在浏览器的标题栏或标签页上。

 第七行：`<body>`，这是文档的主体元素，用于包含文档的可见内容（比如文字、图片、按钮等），`<body>` 和 `</body>` 之间的内容就是文档的主体内容。

@@ -107,7 +107,7 @@ CSS 也不是编程语言，而是一种“样式表”语言。它通过“选
 <html>
 <head>
 <meta charset="utf-8">
-<title>祀梦的花园(notes.simengweb.com)</title>
+<title>仲夏夜之梦(notes.simengweb.com)</title>
 <link rel="stylesheet" href="style.css">
 </head>
 <body>
@@ -173,7 +173,7 @@ JavaScript（简称 JS）是让网页“动起来、能互动”的语言。它
 <html>
 <head>
  <meta charset="utf-8">
-  <title>祀梦的花园(notes.simengweb.com)</title>
+  <title>仲夏夜之梦(notes.simengweb.com)</title>
  <link rel="stylesheet" href="style.css">
  <!-- 样式写在外部 CSS 中 -->
  <!-- JavaScript 推荐放在 body 末尾，或使用 defer 属性 -->
--- a/docs/notes/programming/web/basic-syntax/html-lists-and-semantic-layout.md
+++ b/docs/notes/programming/web/basic-syntax/html-lists-and-semantic-layout.md
@@ -0,0 +1,468 @@
+---
+title: html 列表与语义布局
+createTime: 2025/11/02 20:47:50
+permalink: /programming/web/basic-syntax/html-lists-and-semantic-layout/
+---
+## 四、列表（UL/OL/LI）
+
+无序列表（圆点）：
+```html title="index.html"
+<ul>
+  <li>学习笔记</li>
+  <li>工具推荐</li>
+  <li>友情链接</li>
+</ul>
+```
+
+有序列表（数字）：
+```html title="index.html"
+<ol>
+  <li>需求与原型</li>
+  <li>API 设计</li>
+  <li>联调与验收</li>
+</ol>
+```
+
+**小案例：展示清单与步骤**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>列表案例</title>
+    <link rel="stylesheet" href="style.css">
+    <script defer src="app.js"></script>
+  </head>
+  <body>
+    <h2>我的清单</h2>
+    <ul>
+      <li>学习笔记</li>
+      <li>工具推荐</li>
+      <li>友情链接</li>
+    </ul>
+    <h2>项目步骤</h2>
+    <ol>
+      <li>需求与原型</li>
+      <li>API 设计</li>
+      <li>联调与验收</li>
+    </ol>
+  </body>
+</html>
+```
+@tab style.css
+```css
+ul, ol { margin: .5rem 0 1rem; padding-left: 1.5rem; }
+li { margin: .25rem 0; }
+```
+@tab app.js
+```js
+document.querySelectorAll('li').forEach(li => li.addEventListener('click', () => li.classList.toggle('done')));
+```
+:::
+
+**小作业：做一个“今日任务清单”**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>今日任务清单</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <h1>今天要做的事</h1>
+    <ul>
+      <li>阅读 30 分钟</li>
+      <li>练习 1 个算法题</li>
+      <li>整理房间</li>
+    </ul>
+  </body>
+</html>
+```
+@tab style.css
+```css
+body { font-family: system-ui; margin: 2rem; }
+li { cursor: pointer; }
+.done { text-decoration: line-through; color: #888; }
+```
+:::
+
+## 五、语义化布局（Header/Nav/Main/Section/Article/Aside/Footer）
+
+语义化标签让结构更清晰，搜索引擎更友好：
+```html title="index.html"
+<header>
+  <h1>我的网站</h1>
+  <nav>
+    <a href="/blog/">博客</a>
+    <a href="/notes/">笔记</a>
+  </nav>
+  <!-- 注意：更复杂的导航通常配合 CSS/JS 做响应式菜单 -->
+  <!-- 小提示：块级容器的外层仍可使用 <div> 来做网格或栅格布局 -->
+  <!-- 例如 <div class="container"> 包裹全站 -->
+  <!-- 只是这些语义标签会让搜索引擎更理解结构 -->
+  <!-- 语义标签与 <div> 并不冲突，可以配合使用 -->
+  <!-- 选择语义标签能让你的 HTML 更“有含义”而非只是分区 -->
+  <!-- 如果仅用于布局、无明确语义，用 <div> 即可 -->
+  <!-- 这段说明旨在帮助你建立语义化与布局之间的直觉 -->
+  <!-- 逐步养成好的结构化写法 -->
+  <!-- 让内容更可维护，更易被机器理解 -->
+  <!-- （继续往下看，还会介绍 Article/Section 等） -->
+```
+
+> 语义化标签的要点：这些标签表达了“这是什么内容”，而不是“怎么显示”。更容易被搜索引擎和读屏工具理解。
+
+**小案例：语义化布局入门**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>语义化布局案例</title>
+    <link rel="stylesheet" href="style.css">
+    <script defer src="app.js"></script>
+  </head>
+  <body>
+    <header>
+      <h1>我的网站</h1>
+      <nav>
+        <a href="#home">首页</a>
+        <a href="#blog">博客</a>
+      </nav>
+    </header>
+    <main>
+      <section>
+        <h2>最新文章</h2>
+        <article>
+          <h3>用语义标签改造你的页面</h3>
+          <p>示例段落：用 header/nav/main/section/article/aside/footer 组织结构。</p>
+        </article>
+      </section>
+      <aside>
+        <h2>侧栏</h2>
+        <p>这里可以放导航、标签云或广告位。</p>
+      </aside>
+    </main>
+    <footer>© 2025 祀梦</footer>
+  </body>
+</html>
+```
+@tab style.css
+```css
+body { font-family: system-ui; margin: 0; }
+header, footer { padding: 1rem 2rem; background: #f7f7f7; }
+nav { display: flex; gap: 1rem; }
+main { display: grid; grid-template-columns: 1fr 240px; gap: 1rem; padding: 1rem 2rem; }
+article { background: #fff; padding: 1rem; border: 1px solid #eee; border-radius: 8px; }
+aside { background: #fff; padding: 1rem; border: 1px solid #eee; border-radius: 8px; }
+```
+@tab app.js
+```js
+document.querySelectorAll('nav a').forEach(a => a.addEventListener('click', () => {
+  document.querySelectorAll('nav a').forEach(x => x.classList.remove('active'));
+  a.classList.add('active');
+}));
+```
+:::
+
+**小作业：用语义标签搭一个博客首页**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>博客首页</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <header>
+      <h1>博客名称</h1>
+      <nav>
+        <a href="#">首页</a>
+        <a href="#">归档</a>
+        <a href="#">关于</a>
+      </nav>
+    </header>
+    <main>
+      <section>
+        <article>
+          <h2>第一篇文章标题</h2>
+          <p>摘要内容……</p>
+        </article>
+        <article>
+          <h2>第二篇文章标题</h2>
+          <p>摘要内容……</p>
+        </article>
+      </section>
+      <aside>
+        <h2>侧栏</h2>
+        <p>分类、标签或个人简介。</p>
+      </aside>
+    </main>
+    <footer>© 2025 你的名字</footer>
+  </body>
+</html>
+```
+@tab style.css
+```css
+/* 与案例类似的栅格布局样式 */
+main { display: grid; grid-template-columns: 1fr 240px; gap: 1rem; padding: 1rem 2rem; }
+article { background: #fff; padding: 1rem; border: 1px solid #eee; border-radius: 8px; }
+aside { background: #fff; padding: 1rem; border: 1px solid #eee; border-radius: 8px; }
+```
+:::
+
+## 六、表格（Table/TR/TH/TD）
+
+```html title="index.html"
+<table>
+  <thead>
+    <tr>
+      <th>姓名</th>
+      <th>职业</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>祀梦</td>
+      <td>开发者</td>
+    </tr>
+  </tbody>
+</table>
+```
+小提示：表格样式通常用 CSS 来美化（边框、间距、对齐等）。
+
+**小案例：信息表格**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>信息表格案例</title>
+    <link rel="stylesheet" href="style.css">
+    <script defer src="app.js"></script>
+  </head>
+  <body>
+    <table>
+      <thead>
+        <tr><th>姓名</th><th>职业</th><th>城市</th></tr>
+      </thead>
+      <tbody>
+        <tr><td>祀梦</td><td>开发者</td><td>上海</td></tr>
+        <tr><td>小李</td><td>产品经理</td><td>杭州</td></tr>
+        <tr><td>小王</td><td>设计师</td><td>北京</td></tr>
+      </tbody>
+    </table>
+  </body>
+</html>
+```
+@tab style.css
+```css
+table { border-collapse: collapse; width: 100%; }
+th, td { border: 1px solid #ddd; padding: .5rem .75rem; text-align: left; }
+thead th { background: #f7f7f7; }
+tbody tr:nth-child(odd) { background: #fafafa; }
+```
+@tab app.js
+```js
+document.querySelectorAll('tbody tr').forEach(tr => tr.addEventListener('click', () => tr.classList.toggle('highlight')));
+```
+:::
+
+**小作业：制作“课程表”**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>课程表</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <table>
+      <thead>
+        <tr><th>时间</th><th>课程</th><th>教室</th></tr>
+      </thead>
+      <tbody>
+        <tr><td>周一 9:00</td><td>数学</td><td>A101</td></tr>
+        <tr><td>周三 14:00</td><td>英语</td><td>B302</td></tr>
+        <tr><td>周五 10:00</td><td>计算机</td><td>C210</td></tr>
+      </tbody>
+    </table>
+  </body>
+</html>
+```
+@tab style.css
+```css
+table { border-collapse: collapse; width: 100%; }
+th, td { border: 1px solid #ddd; padding: .5rem .75rem; }
+thead th { background: #f0f0f0; }
+```
+:::
+
+
+## 七、媒体（Audio/Video/Source）
+
+```html title="index.html"
+<audio src="bgm.mp3" controls loop></audio>
+
+<video src="intro.mp4" controls width="480" poster="cover.jpg" muted></video>
+<!-- 常用属性：controls / autoplay / loop / muted / poster（封面） -->
+```
+
+补充说明：
+- `controls` 提供播放控制；一般不建议隐藏，保证可用性。
+- `autoplay` 可能被浏览器限制；若需自动播放，通常需同时设置 `muted`。
+- `preload` 控制预加载策略（`none`/`metadata`/`auto`），根据页面性能需求选择。
+- `poster` 为视频未播放时的封面图；音频没有封面属性。
+- 使用 `<source>` 指定多种格式与 MIME 类型，提升兼容性：`<source src="xxx.mp4" type="video/mp4">`。
+
+**小案例：嵌入音视频**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>媒体案例</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <h2>背景音乐</h2>
+    <audio src="bgm.mp3" controls loop></audio>
+    <h2>介绍视频</h2>
+    <video src="intro.mp4" controls width="480" poster="cover.jpg" muted></video>
+  </body>
+</html>
+```
+@tab style.css
+```css
+video { display: block; margin-top: .5rem; }
+```
+:::
+
+**小作业：添加一段你喜欢的音乐与视频**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>我的媒体</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <audio src="music.mp3" controls></audio>
+    <video src="movie.mp4" controls width="480" poster="cover.jpg"></video>
+  </body>
+</html>
+```
+@tab style.css
+```css
+audio, video { display: block; margin: .5rem 0; }
+```
+:::
+
+
+## 八、全局常用属性（任何标签几乎都能用）
+
+- `id`：唯一标识，用于 JS/CSS 精确选择。
+- `class`：分组与样式选择（上一课已讲）。
+- `style`：内联样式（不推荐大量使用，建议写到 CSS 文件）。
+- `title`：悬停提示文字。
+- `data-*`：自定义数据属性（如 `data-user-id="42"`）。
+- `aria-*`：无障碍相关属性，帮助读屏工具理解（如 `aria-label`）。
+
+**小案例：使用 id/class/data/title/aria**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>全局属性案例</title>
+    <link rel="stylesheet" href="style.css">
+    <script defer src="app.js"></script>
+  </head>
+  <body>
+    <button id="likeBtn" class="btn" title="点赞一下" data-count="0" aria-label="点赞">👍 喜欢</button>
+    <p id="msg" class="note" aria-live="polite">点击按钮试试。</p>
+  </body>
+</html>
+```
+@tab style.css
+```css
+.btn { padding: .5rem .75rem; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
+.note { color: #555; }
+```
+@tab app.js
+```js
+const btn = document.getElementById('likeBtn');
+const msg = document.getElementById('msg');
+btn.addEventListener('click', () => {
+  const count = Number(btn.dataset.count || 0) + 1;
+  btn.dataset.count = String(count);
+  msg.textContent = `已点赞 ${count} 次`;
+});
+```
+:::
+
+**小作业：做一个带计数的按钮**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>计数按钮</title>
+    <link rel="stylesheet" href="style.css">
+    <script defer src="app.js"></script>
+  </head>
+  <body>
+    <button id="counter" class="btn" title="点击增加" data-count="0">点击我</button>
+    <p id="status" class="note">当前计数：0</p>
+  </body>
+</html>
+```
+@tab style.css
+```css
+.btn { padding: .5rem .75rem; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
+.note { margin-top: .5rem; }
+```
+@tab app.js
+```js
+const counter = document.getElementById('counter');
+const statusEl = document.getElementById('status');
+counter.addEventListener('click', () => {
+  const count = Number(counter.dataset.count || 0) + 1;
+  counter.dataset.count = String(count);
+  statusEl.textContent = `当前计数：${count}`;
+});
+```
+:::
+
+## 结尾：先结构清晰，再上样式与交互
+
+写网页像搭房子：先把房间（结构标签）安排好，再选家具颜色（CSS），最后加智能设备（JS）。
+
+建议你先用这些常用标签做一个“个人名片页”，含标题、段落、头像图片、导航链接和一个简单表单。练熟后再加样式与交互。
+
+**延伸阅读**：
+- HTML 规范与参考（MDN）：https://developer.mozilla.org/en-US/docs/Web/HTML
+- 无障碍与语义化：https://developer.mozilla.org/en-US/docs/Glossary/Semantics
--- a/docs/notes/programming/web/basic-syntax/html-tags-attributes.md
+++ b/docs/notes/programming/web/basic-syntax/html-tags-attributes.md
@@ -0,0 +1,424 @@
+---
+title: HTML 常用标签与属性
+createTime: 2025/11/2 19:30:00
+permalink: /programming/web/basic-syntax/html-tags-attributes/
+---
+
+## 文本与标题（H/P/Span/Strong/Em/Div）
+
+**标题**：从重要到不重要，`<h1>` ~ `<h6>`。
+```html title="index.html"
+<h1>我的网站</h1>
+<h2>关于我</h2>
+<h3>联系方式</h3>
+```
+
+### 认识div标签
+
+**什么是 `<div>`？**
+
+`<div>` 是 "division"（分区）的缩写，可以理解为网页中的"容器"或"盒子"。
+
+想象一下搬家时的纸箱：
+
+* 网页 = 整个房间
+* `<div>` = 一个个纸箱
+* 箱子里 = 可以放各种物品（文字、图片、按钮等）
+
+### `<div>` 的基本特点
+
+1. 块级元素
+`<div>` 是块级元素，这意味着：
+
+* 默认会占据整行的宽度
+* 前后会自动换行
+* 就像段落一样，每个`<div>`都会从新的一行开始
+
+**`<div>` 本身没有特定含义，它只是用来分组和布局。**
+
+### 为什么要使用 `<div>`？
+
+没有`<div>`的情况：
+```html title='index.html'
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>仲夏夜之梦</title>
+</head>
+<body>
+<h1>我的网站</h1>
+<p>欢迎来到我的个人网站！</p>
+<img src="photo.jpg" alt="我的照片">
+<p>这是我的个人介绍...</p>
+<button>联系我</button>
+</body>
+</html>
+```
+
+所有元素都堆在一起，很难分别控制样式。
+
+使用 `<div>` 的情况：
+```html title='index.html'
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>仲夏夜之梦</title>
+</head>
+<body>
+<div class="header">
+  <h1>我的网站</h1>
+  <p>欢迎来到我的个人网站！</p>
+</div>
+<div class="content">
+  <img src="photo.jpg" alt="我的照片">
+  <p>这是我的个人介绍...</p>
+</div>
+<div class="footer">
+  <button>联系我</button>
+</div>
+</body>
+</html>
+```
+这样我就可以分别控制每个部分的样式啦！
+
+这个时候又有聪明的小朋友问了：这个class是什么呀？难道说？！是**起的名字！！**
+
+太好了，恭喜你答对了，那么我们为什么要用class呢？
+
+### Class
+
+Class 可以理解为给 HTML 元素起的"组名"或"类别名"，让 CSS 能够精确地找到并美化特定的元素。
+
+想象一个学校：
+* HTML 元素 = 学生
+* Class = 学生的身份（如"三年级一班"、"篮球队员"）
+* CSS = 老师，根据身份给学生安排不同的任务和服装
+
+class基本用法此处就不举例了，详情参照上面的代码。
+
+如果没有class的情况：
+```html title='index.html'
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>仲夏夜之梦</title>
+</head>
+<body>
+<h1>我的网站</h1>
+<p>普通段落</p>
+<p>个人介绍</p>
+<p>重要提示</p>
+<button>普通按钮</button>
+<button>重要按钮</button>
+</body>
+</html>
+```
+
+如果我们想给"重要提示"和"重要按钮"设置特殊样式，很难精确选择！像之前我教的一样css直接用p或者h1来选择的话就无法区分具体每一段的区别了。
+
+这时候就可以用class了！
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>仲夏夜之梦</title>
+</head>
+<body>
+<h1>我的网站</h1>
+<p class="normal">普通段落</p>
+<p class="intro">个人介绍</p>
+<p class="warning">重要提示</p>
+<button class="normal-btn">普通按钮</button>
+<button class="important-btn">重要按钮</button>
+</body>
+</html>
+```
+@tab style.css
+```css
+.warning {
+  color: red;
+  font-weight: bold;
+}
+.important-btn {
+  background-color: red;
+  color: white;
+}
+```
+:::
+**现在自己动手尝试一下**
+
+## 动手练习：小作业
+
+运用所学的 HTML 和 CSS 知识，创建一个美观的个人名片页面。不确定的时候翻翻文档
+
+```html title='index.html'
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <!-- 在这里添加字符编码和标题 -->
+</head>
+<body>
+    <!-- 创建一个名片容器 div，class 为 "card" -->
+    
+        <!-- 在卡片内部分为三个区域： -->
+        
+        <!-- 1. 头部区域：包含姓名和职位 -->
+        <div class="card-header">
+            <!-- 添加 h1 标题显示你的姓名 -->
+            <!-- 添加 p 段落显示你的职位或专业 -->
+        </div>
+        
+        <!-- 2. 主体区域：包含联系信息 -->
+        <div class="card-body">
+            <!-- 添加至少3个联系信息，使用 p 标签 -->
+            <!-- 例如：电话、邮箱、地址等 -->
+        </div>
+        
+        <!-- 3. 底部区域：包含个人简介 -->
+        <div class="card-footer">
+            <!-- 添加一个个人简介段落 -->
+        </div>
+    
+</body>
+</html>
+```
+
+css样式自定，发挥自己的创作力，创建一个独特的个人名片页面。
+
+**段落与换行**：
+```html title="index.html"
+<p>这是一个段落，里面可以有<strong>加粗</strong>和<em>强调</em>。</p>
+<p>这是另一个段落。<br>需要换行时用 <code>&lt;br&gt;</code>。</p>
+<hr> <!-- 水平分割线 -->
+```
+
+**行内 vs 块级**：
+- `<div>` 是块级元素（换行占整行），用于分区布局；
+- `<span>` 是行内元素（不换行），用于强调局部文字。
+
+使用建议与解释：
+- 语义优先：`<strong>` 表示“语义上的重点”，`<b>` 仅表示“加粗外观”；`<em>` 表示“语气强调”，`<i>` 仅表示“斜体外观”。优先使用语义标签，样式交给 CSS。
+- 标题层级：通常一个页面只有一个 `<h1>`，下面按层级组织为 `<h2>/<h3>...`。不要为求大小随意跳级或用标题替代普通文本。
+- 段落与换行：换行请优先使用分段（`<p>`），只有在同段内需要视觉换行时使用 `<br>`。`<hr>` 适合用于内容分隔或主题切换。
+
+**小案例：文本与标题**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>文本与标题案例</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <h1>我的网站</h1>
+    <h2>关于我</h2>
+    <p>我是一名<strong>前端开发者</strong>，喜欢<em>简洁的设计</em>与清晰的结构。</p>
+    <hr>
+    <h3>联系方式</h3>
+    <p>Email: hello@example.com</p>
+  </body>
+</html>
+```
+@tab style.css
+```css
+body { font-family: system-ui; margin: 2rem; }
+h1 { font-size: 2rem; margin-bottom: .5rem; }
+h2 { margin-top: 1.5rem; }
+p { margin: .5rem 0; }
+```
+:::
+
+**小作业：写一段个人简介**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>个人简介</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <h1>你的名字</h1>
+    <h2>一句话介绍</h2>
+    <p>用两段文字，分别写你现在在做什么、你感兴趣的方向。</p>
+    <p>使用 <strong>strong</strong> 与 <em>em</em> 做重点强调。</p>
+  </body>
+</html>
+```
+@tab style.css
+```css
+body { font-family: system-ui; margin: 2rem; line-height: 1.8; }
+p { max-width: 60ch; }
+```
+:::
+
+## 三、链接与图片（A/IMG）
+
+### 什么是 `<img>` 标签
+
+`<img>` 标签用于在网页中插入图片，它是自闭合标签（不需要结束标签）。
+
+### `<img>` 标签的基本属性
+
+* src：指定图片的路径（必填）
+* alt：指定图片的替代文本（必填，用于图片加载失败时显示）
+* width：指定图片的宽度（可选）
+* height：指定图片的高度（可选）
+
+基本语法：
+```html title='index.html'
+<img src="photo.jpg" alt="我的照片" width="200" height="300">
+```
+
+### HTML 超链接
+
+HTML 链接（Anchor）是网页之间跳转的核心部分。
+
+HTML 使用链接与网络上的另一个文档相连。
+
+HTML中的链接是一种用于在不同网页之间导航的元素。
+
+链接通常用于将一个网页与另一个网页或资源（如文档、图像、音频文件等）相关联。
+
+链接允许用户在浏览网页时单击文本或图像来跳转到其他位置，从而实现网页之间的互联。
+
+HTML 链接 通过 `<a>` 标签创建，通常用于将用户从一个页面导航到另一个页面、从一个部分跳转到页面中的另一个部分、下载文件、打开电子邮件应用程序或执行 JavaScript 函数等。
+
+超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
+
+当把鼠标指针移动到网页中的某个链接上时，箭头会变为**一只小手**。
+
+## `<a>` 标签的基本属性
+
+* href：指定链接的目标 URL（必填）
+* target：指定链接在何处打开（可选）
+  * _blank：在新窗口或标签页中打开链接
+  * _self：在当前窗口或标签页中打开链接（默认）
+  * _parent：在父框架中打开链接
+  * _top：在顶部框架中打开链接
+
+基本语法：
+```html title='index.html'
+<a href="https://www.example.com">链接文本</a>
+```
+- `<a>` 标签：定义了一个超链接（anchor）。它是 HTML 中用来创建可点击链接的主要标签。
+- href 属性：指定目标 URL，当点击链接时，浏览器将导航到此 URL。
+
+**这里还有一个target 属性**：
+- _blank：在新窗口或标签页中打开链接
+- _self：在当前窗口或标签页中打开链接（默认）
+- _parent：在父框架中打开链接
+- _top：在顶部框架中打开链接
+
+```html title='index.html'
+<!DOCTYPE html>
+<html>
+<head>
+    <title>target属性示例</title>
+</head>
+<body>
+    <h2>target属性示例</h2>
+    
+    <!-- 在当前窗口打开（默认） -->
+    <a href="https://www.baidu.com" target="_self">当前窗口打开</a>
+    
+    <!-- 在新窗口打开 -->
+    <a href="https://www.baidu.com" target="_blank">新窗口打开</a>
+    
+    <!-- 在父窗口打开 -->
+    <a href="https://www.baidu.com" target="_parent">父窗口打开</a>
+    
+    <!-- 建议：新窗口打开外部链接 -->
+    <a href="https://www.example.com" target="_blank" rel="noopener">
+        外部网站（安全的新窗口）
+    </a>
+</body>
+</html>
+```
+复制代码到自己的html文件中，尝试一下不同的target属性值。
+
+常用属性：
+- `href`：目标地址；
+- `target="_blank"`：新窗口打开；
+- `rel="noopener"`：安全与性能（避免旧窗口被新页面控制）。
+
+补充说明：
+- 链接安全：外链新窗口打开时同时设置 `rel="noopener"` 或 `rel="noreferrer"`，避免安全与性能问题。
+- 图片可使用 `loading="lazy"` 懒加载，减少首屏资源压力；`alt` 请写出图片用途或内容摘要。
+- 设定 `width/height` 可以预留占位，减少页面布局抖动（CLS）。复杂场景可考虑 `<picture>` + `<source>` 做响应式图片。
+- 与图片相关的配套标签：`<figure>` + `<figcaption>` 用于图片与说明文字的组合。
+
+**小案例：链接与图片**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>链接与图片案例</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <nav>
+      <a href="/" >首页</a>
+      <a href="https://developer.mozilla.org/" target="_blank" rel="noopener">MDN</a>
+    </nav>
+    <img src="avatar.jpg" alt="我的头像" width="160" height="160">
+  </body>
+</html>
+```
+@tab style.css
+```css
+nav { display: flex; gap: 1rem; margin-bottom: 1rem; }
+nav a { color: #06c; text-decoration: none; }
+nav a:hover { text-decoration: underline; }
+img { border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
+```
+:::
+
+**小作业：做一个“友链”与头像区块**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>友链与头像</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <section>
+      <h2>友情链接</h2>
+      <p>
+        <a href="https://notes.simengweb.com" target="_blank" rel="noopener">祀梦笔记</a>
+        ·
+        <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue.js</a>
+      </p>
+    </section>
+    <section>
+      <h2>头像</h2>
+      <img src="avatar.jpg" alt="你的头像" width="160" height="160">
+    </section>
+  </body>
+</html>
+```
+@tab style.css
+```css
+section { margin-bottom: 1rem; }
+img { border: 2px solid #eee; border-radius: 50%; }
+```
+:::
+
--- a/docs/notes/programming/web/basic-syntax/javascript-basics.md
+++ b/docs/notes/programming/web/basic-syntax/javascript-basics.md
@@ -0,0 +1,606 @@
+---
+title: JavaScript 基础知识
+createTime: 2025/11/2 21:30:00
+permalink: /programming/web/basic-syntax/javascript-basics/
+---
+
+## JavaScript 是什么？
+
+JavaScript 是一种广泛用于网页开发的脚本语言，它使网页能够实现交互式功能。与 HTML（负责结构）和 CSS（负责样式）不同，JavaScript 专注于**行为**，可以让网页变得动态和响应式。
+
+
+## 第一个 JavaScript 程序
+
+JavaScript 代码可以直接写在 HTML 文件中，通常放在 `<body>` 标签的底部，使用 `<script>` 标签包裹。
+
+```html title="index.html"
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <title>我的第一个 JavaScript 程序</title>
+</head>
+<body>
+  <h1>你好，世界！</h1>
+  
+  <script>
+    // 这是注释，不会被执行
+    console.log('Hello, JavaScript!'); // 在控制台输出文本
+    alert('欢迎学习 JavaScript！'); // 弹出提示框
+  </script>
+</body>
+</html>
+```
+
+**提示**：你可以在浏览器中按下 F12 打开开发者工具，然后切换到 "Console" 标签查看 `console.log()` 的输出。
+
+`console.log()` 是 JavaScript 中最常用、最重要的调试工具，可以说是每个开发者的"最佳朋友"！
+
+### 基本输出 ###
+
+```javascript
+// 输出字符串
+console.log("Hello World!");
+
+// 输出变量
+const name = "小明";
+console.log(name);
+
+// 输出多个值
+const age = 18;
+const isStudent = true;
+console.log("学生信息:", name, age, isStudent);
+```
+
+### 输出不同类型的数据 ###
+
+```javascript
+// 各种数据类型
+console.log("字符串:", "Hello");
+console.log("数字:", 42);
+console.log("布尔值:", true);
+console.log("数组:", [1, 2, 3]);
+console.log("对象:", {name: "李华", age: 20});
+console.log("函数:", function() {});
+console.log("undefined:", undefined);
+console.log("null:", null);
+```
+
+### 字符串插值 ###
+
+```javascript
+const userName = "张三";
+const userAge = 25;
+const score = 95.5;
+
+// 传统方式
+console.log("用户 " + userName + " 年龄 " + userAge + " 分数 " + score);
+
+// 模板字符串（推荐）
+console.log(`用户 ${userName} 年龄 ${userAge} 分数 ${score}`);
+
+// 带表达式的插值
+console.log(`${userName} 是 ${userAge >= 18 ? "成年人" : "未成年人"}`);
+```
+
+### 格式化输出 ###
+
+```javascript
+const product = {
+    name: "笔记本电脑",
+    price: 5999,
+    brand: "Dell",
+    inStock: true
+};
+
+// %s - 字符串
+console.log("产品名称: %s", product.name);
+
+// %d - 数字
+console.log("价格: %d 元", product.price);
+
+// %f - 浮点数
+console.log("折扣价: %f", product.price * 0.9);
+
+// %o - 对象
+console.log("完整产品信息: %o", product);
+
+// %c - CSS样式
+console.log("%c重要信息!", "color: red; font-size: 20px; font-weight: bold;");
+```
+
+## JavaScript 变量
+
+变量是用来存储信息的容器。在 JavaScript 中，我们使用 `let`、`const` 或 `var` 关键字来声明变量。
+
+### 变量声明方式
+
+```javascript
+// 使用 let 声明可变变量
+let name = "小明";
+name = "小红"; // 可以修改
+
+// 使用 const 声明常量（不可变）
+const PI = 3.14159;
+// PI = 3.14; // 错误！常量不能修改
+
+// 使用 var 声明变量（旧方式，现在推荐使用 let 和 const）
+var age = 25;
+```
+
+**注意**：
+- 使用 `let` 声明的变量可以重新赋值
+- 使用 `const` 声明的变量不能重新赋值（常量）
+- 尽量避免使用 `var`，因为它有一些奇怪的作用域规则
+
+
+## 数据类型
+
+JavaScript 有几种基本数据类型：
+
+### 1. 字符串（String）
+
+用于表示文本，可以使用单引号或双引号。
+
+```javascript
+const greeting = "你好";
+const name = 'JavaScript';
+const message = `${greeting}, ${name}!`; // 使用模板字符串（ES6 特性）
+console.log(message); // 输出：你好, JavaScript!
+```
+
+### 2. 数字（Number）
+
+用于表示数值。
+
+```javascript
+const age = 25;
+const price = 99.99;
+const PI = 3.14159;
+```
+
+### 3. 布尔值（Boolean）
+
+用于表示真或假，只有两个值：`true` 和 `false`。
+
+```javascript
+const isStudent = true;
+const hasGraduated = false;
+```
+
+### 4. 数组（Array）
+
+用于存储多个值的集合。
+
+```javascript
+const fruits = ["苹果", "香蕉", "橙子"];
+console.log(fruits[0]); // 输出：苹果（数组索引从0开始）
+
+// 添加元素
+fruits.push("葡萄");
+console.log(fruits); // 输出：["苹果", "香蕉", "橙子", "葡萄"]
+```
+
+### 5. 对象（Object）
+
+用于存储键值对集合。
+
+```javascript
+const person = {
+  name: "小明",
+  age: 25,
+  isStudent: true,
+  greet: function() {
+    console.log(`你好，我是${this.name}！`);
+  }
+};
+
+console.log(person.name); // 输出：小明
+person.greet(); // 输出：你好，我是小明！
+```
+
+## 运算符
+
+### 算术运算符
+
+```javascript
+const a = 10;
+const b = 5;
+
+console.log(a + b); // 15 加法
+console.log(a - b); // 5 减法
+console.log(a * b); // 50 乘法
+console.log(a / b); // 2 除法
+console.log(a % b); // 0 取余
+console.log(a ** b); // 100000 幂运算（ES6）
+```
+
+### 赋值运算符
+
+```javascript
+const x = 10;
+
+x += 5; // 等同于 x = x + 5
+console.log(x); // 15
+
+x -= 3; // 等同于 x = x - 3
+console.log(x); // 12
+```
+
+### 比较运算符
+
+```javascript
+const a = 10;
+const b = 5;
+
+console.log(a > b); // true
+console.log(a < b); // false
+console.log(a >= b); // true
+console.log(a <= b); // false
+console.log(a === b); // false（严格相等，比较值和类型）
+console.log(a == b); // false（宽松相等，只比较值）
+console.log(a !== b); // true（严格不相等）
+```
+
+## 条件语句
+
+### if 语句
+
+```javascript
+const age = 18;
+
+if (age >= 18) {
+  console.log("你已经成年了！");
+} else if (age >= 13) {
+  console.log("你是青少年。");
+} else {
+  console.log("你还是个孩子。");
+}
+```
+
+
+## 循环
+
+### for 循环
+
+```javascript
+// 打印1到5
+for (const i = 1; i <= 5; i++) {
+  console.log(i);
+}
+
+// 遍历数组
+const fruits = ["苹果", "香蕉", "橙子"];
+for (const i = 0; i < fruits.length; i++) {
+  console.log(fruits[i]);
+}
+
+// 使用 for...of 遍历（ES6）
+for (const fruit of fruits) {
+  console.log(fruit);
+}
+```
+
+### while 循环
+
+```javascript
+const count = 1;
+while (count <= 5) {
+  console.log(count);
+  count++;
+}
+```
+
+## 函数
+
+函数是一段可重复使用的代码块，可以接受输入（参数），执行操作，并返回输出（返回值）。
+
+### 函数声明
+
+```javascript
+function greet(name) {
+  return `你好，${name}！`;
+}
+
+const message = greet("小明");
+console.log(message); // 输出：你好，小明！
+```
+
+格式如下
+
+```javascript
+function 函数名(参数1, 参数2, ...参数N) {
+    // 函数体：要执行的代码
+    return 返回值;  // 可选
+}
+```
+
+### 箭头函数（ES6）
+
+```javascript
+const sum = (a, b) => {
+  return a + b;
+};
+
+// 简化写法（当只有一行返回语句时）
+const multiply = (a, b) => a * b;
+
+console.log(sum(3, 4)); // 7
+console.log(multiply(3, 4)); // 12
+```
+
+## DOM 操作
+
+DOM（文档对象模型）是 HTML 和 XML 文档的编程接口。JavaScript 可以通过 DOM 来操作网页元素。
+
+### 选择元素
+
+```javascript
+// 通过 id 选择元素
+const title = document.getElementById("title");
+
+// 通过 class 选择元素（返回元素集合）
+const items = document.getElementsByClassName("item");
+
+// 通过标签名选择元素
+const paragraphs = document.getElementsByTagName("p");
+
+// 通过 CSS 选择器选择元素（ES5+）
+const header = document.querySelector("header"); // 选择第一个匹配的元素
+const allLinks = document.querySelectorAll("a"); // 选择所有匹配的元素
+```
+
+### 修改元素内容
+
+```javascript
+// 修改文本内容
+const title = document.getElementById("title");
+title.textContent = "新标题";
+
+// 修改 HTML 内容
+title.innerHTML = "<strong>加粗的新标题</strong>";
+```
+
+### 修改元素样式
+
+```javascript
+const element = document.getElementById("box");
+element.style.color = "red";
+element.style.fontSize = "20px";
+element.style.backgroundColor = "#f0f0f0";
+```
+
+### 添加事件监听器
+
+```javascript
+const button = document.getElementById("myButton");
+
+button.addEventListener("click", function() {
+  console.log("按钮被点击了！");
+  alert("你好，欢迎使用！");
+});
+```
+
+## 小案例：交互式计算器
+
+下面是一个简单的交互式计算器示例，演示如何结合 HTML、CSS 和 JavaScript。
+
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <title>简易计算器</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="calculator">
+    <h2>简易计算器</h2>
+    <input type="number" id="num1" placeholder="输入第一个数字">
+    <select id="operation">
+      <option value="add">+</option>
+      <option value="subtract">-</option>
+      <option value="multiply">×</option>
+      <option value="divide">÷</option>
+    </select>
+    <input type="number" id="num2" placeholder="输入第二个数字">
+    <button id="calculate">计算</button>
+    <div id="result">结果将显示在这里</div>
+  </div>
+  
+  <script src="script.js"></script>
+</body>
+</html>
+```
+@tab style.css
+```css
+.calculator {
+  max-width: 300px;
+  margin: 2rem auto;
+  padding: 1.5rem;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  text-align: center;
+  font-family: system-ui;
+}
+
+input, select, button {
+  margin: 0.5rem 0;
+  padding: 0.5rem;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+button {
+  background: #007bff;
+  color: white;
+  border: none;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+button:hover {
+  background: #0056b3;
+}
+
+#result {
+  margin-top: 1rem;
+  padding: 1rem;
+  background: #f8f9fa;
+  border-radius: 4px;
+}
+```
+@tab script.js
+```javascript
+// 获取DOM元素
+const num1Input = document.getElementById('num1');
+const num2Input = document.getElementById('num2');
+const operationSelect = document.getElementById('operation');
+const calculateButton = document.getElementById('calculate');
+const resultDiv = document.getElementById('result');
+
+// 添加点击事件监听器
+calculateButton.addEventListener('click', function() {
+  // 获取输入值
+  const num1 = parseFloat(num1Input.value);
+  const num2 = parseFloat(num2Input.value);
+  const operation = operationSelect.value;
+  const result;
+  
+  // 检查输入是否有效
+  if (isNaN(num1) || isNaN(num2)) {
+    resultDiv.textContent = '请输入有效的数字！';
+    return;
+  }
+  
+  // 执行计算
+  switch (operation) {
+    case 'add':
+      result = num1 + num2;
+      break;
+    case 'subtract':
+      result = num1 - num2;
+      break;
+    case 'multiply':
+      result = num1 * num2;
+      break;
+    case 'divide':
+      // 检查除数是否为0
+      if (num2 === 0) {
+        resultDiv.textContent = '除数不能为0！';
+        return;
+      }
+      result = num1 / num2;
+      break;
+  }
+  
+  // 显示结果
+  resultDiv.textContent = `计算结果：${result}`;
+});
+```
+:::
+
+## JavaScript 的异步编程
+
+JavaScript 是单线程的，但它可以通过异步编程模型来处理耗时操作，如网络请求、定时器等。
+
+### setTimeout 和 setInterval
+
+```javascript
+// setTimeout - 延迟执行一次
+setTimeout(function() {
+  console.log('2秒后执行');
+}, 2000);
+
+// setInterval - 定期重复执行
+const count = 0;
+const timer = setInterval(function() {
+  count++;
+  console.log(`执行第 ${count} 次`);
+  
+  if (count >= 5) {
+    clearInterval(timer); // 清除定时器
+    console.log('定时器已停止');
+  }
+}, 1000);
+```
+
+### Promise（ES6）
+
+Promise 是异步编程的一种解决方案，用于处理异步操作。
+
+```javascript
+// 创建一个Promise
+const fetchData = new Promise((resolve, reject) => {
+  // 模拟网络请求
+  setTimeout(() => {
+    const success = true;
+    if (success) {
+      resolve('数据获取成功');
+    } else {
+      reject('数据获取失败');
+    }
+  }, 2000);
+});
+
+// 使用Promise
+fetchData
+  .then(data => {
+    console.log(data);
+  })
+  .catch(error => {
+    console.error(error);
+  });
+```
+
+## 常见错误和调试技巧
+
+### 常见错误
+
+1. **语法错误**：代码不符合 JavaScript 语法规则
+2. **引用错误**：使用了未定义的变量或函数
+3. **类型错误**：对错误类型的值进行操作
+4. **范围错误**：数值超出有效范围
+
+### 调试技巧
+
+1. **使用 console.log()**：在控制台输出变量值或执行流程
+2. **使用断点**：在浏览器开发者工具中设置断点，逐步执行代码
+3. **检查错误信息**：仔细阅读错误提示，找出问题所在
+4. **检查变量类型**：使用 `typeof` 操作符检查变量类型
+
+```javascript
+console.log(typeof "hello"); // "string"
+console.log(typeof 42); // "number"
+console.log(typeof true); // "boolean"
+console.log(typeof {}); // "object"
+console.log(typeof []); // "object"（数组也是对象的一种）
+```
+
+## 实践练习
+
+### 练习1：创建一个简单的待办事项列表
+
+使用 HTML、CSS 和 JavaScript 创建一个待办事项列表，包含添加、删除和标记完成功能。
+
+提示：
+- 使用数组存储待办事项
+- 使用 DOM 操作动态更新列表
+- 为按钮添加事件监听器
+
+### 练习2：实现一个数字猜谜游戏
+
+计算机随机生成一个1到100之间的数字，玩家通过输入框猜测，程序提示"猜大了"或"猜小了"，直到猜对为止。
+
+提示：
+- 使用 `Math.random()` 生成随机数
+- 使用条件语句判断猜测结果
+- 记录并显示猜测次数
+
+## 总结
+
+JavaScript 是现代 web 开发的核心技术之一，它可以让网页变得动态和交互。通过学习变量、数据类型、运算符、条件语句、循环、函数和 DOM 操作等基础知识，你已经迈出了学习 JavaScript 的第一步。
+
+继续练习和探索，你会发现 JavaScript 的强大功能和灵活性！
--- a/docs/notes/theory/cryptography/README.md
+++ b/docs/notes/theory/cryptography/README.md
@@ -38,6 +38,68 @@ permalink: /theory/cryptography/
 - **移动通信**：SIM卡加密、移动支付安全
 - **物联网安全**：设备身份认证、数据传输加密

+### 1.5 基础概念与术语（入门）
+
+为方便初学者快速建立直觉，先认识密码学中最核心的几个概念：
+
+**明文（Plaintext）与密文（Ciphertext）**
+- 明文：未加密的原始消息，例如“HELLO”。
+- 密文：加密后的消息，人类或未授权系统难以直接理解。
+
+**加密（Encryption）与解密（Decryption）**
+- 加密：用密钥将明文转换为密文，记为：
+
+$$
+C = E_k(P)
+$$
+
+- 解密：用密钥将密文还原为明文，记为：
+
+$$
+P = D_k(C)
+$$
+
+其中，$P$ 表示明文，$C$ 表示密文，$k$ 表示密钥，$E$ 为加密算法，$D$ 为解密算法。
+
+**密钥（Key）：对称密钥 vs 非对称密钥**
+- 对称密钥：加密和解密使用相同的密钥，速度快，但密钥分发与管理是难点。
+- 非对称密钥（公钥密码）：加密使用“公钥”，解密使用“私钥”，便于密钥分发，还能支持数字签名。
+
+对称加密流程示意（同一把密钥）：
+
+```mermaid
+flowchart LR
+  S[发送者] -- 使用共享密钥 K 加密 --> C[(密文)]
+  C -- 使用共享密钥 K 解密 --> R[接收者]
+```
+
+非对称加密流程示意（公钥/私钥）：
+
+```mermaid
+flowchart LR
+  S[发送者] -- 使用接收者公钥加密 --> C[(密文)]
+  C -- 使用接收者私钥解密 --> R[接收者]
+```
+
+在典型的 RSA 公钥体制中，还可以用一个简洁的数学表达式表示加解密：
+
+$$
+\begin{aligned}
+ c &= m^{e} \bmod n,\\
+ m &= c^{d} \bmod n,
+\end{aligned}
+$$
+
+其中 $(e, n)$ 为公钥，$(d, n)$ 为私钥，$m$ 为明文，$c$ 为密文。
+
+**常见攻击模型简介（只需直观理解）**
+- 唯密文攻击（COA）：攻击者只有密文，尝试恢复明文或密钥。
+- 已知明文攻击（KPA）：攻击者拥有部分“明文-密文”对，用于分析算法或密钥。
+- 选择明文攻击（CPA）：攻击者可选择明文并获取其密文，用于推断密钥或算法结构。
+- 选择密文攻击（CCA）：攻击者可选择密文并得到其解密结果，进一步分析系统弱点。
+
+直观结论：设计良好的现代密码系统，应当在这些攻击模型下仍保持安全（在合理的参数与假设下）。
+
 ## 2. 密码学历史简述

 ### 2.1 古代密码学（公元前-15世纪）
@@ -51,6 +113,11 @@ permalink: /theory/cryptography/
 - 时间：公元前5世纪
 - 原理：缠绕在特定直径木棒上的皮条

+古典密码简述：
+- 核心思路：替换或移位（重新排列）字符。
+- 代表示例：凯撒（替换）、栅栏（移位）、维吉尼亚（多表替换）。
+- 直觉目标：混淆结构、增加猜测难度；但易受频率分析。
+
 ### 2.2 文艺复兴时期（15-18世纪）

 **维吉尼亚密码（Vigenère Cipher）**
@@ -87,6 +154,22 @@ permalink: /theory/cryptography/
 - 时间：2001年
 - 意义：取代DES的新一代加密标准

+现代密码简述：
+- 对称加密：同一密钥加解密，适合大量数据（示例：AES/DES/3DES）。
+
+$$
+C = E_k(P), \quad P = D_k(C)
+$$
+
+- 非对称加密：公钥加密、私钥解密，便于密钥分发与数字签名（示例：RSA/ECC）。
+
+$$
+c = m^{e} \bmod n, \quad m = c^{d} \bmod n
+$$
+
+- 密钥交换：Diffie–Hellman 在不安全信道建立共享密钥。
+- 数字签名：私钥签名、公钥验证，保障真实性与不可否认性。
+
 ### 2.5 关键历史时间线

 ```
@@ -99,206 +182,7 @@ permalink: /theory/cryptography/
 2001年：AES标准
 ```

-## 3. 密码分类

-### 3.1 古典密码
-
-#### 3.1.1 替换密码（Substitution Cipher）
-
-**原理**：将明文中的每个字符替换为另一个字符
-
-**凯撒密码示例**：
-```
-明文：HELLO
-密钥：移位3
-密文：KHOOR
-
-加密公式：C = (P + K) mod 26
-解密公式：P = (C - K) mod 26
-```
-
-**单表替换密码**：
- 特点：每个明文字符对应固定的密文字符
- 弱点：频率分析攻击
-
-#### 3.1.2 移位密码（Transposition Cipher）
-
-**原理**：重新排列明文字符的顺序
-
-**栅栏密码示例**：
-```
-明文：CRYPTOGRAPHY
-
-写入：  读取：
-C R Y P  C Y R H A R Y
- T O G R   T O G P P
- A P H Y
-
-密文：CYRHARYTOGPP
-```
-
-#### 3.1.3 维吉尼亚密码
-
-**原理**：使用关键词进行多表替换
-
-**加密过程**：
-```
-明文：ATTACKATDAWN
-密钥：LEMON
-密文：LXFOPVEFRNHR
-
-计算：
-A(0) + L(11) = L(11)
-T(19) + E(4) = X(23)
-T(19) + M(12) = F(5)
-...
-```
-
-#### 3.1.4 古典密码的局限性
-
- 易受频率分析攻击
- 密钥空间有限
- 缺乏严格的数学证明
- 无法抵抗现代计算攻击
-
-### 3.2 现代密码
-
-#### 3.2.1 对称加密（Symmetric Cryptography）
-
-**定义**：加密和解密使用相同密钥的密码系统
-
-**基本原理**：
-```
-加密：C = E(K, P)
-解密：P = D(K, C)
-
-其中：
-C - 密文
-P - 明文  
-K - 密钥
-E - 加密函数
-D - 解密函数
-```
-
-**常见算法**：
-
-**AES（高级加密标准）**
- 密钥长度：128/192/256位
- 分组大小：128位
- 轮数：10/12/14轮
- 结构：SPN网络
-
-**DES（数据加密标准）**
- 密钥长度：56位（实际64位）
- 分组大小：64位
- 轮数：16轮
- 结构：Feistel网络
-
-**3DES（三重DES）**
- 原理：三次DES加密
- 密钥长度：168位
- 兼容DES但更安全
-
-**对称加密优缺点**：
-
-**优点**：
- 加密速度快
- 计算资源需求低
- 适合大量数据加密
-
-**缺点**：
- 密钥分发困难
- 密钥管理复杂
- 不支持数字签名
-
-**应用场景**：
- 文件加密
- 数据库加密
- 网络通信加密
- 磁盘加密
-
-#### 3.2.2 非对称加密（Asymmetric Cryptography）
-
-**公钥密码体系概念**：
-
-使用一对数学相关的密钥：
- **公钥（Public Key）**：公开分发，用于加密
- **私钥（Private Key）**：秘密保存，用于解密
-
-**加密过程示意图**：
-```
-发送方                接收方
-   |                     |
-明文 + 接收方公钥 → 密文 → 密文 + 接收方私钥 → 明文
-   |                     |
-加密                  解密
-```
-
-**典型算法**：
-
-**RSA算法**
- 基于大数分解难题
- 密钥生成：选择两个大质数p,q，计算n=pq，φ(n)=(p-1)(q-1)
- 公钥：(e, n)，其中1<e<φ(n)且gcd(e,φ(n))=1
- 私钥：(d, n)，其中d≡e⁻¹ mod φ(n)
-
-**RSA加密示例**：
-```
-假设：
-p=61, q=53, n=3233, φ(n)=3120
-选择e=17, 计算d=2753
-
-公钥：(17, 3233)
-私钥：(2753, 3233)
-
-加密：C = M¹⁷ mod 3233
-解密：M = C²⁷⁵³ mod 3233
-```
-
-**ECC（椭圆曲线加密）**
- 基于椭圆曲线离散对数问题
- 相同安全强度下密钥更短
- 计算效率更高
-
-**ElGamal加密**
- 基于离散对数问题
- 可用于加密和数字签名
-
-**数字签名应用**：
-```
-签名过程：
-1. 对消息计算哈希值 H(M)
-2. 使用私钥加密哈希值 S = Sign(私钥, H(M))
-3. 发送 (M, S)
-
-验证过程：
-1. 对消息计算哈希值 H(M)
-2. 使用公钥解密签名 Verify(公钥, S) = H'(M)
-3. 比较 H(M) == H'(M)
-```
-
-**密钥交换应用**：
- Diffie-Hellman密钥交换
- 在不安全信道建立共享密钥
-
-**与对称加密的比较分析**：
-
-| 特性 | 对称加密 | 非对称加密 |
-|------|----------|------------|
-| 密钥数量 | 1个 | 2个（公钥+私钥） |
-| 加密速度 | 快 | 慢 |
-| 密钥分发 | 困难 | 容易 |
-| 数字签名 | 不支持 | 支持 |
-| 适用场景 | 大量数据 | 小量数据、密钥交换 |
-
-**混合加密系统**：
-
-实际应用中常结合两种加密方式：
-```
-1. 使用非对称加密交换对称密钥
-2. 使用对称加密加密实际数据
-3. 结合两种加密的优势
-```

 ## 总结

--- a/docs/notes/theory/cryptography/classical-encryption/permutation-encryption.md
+++ b/docs/notes/theory/cryptography/classical-encryption/permutation-encryption.md
@@ -0,0 +1,107 @@
+---
+title: 置换密码 - 等待完善
+createTime: 2025/10/29 13:50:49
+permalink: /theory/cryptography/permutation-encryption/
+---
+
+# 置换密码（Permutation / Transposition Ciphers）
+
+置换密码的核心思想不是“把字母换成别的字母”（替换），而是**重新排列明文字符的位置**。也就是说：
+- 明文字母的集合不变，顺序发生了改变；
+- 由于字母频率不变，置换密码依然会暴露统计特征，但单词的结构与位置模式被打散。
+
+与“替换密码”相比，置换密码更像是“洗牌”：把原本顺序排列的牌重新打乱。单独使用时并不安全，但与替换联合使用（乘积密码）能显著增强安全性。
+
+```mermaid
+flowchart LR
+  P[明文] --> A{根据密钥生成位置}
+  A --> B[重新排列字符]
+  B --> C[密文]
+```
+
+## 一、栅栏密码（Rail Fence Cipher）
+
+**工作原理**：
+将明文按“Z字形”写入若干行（称为“栅栏/轨道”），再按行依次读出即得到密文。轨道数即为密钥。
+
+**示意**（以 3 轨为例）：
+```
+轨1: 0       4       8      ...
+轨2: 1    3  5    7  9      ...
+轨3:   2       6              ...
+```
+
+**示例**：
+明文：`HELLOWORLD`
+轨道数：`3`
+- 轨1（索引 0,4,8）：`H O L`
+- 轨2（索引 1,3,5,7,9）：`E L W R D`
+- 轨3（索引 2,6）：`L O`
+
+密文为各轨串联：`HOL` + `ELWRD` + `LO` → `HOLELWRDLO`
+
+**数学表示**：
+设明文 $P = p_0 p_1 \dots p_{n-1}$，根据密钥生成一个位置序列 $s_0, s_1, \dots, s_{n-1}$（即置换次序），则：
+$$
+C_j = p_{s_j}, \quad j = 0,1,\dots,n-1
+$$
+解密使用逆序列 $t = s^{-1}$：
+$$
+p_i = C_{t_i}, \quad i = 0,1,\dots,n-1
+$$
+
+**特点**：
+- 实现简单，直观“打乱顺序”
+- 频率不变，难以抵抗纯统计分析；但位置模式被破坏，较难直接猜词
+- 作为教学与与替换密码的组合（乘积密码）更有价值
+
+## 二、列移位置换（Columnar Transposition）
+
+**工作原理**：
+选择一个关键词，将明文按列填入表格，再按关键词的字母排序对列进行重排，最终按列或按行读出密文。
+
+```mermaid
+flowchart LR
+  A[明文填入表格] --> B{按关键词排序列}
+  B --> C[重排读取]
+  C --> D[密文]
+```
+
+**简例（概念演示）**：
+明文：`ATTACKATDAWN`
+关键词：`ZEBRA`（按字母表排序为 `A B E R Z`）
+1) 将明文逐行填入 5 列表格；
+2) 按关键词排序（A→B→E→R→Z）重排列；
+3) 按重排后的列依次读出密文。
+
+（实际实现时需要处理明文长度不足一整行的填充策略，如使用 `X` 或留空。）
+
+**数学表示（一般置换模型）**：
+关键词决定一个列置换 $\pi$，其作用是重新排列列索引。若把明文按列读取为序列 $P$，加密可抽象为：
+$$
+C = \operatorname{Permute}_{\pi}(P), \quad P = \operatorname{Permute}_{\pi^{-1}}(C)
+$$
+
+**特点**：
+- 比栅栏更灵活，关键词让置换更“难猜”
+- 仍保留频率分布，易受已知明文/选择明文的结构分析攻击
+- 常与替换结合形成更强的乘积密码（如 ADFGX/ADFGVX 密码）
+
+## 三、联合与加固：置换 × 替换
+
+将“替换”与“置换”组合（先替换后置换，或多轮交替）能显著增强安全性：
+- 替换打乱统计特征（字母频率分布变平）
+- 置换打乱位置结构（模式与相邻关系被破坏）
+
+这种思路在现代密码设计中仍然常见（“混淆与扩散”理念），尽管算法形式已经大为不同。
+
+## 四、安全性与弱点（直观理解）
+- 单独的置换密码不改变字母频率，抵抗统计攻击能力有限
+- 容易受到已知明文/选择明文攻击（通过结构猜测置换）
+- 多轮、复杂置换能提高攻击成本，但不建议单独用于实际安全场景
+
+## 五、小练习（可选）
+试着把你自己的名字用 3 轨栅栏加密；然后写出解密过程（先确定轨道索引，再按逆序重建原文）。
+
+## 附件：
+具体的使用样例代码请参考：[https://gitea.simengweb.com/si-meng-spec/cryptography-example-code](https://gitea.simengweb.com/si-meng-spec/cryptography-example-code)
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
      "license": "MIT",
      "dependencies": {
        "@waline/client": "^3.6.0",
-        "mermaid": "^11.12.0"
+        "mermaid": "^11.12.1"
      },
      "devDependencies": {
        "@vuepress/bundler-vite": "2.0.0-rc.24",
@@ -4051,7 +4051,7 @@
    },
    "node_modules/d3": {
      "version": "7.9.0",
-      "resolved": "https://registry.npmmirror.com/d3/-/d3-7.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
      "license": "ISC",
      "dependencies": {
@@ -4092,7 +4092,7 @@
    },
    "node_modules/d3-array": {
      "version": "3.2.4",
-      "resolved": "https://registry.npmmirror.com/d3-array/-/d3-array-3.2.4.tgz",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
      "license": "ISC",
      "dependencies": {
@@ -4104,7 +4104,7 @@
    },
    "node_modules/d3-axis": {
      "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/d3-axis/-/d3-axis-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
      "license": "ISC",
      "engines": {
@@ -4113,7 +4113,7 @@
    },
    "node_modules/d3-brush": {
      "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/d3-brush/-/d3-brush-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
      "license": "ISC",
      "dependencies": {
@@ -4129,7 +4129,7 @@
    },
    "node_modules/d3-chord": {
      "version": "3.0.1",
-      "resolved": "https://registry.npmmirror.com/d3-chord/-/d3-chord-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
      "license": "ISC",
      "dependencies": {
@@ -4141,7 +4141,7 @@
    },
    "node_modules/d3-color": {
      "version": "3.1.0",
-      "resolved": "https://registry.npmmirror.com/d3-color/-/d3-color-3.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
      "license": "ISC",
      "engines": {
@@ -4150,7 +4150,7 @@
    },
    "node_modules/d3-contour": {
      "version": "4.0.2",
-      "resolved": "https://registry.npmmirror.com/d3-contour/-/d3-contour-4.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
      "license": "ISC",
      "dependencies": {
@@ -4162,7 +4162,7 @@
    },
    "node_modules/d3-delaunay": {
      "version": "6.0.4",
-      "resolved": "https://registry.npmmirror.com/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
      "license": "ISC",
      "dependencies": {
@@ -4174,7 +4174,7 @@
    },
    "node_modules/d3-dispatch": {
      "version": "3.0.1",
-      "resolved": "https://registry.npmmirror.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
      "license": "ISC",
      "engines": {
@@ -4183,7 +4183,7 @@
    },
    "node_modules/d3-drag": {
      "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/d3-drag/-/d3-drag-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
      "license": "ISC",
      "dependencies": {
@@ -4196,7 +4196,7 @@
    },
    "node_modules/d3-dsv": {
      "version": "3.0.1",
-      "resolved": "https://registry.npmmirror.com/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
      "license": "ISC",
      "dependencies": {
@@ -4221,7 +4221,7 @@
    },
    "node_modules/d3-dsv/node_modules/commander": {
      "version": "7.2.0",
-      "resolved": "https://registry.npmmirror.com/commander/-/commander-7.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
      "license": "MIT",
      "engines": {
@@ -4230,7 +4230,7 @@
    },
    "node_modules/d3-ease": {
      "version": "3.0.1",
-      "resolved": "https://registry.npmmirror.com/d3-ease/-/d3-ease-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
      "license": "BSD-3-Clause",
      "engines": {
@@ -4239,7 +4239,7 @@
    },
    "node_modules/d3-fetch": {
      "version": "3.0.1",
-      "resolved": "https://registry.npmmirror.com/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
      "license": "ISC",
      "dependencies": {
@@ -4251,7 +4251,7 @@
    },
    "node_modules/d3-force": {
      "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/d3-force/-/d3-force-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
      "license": "ISC",
      "dependencies": {
@@ -4265,7 +4265,7 @@
    },
    "node_modules/d3-format": {
      "version": "3.1.0",
-      "resolved": "https://registry.npmmirror.com/d3-format/-/d3-format-3.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
      "license": "ISC",
      "engines": {
@@ -4274,7 +4274,7 @@
    },
    "node_modules/d3-geo": {
      "version": "3.1.1",
-      "resolved": "https://registry.npmmirror.com/d3-geo/-/d3-geo-3.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
      "license": "ISC",
      "dependencies": {
@@ -4286,7 +4286,7 @@
    },
    "node_modules/d3-hierarchy": {
      "version": "3.1.2",
-      "resolved": "https://registry.npmmirror.com/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
      "license": "ISC",
      "engines": {
@@ -4295,7 +4295,7 @@
    },
    "node_modules/d3-interpolate": {
      "version": "3.0.1",
-      "resolved": "https://registry.npmmirror.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
      "license": "ISC",
      "dependencies": {
@@ -4307,7 +4307,7 @@
    },
    "node_modules/d3-path": {
      "version": "3.1.0",
-      "resolved": "https://registry.npmmirror.com/d3-path/-/d3-path-3.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
      "license": "ISC",
      "engines": {
@@ -4316,7 +4316,7 @@
    },
    "node_modules/d3-polygon": {
      "version": "3.0.1",
-      "resolved": "https://registry.npmmirror.com/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
      "license": "ISC",
      "engines": {
@@ -4325,7 +4325,7 @@
    },
    "node_modules/d3-quadtree": {
      "version": "3.0.1",
-      "resolved": "https://registry.npmmirror.com/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
      "license": "ISC",
      "engines": {
@@ -4334,7 +4334,7 @@
    },
    "node_modules/d3-random": {
      "version": "3.0.1",
-      "resolved": "https://registry.npmmirror.com/d3-random/-/d3-random-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
      "license": "ISC",
      "engines": {
@@ -4383,7 +4383,7 @@
    },
    "node_modules/d3-scale": {
      "version": "4.0.2",
-      "resolved": "https://registry.npmmirror.com/d3-scale/-/d3-scale-4.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
      "license": "ISC",
      "dependencies": {
@@ -4399,7 +4399,7 @@
    },
    "node_modules/d3-scale-chromatic": {
      "version": "3.1.0",
-      "resolved": "https://registry.npmmirror.com/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
      "license": "ISC",
      "dependencies": {
@@ -4412,7 +4412,7 @@
    },
    "node_modules/d3-selection": {
      "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/d3-selection/-/d3-selection-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
      "license": "ISC",
      "engines": {
@@ -4421,7 +4421,7 @@
    },
    "node_modules/d3-shape": {
      "version": "3.2.0",
-      "resolved": "https://registry.npmmirror.com/d3-shape/-/d3-shape-3.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
      "license": "ISC",
      "dependencies": {
@@ -4433,7 +4433,7 @@
    },
    "node_modules/d3-time": {
      "version": "3.1.0",
-      "resolved": "https://registry.npmmirror.com/d3-time/-/d3-time-3.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
      "license": "ISC",
      "dependencies": {
@@ -4445,7 +4445,7 @@
    },
    "node_modules/d3-time-format": {
      "version": "4.1.0",
-      "resolved": "https://registry.npmmirror.com/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
      "license": "ISC",
      "dependencies": {
@@ -4457,7 +4457,7 @@
    },
    "node_modules/d3-timer": {
      "version": "3.0.1",
-      "resolved": "https://registry.npmmirror.com/d3-timer/-/d3-timer-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
      "license": "ISC",
      "engines": {
@@ -4466,7 +4466,7 @@
    },
    "node_modules/d3-transition": {
      "version": "3.0.1",
-      "resolved": "https://registry.npmmirror.com/d3-transition/-/d3-transition-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
      "license": "ISC",
      "dependencies": {
@@ -4485,7 +4485,7 @@
    },
    "node_modules/d3-zoom": {
      "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
      "license": "ISC",
      "dependencies": {
@@ -4500,9 +4500,9 @@
      }
    },
    "node_modules/dagre-d3-es": {
-      "version": "7.0.11",
-      "resolved": "https://registry.npmmirror.com/dagre-d3-es/-/dagre-d3-es-7.0.11.tgz",
-      "integrity": "sha512-tvlJLyQf834SylNKax8Wkzco/1ias1OPw8DcUMDE7oUIoSEW25riQVuiu/0OWEFqT0cxHT3Pa9/D82Jr47IONw==",
+      "version": "7.0.13",
+      "resolved": "https://registry.npmjs.org/dagre-d3-es/-/dagre-d3-es-7.0.13.tgz",
+      "integrity": "sha512-efEhnxpSuwpYOKRm/L5KbqoZmNNukHa/Flty4Wp62JRvgH2ojwVgPgdYyr4twpieZnyRDdIH7PY2mopX26+j2Q==",
      "license": "MIT",
      "dependencies": {
        "d3": "^7.9.0",
@@ -4534,7 +4534,7 @@
    },
    "node_modules/delaunator": {
      "version": "5.0.1",
-      "resolved": "https://registry.npmmirror.com/delaunator/-/delaunator-5.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
      "license": "ISC",
      "dependencies": {
@@ -5457,7 +5457,7 @@
    },
    "node_modules/internmap": {
      "version": "2.0.3",
-      "resolved": "https://registry.npmmirror.com/internmap/-/internmap-2.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
      "license": "ISC",
      "engines": {
@@ -5928,21 +5928,21 @@
      }
    },
    "node_modules/mermaid": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmmirror.com/mermaid/-/mermaid-11.12.0.tgz",
-      "integrity": "sha512-ZudVx73BwrMJfCFmSSJT84y6u5brEoV8DOItdHomNLz32uBjNrelm7mg95X7g+C6UoQH/W6mBLGDEDv73JdxBg==",
+      "version": "11.12.1",
+      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-11.12.1.tgz",
+      "integrity": "sha512-UlIZrRariB11TY1RtTgUWp65tphtBv4CSq7vyS2ZZ2TgoMjs2nloq+wFqxiwcxlhHUvs7DPGgMjs2aeQxz5h9g==",
      "license": "MIT",
      "dependencies": {
        "@braintree/sanitize-url": "^7.1.1",
        "@iconify/utils": "^3.0.1",
-        "@mermaid-js/parser": "^0.6.2",
+        "@mermaid-js/parser": "^0.6.3",
        "@types/d3": "^7.4.3",
        "cytoscape": "^3.29.3",
        "cytoscape-cose-bilkent": "^4.1.0",
        "cytoscape-fcose": "^2.2.0",
        "d3": "^7.9.0",
        "d3-sankey": "^0.12.3",
-        "dagre-d3-es": "7.0.11",
+        "dagre-d3-es": "7.0.13",
        "dayjs": "^1.11.18",
        "dompurify": "^3.2.5",
        "katex": "^0.16.22",
@@ -6787,7 +6787,7 @@
    },
    "node_modules/robust-predicates": {
      "version": "3.0.2",
-      "resolved": "https://registry.npmmirror.com/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==",
      "license": "Unlicense"
    },
@@ -6871,7 +6871,7 @@
    },
    "node_modules/rw": {
      "version": "1.3.3",
-      "resolved": "https://registry.npmmirror.com/rw/-/rw-1.3.3.tgz",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
      "license": "BSD-3-Clause"
    },
--- a/package.json
+++ b/package.json
@@ -26,6 +26,6 @@
  },
  "dependencies": {
    "@waline/client": "^3.6.0",
-    "mermaid": "^11.12.0"
+    "mermaid": "^11.12.1"
  }
 }
Author	SHA1	Message	Date
Kawaxxxsaki	82324f6274	docs(web): 更新javascript基础文档中函数部分的描述添加函数声明格式说明并完善函数定义描述	2025-12-05 13:32:37 +08:00
Kawaxxxsaki	3531360974	Merge branch 'main' of https://gitea.simengweb.com/si-meng-spec/SiMengWebSite_Notes	2025-12-01 15:21:44 +08:00
Kawaxxxsaki	da188afd82	docs(web): 修正HTML列表与语义布局文档的标题将文档标题从"test"修改为"html 列表与语义布局"，使其更准确地反映文档内容	2025-12-01 15:21:37 +08:00
祀梦	8ad5c45a42	docs: 添加站点域名配置以启用SEO优化	2025-11-21 19:38:57 +08:00
祀梦	bca2e0619c	docs: 修正文档中的日期格式将createTime的日期格式从"2025年11月11日 13:54:02"统一修改为"2025/11/11 13:54:02"	2025-11-11 21:44:20 +08:00
祀梦	5d510b0433	docs: 添加免费大模型API整合文档添加一篇详细介绍百度千帆、讯飞星火、腾讯混元和SCNet平台免费/低价大模型API的文档包含各平台API调用示例、价格对比和使用建议	2025-11-11 21:34:46 +08:00
Kawaxxxsaki	2f55fc7184	docs(web): 添加 JavaScript 基础知识文档添加 JavaScript 基础知识文档，包含变量、数据类型、运算符、条件语句、循环、函数和 DOM 操作等内容，为初学者提供全面的学习资源	2025-11-10 14:45:12 +08:00
Kawaxxxsaki	474f335e94	docs(web): 添加HTML列表与语义布局文档添加关于HTML列表(ul/ol/li)和语义化标签(header/nav/main等)的详细文档，包含基础语法说明、代码示例和练习作业，帮助初学者掌握HTML结构化编写	2025-11-02 20:50:33 +08:00
祀梦	2b9e5f9bd1	docs(web): 修正HTML标签文档中的代码格式和描述统一使用反引号标记HTML标签，提高文档可读性和一致性	2025-11-02 20:43:42 +08:00
祀梦	43aa3f07e5	Merge branch 'main' of https://gitea.simengweb.com/si-meng-spec/SiMengWebSite_Notes	2025-11-02 20:32:39 +08:00
祀梦	c3e8cad947	ci: 添加构建和发布文档的批处理脚本添加 build-and-publish.bat 脚本用于自动化文档构建和发布流程，包含依赖安装、构建、Git仓库更新和发布功能	2025-11-02 20:32:34 +08:00
Kawaxxxsaki	b7c97d0f17	docs(web): 添加div标签和class属性的详细说明扩展HTML文档，新增关于div标签和class属性的详细解释和使用示例，包括： - div标签的基本特点和用途 - class属性的作用和实际应用场景 - 相关代码示例和练习作业	2025-11-02 20:21:36 +08:00
Kawaxxxsaki	2391018d79	chore: 更新mermaid依赖至11.12.1并删除过时文档删除html2.md文档并简化html-tags-attributes.md内容	2025-11-02 19:59:19 +08:00
祀梦	b28ed8ebfe	docs(web): 添加HTML常用标签与属性文档新增HTML常用标签与属性的详细教程文档，包含基础标签使用、语义化布局、媒体元素等内容，并附带示例代码和练习作业	2025-11-02 19:44:44 +08:00
Kawaxxxsaki	799551073c	docs(web): 添加HTML基础语法第二课文档新增HTML基础语法第二课文档，介绍div标签和class属性的基本概念及用法	2025-11-02 19:13:40 +08:00
祀梦	3f8169ae56	Merge branch 'main' of https://gitea.simengweb.com/si-meng-spec/SiMengWebSite_Notes	2025-10-29 22:12:23 +08:00
祀梦	8c7e8ea6e3	docs(cryptography): 添加置换密码文档并更新导航配置添加关于古典加密算法中置换密码的详细文档，包括栅栏密码和列移位置换的工作原理、数学表示及安全性分析。同时更新笔记导航配置以包含新文档链接。新增信创竞赛环境搭建指南文档，包含系统配置要求和详细操作步骤。	2025-10-29 22:12:12 +08:00
Kawaxxxsaki	669f62549e	Merge branch 'main' of https://gitea.simengweb.com/si-meng-spec/SiMengWebSite_Notes	2025-10-29 14:10:04 +08:00
Kawaxxxsaki	c95b09f329	docs(notes): 修改文档标题为"仲夏夜之梦" 更新HTML示例中的文档标题，从"祀梦的花园"改为"仲夏夜之梦"，保持文档内容的一致性	2025-10-29 14:09:59 +08:00
祀梦	868cc9b514	docs(密码学): 添加基础概念与术语章节和现代密码简述为初学者添加密码学核心概念解释，包括明文/密文、加密/解密、密钥类型等基础术语。同时补充现代密码学中对称加密、非对称加密和数字签名的简要说明，帮助建立基本认知框架。	2025-10-29 13:45:37 +08:00