01. 前端开发介绍前端开发是构建 Web 应用的用户界面和用户体验的技术领域，也是现代互联网应用不可或缺的重要组成部分。 一、什么是前端开发前端开发是指使用 HTML、CSS、JavaScript 等技术，构建用户可以直接看到和交互的界面部分。 前端的作用 用户界面构建 交互逻辑实现 数据展示与处理 用户体验优化 二、前端三剑客1. HTML（结构） 作用：定义网页的结构和内容 特点：标记语言，使用标签来组织内容 示例： 12345678910<!DOCTYPE html><html><head> <title>网页标题</t
03. Markdown 扩展VitePress 提供强大的 Markdown 扩展功能。 一、代码块行高亮12345\`\`\`js {1,3,5}const a = 1;const b = 2;const c = 3;\`\`\` 分组12345\`\`\`js grouplines=3,5,7const a = 1;const b = 2;const c = 3;\`\`\` 二、容器Info123::: info这是一条信息::: Warning123::: warning这是一条警告::: Danger123::: danger这是一条危险警告:::
1.0 JavaScript 介绍JavaScript 是 Web 开发中最重要的编程语言之一，它让网页具有交互性和动态效果。 一、什么是 JavaScriptJavaScript 是一种轻量级的、解释型的编程语言，最初为网页设计而创建，现在也可以用于服务器端（Node.js）、移动应用、桌面应用等多个领域。 特点 动态类型：变量类型在运行时确定 弱类型：类型转换自动进行 解释执行：不需要编译，直接运行 原型继承：基于原型的面向对象 事件驱动：响应用户操作 二、JavaScript 历史1234561995 - Netscape 布兰登·艾克创建了 JavaScript1997 - ECM
02. 小程序目录结构微信小程序有一套完整的目录结构规范，了解它有助于组织项目代码。 标准目录结构123456789101112131415project-name/├── pages/ # 页面目录│ ├── index/ # index 页面│ │ ├── index.js # 页面逻辑│ │ ├── index.json # 页面配置│ │ ├── index.wxml # 页面结构│ │ └── index.wxss # 页面样式│ └── profile/
1.5 异步编程JavaScript 是单线程语言，异步编程是处理耗时操作（如网络请求、文件读取）的核心机制。 一、同步与异步同步执行1234console.log("1");console.log("2");console.log("3");// 输出：1, 2, 3（按顺序执行） 异步执行12345678console.log("1");setTimeout(() => { console.log("2");}, 0);console.log("3
1.3 对象与数组对象和数组是 JavaScript 中最重要的数据结构，用于存储和组织数据。 一、对象（Object）1. 创建对象1234567891011121314151617181920212223242526272829303132333435363738// 对象字面量const person = { name: "张三", age: 25, city: "北京", greet: function() { console.log("Hello!"); 
1.7 模块化与工程化模块化和工程化是现代前端开发的重要组成部分，它们让代码更易维护、更易协作。 一、模块化1. 为什么要模块化 代码复用：可多次使用 代码组织：清晰的结构 依赖管理：明确的引入规则 作用域隔离：避免全局污染 2. ES6 模块（ES Modules）导出（Export）12345678910111213141516171819202122232425262728// utils.js// 命名导出export const add = (a, b) => a + b;export const subtract = (a, b) => a - b;// 声明时导出e
05. 盒模型与布局理解 CSS 盒模型和布局机制是前端开发的核心，它们决定了元素在页面中的显示方式。 一、盒模型（Box Model）盒模型结构12345678910111213┌─────────────────────────────────┐│ Margin（外边距） ││ ┌───────────────────────────┐ ││ │ Border（边框） │ ││ │ ┌─────────────────────┐ │ ││ │ │ Padding（内边距） │ │ ││ │ │ ┌───
05. 组件化开发小程序支持组件化开发，提高代码复用率。 一、创建组件1. 组件目录123456components/└── my-component/ ├── my-component.js ├── my-component.json ├── my-component.wxml └── my-component.wxss 2. 组件配置1234// my-component.json{ "component": true} 3. 组件逻辑123456789101112131415161718192021Component(
