本文介绍如何通过 `` 标签的 `src` 属性将外部 python 文件链接到网页中，避免内联代码杂乱，并解决包导入问题；需配合本地 http 服务器运行，不可直接双击 html 打开。

要在网页中运行 Python 代码，不能像 JavaScript 或 CSS 那样直接通过浏览器原生解析——因为浏览器本身不支持执行 Python。但借助 PyScript（一个基于 WebAssembly 的前端 Python 运行时），你可以在 HTML 中安全、便捷地嵌入和执行 Python 逻辑。

✅ 正确做法：使用 的 src 属性引用外部 .py 文件
例如，在 index.html 中写入：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://www.php.cn/link/850adac65bb85d5b2f51a14570d7eba8latest/pyscript.css" />
    <script defer src="https://www.php.cn/link/850adac65bb85d5b2f51a14570d7eba8latest/pyscript.js"></script>
  </head>
  <body>
    <py-script src="./game_logic.py"></py-script>
  </body>
</html>

对应地，将你的游戏逻辑保存为同目录下的 game_logic.py（如含 print("Hello from Python!") 或 PyGame-like UI 逻辑），即可被自动加载并执行。

⚠️ 重要注意事项：

• src 值必须是有效 URL（如 ./game_logic.py、/static/game.py 或远程地址），不能是本地文件路径（如 file:///...）；
• 浏览器出于安全限制，禁止从 file:// 协议加载外部脚本。因此，务必启动本地 HTTP 服务器：

  # 在项目根目录下运行（Python 3.7+）
  python -m http.server 8000

  然后访问 http://localhost:8000/index.html 即可正常加载 game_logic.py。

  

  HISUI 前端框架开发指南（IRIS版）

  HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。

  下载

  立即学习“Python免费学习笔记（深入）”；

? 提示：

• 若 Python 脚本依赖第三方包（如 numpy、requests），需在 中声明（PyScript 会自动下载兼容的纯 Python 轮子）：

  <py-config>
    packages = ["numpy", "matplotlib"]
  </py-config>

• 所有 Python 代码仍运行在浏览器沙箱中，无法调用 os.system()、读写任意本地文件或使用 C 扩展模块（如标准 pygame 不可用，可考虑 playground 或 micropip 兼容库替代）。

总结：通过 + 本地 HTTP 服务，你既能保持 HTML 结构清晰，又能模块化管理 Python 游戏逻辑，是初学者构建交互式 Python Web 应用的推荐起点。