feat: comprehensive documentation and demo updates
- Update READMEs and docs across multiple languages - Enhance interactive demos for Agent, LLM, VLM, Audio, Image Gen, Terminal, and Web Basics - Add new appendix sections for Database and IDE intros - Update VitePress config, theme, and utility scripts - Clean up unused assets and components
This commit is contained in:
sanbuphy
+174
-242
@@ -1,334 +1,266 @@
|
||||
# HTML/CSS/JS 基础 (Web Basics)
|
||||
|
||||
> 💡 **学习指南**：网页开发的三大基石，每个前端工程师的必修课。本章节将通过可视化和实战示例，带你快速理解 HTML、CSS 和 JavaScript 的职责与协作关系。
|
||||
> 💡 **学习指南**：不需要任何基础，像玩游戏一样点一点、改一改，亲手拆解网页背后的秘密，五分钟看懂它到底是怎么造出来的。
|
||||
|
||||
## 0. 快速上手：三剑客简介
|
||||
## 0. 引言：从网页外观到幕后三剑客
|
||||
|
||||
现代网页由三种核心技术组成，它们各司其职，缺一不可。
|
||||
你每天刷到的页面，其实是 **结构（HTML）+ 表现（CSS）+ 行为（JavaScript）** 三股力量协作的结果。
|
||||
|
||||
为了把一个想法变成可交互的网页，我们需要解决三件事：
|
||||
|
||||
1. **放什么**：内容与层级如何组织？
|
||||
2. **长什么样**：颜色、布局、留白、动效如何呈现？
|
||||
3. **怎么动**：用户点击/输入后，页面如何响应？
|
||||
|
||||
打开下面的交互，先“玩一玩”三者的分工，再继续向下学习。
|
||||
|
||||
<WebTechTriad />
|
||||
|
||||
## 1. HTML：网页的骨架
|
||||
---
|
||||
|
||||
### 1.1 什么是 HTML？
|
||||
## 1. HTML：为什么不能只用纯文本？
|
||||
|
||||
**HTML (HyperText Markup Language)** 是超文本标记语言，用来定义网页的<strong>结构和内容</strong>。
|
||||
### 1.1 朴素方案的缺陷
|
||||
|
||||
简单来说，HTML 告诉浏览器：
|
||||
- 这里是标题
|
||||
- 这里是段落
|
||||
- 这里是图片
|
||||
- 这里是链接
|
||||
- 纯文本无法表达层级（标题、列表、表格）。
|
||||
- 屏幕阅读器和搜索引擎看不懂语义。
|
||||
- 链接、表单、媒体都无法定义。
|
||||
|
||||
### 1.2 HTML 基础语法
|
||||
### 1.2 解决方案：用标记语言搭出“骨架”
|
||||
|
||||
**HTML (HyperText Markup Language)** 用标签描述结构和含义。
|
||||
|
||||
```html
|
||||
<!-- 这是一个标题 -->
|
||||
<h1>欢迎来到我的网站</h1>
|
||||
|
||||
<!-- 这是一个段落 -->
|
||||
<p>这是一段文字内容。</p>
|
||||
|
||||
<!-- 这是一个图片 -->
|
||||
<img src="photo.jpg" alt="我的照片">
|
||||
|
||||
<!-- 这是一个链接 -->
|
||||
<img src="photo.jpg" alt="我的照片" />
|
||||
<a href="https://example.com">点击这里</a>
|
||||
```
|
||||
|
||||
**关键概念**：
|
||||
- **标签 (Tags)**：用 `< >` 包裹的关键字，如 `<h1>`
|
||||
- **元素 (Elements)**：标签 + 内容，如 `<h1>标题</h1>`
|
||||
- **属性 (Attributes)**：标签的附加信息，如 `src="photo.jpg"`
|
||||
- **嵌套 (Nesting)**：标签可以包含其他标签
|
||||
|
||||
### 1.3 常用 HTML 标签
|
||||
- **标签 (Tag)**：`<h1>`、`<p>` 用来声明“这是什么”。
|
||||
- **元素 (Element)**：标签 + 内容，如 `<h1>标题</h1>`。
|
||||
- **属性 (Attribute)**：附加信息，如 `alt="我的照片"`。
|
||||
- **嵌套 (Nesting)**：父子结构，让页面有层次。
|
||||
|
||||
| 标签 | 用途 | 示例 |
|
||||
|------|------|------|
|
||||
| `<h1>` - `<h6>` | 标题（从大到小） | `<h1>文章标题</h1>` |
|
||||
| `<p>` | 段落 | `<p>这是一段话。</p>` |
|
||||
| `<div>` | 容器（块级） | `<div class="header">...</div>` |
|
||||
| `<span>` | 容器（行内） | `<span style="color:red">红色文字</span>` |
|
||||
| `<ul>` / `<ol>` | 列表（无序/有序） | `<ul><li>项目1</li></ul>` |
|
||||
| `<a>` | 链接 | `<a href="/about">关于</a>` |
|
||||
| `<img>` | 图片 | `<img src="cat.jpg" alt="猫咪">` |
|
||||
| `<button>` | 按钮 | `<button>点击我</button>` |
|
||||
### 1.3 常用语义标签速查
|
||||
|
||||
## 2. CSS：网页的化妆师
|
||||
<SemanticTagsDemo />
|
||||
|
||||
### 2.1 什么是 CSS？
|
||||
---
|
||||
|
||||
**CSS (Cascading Style Sheets)** 是层叠样式表，用来控制网页的<strong>外观和布局</strong>。
|
||||
## 2. CSS：给网页“精装修”
|
||||
|
||||
简单来说，CSS 告诉浏览器：
|
||||
- 这个标题是红色的
|
||||
- 这段文字要居中显示
|
||||
- 这个盒子要圆角边框
|
||||
- 背景是渐变色
|
||||
### 2.1 只有 HTML 会怎样？
|
||||
|
||||
### 2.2 CSS 盒模型交互演示
|
||||
就像**毛坯房**：有墙有窗，能住人，但**丑**。
|
||||
* 文字黑乎乎，挤在一起。
|
||||
* 图片乱排，大小不一。
|
||||
* 没有任何设计感。
|
||||
|
||||
**盒模型** 是 CSS 中最重要的概念之一！每个元素都被表示为一个矩形的盒子。
|
||||
### 2.2 解决方案：请个“装修队” (CSS)
|
||||
|
||||
<CssBoxModel />
|
||||
|
||||
**关键要点**：
|
||||
- **Content（内容）**：元素的实际内容区域
|
||||
- **Padding（内边距）**：内容和边框之间的空间
|
||||
- **Border（边框）**：包裹内容的边界线
|
||||
- **Margin（外边距）**：元素与其他元素之间的空间
|
||||
- **总宽度** = margin + border + padding + width + padding + border + margin
|
||||
|
||||
### 2.3 CSS Flexbox 布局交互演示
|
||||
|
||||
**Flexbox** 是现代 CSS 布局的利器，让元素排列变得简单！
|
||||
|
||||
<CssFlexbox />
|
||||
|
||||
**Flexbox 核心概念**：
|
||||
- **flex-direction**：控制主轴方向（行/列）
|
||||
- **justify-content**：控制主轴对齐方式
|
||||
- **align-items**：控制交叉轴对齐方式
|
||||
- **flex-wrap**：控制是否换行
|
||||
- **gap**：控制项目间距
|
||||
- **flex-grow**：控制项目的放大比例
|
||||
|
||||
### 2.4 CSS 基础语法
|
||||
**CSS (Cascading Style Sheets)** 专门负责**变好看**。它不改变房子结构（HTML），只负责刷漆、贴砖、摆家具。
|
||||
|
||||
```css
|
||||
/* 选择器 { 属性: 值; } */
|
||||
/* 谁？ { 改什么: 变成啥; } */
|
||||
h1 {
|
||||
color: red; /* 文字颜色 */
|
||||
font-size: 24px; /* 字体大小 */
|
||||
text-align: center; /* 文字居中 */
|
||||
color: red; /* 颜色变红 */
|
||||
font-size: 24px; /* 字变大 */
|
||||
text-align: center;/* 居中放 */
|
||||
}
|
||||
|
||||
.button {
|
||||
background: #007bff; /* 背景颜色 */
|
||||
border: none; /* 无边框 */
|
||||
padding: 10px 20px; /* 内边距 */
|
||||
border-radius: 5px; /* 圆角 */
|
||||
background: #007bff; /* 蓝色背景 */
|
||||
border: none; /* 不要边框 */
|
||||
padding: 10px 20px; /* 撑大一点 */
|
||||
border-radius: 5px; /* 圆角 */
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background: #0056b3; /* 鼠标悬停时的颜色 */
|
||||
background: #0056b3; /* 鼠标放上去变深蓝 */
|
||||
}
|
||||
```
|
||||
|
||||
**关键概念**：
|
||||
- **选择器 (Selector)**：要样式化的元素，如 `h1`
|
||||
- **属性 (Property)**：要改变的样式，如 `color`
|
||||
- **值 (Value)**：属性的设置，如 `red`
|
||||
- **盒模型 (Box Model)**：padding, border, margin
|
||||
|
||||
### 2.3 CSS 引入方式
|
||||
|
||||
三种方式引入 CSS：
|
||||
**引入方式**：
|
||||
|
||||
```html
|
||||
<!-- 1. 行内样式 -->
|
||||
<!-- 1) 临时贴个条（行内样式） -->
|
||||
<div style="color: red;">红色文字</div>
|
||||
|
||||
<!-- 2. 内部样式表 -->
|
||||
<head>
|
||||
<style>
|
||||
.box { background: blue; }
|
||||
</style>
|
||||
</head>
|
||||
<!-- 2) 写在户型图背面（内部样式） -->
|
||||
<style>
|
||||
.box { background: blue; }
|
||||
</style>
|
||||
|
||||
<!-- 3. 外部样式表（推荐） -->
|
||||
<head>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<!-- 3) 找专业装修公司出图纸（外部样式 - 推荐！） -->
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
```
|
||||
|
||||
## 3. JavaScript：网页的灵魂
|
||||
### 2.3 盒模型：为什么宽度算不准？
|
||||
|
||||
### 3.1 什么是 JavaScript？
|
||||
每个元素都是一个盒子，由 **内容 → 内边距 → 边框 → 外边距** 组成。
|
||||
|
||||
**JavaScript** 是一种编程语言，用来实现网页的<strong>交互和动态功能</strong>。
|
||||
<CssBoxModel />
|
||||
|
||||
简单来说，JavaScript 让网页：
|
||||
- 响应用户点击
|
||||
- 处理表单提交
|
||||
- 加载数据并更新页面
|
||||
- 创建动画效果
|
||||
记忆公式：**总宽度 = margin + border + padding + width + padding + border + margin**。
|
||||
|
||||
### 3.2 DOM 操作交互演示
|
||||
### 2.4 Flexbox：为什么对齐和分布这么简单？
|
||||
|
||||
**DOM (Document Object Model)** 文档对象模型，是 JavaScript 操作网页内容的接口。
|
||||
<CssFlexbox />
|
||||
|
||||
<DomManipulator />
|
||||
核心属性速记：
|
||||
|
||||
**DOM 操作核心方法**：
|
||||
- **获取元素**：`document.getElementById()`、`document.querySelector()`
|
||||
- **修改内容**：`element.textContent`、`element.innerHTML`
|
||||
- **修改样式**：`element.style.property = value`
|
||||
- **添加/删除类**：`element.classList.add()`、`element.classList.remove()`
|
||||
- **显示/隐藏**：`element.style.display = 'none'/'block'`
|
||||
- `flex-direction`: 行/列
|
||||
- `justify-content`: 主轴对齐
|
||||
- `align-items`: 交叉轴对齐
|
||||
- `flex-wrap`: 是否换行
|
||||
- `gap`: 间距
|
||||
- `flex-grow`: 放大比例
|
||||
|
||||
### 3.3 JavaScript 基础语法
|
||||
---
|
||||
|
||||
## 3. JavaScript：为什么页面需要“思考”？
|
||||
|
||||
### 3.1 没有 JS 会怎样？
|
||||
|
||||
- 按钮点了没反应，表单无法校验。
|
||||
- 数据更新只能靠刷新整页。
|
||||
- 动画、互动、个性化都做不了。
|
||||
|
||||
### 3.2 解决方案：用 JS 驱动行为与状态
|
||||
|
||||
**JavaScript** 赋予页面交互和逻辑。
|
||||
|
||||
```javascript
|
||||
// 变量声明
|
||||
let message = "Hello, World!";
|
||||
|
||||
// 函数定义
|
||||
// 变量 + 函数
|
||||
let message = 'Hello, World!'
|
||||
function greet(name) {
|
||||
return "Hello, " + name + "!";
|
||||
return `Hello, ${name}!`
|
||||
}
|
||||
|
||||
// 事件监听
|
||||
button.addEventListener('click', function() {
|
||||
alert('按钮被点击了！');
|
||||
});
|
||||
button.addEventListener('click', () => alert('按钮被点击了！'))
|
||||
|
||||
// DOM 操作
|
||||
document.getElementById('title').textContent = '新标题';
|
||||
document.getElementById('title').textContent = '新标题'
|
||||
```
|
||||
|
||||
**关键概念**：
|
||||
- **变量 (Variables)**：存储数据，如 `let x = 10;`
|
||||
- **函数 (Functions)**：可复用的代码块
|
||||
- **事件 (Events)**：用户动作（点击、输入等）
|
||||
- **DOM (Document Object Model)**：网页内容的编程接口
|
||||
### 3.3 DOM 现场演示：修改节点、切换样式
|
||||
|
||||
### 3.3 JavaScript 引入方式
|
||||
<DomManipulator />
|
||||
|
||||
常用接口：
|
||||
|
||||
- **获取元素**：`getElementById` / `querySelector`
|
||||
- **改内容**：`textContent` / `innerHTML`
|
||||
- **改样式**：`element.style.*`
|
||||
- **类名切换**：`classList.add / remove / toggle`
|
||||
- **显隐**：`element.style.display = 'none' | 'block'`
|
||||
|
||||
### 3.4 引入方式
|
||||
|
||||
```html
|
||||
<!-- 1. 行内脚本（不推荐） -->
|
||||
<!-- 行内（不推荐） -->
|
||||
<button onclick="alert('Hi')">点击</button>
|
||||
|
||||
<!-- 2. 内部脚本 -->
|
||||
<head>
|
||||
<script>
|
||||
console.log('Hello!');
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<!-- 3. 外部脚本（推荐） -->
|
||||
<body>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
<!-- 内部脚本 -->
|
||||
<script>
|
||||
console.log('Hello!')
|
||||
</script>
|
||||
<!-- 外部脚本（推荐） -->
|
||||
<script src="script.js"></script>
|
||||
```
|
||||
|
||||
## 4. 三者协作示例
|
||||
---
|
||||
|
||||
让我们看一个完整的例子：
|
||||
## 4. 协作实战：三者如何“分工又配合”？
|
||||
|
||||
### 4.1 分工对比表
|
||||
|
||||
| 角色 | 负责什么 | 不做什么 | 典型示例 |
|
||||
| :------------- | :--------------- | :-------------- | :--------------------------------- |
|
||||
| **HTML** | 定义结构与语义 | 不负责样式/交互 | `<section><h1>标题</h1></section>` |
|
||||
| **CSS** | 定义表现与布局 | 不存放业务逻辑 | `.card { border-radius: 8px; }` |
|
||||
| **JavaScript** | 定义行为与数据流 | 不承担视觉表现 | `button.onclick = changeTitle` |
|
||||
|
||||
### 4.2 组合示例：点击改变标题
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- CSS 样式 -->
|
||||
<style>
|
||||
.card {
|
||||
border: 1px solid #ddd;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
}
|
||||
.btn {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- HTML 结构 -->
|
||||
<div class="card">
|
||||
<h1 id="title">欢迎</h1>
|
||||
<p>点击按钮改变标题！</p>
|
||||
<button class="btn" onclick="changeTitle()">点击我</button>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript 交互 -->
|
||||
<script>
|
||||
function changeTitle() {
|
||||
document.getElementById('title').textContent = '已点击！';
|
||||
alert('标题已改变');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
<head>
|
||||
<style>
|
||||
.card {
|
||||
border: 1px solid #ddd;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
}
|
||||
.btn {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<h1 id="title">欢迎</h1>
|
||||
<p>点击按钮改变标题！</p>
|
||||
<button class="btn" onclick="changeTitle()">点击我</button>
|
||||
</div>
|
||||
<script>
|
||||
function changeTitle() {
|
||||
document.getElementById('title').textContent = '已点击！'
|
||||
alert('标题已改变')
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. 学习路线图
|
||||
|
||||
### 5.1 初学者路线
|
||||
### 5.1 4 周入门节奏
|
||||
|
||||
1. **第一周**：HTML 基础
|
||||
- 学习常用标签
|
||||
- 理解文档结构
|
||||
- 创建第一个网页
|
||||
1. **第 1 周：HTML 结构** — 常用标签、语义化、表单与媒体。
|
||||
2. **第 2 周：CSS 造型** — 盒模型、选择器、Flexbox、主题色与间距体系。
|
||||
3. **第 3 周：JavaScript 互动** — 变量/函数、事件、DOM 操作、模块化。
|
||||
4. **第 4 周：整合小项目** — 做一个带样式和交互的单页，练习部署。
|
||||
|
||||
2. **第二周**：CSS 基础
|
||||
- 掌握盒模型
|
||||
- 学习布局方式
|
||||
- 美化你的网页
|
||||
### 5.2 进阶方向
|
||||
|
||||
3. **第三周**：JavaScript 基础
|
||||
- 理解变量和函数
|
||||
- 学习 DOM 操作
|
||||
- 添加交互功能
|
||||
- **HTML**：语义化布局、可访问性 (ARIA)、SEO。
|
||||
- **CSS**：Grid 布局、响应式设计、CSS 动画与变量。
|
||||
- **JavaScript**：ES6+ 语法、异步编程 (Promise/async)、前端框架 (Vue/React)。
|
||||
|
||||
### 5.2 进阶学习方向
|
||||
---
|
||||
|
||||
**HTML 深入**：
|
||||
- 语义化标签 (`<header>`, `<nav>`, `<article>`)
|
||||
- 表单增强
|
||||
- SEO 优化
|
||||
## 6. 实用工具与资源
|
||||
|
||||
**CSS 深入**：
|
||||
- Flexbox 和 Grid 布局
|
||||
- 响应式设计
|
||||
- CSS 动画
|
||||
- **编辑器**：VS Code（丰富插件）、WebStorm（强力重构）、Sublime Text（轻量）。
|
||||
- **浏览器 DevTools**：Elements / Styles / Console / Network / Sources（`F12` 打开）。
|
||||
- **在线文档**：MDN Web Docs、W3Schools、freeCodeCamp、Codecademy。
|
||||
|
||||
**JavaScript 深入**：
|
||||
- ES6+ 新特性
|
||||
- 异步编程 (Promise, async/await)
|
||||
- 框架学习 (Vue, React)
|
||||
---
|
||||
|
||||
## 6. 实用工具推荐
|
||||
## 7. 名词速查表 (Glossary)
|
||||
|
||||
### 6.1 编辑器
|
||||
| 名词 | 全称 | 解释 |
|
||||
| :------------- | :------------------------ | :--------------------------------- |
|
||||
| **HTML** | HyperText Markup Language | 用标签描述网页结构与语义。 |
|
||||
| **CSS** | Cascading Style Sheets | 控制颜色、布局、动效的样式语言。 |
|
||||
| **JavaScript** | JavaScript | 让页面具备逻辑与交互的脚本语言。 |
|
||||
| **DOM** | Document Object Model | 用对象树表示页面，可被 JS 读写。 |
|
||||
| **Flexbox** | Flexible Box Layout | 一种一维布局方案，易于对齐与分布。 |
|
||||
| **Box Model** | CSS Box Model | 元素从内容到外边距的层层盒子。 |
|
||||
|
||||
- **VS Code**：最流行的代码编辑器
|
||||
- **WebStorm**：专业的 IDE
|
||||
- **Sublime Text**：轻量级编辑器
|
||||
---
|
||||
|
||||
### 6.2 浏览器开发者工具
|
||||
|
||||
按 `F12` 打开，包含：
|
||||
- **Elements**：查看和修改 HTML/CSS
|
||||
- **Console**：执行 JavaScript 代码
|
||||
- **Network**：监控网络请求
|
||||
- **Sources**：调试 JavaScript
|
||||
|
||||
### 6.3 学习资源
|
||||
|
||||
- **MDN Web Docs**：Mozilla 官方文档
|
||||
- **W3Schools**：入门教程
|
||||
- **freeCodeCamp**：互动式学习
|
||||
- **Codecademy**：实战练习
|
||||
|
||||
## 7. 总结
|
||||
|
||||
HTML/CSS/JavaScript 是网页开发的三大支柱：
|
||||
|
||||
- 🏗️ **HTML** = 结构（是什么）
|
||||
- 🎨 **CSS** = 表现（长什么样）
|
||||
- ⚡ **JavaScript** = 行为（做什么）
|
||||
|
||||
**学习建议**：
|
||||
- ✅ 先学 HTML，再学 CSS，最后学 JavaScript
|
||||
- ✅ 多动手实践，创建小项目
|
||||
- ✅ 查看优秀网站的源代码
|
||||
- ✅ 使用浏览器开发者工具实验
|
||||
|
||||
记住：<strong>理论 + 实践 = 掌握</strong>。现在就开始创建你的第一个网页吧！
|
||||
现在你已经知道：**HTML 定义骨架，CSS 负责颜值，JavaScript 赋予灵魂**。动手把上面的组合示例改成你自己的页面，实践会让每个概念“立即长在手上”。
|
||||
|
||||
Reference in New Issue
Block a user