From 95de5b4d3ed65d7c53aed4781b49e4c1ac7dbeb3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A5=80=E6=A2=A6?= <3501646051@qq.com>
Date: Tue, 28 Oct 2025 23:27:00 +0800
Subject: [PATCH] =?UTF-8?q?docs(web):=20=E6=B7=BB=E5=8A=A0web=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91=E5=AD=A6=E4=B9=A0=E7=AC=94=E8=AE=B0=E5=8F=8A=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加web开发学习笔记目录及相关文档，包括HTML/CSS/JavaScript基础知识讲解和练习示例。同时更新vuepress配置以支持新内容：
1. 新增web开发导航栏入口
2. 添加web笔记模块配置
3. 启用demo插件支持
---
 docs/.vuepress/config.ts                      |   3 +-
 docs/.vuepress/navbar.ts                      |   4 +
 docs/.vuepress/notes.ts                       |  14 +-
 docs/notes/programming/web/README.md          |   5 +
 .../web/basic-syntax/html-css-js.md           | 535 ++++++++++++++++++
 5 files changed, 559 insertions(+), 2 deletions(-)
 create mode 100644 docs/notes/programming/web/README.md
 create mode 100644 docs/notes/programming/web/basic-syntax/html-css-js.md

diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
index 3ca681a..db25b2a 100644
--- a/docs/.vuepress/config.ts
+++ b/docs/.vuepress/config.ts
@@ -27,7 +27,8 @@ export default defineUserConfig({
       math: {
         type: 'katex',
       },
-      mermaid: true
+      mermaid: true,
+      demo: true,
     },
     /**
      * 编译缓存，加快编译速度
diff --git a/docs/.vuepress/navbar.ts b/docs/.vuepress/navbar.ts
index 58c5091..d4bd0e5 100644
--- a/docs/.vuepress/navbar.ts
+++ b/docs/.vuepress/navbar.ts
@@ -33,6 +33,10 @@ export default defineNavbarConfig([
         text: 'Solidity',
         link: '/programming/solidity/',
       },
+      {
+        text: 'Web 开发',
+        link: '/programming/web/',
+      }
     ],
   },
   {
diff --git a/docs/.vuepress/notes.ts b/docs/.vuepress/notes.ts
index 7ae6ee3..6577441 100644
--- a/docs/.vuepress/notes.ts
+++ b/docs/.vuepress/notes.ts
@@ -141,11 +141,23 @@ const linux = defineNoteConfig({
     }
   ]
 })
+const web = defineNoteConfig({
+  dir: 'programming',
+  link: '/programming/web/',
+  sidebar: [
+    { text: "Web 开发学习笔记", link: "/programming/web/" },
+    {
+      text: "基础知识", prefix: "/basic-syntax", items: [
+        { text: "Web 前端基础讲解", link: "/programming/web/basic-syntax/html-css-js/" },
+      ],
+    },
+  ]
+})
 /**
  * 导出所有的 note
  */
 export default defineNotesConfig({
   dir: 'notes',
   link: '/',
-  notes: [LeetCode, english, cPlusPlus, solidity, blockchain, linux, cryptography],
+  notes: [LeetCode, english, cPlusPlus, solidity, blockchain, linux, cryptography, web],
 })
diff --git a/docs/notes/programming/web/README.md b/docs/notes/programming/web/README.md
new file mode 100644
index 0000000..73ee2b3
--- /dev/null
+++ b/docs/notes/programming/web/README.md
@@ -0,0 +1,5 @@
+---
+title: Web 开发学习笔记
+createTime: 2025/10/28 21:23:18
+permalink: /programming/web/
+---
diff --git a/docs/notes/programming/web/basic-syntax/html-css-js.md b/docs/notes/programming/web/basic-syntax/html-css-js.md
new file mode 100644
index 0000000..8ef19b8
--- /dev/null
+++ b/docs/notes/programming/web/basic-syntax/html-css-js.md
@@ -0,0 +1,535 @@
+---
+title: Web 前端基础讲解
+createTime: 2025/10/28 21:23:48
+permalink: /programming/web/basic-syntax/html-css-js/
+---
+
+## 前端开发到底是什么？
+
+前端开发，简单来说，就是**你能在网页上看到和互动的一切**。
+
+想象一下你正在看一个网站：
+
+*   **文字、图片、按钮、菜单**：这些都是前端开发人员用代码“画”出来的。
+*   **点击按钮会发生什么、输入框能打字、图片能放大缩小**：这些互动效果也是前端开发人员用代码实现的。
+
+所以，前端开发就是负责把设计师画好的网站样子，用代码变成用户可以在浏览器里真实看到、摸到、用的东西。它主要涉及三种技术：
+
+1.  **HTML**：就像网页的“骨架”，决定了网页上有什么内容（标题、段落、图片等）。
+2.  **CSS**：就像网页的“衣服”，决定了网页看起来怎么样（颜色、字体、布局等）。
+3.  **JavaScript**：就像网页的“大脑”，决定了网页能做什么（动画、交互、数据处理等）。
+
+总而言之，前端开发就是让网站变得好看、好用、能互动。
+
+## 开发工具
+
+进行前端开发，我们需要一个好用的“工具箱”。其中，**Visual Studio Code (VS Code)** 是一个非常受欢迎且功能强大的选择。
+
+VsCode 官网：[https://code.visualstudio.com/](https://code.visualstudio.com/)
+
+**为什么推荐 VS Code？**
+
+*   **免费且开源**：你可以免费使用它，并且它的代码是公开的，有很多人一起维护和改进。
+*   **轻量级但功能强大**：它启动速度快，占用资源少，但通过安装各种“插件”，可以实现非常多的功能，比如代码高亮、智能提示、调试、版本控制等等。
+*   **支持多种语言**：不仅对 HTML、CSS、JavaScript 有很好的支持，也支持其他很多编程语言。
+*   **丰富的生态系统**：有大量的插件可以帮助你提高开发效率，比如 Live Server（实时预览网页）、Prettier（代码格式化）等。
+*   **跨平台**：无论你使用 Windows、macOS 还是 Linux，都可以安装和使用 VS Code。
+
+### VsCode 前端开发插件推荐
+- **Chinese (Simplified) Language Pack for Visual Studio Code**：中文语言包，方便中文用户使用。
+- **Live Server**：实时预览网页，修改代码后自动刷新。
+- **Prettier**：代码格式化，保持代码风格统一。
+- **HTML CSS Support**：HTML 和 CSS 代码智能提示。
+
+参考文章：
+1. [VSCode安装配置使用教程（最新版超详细保姆级含插件）一文就够了](https://blog.csdn.net/2303_82176667/article/details/137193809)
+2. [快速上手web前端开发（超详细教程）](https://blog.csdn.net/2303_82176667/article/details/137193809)
+
+## HTML5 基础知识讲解
+
+HTML 是一种用来描述网页的语言，用于描述网页的结构和内容。
+
+HTML 并不是一种编程语言，而是一种标记语言。它使用标签来描述网页上的不同元素，比如标题、段落、图片、链接等。
+
+标签指的是由尖括号 `<` 和 `>` 包围的关键词，通常成对出现，用来表示元素的开始和结束。
+
+一个简单的 HTML 实例，用于初步的了解效果：
+```html title='index.html'
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>祀梦的花园(notes.simengweb.com)</title>
+</head>
+<body>
+<h1>我的第一个标题</h1>
+<p>我的第一个段落。</p>
+</body>
+</html>
+```
+
+小提示：可以将代码复制到 VsCode 中，然后使用 Live Server 插件就可以实时预览效果啦。
+
+### HTML5 文档分析
+我们以前面的样例代码为例，来对 HTML 文档进行讲解
+
+第一行：`<!DOCTYPE html>`，这是一个文档类型声明，用于告诉浏览器这是一个 HTML5 文档。
+
+第二行：`<html>`，这是 HTML 文档的根元素，所有其他元素都必须嵌套在这个元素中，`<html>` 和 `</html>` 之间的内容就是文档的主体。
+
+第三行到第六行：`<head>`，这是文档的头部元素，用于包含文档的元数据（比如标题、字符编码、外部资源引用等）。
+
+第四行：`<meta charset="utf-8">`，这是一个元数据标签，用于指定文档的字符编码为 UTF-8。UTF-8 是一种常用的字符编码，能够表示世界上几乎所有的字符。如果不写的话可能会导致中文乱码的问题。
+
+第五行：`<title>祀梦的花园(notes.simengweb.com)</title>`，这是文档的标题，会显示在浏览器的标题栏或标签页上。
+
+第七行：`<body>`，这是文档的主体元素，用于包含文档的可见内容（比如文字、图片、按钮等），`<body>` 和 `</body>` 之间的内容就是文档的主体内容。
+
+第八行：`<h1>我的第一个标题</h1>`，这是一个一级标题元素，用于表示文档的主要主题。`h1` 元素的内容会显示为较大的字体，通常用于页面的主标题。
+
+第九行：`<p>我的第一个段落。</p>`，这是一个段落元素，用于表示文档中的一个段落。`p` 元素的内容会显示为普通的段落文本。
+
+小提示：在浏览器中打开 F12 开启开发者工具，就可以查看和调试 HTML 文档啦。
+
+## CSS3 基础知识讲解
+
+CSS 是一种用来描述 HTML 文档“长什么样”的语言，专门负责网页的样式、排版与视觉效果。
+
+CSS 也不是编程语言，而是一种“样式表”语言。它通过“选择器”找到 HTML 元素，再给它挂上一条或多条“声明”，告诉浏览器“这个元素应该是什么颜色、多大字号、放在哪里”。
+
+一条 CSS 声明由“属性”和“值”组成，用冒号分隔，以分号结尾；多条声明放在花括号里，就组成了一条“样式规则”。
+
+一个最简单的 CSS 示例，让页面里的标题变成红色、居中显示：
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>祀梦的花园(notes.simengweb.com)</title>
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+<h1>我的第一个标题</h1>
+<p>我的第一个段落。</p>
+</body>
+</html>
+```
+@tab style.css
+```css
+body {
+    background-color:#d0e4fe;
+}
+h1 {
+    color:orange;
+    text-align:center;
+}
+p {
+    font-family:"Times New Roman";
+    font-size:20px;
+}
+```
+:::
+这里的 index.html 中需要添加一条语句，用于引入 CSS 样式表。
+```html
+<link rel="stylesheet" href="style.css">
+```
+然后通过浏览器打开 index.html 就可以看到效果啦。
+
+### CSS 文档分析
+
+我们以前面的样例代码为例，来对 CSS 文档进行讲解
+
+第一到三行：`body { background-color:#d0e4fe; }`，这是一条针对 `<body>` 元素的样式规则。  
+- `body` 是“选择器”，表示要把样式应用到整个网页主体。  
+- `background-color` 是属性，用来设置背景颜色；`#d0e4fe` 是一个淡蓝色色值，因此整个页面会呈现淡蓝色背景。
+
+第四行到第七行：`h1 { color:orange; text-align:center; }`，这是一条针对 `<h1>` 元素的样式规则。  
+- `h1` 是“选择器”，对应 HTML 中的一级标题。  
+- `color:orange;` 把标题文字设为橙色。  
+- `text-align:center;` 让标题在水平方向上居中显示。
+
+第八行到第十一行：`p { font-family:"Times New Roman"; font-size:20px; }`，这是一条针对 `<p>` 元素的样式规则。  
+- `p` 是“选择器”，对应 HTML 中的段落。  
+- `font-family:"Times New Roman";` 指定段落使用 Times New Roman 字体。  
+- `font-size:20px;` 把段落文字大小设为 20 像素，让文字看起来更大、更清晰。
+
+小提示：在 VsCode 中安装“Live Server”插件后，修改并保存 CSS 文件，浏览器会自动刷新，立即看到样式变化，方便调试。
+
+## JavaScript 基础知识讲解
+
+JavaScript（简称 JS）是让网页“动起来、能互动”的语言。它可以：
+- 响应用户操作（点击、输入、滚动等）
+- 修改页面内容与样式（增删节点、改文字/颜色）
+- 与服务器通信、处理数据与状态
+- 实现动画与复杂交互逻辑
+
+下面用一个小示例，演示 JS 如何让页面产生交互效果：
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>祀梦的花园(notes.simengweb.com)</title>
+  <link rel="stylesheet" href="style.css">
+  <!-- 样式写在外部 CSS 中 -->
+  <!-- JavaScript 推荐放在 body 末尾，或使用 defer 属性 -->
+  <!-- 这里在 body 末尾通过 src 引入外部脚本 -->
+</head>
+<body>
+  <h1>我的第一个标题</h1>
+  <p id="message">我的第一个段落。</p>
+
+  <button id="btn">点我试试</button>
+  <input id="name" placeholder="输入你的名字" />
+
+  <script src="script.js"></script>
+</body>
+</html>
+```
+@tab script.js
+```js
+// 等页面元素加载完成后再执行（避免找不到节点）
+document.addEventListener('DOMContentLoaded', () => {
+  const msg = document.getElementById('message'); // 选择段落节点
+  const btn = document.getElementById('btn');     // 选择按钮
+  const nameInput = document.getElementById('name'); // 选择输入框
+
+  // 点击按钮，修改段落文本与颜色
+  btn.addEventListener('click', () => {
+    msg.textContent = '你点击了按钮！';
+    msg.style.color = 'green';
+    console.log('按钮被点击'); // 打开浏览器控制台可见
+  });
+
+  // 输入时，实时更新欢迎语
+  nameInput.addEventListener('input', (e) => {
+    const name = e.target.value.trim();
+    msg.textContent = name ? `你好，${name}！` : '我的第一个段落。';
+  });
+});
+```
+:::
+
+### JavaScript 文档分析
+我们以前面的样例代码为例，来对 JS 的关键点进行讲解：
+
+- `<script src="script.js"></script>`：在 HTML 中通过 `script` 标签引入外部 JS 文件。常见放置位置是 `</body>` 之前，避免脚本执行时页面元素尚未加载。
+- `document.addEventListener('DOMContentLoaded', ...)`：等待文档结构加载完成再运行 JS，确保能获取到页面元素。
+- `document.getElementById('...')`：选择页面中的元素节点，便于后续读写或绑定事件。
+- `addEventListener('click'/'input', ...)`：给元素绑定事件监听器，描述“发生什么事时要做什么”。
+- `textContent / style`：修改文本与内联样式，从而即时改变页面显示效果。
+- `console.log(...)`：在开发者工具控制台输出调试信息，便于观察程序执行。
+
+### 小提示
+- 打开浏览器开发者工具（F12），切到“Console”能查看 `console.log` 输出；在 “Elements”/“Inspector” 面板能查看并调试 DOM 结构与样式。
+- 在 VSCode 中使用 “Live Server”，保存 `script.js` 后浏览器会自动刷新，方便快速迭代。
+- 现代 JS 推荐使用 `const` 与 `let` 替代 `var`；多用箭头函数与模板字符串（如 `` `你好，${name}` ``）让代码更简洁。
+
+到这里，我们已经分别了解了 HTML（结构）、CSS（样式）与 JavaScript（交互）三者如何协同工作。接下来可以尝试把它们组合起来，做一个小页面练手。
+
+## 动手练习：小作业（只改 HTML/CSS，JS 已提供）
+
+目标：做一个“欢迎卡片”，包含标题、说明文字、输入框与按钮。
+- 点击按钮时切换页面主题（浅色/深色），JS 会自动完成；
+- 输入名字时实时显示欢迎语；
+- 你只需要修改 HTML 和 CSS 来达到视觉与布局效果。
+
+### 作业要求（验收标准）
+- 卡片居中显示，具有圆角、阴影与内边距；
+- 标题居中，段落有合适的行高与间距；
+- 按钮有悬停（hover）与按下（active）的视觉反馈；
+- 输入框获得焦点（focus）时有明显强调样式；
+- 在移动端（窄屏）不溢出，布局能自适应；
+- 深色主题下文字可读、对比度合理。提示：JS 会在 `<body>` 上切换 `theme-dark` 类，你可以在 CSS 中基于该类进行主题覆盖。
+
+### 起步模板
+将以下三份代码保存为同目录下的 `index.html`、`style.css` 与 `script.js`，用 VSCode 的 Live Server 打开 `index.html` 进行预览。完成作业时，请只修改 HTML 和 CSS（保留 JS 的 id 与类名依赖）。
+
+::: 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="page">
+    <div class="card" id="card">
+      <h1 class="card__title">欢迎来到我的页面</h1>
+      <p class="card__text" id="message">请点击按钮或输入你的名字</p>
+      <div class="card__actions">
+        <input id="name" class="input" placeholder="输入你的名字" />
+        <button id="btn" class="btn btn--primary">点我切换主题</button>
+      </div>
+    </div>
+  </div>
+  <script src="script.js" defer></script>
+  <!-- 注意：JS 依赖 #message、#btn、#name 这几个 id，请不要改动它们的命名 -->
+  <!-- 你可以新增或调整 class 名，或增删结构，来实现更好的视觉与布局 -->
+</body>
+</html>
+```
+@tab style.css
+```css
+/* 目标：只通过 CSS 实现卡片的视觉与响应式，并支持深色主题 */
+/* 建议：使用 CSS 变量管理主题；在 .theme-dark 上覆盖变量 */
+
+:root {
+  --bg: #f7f9fc;
+  --text: #222;
+  --primary: #ff7a45; /* 可调整为你的品牌色 */
+  --card-bg: #fff;
+  --card-shadow: 0 10px 20px rgba(0,0,0,0.08);
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
+}
+
+.page {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+}
+
+.card {
+  width: min(640px, 100%);
+  background: var(--card-bg);
+  border-radius: 16px;
+  box-shadow: var(--card-shadow);
+  padding: 24px;
+}
+
+.card__title {
+  margin: 0 0 12px;
+  text-align: center;
+}
+
+.card__text {
+  margin: 0 0 16px;
+  line-height: 1.6;
+  text-align: center;
+}
+
+.card__actions {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.input {
+  padding: 10px 12px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  outline: none;
+  min-width: 220px;
+}
+
+.input:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(255, 122, 69, 0.2);
+}
+
+.btn {
+  padding: 10px 16px;
+  border: none;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: transform .08s ease, box-shadow .2s ease, background-color .2s ease;
+}
+
+.btn--primary {
+  background: var(--primary);
+  color: #fff;
+  box-shadow: 0 6px 12px rgba(255, 122, 69, .3);
+}
+
+.btn--primary:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 8px 16px rgba(255, 122, 69, .4);
+}
+
+.btn--primary:active {
+  transform: translateY(0);
+  box-shadow: 0 4px 8px rgba(255, 122, 69, .3);
+}
+
+/* 任务：为深色主题定义样式。JS 会在 <body> 上切换 `.theme-dark` 类。*/
+body.theme-dark {
+  --bg: #0f172a;
+  --text: #e5e7eb;
+  --primary: #60a5fa; /* 深色下可更柔和 */
+  --card-bg: #1f2937;
+  --card-shadow: none;
+}
+
+/* 可选：为移动端优化 */
+@media (max-width: 480px) {
+  .card { padding: 18px; }
+  .input { min-width: 100%; }
+}
+```
+@tab script.js
+```js
+// JS 已提供：负责交互逻辑，切换主题与显示欢迎语
+// 你只需要改 HTML 和 CSS 即可达成作业要求
+document.addEventListener('DOMContentLoaded', () => {
+  const msg = document.getElementById('message');
+  const btn = document.getElementById('btn');
+  const nameInput = document.getElementById('name');
+
+  // 切换深色主题（在 <body> 上切换 theme-dark 类）
+  btn.addEventListener('click', () => {
+    document.body.classList.toggle('theme-dark');
+    const dark = document.body.classList.contains('theme-dark');
+    msg.textContent = dark ? '深色主题已开启' : '浅色主题已开启';
+  });
+
+  // 实时欢迎语
+  nameInput.addEventListener('input', (e) => {
+    const name = e.target.value.trim();
+    msg.textContent = name ? `你好，${name}！` : '请点击按钮或输入你的名字';
+  });
+});
+```
+:::
+
+### 提示与加分项
+- 可以用 `:root`+CSS 变量统一管理主题色，在 `.theme-dark` 中覆盖变量即可完成切换；
+- 尝试为按钮增加平滑过渡与阴影层次感；
+- 在移动端下让输入框占满一行，按钮在下一行显示；
+- 可自行优化字体、字号与间距，让视觉更加舒适；
+- 加分：实现卡片在深色主题下的微动效（例如背景色淡入）。
+
+## 入门版（更简单，建议先做这个）
+
+目标：做一个“欢迎卡片”，内容包括标题、说明文字、一个输入框和一个按钮。
+- 点击按钮时高亮卡片（JS 已完成，你只需让 `.card.highlight` 在 CSS 里更显眼）。
+- 输入名字时实时显示欢迎语（JS 已完成）。
+- 你只需要修改 HTML 和 CSS，让页面好看、布局合理即可。
+
+验收标准（入门）
+- 卡片居中、圆角、阴影、内边距，整体观感舒适。
+- 按钮有 `hover/active` 反馈，输入框 `focus` 有强调样式。
+- 窄屏下不溢出，内容能自适应。
+
+::: 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">
+  <!-- 保留以下 id：message / btn / name / card -->
+</head>
+<body>
+  <div class="page">
+    <div class="card" id="card">
+      <h1>欢迎</h1>
+      <p id="message">在输入框里写下你的名字</p>
+      <input id="name" placeholder="输入你的名字">
+      <button id="btn">高亮卡片</button>
+    </div>
+  </div>
+  <script src="script.js"></script>
+  <!-- 用 VSCode Live Server 打开 index.html 预览效果 -->
+  <!-- 完成作业时，请只修改 HTML 和 CSS -->
+  <!-- 你可以自由调整颜色、间距、字体与布局，使页面更美观 -->
+</body>
+</html>
+```
+@tab style.css
+```css
+/* 极简样式：你可以在此基础上美化与调整 */
+body {
+  margin: 0;
+  background: #f5f7fa;
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
+}
+
+.page {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 16px;
+}
+
+.card {
+  width: min(360px, 100%);
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
+  padding: 16px;
+  text-align: center;
+}
+
+input {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  outline: none;
+  margin-bottom: 12px;
+}
+
+input:focus {
+  border-color: #1677ff;
+  box-shadow: 0 0 0 2px rgba(22,119,255,.2);
+}
+
+button {
+  padding: 8px 12px;
+  border: none;
+  border-radius: 8px;
+  background: #1677ff;
+  color: #fff;
+  cursor: pointer;
+}
+
+button:hover { filter: brightness(1.05); }
+button:active { filter: brightness(0.95); }
+
+/* JS 点击按钮时会在卡片上切换 .highlight 类 */
+.card.highlight {
+  background: #fffbe6; /* 浅黄色高亮 */
+  box-shadow: 0 8px 16px rgba(0,0,0,0.10);
+}
+```
+@tab script.js
+```js
+// JS 已提供：负责简单交互。请只改 HTML/CSS。
+document.addEventListener('DOMContentLoaded', () => {
+  const msg = document.getElementById('message');
+  const btn = document.getElementById('btn');
+  const nameInput = document.getElementById('name');
+  const card = document.getElementById('card');
+
+  // 实时欢迎语
+  nameInput.addEventListener('input', (e) => {
+    const name = e.target.value.trim();
+    msg.textContent = name ? `你好，${name}！` : '在输入框里写下你的名字';
+  });
+
+  // 切换卡片高亮
+  btn.addEventListener('click', () => {
+    card.classList.toggle('highlight');
+  });
+});
+```
+:::
+
+