# HTML/CSS/JS 基础 (Web Basics) > 💡 **学习指南**：网页开发的三大基石，每个前端工程师的必修课。本章节将通过可视化和实战示例，带你快速理解 HTML、CSS 和 JavaScript 的职责与协作关系。 ## 0. 快速上手：三剑客简介 现代网页由三种核心技术组成，它们各司其职，缺一不可。 ## 1. HTML：网页的骨架 ### 1.1 什么是 HTML？ **HTML (HyperText Markup Language)** 是超文本标记语言，用来定义网页的结构和内容。 简单来说，HTML 告诉浏览器： - 这里是标题 - 这里是段落 - 这里是图片 - 这里是链接 ### 1.2 HTML 基础语法 ```html

欢迎来到我的网站

这是一段文字内容。

我的照片 点击这里 ``` **关键概念**： - **标签 (Tags)**：用 `< >` 包裹的关键字，如 `

` - **元素 (Elements)**：标签 + 内容，如 `

标题

` - **属性 (Attributes)**：标签的附加信息，如 `src="photo.jpg"` - **嵌套 (Nesting)**：标签可以包含其他标签 ### 1.3 常用 HTML 标签 | 标签 | 用途 | 示例 | |------|------|------| | `

` - `

` | 标题（从大到小） | `

文章标题

` | | `

` | 段落 | `

这是一段话。

` | | `
` | 容器（块级） | `
...
` | | `` | 容器（行内） | `红色文字` | | `
    ` / `
      ` | 列表（无序/有序） | `
      • 项目1
      ` | | `` | 链接 | `关于` | | `` | 图片 | `猫咪` | | `` | ## 2. CSS：网页的化妆师 ### 2.1 什么是 CSS？ **CSS (Cascading Style Sheets)** 是层叠样式表，用来控制网页的外观和布局。 简单来说，CSS 告诉浏览器： - 这个标题是红色的 - 这段文字要居中显示 - 这个盒子要圆角边框 - 背景是渐变色 ### 2.2 CSS 盒模型交互演示 **盒模型** 是 CSS 中最重要的概念之一！每个元素都被表示为一个矩形的盒子。 **关键要点**： - **Content（内容）**：元素的实际内容区域 - **Padding（内边距）**：内容和边框之间的空间 - **Border（边框）**：包裹内容的边界线 - **Margin（外边距）**：元素与其他元素之间的空间 - **总宽度** = margin + border + padding + width + padding + border + margin ### 2.3 CSS Flexbox 布局交互演示 **Flexbox** 是现代 CSS 布局的利器，让元素排列变得简单！ **Flexbox 核心概念**： - **flex-direction**：控制主轴方向（行/列） - **justify-content**：控制主轴对齐方式 - **align-items**：控制交叉轴对齐方式 - **flex-wrap**：控制是否换行 - **gap**：控制项目间距 - **flex-grow**：控制项目的放大比例 ### 2.4 CSS 基础语法 ```css /* 选择器 { 属性: 值; } */ h1 { color: red; /* 文字颜色 */ font-size: 24px; /* 字体大小 */ text-align: center; /* 文字居中 */ } .button { background: #007bff; /* 背景颜色 */ border: none; /* 无边框 */ padding: 10px 20px; /* 内边距 */ border-radius: 5px; /* 圆角 */ } .button:hover { background: #0056b3; /* 鼠标悬停时的颜色 */ } ``` **关键概念**： - **选择器 (Selector)**：要样式化的元素，如 `h1` - **属性 (Property)**：要改变的样式，如 `color` - **值 (Value)**：属性的设置，如 `red` - **盒模型 (Box Model)**：padding, border, margin ### 2.3 CSS 引入方式 三种方式引入 CSS： ```html
      红色文字
      ``` ## 3. JavaScript：网页的灵魂 ### 3.1 什么是 JavaScript？ **JavaScript** 是一种编程语言，用来实现网页的交互和动态功能。 简单来说，JavaScript 让网页： - 响应用户点击 - 处理表单提交 - 加载数据并更新页面 - 创建动画效果 ### 3.2 DOM 操作交互演示 **DOM (Document Object Model)** 文档对象模型，是 JavaScript 操作网页内容的接口。 **DOM 操作核心方法**： - **获取元素**：`document.getElementById()`、`document.querySelector()` - **修改内容**：`element.textContent`、`element.innerHTML` - **修改样式**：`element.style.property = value` - **添加/删除类**：`element.classList.add()`、`element.classList.remove()` - **显示/隐藏**：`element.style.display = 'none'/'block'` ### 3.3 JavaScript 基础语法 ```javascript // 变量声明 let message = "Hello, World!"; // 函数定义 function greet(name) { return "Hello, " + name + "!"; } // 事件监听 button.addEventListener('click', function() { alert('按钮被点击了！'); }); // DOM 操作 document.getElementById('title').textContent = '新标题'; ``` **关键概念**： - **变量 (Variables)**：存储数据，如 `let x = 10;` - **函数 (Functions)**：可复用的代码块 - **事件 (Events)**：用户动作（点击、输入等） - **DOM (Document Object Model)**：网页内容的编程接口 ### 3.3 JavaScript 引入方式 ```html ``` ## 4. 三者协作示例 让我们看一个完整的例子： ```html

      欢迎

      点击按钮改变标题！

      ``` ## 5. 学习路线图 ### 5.1 初学者路线 1. **第一周**：HTML 基础 - 学习常用标签 - 理解文档结构 - 创建第一个网页 2. **第二周**：CSS 基础 - 掌握盒模型 - 学习布局方式 - 美化你的网页 3. **第三周**：JavaScript 基础 - 理解变量和函数 - 学习 DOM 操作 - 添加交互功能 ### 5.2 进阶学习方向 **HTML 深入**： - 语义化标签 (`
      `, `