HTML文件里写Python代码，浏览器打开后原样显示，这是不少人踩过的坑。根本原因在于HTML是标记语言，只负责结构描述，不具备执行Python的能力。浏览器内置的脚本引擎只认识JavaScript，Python代码必须交给解释器运行。要实现HTML调用并运行Python，常用的思路分为两类：一是通过后端服务器执行Python并返回结果，二是将Python解释器编译到浏览器本地执行。下面围绕这两种思路展开具体方案。
一、理解执行环境差异：为什么浏览器不认Python
浏览器解析网页时，只会处理HTML标签、CSS样式以及JavaScript脚本。Python代码即使写在<script>标签里，只要type属性不是浏览器认识的类型，就只会被当作普通文本忽略。比如下面这种写法是完全无效的：
<script type="text/python">
print("Hello")
</script>
这行代码中的print语句不会被执行，因为浏览器没有内建Python解释器。前端浏览器出于安全沙箱的限制，也无法直接启动本地Python进程。理解了这一点，就能明白所有HTML运行Python的方案本质上都是在解决“谁来执行Python代码”的问题。
目前主流的解决路径有两条：第一条是让后端服务器充当执行者，前端通过HTTP请求把参数发给后端，后端运行Python脚本并把结果以JSON或纯文本返回；第二条是利用WebAssembly技术将Python解释器编译成浏览器可执行的字节码，让Python直接在用户浏览器中运行。两种方式各有优劣，下面分别介绍具体实现。
二、后端调用：用Flask搭建Python接口供HTML请求
后端调用是最传统也最稳定的方案。Python生态中有很多Web框架，Flask因为轻量易用，适合快速搭建接口。首先安装Flask：
pip install flask
下面创建一个简单的Flask应用，提供一个/api/run接口，接收前端传来的名字参数，调用Python逻辑后返回结果。
from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/api/run', methods=['POST'])
def run_python():
data = request.get_json()
name = data.get('name', 'World')
result = f'Hello, {name}! This message is generated by Python.'
return jsonify({'message': result})
if __name__ == '__main__':
app.run(debug=True)
这段代码启动了本地开发服务器，监听5000端口。当收到POST请求时，从JSON中取出name字段，用Python字符串格式化生成结果并返回。需要注意，Flask默认只监听127.0.0.1，如果前端页面也部署在同一台机器上，可以直接通过localhost访问。
前端HTML页面使用JavaScript的fetch函数发送请求。点击按钮后获取输入框内容，调用后端接口并把返回结果显示在页面上。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flask调用Python</title>
</head>
<body>
<input type="text" id="name" placeholder="输入名字">
<button onclick="callPython()">调用Python</button>
<p id="output"></p>
<script>
async function callPython() {
const name = document.getElementById('name').value;
const response = await fetch('http://localhost:5000/api/run', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: name })
});
const data = await response.json();
document.getElementById('output').textContent = data.message;
}
</script>
</body>
</html>
这个HTML页面本身不包含Python代码，它通过JavaScript发送HTTP请求与后端Python程序通信。这种方式结构清晰，前端负责展示和交互，后端负责业务逻辑。实际部署时通常会把前端构建产物放到Nginx等服务器上，并通过反向代理解决跨域问题。如果前后端分离部署在不同的域名或端口，还需要在Flask中配置CORS允许跨域请求。
三、浏览器端运行：使用Pyodide加载Python解释器
如果不想依赖后端服务器，可以把Python解释器直接搬进浏览器。Pyodide项目使用WebAssembly技术将CPython编译成浏览器可运行的格式，并提供了完整的科学计算库支持。它的原理是在页面加载时下载一个较大的wasm文件，然后通过JavaScript API执行Python代码。
下面是一个使用Pyodide的完整HTML示例。页面加载后自动初始化Pyodide，用户在文本框中输入Python代码，点击按钮即可在浏览器中运行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pyodide浏览器运行Python</title>
<script src="https://cdn.jsdelivr.net/pyodide/v0.26.4/full/pyodide.js"></script>
</head>
<body>
<textarea id="code" rows="6" cols="60">print("Hello from Python in browser")</textarea>
<br>
<button onclick="runPython()">运行Python</button>
<pre id="output"></pre>
<script>
let pyodide;
async function initPyodide() {
pyodide = await loadPyodide();
}
initPyodide();
async function runPython() {
const code = document.getElementById('code').value;
try {
const result = await pyodide.runPythonAsync(code);
document.getElementById('output').textContent = result !== undefined ? result : '执行完成';
} catch (err) {
document.getElementById('output').textContent = 'Error: ' + err.message;
}
}
</script>
</body>
</html>
这个页面从CDN加载Pyodide核心脚本，初始化完成后用户可以在文本框里输入任意Python语句。runPythonAsync方法会异步执行代码并返回最后一个表达式的值。需要注意，首次加载Pyodide需要下载约几MB的wasm文件，页面初始化会稍慢，但初始化完成后所有计算都在本地完成，不需要网络请求。
Pyodide适合用来做在线Python教程、数据可视化或客户端计算等场景。不过它也不是万能的：浏览器内存和CPU资源受限，而且Pyodide与原生Python在某些系统调用和文件操作上存在差异。另外，Pyodide运行在浏览器沙箱中，无法直接操作DOM，需要通过js模块与JavaScript交互。
四、传统CGI方式与其他替代方案
如果服务器环境比较老旧，或者只需要执行一些简单的Python脚本输出HTML，可以使用CGI（通用网关接口）。CGI是Web服务器与外部程序之间的标准协议，服务器收到请求后会启动Python进程，把请求参数传给脚本，再将脚本的标准输出返回给浏览器。
下面是一个最小化的Python CGI脚本，它输出纯文本内容，适用于不需要复杂框架的场景。
#!/usr/bin/env python3
import os
print("Content-Type: text/plain\n")
print("Hello from Python CGI")
将这段代码保存为index.py并放到服务器配置的CGI目录中，同时赋予可执行权限，就可以通过浏览器访问该脚本并看到输出。CGI的优点是无需额外安装Python Web框架，几乎所有Web服务器都支持。但它的缺点是每次请求都会启动一个新的Python进程，性能较差，不适合高并发场景。
除了上述方法，还有一些其他替代方案。例如使用Node.js作为中间层，通过child_process模块调用本机Python命令；或者使用WebAssembly自行编译Python解释器，但开发成本较高。综合来看，后端API方案适合生产环境，Pyodide适合纯前端交互，CGI适合快速验证或老旧系统维护。选择哪种方案取决于具体的部署条件和性能要求。
HTML运行PythonPython调用Pyodide修改时间：2026-10-06 00:56:31