前端开发入门：HTML/CSS/JavaScript三剑客完全指南

前端开发是创建Web用户界面的技术。本文将介绍HTML、CSS、JavaScript三大核心技术，帮助你入门前端开发。

1. HTML5基础

文档结构

<!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>
    <h1>Hello World</h1>
</body>
</html>

常用标签

# 语义化标签
<header>      # 头部
<nav>         # 导航
<main>        # 主要内容
<article>     # 文章
<section>     # 区块
<aside>       # 侧边栏
<footer>      # 页脚

# 表单标签
<form>
<input type="text">
<input type="email">
<input type="password">
<textarea></textarea>
<select></select>
<button>提交</button>
</form>

2. CSS3样式

选择器

/* 基本选择器 */
p { }
.class { }
#id { }

/* 组合选择器 */
div p { }          /* 后代选择器 */
div > p { }        /* 子选择器 */
div + p { }        /* 相邻选择器 */
div ~ p { }        /* 兄弟选择器 */

/* 伪类 */
a:hover { }
a:active { }
a:visited { }
input:focus { }
p:first-child { }
p:last-child { }

/* 伪元素 */
p::before { }
p::after { }
p::first-line { }
p::first-letter { }

盒模型

/* 标准盒模型 */
box-sizing: content-box;

/* IE盒模型（推荐） */
box-sizing: border-box;

.div {
    width: 300px;
    padding: 20px;
    border: 1px solid #ccc;
    margin: 10px;
    /* 总宽度 = 300px（包含padding和border）*/
}

Flexbox布局

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

.item {
    flex: 1;  /* 等分空间 */
}

Grid布局

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

.item {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

响应式设计

/* 移动优先 */
.container {
    width: 100%;
}

@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

@media (min-width: 1024px) {
    .container {
        width: 980px;
    }
}

3. JavaScript核心

变量与数据类型

// ES6+ 变量声明
let name = "Alice";     // 可变
const age = 30;         // 不可变
var old = "避免使用";   // 旧方式

// 数据类型
// 原始类型
string, number, boolean, null, undefined, symbol, bigint

// 引用类型
object, array, function

函数

// 函数声明
function greet(name) {
    return `Hello, ${name}`;
}

// 箭头函数
const greet = (name) => `Hello, ${name}`;

// 默认参数
const greet = (name = "World") => `Hello, ${name}`;

// 展开运算符
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };

异步编程

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

// Async/Await（推荐）
async function fetchData() {
    try {
        const response = await fetch('/api/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

DOM操作

// 选择元素
const element = document.querySelector('.class');
const elements = document.querySelectorAll('.class');

// 修改内容
element.textContent = 'New Text';
element.innerHTML = 'Bold';

// 修改样式
element.style.color = 'red';
element.classList.add('active');
element.classList.remove('active');
element.classList.toggle('active');

// 事件监听
element.addEventListener('click', (e) => {
    console.log('Clicked');
    e.preventDefault();
});

4. 实战案例

待办事项列表

<!DOCTYPE html>
<html>
<head>
    <style>
        .todo-list { max-width: 400px; margin: 0 auto; }
        .todo-item { padding: 10px; border-bottom: 1px solid #eee; }
        .todo-item.completed { text-decoration: line-through; color: #999; }
    </style>
</head>
<body>
    <div class="todo-list">
        <input type="text" id="todoInput" placeholder="添加任务...">
        <button onclick="addTodo()">添加</button>
        <div id="todoList"></div>
    </div>

    <script>
        function addTodo() {
            const input = document.getElementById('todoInput');
            const text = input.value.trim();
            if (!text) return;

            const item = document.createElement('div');
            item.className = 'todo-item';
            item.innerHTML = `
                <input type="checkbox" onchange="toggle(this)">
                <span>${text}</span>
                <button onclick="remove(this)">删除</button>
            `;

            document.getElementById('todoList').appendChild(item);
            input.value = '';
        }

        function toggle(checkbox) {
            checkbox.parentElement.classList.toggle('completed', checkbox.checked);
        }

        function remove(btn) {
            btn.parentElement.remove();
        }
    </script>
</body>
</html>

5. 开发工具

• VS Code：代码编辑器
• Chrome DevTools：调试工具
• Webpack/Vite：打包工具
• ESLint：代码检查
• Prettier：代码格式化

6. 学习路径

1. HTML/CSS：掌握基础标签和样式
2. JavaScript：理解核心概念
3. DOM操作：实现交互效果
4. 异步编程：Promise、Async/Await
5. 框架学习：React/Vue/Angular
6. 工程化：Webpack、Git

总结

前端开发入门不难，但需要持续学习。关键要点：

• HTML：页面结构
• CSS：页面样式
• JavaScript：页面交互
• 响应式：多端适配
• 持续学习：技术更新快