HTML 交互示例

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

示例：学习进度卡片

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

为什么用 iframe？

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

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

代码与说明依旧使用 Markdown

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

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