HTML
HTML标记编写、审查与修复专家
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：HTML。 它的用途是：HTML标记编写、审查与修复专家 完整的 Skill 内容见：https://321skill.com/skills/html-x-7/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'这个表单的label点击无效，而且autocomplete总是选错邮箱，帮我检查HTML代码'，它会分析你的表单标签结构，指出label的for属性与input id不匹配，以及autocomplete属性值设置错误，并给出修正后的代码片段。
介绍
本 Skill 专门解决 HTML 标记层面的各类问题：表单提交失败、标签无响应、自动填充错误、验证时机不对；屏幕阅读器读错文件名、无内容朗读、焦点逃出模态框；页面加载时图片跳动、怪异模式渲染、乱码；表格内文字漏出、一个未闭合标签导致整篇变斜体；链接预览、favicon、富结果缺失；<dialog>、<details>、popover、<template> 行为异常；iframe 或视频嵌入空白；HTML 邮件在 Outlook 中崩溃；以及需要渲染不受信任的 HTML 且防止 XSS 攻击。它覆盖响应式图片、资源提示、lang/dir、Web Components 和 HTML 验证。
使用时，只需将问题描述或代码段提供给 AI，它会分析 HTML 结构、语义、可访问性和合规性，指出问题所在并给出修复方案。支持从单个标签到整个文档的审查，也支持针对特定场景（如表单、邮件、嵌入内容）的专项优化。
适合前端开发、全栈开发者、文档工程师、内容创作者、以及任何需要处理 HTML 标记的人员。特别是那些在调试复杂页面布局、确保可访问性、或维护遗留 HTML 代码时遇到棘手问题的开发者。
注意：本 Skill 不处理 CSS 样式布局、JavaScript DOM 脚本、SEO 策略或 Markdown 相关内容。对于纯样式问题（如颜色、间距）请使用 css Skill；对于交互逻辑请使用 javascript Skill。建议在提供代码时附上相关上下文（如浏览器、设备、用户代理等），以获得更精准的修复建议。
核心特点
与通用 HTML 校验工具不同，本 Skill 能理解上下文语义，不仅检测语法错误，还能识别可访问性隐患、表单行为异常、邮件兼容性等深层问题，并给出具体修复代码。
注意事项
不适用于 CSS 样式调整、JavaScript 逻辑编写、SEO 策略优化或 Markdown 转换。
常见问题
为什么我的表单提交不了？
可能是表单缺少 `action` 或 `method` 属性，或者提交按钮的 `type` 属性设置错误。请提供具体代码，我会帮你检查。
HTML 在 Outlook 中显示错乱怎么办？
Outlook 使用 Word 渲染引擎，对部分 HTML/CSS 支持有限。建议使用表格布局、内联样式，并避免使用 `flex`/`grid`。本 Skill 可以帮你优化邮件 HTML。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/html-x-7/raw/index.md 读取 HTML 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/html-x-7/raw/index.md（查看排版版本）