feat: v1.0.0 祀梦笔记：从 0 到 1 的数字化花园建设

2026-01-09 10:03:40 +08:00
commit a5fd8545f4
75 changed files with 15529 additions and 0 deletions
--- a/docs/notes/programming/web/basic-syntax/html-css-js.md
+++ 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');
+  });
+});
+```
+:::
+
+
--- 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 的强大功能和灵活性！