前端开发学习笔记(一)

<header>    <!-- 页头 -->
<nav>       <!-- 导航 -->
<main>      <!-- 主要内容 -->
<article>   <!-- 文章 -->
<section>   <!-- 章节 -->
<aside>     <!-- 侧边栏 -->
<footer>    <!-- 页脚 -->

<!-- 音频 -->
<audio src="music.mp3" controls></audio>

<!-- 视频 -->
<video src="video.mp4" controls></video>

<!-- Canvas -->
<canvas id="myCanvas" width="400" height="300"></canvas>

// localStorage（持久化存储）
localStorage.setItem('name', 'Simon');
localStorage.getItem('name');

// sessionStorage（会话存储）
sessionStorage.setItem('token', 'xxx');

.container {
    display: flex;
    justify-content: center;  /* 水平居中 */
    align-items: center;      /* 垂直居中 */
    flex-direction: row;      /* 主轴方向 */
    flex-wrap: wrap;          /* 换行 */
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 三列等宽 */
    gap: 20px;
}

/* 过渡动画 */
.box {
    transition: all 0.3s ease;
}

.box:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

/* 关键帧动画 */
@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

// 箭头函数
const add = (a, b) => a + b;

// 解构赋值
const { name, age } = person;
const [first, second] = array;

// 模板字符串
const message = `Hello, ${name}!`;

// Promise
const fetchData = () => {
    return new Promise((resolve, reject) => {
        // 异步操作
    });
};

// async/await
const getData = async () => {
    const data = await fetchData();
    return data;
};

// 导出
export const name = 'Simon';
export function greet() { ... }

// 导入
import { name, greet } from './module';

function createCounter() {
    let count = 0;
    return {
        increment: () => ++count,
        getCount: () => count
    };
}

const counter = createCounter();
counter.increment(); // 1
counter.getCount();  // 1

git init
git add .
git commit -m "初始提交"
git remote add origin https://github.com/xxx/xxx.git
git push -u origin master