现在位置: 首页 / Web 开发 / CSS / 正文

Web开发入门教程：从零搭建你的第一个网站

  • 路人甲乙丙丁
  • Web 开发
  • 18天前
  • 59热度
  • 0评论

1. 前言：为什么2026年要学习Web开发？

Web开发是编程领域门槛最低、成就感最强的方向之一。无论是个人博客、企业官网、电商平台还是SaaS应用，每一个互联网产品背后都离不开Web技术。2026年，Web开发依然是程序员入门的最佳选择。

Web开发主要分为三个方向：
✅ 前端开发：用户看得见的部分（页面布局、交互效果、动画）
✅ 后端开发：用户看不见的部分（数据存储、业务逻辑、API接口）
✅ 全栈开发：前后端都懂，能独立完成整个网站

本教程能带给你什么？
✅ 零基础理解Web开发的工作原理
✅ 掌握HTML、CSS、JavaScript三大核心技术
✅ 学习Python Flask后端框架
✅ 实战搭建一个完整的待办事项网站
✅ 学会将网站部署到公网

2. Web开发核心概念速览

网站是如何工作的？
浏览器输入网址 → 向服务器发送请求 → 服务器处理并返回HTML → 浏览器渲染页面

前端三剑客：HTML（骨架）、CSS（皮肤）、JavaScript（大脑）

前端 vs 后端：前端运行在浏览器，后端运行在服务器，数据库存储数据

3. 环境搭建：安装开发工具

安装VS Code：官网下载，推荐安装Live Server插件。安装Python：python --version。创建项目文件夹：mkdir my-first-website && cd my-first-website

4. 前端入门：你的第一个HTML页面

创建 index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>你好，Web开发！</h1>
    <p>这是我的第一个HTML页面。</p>
    <a href="https://www.baidu.com" target="_blank">点击访问百度</a>
    <img src="https://picsum.photos/300/200" alt="随机图片">
    <ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul>
</body>
</html>

在VS Code中右键选择 "Open with Live Server" 即可预览。

5. CSS入门：让网页变漂亮

