# 前端学习笔记

## HTML

### 基本结构

```html
<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <h1>标题</h1>
    <p>段落内容</p>
</body>
</html>
```

## CSS

### 样式定义

```css
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
```

## JavaScript

### 基础语法

```javascript
// 变量
let name = "JavaScript";
const age = 25;

// 函数
function greet(name) {
    return `Hello, ${name}!`;
}

// 箭头函数
const greet = (name) => `Hello, ${name}!`;

// 异步函数
async function fetchData() {
    const response = await fetch('/api/data');
    const data = await response.json();
    return data;
}
```

## 框架和库

### React

```jsx
import React, { useState } from 'react';

function App() {
    const [count, setCount] = useState(0);
    
    return (
        <div>
            <p>计数: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                增加
            </button>
        </div>
    );
}
```

### Vue

```vue
<template>
    <div>
        <p>计数: {{ count }}</p>
        <button @click="increment">增加</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            count: 0
        };
    },
    methods: {
        increment() {
            this.count++;
        }
    }
};
</script>
```

## 学习资源

- [MDN Web 文档](https://developer.mozilla.org/)
- [React 官方文档](https://react.dev/)
- [Vue 官方文档](https://cn.vuejs.org/)

