在 Dash 中使用 HTML

HTML 语言

超文本标记语言（HTML） 是一种标记语言，用于构建结构化且语义明确的网页。在学习网页开发时，掌握 HTML 可能是最重要的一项技能之一，因为它与 CSS 和 JavaScript 紧密结合，共同创建美观且具有交互性的网页。

Dash 中的 HTML 组件

Dash 中的 HTML 组件 指的是可以在 Dash 应用中使用的 HTML 标签和属性集合，用于构建用户界面。

在 Dash 中最常用的 HTML 组件包括：

• HTML Div：这是一个容器组件，可用于容纳其他 HTML 组件，并将相关组件组合在一起。
• HTML Span：用于对文本的特定部分应用样式。
• HTML Image：用于在网页中显示图片。
• HTML Link：用于创建指向其他网页或外部资源的链接。
• HTML Table：用于展示表格数据。
• HTML Input：用于创建输入框，以收集用户数据。
• HTML Button：用于创建可点击的按钮，触发应用内的操作。

通过这些 HTML 组件，开发者可以使用 Dash 构建复杂且交互性强的网页应用。Dash 中的 HTML 组件可以通过 CSS 进行样式设置，并可与其他 Dash 组件（如图表和图形）结合，打造动态的用户界面。

如何在 Dash 中使用 HTML？

在 Dash 中，我们使用 html 组件模块。可以通过以下方式导入该模块：

1from dash import html

我们可以使用哪些 HTML 组件？

要查看可用的 HTML 组件，可以查阅 Dash 文档，或执行以下命令：

1dir(html)

查看列表中以大写字母开头的元素，即可获得所有可用的组件类名、属性和方法。

基于 HTML 的 Dash 应用

在我们的这个受 HTML 启发的 Dash 应用中，将使用以下一些常用标签：

div 标签是 HTML 中的一个容器，用于将其他 HTML 元素分组和组织。它常用于一次性为多个元素应用样式或 JavaScript 函数。在本应用中，所有 HTML 组件都将嵌套在一个更大的 Div 组件内。

1html.Div([])

标题标签用于定义网页中的标题。H1 标签是最高级别的标题，用于标识页面最重要的内容。通常仅在每页中使用一次，以确保良好的语义结构。标题从最大的 H1 到最小的 H6 共有六级。本示例中将使用 H1 和 H3。

1html.H1()
2html.H3()

段落标签用于定义网页中的文本块。它常用于将内容划分为独立的段落，提升可读性和组织性。

1html.P()

锚标签（a 标签）用于在网页中创建超链接。点击后可跳转到其他页面或同一页面的指定位置。锚标签可以嵌套在其他标签（如段落标签）中，实现文本中的可点击链接，方便用户快速访问相关内容。

1html.P(["See ", html.A("more courses", href="https://www.educative.io/", target='_blank'), " to further level up your technical skills!"])

其中 href="https://www.educative.io/" 指定点击后跳转的目标地址，target='_blank' 表示在新标签页中打开链接。

iframe 标签用于在当前网页中嵌入另一个 HTML 文档。例如，可以将外部网站的内容嵌入到自己的页面中，同时保留其功能。只要使用得当且不违反法律或道德规范，iframe 的使用通常是合理的。

1html.Iframe()

HTML 表格标签用于在网页中创建表格，以行列形式组织数据。table 标签用于定义表格的起始和结束，而 thead 和 tbody 等标签可用于将表格内容划分为逻辑部分。假设我们有一个 pandas DataFrame ds，希望显示最多 max_rows 行数据，可以使用如下模板代码：遍历 DataFrame 的列名来构建表头，同时遍历行和列来构建表格主体。

1def get_table(ds, max_rows=50):
2    """使用 HTML 组件展示最多 <max_rows> 行 pandas DataFrame 数据的模板代码"""
3    return html.Table([
4        html.Thead(
5            html.Tr([html.Th(col) for col in ds.columns])
6        ),
7        html.Tbody([
8            html.Tr([
9                html.Td(ds.loc[i, col]) for col in ds.columns
10            ]) for i in range(min(len(ds), max_rows))
11        ])
12    ])

