前端学习笔记

HTML

基本结构

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

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

基础语法

// 变量
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

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

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

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

1.7 KiB Raw Permalink Blame History

前端学习笔记

HTML

基本结构

CSS

样式定义

JavaScript

基础语法

框架和库

React

Vue

学习资源

1.7 KiB

Raw Permalink Blame History