创建 style.css：

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: system-ui, -apple-system, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card {
    background: white;
    border-radius: 20px;
    padding: 40px;
    width: 400px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    text-align: center;
}
h1 { color: #333; margin-bottom: 20px; }
p { color: #666; line-height: 1.6; margin-bottom: 20px; }
.btn {
    background: #667eea;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    cursor: pointer;
    transition: transform 0.2s;
}
.btn:hover { transform: scale(1.05); }

在HTML的<head>中添加：<link rel="stylesheet" href="style.css">，更新<body>：

<div class="card">
    <h1>欢迎来到我的网站</h1>
    <p>这是一个使用HTML和CSS构建的漂亮卡片。</p>
    <button class="btn" onclick="alert('Hello, Web!')">点击我</button>
</div>

6. JavaScript入门：让网页动起来

创建 script.js：

const btn = document.querySelector('.btn');
const counterDisplay = document.createElement('p');
counterDisplay.style.marginTop = '20px';
counterDisplay.style.fontSize = '24px';
document.querySelector('.card').appendChild(counterDisplay);
let count = 0;
btn.addEventListener('click', () => {
    count++;
    counterDisplay.textContent = `点击次数：${count}`;
    if (count >= 10) counterDisplay.textContent = '🎉 达到10次！ 🎉';
});

在HTML末尾添加：<script src="script.js"></script>

7. 后端入门：使用Python Flask

安装Flask：pip install flask。创建 app.py：

from flask import Flask, render_template, request, redirect, url_for
app = Flask(__name__)
tasks = []
@app.route('/')
def index():
    return render_template('index.html', tasks=tasks)
@app.route('/add', methods=['POST'])
def add_task():
    task = request.form.get('task')
    if task:
        tasks.append({'id': len(tasks)+1, 'content': task, 'done': False})
    return redirect(url_for('index'))
@app.route('/done/<int:task_id>')
def done_task(task_id):
    for task in tasks:
        if task['id'] == task_id:
            task['done'] = True
            break
    return redirect(url_for('index'))
if __name__ == '__main__':
    app.run(debug=True, port=5000)

创建 templates/index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>待办事项应用</title>
    <style>
        *{margin:0;padding:0;box-sizing:border-box;}
        body{background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:40px;font-family:system-ui;}
        .container{max-width:600px;margin:0 auto;background:#fff;border-radius:20px;padding:30px;box-shadow:0 20px 40px rgba(0,0,0,0.2);}
        h1{text-align:center;margin-bottom:30px;color:#333;}
        .input-group{display:flex;gap:10px;margin-bottom:30px;}
        input{flex:1;padding:12px;border:1px solid #ddd;border-radius:10px;font-size:16px;}
        button{background:#667eea;color:#fff;border:none;padding:12px 24px;border-radius:10px;cursor:pointer;}
        .task-item{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px solid #eee;}
        .task-content{font-size:16px;}
        .task-content.done{text-decoration:line-through;color:#999;}
        .done-btn{background:#27ae60;color:#fff;padding:6px 12px;border-radius:6px;text-decoration:none;font-size:12px;}
        .empty{text-align:center;color:#999;padding:30px;}
    </style>
</head>
<body>
    <div class="container">
        <h1>📝 待办事项清单</h1>
        <form action="/add" method="POST" class="input-group">
            <input type="text" name="task" placeholder="输入新任务..." required>
            <button type="submit">添加</button>
        </form>
        <ul style="list-style:none;">
            {% for task in tasks %}
            <li class="task-item">
                <span class="task-content {{ 'done' if task.done else '' }}">{{ task.content }}</span>
                {% if not task.done %}
                <a href="/done/{{ task.id }}" class="done-btn">完成</a>
                {% else %}
                <span style="color:#27ae60;">✓ 已完成</span>
                {% endif %}
            </li>
            {% else %}
            <li class="empty">暂无待办事项，添加一条吧！</li>
            {% endfor %}
        </ul>
    </div>
</body>
</html>

运行：python app.py，访问 http://127.0.0.1:5000

8. 实战项目：带数据库的待办事项网站

安装：pip install flask flask-sqlalchemy。创建 app_full.py：

from flask import Flask, render_template, request, redirect
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///tasks.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db = SQLAlchemy(app)
class Task(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    content = db.Column(db.String(200), nullable=False)
    done = db.Column(db.Boolean, default=False)
    created_at = db.Column(db.DateTime, default=datetime.utcnow)
with app.app_context():
    db.create_all()
@app.route('/')
def index():
    tasks = Task.query.order_by(Task.created_at.desc()).all()
    return render_template('index_db.html', tasks=tasks)
@app.route('/add', methods=['POST'])
def add():
    task = Task(content=request.form.get('task'))
    db.session.add(task)
    db.session.commit()
    return redirect('/')
@app.route('/done/<int:id>')
def done(id):
    task = Task.query.get(id)
    if task: task.done = True; db.session.commit()
    return redirect('/')
@app.route('/delete/<int:id>')
def delete(id):
    task = Task.query.get(id)
    if task: db.session.delete(task); db.session.commit()
    return redirect('/')
if __name__ == '__main__':
    app.run(debug=True)

创建 templates/index_db.html：

<!DOCTYPE html>
<html>
<head><title>待办事项-持久化</title><style>
*{margin:0;padding:0;box-sizing:border-box;}
body{background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:40px;font-family:system-ui;}
.container{max-width:700px;margin:0 auto;background:#fff;border-radius:20px;padding:30px;}
h1{text-align:center;margin-bottom:10px;}
.subtitle{text-align:center;color:#999;margin-bottom:30px;font-size:14px;}
.input-group{display:flex;gap:10px;margin-bottom:30px;}
input{flex:1;padding:14px;border:2px solid #e0e0e0;border-radius:12px;}
input:focus{outline:none;border-color:#667eea;}
button{background:#667eea;color:#fff;border:none;padding:14px 28px;border-radius:12px;cursor:pointer;}
.task-item{display:flex;justify-content:space-between;align-items:center;padding:15px;background:#f8f9fa;border-radius:12px;margin-bottom:10px;}
.task-content{font-size:16px;}
.task-content.done{text-decoration:line-through;color:#999;}
.task-date{font-size:11px;color:#bbb;margin-top:4px;}
.done-btn{background:#27ae60;color:#fff;padding:6px 14px;border-radius:8px;text-decoration:none;font-size:12px;}
.delete-btn{background:#e74c3c;color:#fff;padding:6px 14px;border-radius:8px;text-decoration:none;font-size:12px;}
.stats{margin-top:30px;padding-top:20px;border-top:1px solid #eee;text-align:center;color:#999;}
</style></head>
<body>
<div class="container">
    <h1>📝 待办事项清单</h1>
    <p class="subtitle">数据永久保存，重启不会丢失</p>
    <form action="/add" method="POST" class="input-group">
        <input type="text" name="task" placeholder="写一个待办事项..." required>
        <button type="submit">添加</button>
    </form>
    <ul style="list-style:none;">
        {% for task in tasks %}
        <li class="task-item">
            <div>
                <div class="task-content {{ 'done' if task.done else '' }}">{{ task.content }}</div>
                <div class="task-date">{{ task.created_at.strftime('%Y-%m-%d %H:%M') }}</div>
            </div>
            <div>
                {% if not task.done %}<a href="/done/{{ task.id }}" class="done-btn">完成</a>{% endif %}
                <a href="/delete/{{ task.id }}" class="delete-btn" onclick="return confirm('确定删除？')">删除</a>
            </div>
        </li>
        {% else %}
        <li style="text-align:center;color:#999;padding:40px;">🎉 暂无待办，轻松一下！</li>
        {% endfor %}
    </ul>
    <div class="stats">总计：{{ tasks|length }} 项 | 已完成：{{ tasks|selectattr('done')|list|length }} 项</div>
</div>
</body>
</html>

9. 部署上线

前端部署：Vercel、Netlify（免费，连接GitHub即可）
后端部署：PythonAnywhere、Railway、Render（有免费额度）

以PythonAnywhere为例：注册账号 → 上传代码 → 创建Web应用选择Flask → 设置虚拟环境 → Reload

10. 学习路径与资源推荐

进阶方向：React/Vue前端框架、Django/Node.js后端、MySQL/PostgreSQL数据库、Docker部署

免费资源：MDN Web Docs、Flask官方文档、菜鸟教程、freeCodeCamp、B站搜索"Web开发"

最后的建议：Web开发最好的学习方法是动手做项目。从个人博客开始，遇到问题按F12打开开发者工具，Console和Network面板能帮你解决大部分问题。祝你学习顺利！

版权声明：本文为原创教程，欢迎分享转发。