Python Web开发入门：从零搭建第一个网页

一、认识 Web 网页的工作原理

日常在浏览器中输入网址时，整个交互过程本质上是一次标准的“请求与响应”（Request & Response）交互。浏览器作为客户端，按照 HTTP 协议向目标服务器发送网络请求；服务器上的程序在接收到请求后，通过既定规则找到需要呈现的内容，将 HTML、CSS 以及媒体数据封装回传给客户端，浏览器最终将其排版渲染为可视页面。

传统的静态网页直接将硬盘上的 .html 文件原样读取并返回，内容固定不可变。而使用 Python 进行 Web 开发，则是让 Python 扮演 Web 服务器后端的决策中枢：程序可以根据当前的时间、数据库中的数据或用户的输入，动态拼接出专属的 HTML 代码再返回给浏览器。这意味着同一个页面地址，能够在不同时刻、针对不同用户展现动态更新的内容。

二、入门选型对比：为什么从 Flask 开始？

在 Python 生态中，最主流的 Web 框架分别是 Flask 与 Django。对于初学者而言，两者的设计哲学有显著区别，明确这种差异能避免学习路径上的迷茫。

对于搭建第一个网页的目标，Flask 是最合适的切入点。它没有繁复的配置和强制目录约束，代码从上到下逻辑一览无余，能够让学习者把注意力全部集中在“请求、路由、数据、视图”这几个最核心的 Web 概念上。

三、实战操作：从零搭建网页的四个步骤

构建第一个网页的操作过程清晰明了，主要分为环境准备、后端编写、前端模板配置和服务验证四个顺序步骤。

步骤一：创建项目目录与虚拟环境

打开终端或命令行界面，新建一个名为 my_first_web 的文件夹，进入该目录并建立隔离的 Python 虚拟环境。这样可以保证第三方库仅安装在当前项目内，避免污染全局环境。

# 1. 创建并进入项目目录
mkdir my_first_web
cd my_first_web

# 2. 创建名为 venv 的虚拟环境
python3 -m venv venv

# 3. 激活虚拟环境 (macOS/Linux)
source venv/bin/activate
# Windows PowerShell 请使用：.\venv\Scripts\Activate.ps1

# 4. 在虚拟环境中安装 Flask
pip install flask

步骤二：编写后端应用主程序 (app.py)

在 my_first_web 目录下新建名为 app.py 的文件。在这个文件中，我们将实例化 Flask 应用，并通过装饰器为网站根路径绑定对应的处理函数：

from flask import Flask, render_template
from datetime import datetime

# 初始化 Flask 应用实例
app = Flask(__name__)

# 定义根路径路由与视图函数
@app.route("/")
def home():
    current_time = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
    page_data = {
        "title": "我的第一个 Python 网页",
        "greeting": "欢迎来到 Python Web 开发的世界！",
        "server_time": current_time,
        "features": ["无需复杂配置", "轻量级高性能", "易于理解的路由系统"]
    }
    # 将字典数据传递给 HTML 模板进行渲染
    return render_template("index.html", data=page_data)

if __name__ == "__main__":
    # debug=True 开启调试模式，代码修改后服务会自动重载
    app.run(host="127.0.0.1", port=5000, debug=True)

在这段代码中：

• @app.route("/") 称为路由装饰器，它将用户访问的根路径 / 与下方的 home() 函数绑定在一起。当有人访问该地址时，Flask 就会自动调用这个函数。
• render_template("index.html", ...) 从预设模板目录加载 HTML 文件，并将 Python 中的变量注入到页面对应的占位符中。

步骤三：编写前端页面模板 (templates/index.html)

Flask 默认要求将 HTML 模板存放在名为 templates 的子文件夹内。因此，我们在项目根目录下创建该文件夹，并在其中新建 index.html：

mkdir templates

接着在 templates/index.html 中写入以下完整的 HTML 代码。注意代码中双大括号 {{ ... }} 是 Jinja2 模板语法，用于取出 Python 传递过来的数据：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ data.title }}</title>
    <style>
        body { font-family: -apple-system, sans-serif; background: #F8F9FA; padding: 40px 20px; color: #333; }
        .card { max-width: 600px; margin: 0 auto; background: #FFF; padding: 32px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
        h1 { color: #2C3E50; font-size: 24px; margin-bottom: 16px; }
        .time-badge { background: #EBF3F5; color: #5A6D7C; padding: 6px 12px; border-radius: 4px; display: inline-block; font-size: 14px; margin-bottom: 20px; }
        ul { padding-left: 20px; line-height: 1.8; }
    </style>
</head>
<body>
    <div class="card">
        <h1>{{ data.title }}</h1>
        <p>{{ data.greeting }}</p>
        <div class="time-badge">服务器当前时间：{{ data.server_time }}</div>
        <h3>本次掌握的重点：</h3>
        <ul>
            {% for item in data.features %}
                <li>{{ item }}</li>
            {% endfor %}
        </ul>
    </div>
</body>
</html>

步骤四：启动服务与浏览器访问验证

确认项目目录结构如下所示：

my_first_web/
├── app.py
├── templates/
│   └── index.html
└── venv/

在终端中执行启动命令：

python app.py

运行后终端会输出类似如下的日志：

 * Serving Flask app 'app'
 * Debug mode: on
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit
 * Restarting with stat
 * Debugger is active!

此时，打开浏览器并访问 http://127.0.0.1:5000，页面将立即显示我们编写的卡片界面，包括标题、欢迎语以及实时变动的服务器时间。每次刷新页面，服务器时间都会重新生成并显示，至此你的第一个 Python 动态网页正式搭建完成。

四、常见问题与排查指南

在初次运行过程中，若遇到异常报错，通常集中在以下三种情况：

• 端口被占用 (Address already in use / OSError: [Errno 48])：这说明系统的 5000 端口已被其他程序（例如 macOS 的 AirPlay 接收功能或其他服务）占用。解决方法是在 app.py 中的 app.run() 修改端口参数，如改为 port=5001 或 port=8080。
• 模板文件未找到 (jinja2.exceptions.TemplateNotFound: index.html)：Flask 默认严格寻找名为 templates（全小写、带复数 s）的文件夹。请检查该文件夹拼写是否正确，以及 index.html 是否位于该文件夹内而非项目根目录。
• 终端报错 ModuleNotFoundError: No module named 'flask'：这是因为当前终端未激活虚拟环境。请先执行 source venv/bin/activate（或 Windows 激活命令），确认终端前缀出现 (venv) 后再执行 python app.py。

五、知识梳理与后续进阶路径

通过本次搭建，你已经掌握了 Python Web 开发中最关键的基础链路。为了帮助你形成完整的知识框架，下图对所涉及的技术点和后续进阶方向进行了归纳总结。

完成本篇教程后，你已经成功运行了属于自己的第一个 Web 应用程序。在掌握了“路由接收请求、模板组装呈现”的基本模型后，你可以继续尝试在页面中添加表单输入框，或者把数据保存到本地数据库中，逐步拓展出更加丰富和实用的功能。