Python HTML 组件

FastHTML 将 HTML 生成嵌入到 Python 代码中。将 HTML 生成器嵌入编程语言的想法并不新鲜。这在函数式语言中是一种特别流行的方法，包括像 Elm-html (Elm)、hiccl (Common Lisp)、hiccup (Clojure)、Falco.Markup (F#)、Lucid (Haskell) 和 dream-html (OCaml) 这样的库。但现在这个想法已经远远超出了函数式编程的世界——JSX，一个为 React 设计的嵌入式 HTML 生成器，是当今创建 Web 应用程序最流行的方法之一。

然而，大多数 Python 程序员可能更熟悉基于模板的方法，例如 Jinja2 或 Mako。模板最初是为 1990 年代的 Web 开发而创建的，那时网页设计需要复杂的、针对特定浏览器的 HTML。通过使用模板，设计师能够使用熟悉的语言工作，而程序员可以“填空”所需的数据。如今这已不再需要，因为我们可以创建简单的语义化 HTML，并使用 CSS 来为其设置样式。

模板有许多缺点，例如：

• 它们需要一种单独的语言来编写模板，这增加了学习曲线。
• 模板语言通常不如 Python 简洁和强大。
• 将模板重构为子组件比重构 Python 代码更困难。
• 模板通常需要单独的文件。
• 模板通常不支持 Python 调试器。

通过使用 Python 作为 HTML 生成语言，我们可以避免这些缺点。更重要的是，我们可以创建一个丰富的工具和框架生态系统，这些工具和框架可以作为可通过 pip 安装的 Python 模块使用，用于构建 Web 应用程序。

FastHTML 底层的组件数据结构称为 FT（“FastTag”）。要详细了解其工作原理，请参阅解释 FT 组件页面。FT 对象可以通过与每个 HTML 标签同名的大写函数来创建，例如 Div、P 和 Img。这些函数通常接受位置参数和关键字参数：

• 位置参数代表一个子元素列表，可以是字符串（在这种情况下它们是文本节点）、FT 子组件或其他 Python 对象（会被字符串化）。
• 关键字参数代表一个属性字典，可用于设置 HTML 标签的属性。
• 以 hx_ 开头的关键字参数用于 HTMX 属性。

一些函数，例如 File，对其参数有特殊的语法。例如，File 接受一个文件名参数，并创建一个代表该文件内容的 DOM 子树。

任何 FastHTML 处理器都可以返回一个 FT 组件树，或者一个 FT 组件树的元组，这些将被渲染为 HTML 片段并发送到客户端由 HTMX 处理。如果用户直接访问 URL 而不是通过 HTMX，服务器将自动返回一个完整的 HTML 页面，并将这些片段嵌入到 body 中。

大部分时间里，你可能会使用预先编写好的 FastHTML 组件，这些组件打包了 HTML、CSS 和 JS。通常，这些组件会将大部分工作转交给一些通用的 Web 框架；例如，你正在阅读的这个网站就使用了 Bootstrap（以及 fh-bootstrap 这个 FastHTML 包装器）。起初，从 HTML 转向 FT 组件可能看起来有些奇怪，但很快就会变得自然——正如经验极其丰富的 Python Web 程序员、作家和教育家 Audrey Roy Greenfeld 告诉我们的：

“在我的脑海里，我对将所有 HTML 转换为 FT 存在抵触和初步的怀疑。当我意识到在 Python 中处理标签就像傅里叶变换后在频域中工作的优雅，而不是在时域中处理时间序列数据时，我终于屈服了，放下了执念，开始享受 FT 标签。最初几次，我认为转换然后复制粘贴的方法很疯狂。直到我开始理解如何将标签组织成组件时，它才突然感觉优雅，而模板则感觉疯狂。”

创建组件的一个好方法是在网上找到你喜欢的东西，然后将它们转换为 FastHTML。有一个简单的小技巧可以做到这一点：

1. 在你想要在你的应用中使用的网页部分上右键单击，然后选择“检查”。
2. 在弹出的元素窗口中，在你想要的元素上右键单击，选择“复制”，然后选择“Outer HTML”。
3. 现在你的剪贴板里有了 HTML，你可以自动将其转换为 FastHTML：访问 h2f.answer.ai，将 HTML 粘贴到顶部的文本区域，然后 FastHTML 代码将出现在底部。点击该代码右上角的复制图标，然后将其粘贴到你的 Python 应用中。

顺便说一下，上面提到的 h2f 应用是用大约十几行代码编写的！你可以在这里看到源代码。

我们需要你的帮助！FastHTML 非常新，所以现阶段的生态系统还很小。我们希望看到像 Bootstrap、DaisyUI 和 Shoelace 这样的样式库的 FastHTML Python 版本，以及所有最流行的 JavaScript 库的版本。如果你是一名 Python 开发者，我们非常希望你能帮助创建这些库！如果你为 FastHTML 用户创建了什么，请告诉我们，这样我们就可以链接到你的工作（或者如果你认为它会成为 FastHTML 库本身或我们某个扩展库的有用部分，欢迎随时向我们发送拉取请求）。

我们也希望看到能够接入 FastHTML 和 Starlette 扩展点的 Python 模块，例如用于身份验证、数据库访问、部署、多主机支持等等。得益于 Python 的灵活性和 ASGI 的强大功能，一个 FastHTML 服务器应该有可能取代一整套独立的 Web 服务器、代理和其他组件。