first commit

docs/学习笔记/前端学习.md

@@ -0,0 +1,119 @@
+# 前端学习笔记
+
+## 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/)
+