HTML 基础

HTML (HyperText Markup Language) 是构建网页的标准标记语言。

基本结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

常用标签

  • <h1>-<h6>: 标题
  • <p>: 段落
  • <a>: 链接
  • <img>: 图片
  • <div>: 块级容器
  • <span>: 行内容器
  • <ul>, <ol>, <li>: 列表
  • <table>: 表格
  • <form>: 表单
HTML 掌握程度: 90%

CSS 样式

CSS (Cascading Style Sheets) 用于描述HTML文档的呈现方式。

选择器

/* 元素选择器 */
p {
    color: blue;
}

/* 类选择器 */
.class-name {
    font-size: 16px;
}

/* ID选择器 */
#element-id {
    background: #f0f0f0;
}

/* 属性选择器 */
a[target="_blank"] {
    color: red;
}

/* 伪类选择器 */
button:hover {
    background: #ddd;
}

Flexbox 布局

.container {
    display: flex;
    justify-content: center; /* 主轴对齐 */
    align-items: center;    /* 交叉轴对齐 */
    flex-wrap: wrap;        /* 换行 */
}

.item {
    flex: 1;                /* 弹性项目 */
    min-width: 200px;
}

Grid 布局

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.item {
    grid-column: span 1;
    grid-row: span 1;
}
CSS 掌握程度: 85%

JavaScript 编程

JavaScript 是一种轻量级的解释型编程语言，用于使网页交互。

变量与数据类型

// 变量声明
let message = "Hello";
const PI = 3.14;
var count = 0;

// 数据类型
let str = "字符串";
let num = 123;
let bool = true;
let arr = [1, 2, 3];
let obj = { name: "John", age: 30 };
let func = function() { console.log("函数"); };

DOM 操作

// 获取元素
const btn = document.getElementById('myButton');
const items = document.querySelectorAll('.item');

// 事件监听
btn.addEventListener('click', function() {
    console.log('按钮被点击');
});

// 修改内容
document.querySelector('.content').textContent = '新内容';

// 创建元素
const newDiv = document.createElement('div');
newDiv.className = 'box';
document.body.appendChild(newDiv);

异步编程

// Promise
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

// Async/Await
async function getData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}
JavaScript 掌握程度: 75%

前端框架

现代前端开发中常用的框架和库。

React

// React 组件示例
import React, { useState } from 'react';

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

export default Counter;

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>
React 掌握程度: 60%