构建我们的 Dash 应用

接下来，我们将使用上述 HTML 组件构建一个简单的 Dash 应用。

注意：在下面的应用代码中，style 参数被放置在某些 HTML 标签内，作为包含高度、宽度和内边距等设置的字典。虽然这里展示了这种写法，但通常建议使用基于 CSS 的样式，因为这种方式更整洁、易读且更具可定制性，我们将在后续章节中深入探讨。

让我们逐步分析所创建的函数及其作用：

get_table 函数用于展示数据集 ds 的前 max_rows 行。它接收一个 pandas DataFrame ds 和一个可选的整数参数 max_rows（默认值为 50）。该函数使用 Dash 的 HTML 组件创建一个 HTML 表格并返回。具体工作流程如下：

1. 使用 html.Table 组件创建表格的基本结构。
2. 在表格内部，html.Thead 用于创建表头，其中包含一个由 html.Tr 表示的行，以及每个列对应的 html.Th 表头单元格。这些单元格根据 DataFrame ds 的列名生成。
3. html.Tbody 用于创建表格主体，包含多个由 html.Tr 表示的行。每一行对应 DataFrame 中的索引 i，范围为 min(len(ds), max_rows)，确保只显示前 max_rows 行数据。
4. 每一行中，通过 html.Td 创建每个列的数据单元格，内容通过 ds.loc[i, col] 获取。

在提供的代码中，get_table 函数被用来展示从 Plotly Express 内置的 wind 数据集中提取的 DataFrame df 的前 nrows_shown（20）行数据。该函数在 app.layout 定义中被调用，生成的 HTML 表格作为主 html.Div 的子组件加入布局。这使得应用能够同时展示表格、标题、段落和 Iframe 等内容。

get_table 函数是一个实用工具，可快速将 pandas DataFrame 转换为 Dash 应用中的 HTML 表格，便于以友好的格式展示数据。

接下来，我们继续分析构建应用的其余代码：

这段代码使用 JupyterDash、Dash HTML 组件和 Plotly Express 提供的内置 wind 数据集，创建了一个 Dash 网页应用。应用展示了一个 Iframe、一个以 HTML 表格形式呈现的 pandas DataFrame 以及一些文本内容。主要结构如下：

1. 加载数据并配置变量：

   • 将 Plotly Express 的 wind 数据集加载为 pandas DataFrame df。
   • 设置 nrows_shown 为 20，决定从 DataFrame 中显示的行数。

2. 设置应用：

   • 初始化名为 app 的 JupyterDash 应用。

3. 定义布局：

   • 布局是一个由 Dash HTML 组件构成的层级结构，包裹在 html.Div 中。组件包括标题、段落、Iframe 和 get_table 函数的返回结果。
   • html.H1 和 html.H3 用于创建应用的主标题和副标题。
   • html.P 用于展示文本内容，其中包括一个包含嵌入式超链接（html.A）的段落。
   • html.Iframe 用于显示指定 src URL 的嵌入式网页，其高度和宽度通过 style 属性设置。
   • 另一个 html.P 说明了 pandas DataFrame 的展示方式，并指出 get_table 函数用于显示前 nrows_shown 行数据。
   • get_table 函数以 df 和 nrows_shown 为参数调用，返回的 HTML 表格被添加到布局中。
   • html.Div 的 style 属性用于为内容添加左侧内边距。

4. 运行应用：

   应用的布局是一个由组件构成的层级结构，定义了应用的外观。布局中使用的组件均来自 Dash HTML 组件库（如 html.Div、html.P、html.H1）。应用通过前述的 get_table 函数将 pandas DataFrame 以 HTML 表格形式展示，同时包含文本内容和 Iframe。这提供了一个简单示例，说明如何使用 Dash 创建包含多种内容的交互式网页应用。

通过以下练习来实践 HTML 组件（并初步接触 dcc 核心组件）：