web-html

用途

此技能可让 OpenClaw 生成、编辑和优化 HTML5 代码，重点关注用于构建结构的语义化标记、符合 ARIA 和 WCAG 标准的无障碍设计、表单处理、用于封装的 Web Components、用于样式隔离的 Shadow DOM，以及 meta 标签和结构化数据等 SEO 技术。

何时使用

构建需要无障碍、语义化 HTML 的网页时使用此技能，例如创建带有 ARIA 角色的电商产品页，或单页应用中的动态表单。对于博客文章等注重 SEO 的内容，或集成自定义 Web Components 以避免全局样式冲突时，也可使用此技能。

主要功能

• 生成语义化 HTML：创建 <main> 或 <article> 等元素，提升可读性和 SEO 效果。例如，使用 <header role="banner"> 创建无障碍的网站页眉。
• 实现 ARIA/WCAG：为元素添加 aria-label="Search" 等属性，以支持屏幕阅读器，并确保符合 WCAG 2.1 AA 标准。
• 处理表单：构建带有必需属性的表单，例如 <input type="email" required aria-invalid="false">，并包含验证钩子。
• 创建 Web Components：使用 Shadow DOM 定义自定义元素，例如封装内部 HTML 和样式的 <my-component>。
• 优化 SEO：插入 <meta name="description" content="Page description"> 等 meta 标签，并使用标题放置关键词。 代码片段：

<section aria-labelledby="sec-title">
  <h2 id="sec-title">Section Heading</h2>
  <p>Content with SEO keywords.</p>
</section>

使用模式

通过 OpenClaw 的 CLI 或 API 调用此技能，指定技能 ID（"web-html"）和操作参数。对于生成任务，提供 JSON 配置；对于编辑任务，提供目标 HTML 字符串。模式 1：使用 CLI 快速创建原型。模式 2：与其他技能串联，例如将输出传递给 CSS 技能。务必包含无障碍标志，以确保符合 WCAG 标准。示例模式：使用 openclaw execute web-html --action generate --params '{"type": "page", "features": ["semantic", "aria"]}' 生成结构化代码。

常用命令/API

• CLI 命令：使用 openclaw execute web-html --action <action> --params <JSON>，其中操作包括 "generate"、"enhance" 或 "validate"。例如，openclaw execute web-html --action generate --params '{"elements": ["form"], "accessible": true}' 可生成无障碍表单。添加 --debug 等标志可输出详细信息，或使用 --validate 检查是否符合 WCAG 标准。
• API 端点：向 https://api.openclaw.ai/skills/web-html 发送 POST 请求，并附上 JSON 请求体，例如 {"action": "generate", "params": {"type": "component", "shadowDom": true}}。设置请求头 Authorization: Bearer $OPENCLAW_API_KEY 进行身份验证。响应格式：JSON，包含 "code"（HTML 字符串）和 "errors" 数组。 代码片段：

{
  "action": "enhance",
  "target": "<div>Original HTML</div>",
  "params": {"addAria": true}
}

使用此功能为现有 HTML 添加 ARIA 属性。

集成说明

可通过管道将输出传递给其他技能来进行集成，例如将 web-html 的输出用作 web-css 的输入。配置格式：JSON 对象，例如 {"accessibility": true, "seoTags": ["description", "keywords"]}。对于 Web Components，请确保通过封装在 Shadow DOM 中来保证兼容性；例如，使用 openclaw chain web-html web-js --input <html-code> 与 web-js 技能结合。如果使用环境变量，请设置 $OPENCLAW_API_KEY 以发起 API 调用，并处理本地 Web Component 测试所需的 Node.js 等依赖项。

错误处理

常见错误：无效的 HTML（例如缺少结束标签）会返回 HTTP 400，并附带类似 "Syntax error in element" 的消息；ARIA 使用不当（例如角色无效）会触发 422，并提供详细信息。可通过检查 response.status 进行处理；如果 >=400，则解析 "errors" 数组以获取具体信息。对于 CLI，可使用 --retry 3 标志尝试修复，例如 openclaw execute web-html --action generate --params {...} --retry 3。错误检查代码片段：

if (response.errors.length > 0) {
  console.error(response.errors[0].message); // e.g., "Missing aria-label"
  retryAction();
}

执行前，务必根据 WCAG 规则验证输入。

具体使用示例

1. 生成带 SEO 的语义化 HTML 页面：运行 openclaw execute web-html --action generate --params '{"structure": "basic", "seo": true, "accessibility": true}'。这会生成一个完整的 HTML 文档，例如：

   <!DOCTYPE html>
   <html lang="en">
     <head><meta name="description" content="SEO description"></head>
     <body><main aria-label="Main content">Content here</main></body>
   </html>
   

   可用于快速构建无障碍网页原型。

2. 为表单添加 ARIA 属性以提升无障碍性：首先，提供一个基础表单字符串，然后执行 openclaw execute web-html --action enhance --target '<form><input type="text"></form>' --params '{"addAria": true}'。输出：

   <form aria-label="User Form">
     <label for="input1">Label:</label>
     <input id="input1" type="text" aria-required="true">
   </form>
   

   这可确保现有代码中的表单元素符合 WCAG 要求。

图关系

• 相关技能：web-css（用于为生成的 HTML 添加样式）、web-js（用于编写 Web Components 脚本）
• 所属集群：web-dev
• 关联标签：html、无障碍、语义化、web
• 依赖项：需要 web-dev 集群才能完整发挥功能