2026-01-13 11:12:42 +08:00
|
|
|
# 前端学习笔记
|
|
|
|
|
|
|
|
|
|
## 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/)
|
|
|
|
|
|
