前端学习系列（1）：零基础入门指南

最新推荐文章于 2025-12-27 19:25:02 发布

原创最新推荐文章于 2025-12-27 19:25:02 发布 · 292 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #学习

前端学习系列专栏收录该内容

15 篇文章

订阅专栏

、

前端学习系列（1）：零基础入门指南

一、什么是前端开发？

前端开发（Front-end Development）主要负责网站的用户界面(UI)和用户体验(UX)，使用三大核心技术：

HTML：网页内容结构
CSS：视觉样式呈现
JavaScript：交互行为实现

二、基础技术栈学习路线

2.1 HTML基础语法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到前端世界！</h1>
    <p>这是一个段落示例</p>
    <div class="container">
        <button onclick="sayHello()">点击我</button>
    </div>
</body>
</html>

2.2 CSS核心概念

/* 盒子模型实践 */
.container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 12px 24px;
    border-radius: 4px;
    cursor: pointer;
}

/* 响应式设计基础 */
@media (max-width: 768px) {
    .container {
        width: 95%;
    }
}

2.3 JavaScript入门

// 基础DOM操作
function sayHello() {
    const now = new Date();
    alert(`你好！当前时间是 ${now.toLocaleTimeString()}`);
}

// 事件监听最佳实践
document.querySelector('button').addEventListener('click', function() {
    console.log('按钮被点击');
});

// ES6箭头函数
const sum = (a, b) => a + b;
console.log(sum(2, 3)); // 输出5