Python Web开发入门：怎么用Python编写第一个网页

编写第一个网页的核心步骤并不复杂：安装一个微型Web框架（例如Flask）、编写一段接收访问请求并返回HTML代码的Python脚本，最后在本地启动它并通过浏览器访问。本文将通过最小可运行代码，带你完成从环境搭建、代码编写、页面模板分离到在浏览器中查看结果的全流程。

一、浏览器与Python程序是如何协同工作的

在写代码之前，需要厘清一个常见的概念误区：有人认为“用Python写网页”是像HTML一样直接用浏览器打开.py文件。实际上，浏览器原生只能解析HTML、CSS和JavaScript，它并不直接运行Python脚本。

真实的交互过程是：Python在后台作为一个“服务程序”运行，持续监听网络端口。当我们在浏览器地址栏输入网址（例如 http://127.0.0.1:5000/）并回车时，浏览器会向Python服务发送一个HTTP请求。Python程序接收请求，执行你写好的逻辑（如查询数据库或计算数据），将结果拼装成标准的HTML文本，再作为HTTP响应交还给浏览器。浏览器接收到这段文本后，负责将其排版渲染成可视网页。

图1：浏览器向Python程序发起请求与获取HTML页面的通信关系

二、开发准备：安装极简Web框架 Flask

虽然Python内置了http.server模块，但它主要用于静态文件共享，处理动态逻辑需要编写大量底层协议代码。为了兼顾简单与工程实用性，我们选择 Flask。它是一个轻量级框架，没有沉重的配置，几行代码就能建立一个完整的Web服务。

首先打开系统的终端（Windows系统下的“命令提示符”或“PowerShell”，macOS/Linux系统下的“终端”），运行以下命令安装Flask：

pip install flask

三、核心操作：用5行代码跑起第一个页面

在电脑上新建一个项目文件夹，例如命名为 my_first_web。进入该文件夹，新建一个名为 app.py 的文件，输入以下代码：

# 导入 Flask 类
from flask import Flask

# 创建应用程序实例
app = Flask(__name__)

# 定义路由：告诉程序当访问网站根目录 "/" 时执行下面的函数
@app.route("/")
def home():
    # 返回的内容即直接输出给浏览器的 HTML
    return "<h1>你好，世界！</h1><p>这是用 Python 编写的第一个网页。</p>"

# 启动本地服务
if __name__ == "__main__":
    app.run(debug=True)

启动与访问步骤

1. 在终端中切换到 app.py 所在的目录，运行命令：python app.py。
2. 终端将输出启动信息，显示服务正在 http://127.0.0.1:5000 上运行。
3. 打开电脑中的任意浏览器，在地址栏输入 http://127.0.0.1:5000 并按回车。

终端运行后的预期输出如下所示：

图2：从安装到运行本地Web服务的执行流程

四、进阶一步：代码与网页界面的分离（模板渲染）

直接在Python函数里拼接HTML字符串虽然能快速看到效果，但随着页面元素增多，代码将极难维护。实际开发中，通常把HTML页面保存在独立的文件中，Python仅负责把数据传给HTML，这种技术叫模板渲染。

1. 规划目录结构

Flask有固定的文件存放规范。在项目根目录下，必须新建一个名为 templates 的文件夹用于存放HTML文件：

my_first_web/
│
├── app.py              # Python 业务逻辑与服务主入口
└── templates/          # 必须严格使用此文件夹名
    └── index.html      # 网页模板文件

2. 编写前端页面 templates/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <style>
        body { font-family: sans-serif; margin: 40px; }
        .card { border: 1px solid #ccc; padding: 20px; border-radius: 6px; }
    </style>
</head>
<body>
    <div class="card">
        <h1>{{ heading }}</h1>
        <p>当前服务器时间是：<strong>{{ server_time }}</strong></p>
        <p>刷新页面可以观察时间的动态更新。</p>
    </div>
</body>
</html>

注意代码中的 {{ title }} 和 {{ server_time }}，这是Flask所采用的Jinja2模板占位符，它们会在输出给浏览器之前被Python填入真实数据。

3. 修改 app.py 实现数据驱动

使用 render_template 函数关联模板，并计算当前时间传递给页面：

from flask import Flask, render_template
import datetime

app = Flask(__name__)

@app.route("/")
def index():
    # 动态获取当前的系统时间
    current_time = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
    
    # 将变量传递到 templates/index.html 中
    return render_template(
        "index.html", 
        title="我的动态网页", 
        heading="欢迎来到 Python 驱动的页面",
        server_time=current_time
    )

if __name__ == "__main__":
    app.run(debug=True)

重新运行 app.py 并刷新浏览器页面，你就会看到一个样式整齐且包含服务器实时时间的动态网页。每一次刷新，Python都会重新获取时间并渲染页面。

图3：Python变量通过Jinja2模板引擎注入生成最终网页的过程

五、新手常踩的三个问题与排查方法

在首次编写与运行Web程序时，初学者经常会遇到以下几个阻碍：

1. 提示“TemplateNotFound: index.html”

原因：Flask找不到模板文件。
排查：检查你的文件目录。templates 必须是复数形式（不要写成 template），且必须与 app.py 放在同一个层级。

2. 提示“Address already in use”（端口被占用）

原因：默认的 5000 端口被系统中其他程序占用了，或者上一次启动的Python服务没有正常退出。
解决方法：可以在 app.run() 中手动指定其他未被占用的端口号，例如：

if __name__ == "__main__":
    app.run(port=8080, debug=True)

修改后访问地址相应变更为 http://127.0.0.1:8080。

3. 访问网页提示“无法连接到服务器”

排查顺序： 首先观察终端窗口是否已经关闭，如果关闭了终端，后台服务就会随之终止；其次检查终端内是否有红色的报错堆栈信息；最后确认浏览器中输入的IP是 127.0.0.1 或 localhost，而不是漏掉了端口号。

六、知识总结与延伸认知

通过本文的实践，我们已经完成了用Python编写并运行第一个网页的目标。回顾整个过程，掌握Python Web开发的关键在于建立结构化认识：

图4：Python Web核心运转体系归纳

完成了这第一个网页后，你可以在此基础上做进一步尝试：例如添加第二个路由 @app.route("/about") 来创建关于页面，或者学习如何通过HTML表单（Form）将用户输入的数据提交给Python进行处理。这正是迈向完整Web应用开发的第一步。