说明目录
Garden 使用说明组件参考garden html

组件参考 · html

在沙盒中运行一段独立的网页小工具、画布动画或演示。

← 组件参考 · 用法：嵌入网页片段

1示例

代码

```garden html
title: 字符长度与预计阅读耗时小工具
code: |
  <!doctype html>
  <html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <style>
      body { margin: 0; padding: 16px 18px; font: 14px/1.6 system-ui, sans-serif; color: #1b1a18; background: #faf9f5; }
      input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #d5d1c8; border-radius: 6px; font: inherit; background: #fff; color: #1b1a18; }
      .meta { margin-top: 10px; color: #6e6b64; font-variant-numeric: tabular-nums; }
      strong { color: #1b1a18; }
    </style>
  </head>
  <body>
    <input id="txt" value="把文章放在自己的 Git 仓库里，推送后自动构建。" aria-label="输入示例文本" />
    <div class="meta">当前字符数：<strong id="count">23</strong> 字</div>
    <script>
      const input = document.getElementById("txt");
      const count = document.getElementById("count");
      input.addEventListener("input", () => { count.textContent = String(input.value.length); });
    </script>
  </body>
  </html>
```

效果

2字段写法

```garden html
src:     # 与 code 二选一，文件路径
code: |  # 与 src 二选一，HTML 源码
title:   # 建议填，框顶标题
```

3字段

围栏写 ```garden html（编辑器代码片段触发词 ;ghtml）。YAML 语法错误或顶层含未知键名时整块报 garden-yaml 错误。

字段是否必填默认值取值与限制说明
src与 code 二选一无相对路径（如 ./demo.html）引用当前文章同名子目录下的独立 .html 文件
code与 src 二选一--- 分隔线下的 HTML 正文或 ""多行 HTML 字符串直接内联的 HTML 源码（含 <script> 时运行在沙盒 iframe 中，并自动按内容高度调整；也可以把 HTML 放在 --- 分隔线下方）
title建议填写"HTML"字符串框顶标题栏与无障碍 iframe 标题

4限制与报错

  • 除通用的 garden-yaml 外，本组件没有专属报错代码；表里写「不做校验」的建议值不会报错。
目录