---
title: "HTML 交互示例"
description: "验证在 MDX 文档中安全地嵌入独立 HTML 交互页面。"
---

> Documentation Index
> Fetch the complete documentation index at: https://personal-docs-b7b.pages.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# HTML 交互示例

普通文档负责解释知识，交互组件帮助读者自己探索。这一页同时包含 Markdown、HTML 和可操作的 JavaScript 演示。

## 示例：学习进度卡片

下面的内容来自 `public/demos/learning-card.html`，使用 `<iframe>` 嵌入。你可以点击按钮修改卡片状态：

<iframe
  class="doc-embed"
  src="/demos/learning-card.html"
  title="可交互的学习进度卡片"
  loading="lazy"
  sandbox="allow-scripts"
></iframe>

## 为什么用 iframe？

完整 HTML 文件可以直接沿用已有的 CSS 和 JavaScript，不必全部转成 React。`sandbox="allow-scripts"` 允许演示脚本运行，但不会授予同源访问权限。

对于需要和正文深度联动的交互，后续可以改用 Astro 组件。

## 代码与说明依旧使用 Markdown

```js
const status = '已理解';
console.log(`当前学习状态：${status}`);
```

这样可以在一个页面里同时获得易读的长文和交互式展示。

Source: https://personal-docs-b7b.pages.dev/examples/interactive/index.mdx