FastHTML 提供了一系列内置组件，用于构建 HTML 页面。这些组件可以像 Python 对象一样使用，并可以嵌套使用来创建复杂的页面结构。
以下是一些常用的 FastHTML 组件：
- Div: 创建一个 div 元素，可以包含其他 HTML 元素。
- P: 创建一个段落元素，可以包含文本或其他 HTML 元素。
- A: 创建一个 a 元素，可以包含文本、图片或其他 HTML 元素，并指定链接的目标。
- Form: 创建一个表单元素，可以包含输入框、按钮等表单控件，并指定表单提交的方法和目标。
- Input: 创建一个输入框元素，可以用于用户输入文本、密码、文件等。
- Button: 创建一个按钮元素，可以用于提交表单或执行其他操作。
- Select: 创建一个下拉列表元素，可以用于选择选项。
- Option: 创建一个下拉列表中的选项元素。
- Textarea: 创建一个文本区域元素，可以用于用户输入多行文本。
- Fieldset: 创建一个字段集元素，可以用于将表单控件分组。
- Label: 创建一个标签元素，可以用于描述表单控件。
- Legend: 创建一个字段集的标题元素。
- Main: 创建一个主内容区域元素，通常用于放置页面主体内容。
- Container: 创建一个容器元素，可以用于包裹其他 HTML 元素。
以下是一些使用这些组件的示例：
from fasthtml.common import *
app, rt = fast_app()
@rt("/")
def get():
# 创建一个 div 元素，并添加标题和段落
div = Div(Titled("Hello, FastHTML!"), P("This is a simple example."))
# 创建一个表单，并添加输入框和按钮
form = Form(
Input(type="text", placeholder="Enter your name"),
Button("Submit")
)
# 返回一个主内容区域，包含 div 和表单
return Main(div, form)
serve()
在这个例子中，我们创建了一个 div 元素，其中包含一个标题和一个段落。我们还创建了一个表单，其中包含一个输入框和一个按钮。最后，我们将 div 和表单添加到一个 Main 元素中，并返回它。
你可以通过嵌套使用这些组件来创建更复杂的页面结构。例如：
from fasthtml.common import *
app, rt = fast_app()
@rt("/")
def get():
# 创建一个 div 元素，并添加标题和段落
div = Div(
Titled("Hello, FastHTML!"),
P("This is a simple example."),
Div(Titled("Table"), Table(
Tr(Td("Name"), Td("Age")),
Tr(Td("Alice"), Td("30")),
Tr(Td("Bob"), Td("25"))
))
)
# 创建一个表单，并添加输入框和按钮
form = Form(
Input(type="text", placeholder="Enter your name"),
Button("Submit")
)
# 返回一个主内容区域，包含 div 和表单
return Main(div, form)
serve()
在这个例子中，我们在 div 元素中嵌套了一个 Table 组件，用于创建一个表格。我们还可以将其他组件嵌套使用，以创建更复杂的页面结构。
FastHTML 的文档和教程提供了更多关于这些组件的信息和示例，帮助你快速入门。