HTML
专治各种HTML标记问题，从语义结构到可访问性
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：HTML。 它的用途是：专治各种HTML标记问题，从语义结构到可访问性 完整的 Skill 内容见：https://321skill.com/skills/html-x-5/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'请检查这个HTML片段的可访问性问题，并修复：<div class="button" onclick="submit()">提交</div>'，它会指出缺少role="button"、aria属性、键盘事件支持，并给出修复后的语义化HTML代码。或者：'我的HTML邮件在Outlook中显示错乱，请帮我修复表格布局和内联样式。'它会分析邮件兼容性问题，添加合适的表格属性、内联样式、条件注释等。
介绍
这个技能专门解决与HTML标记相关的各种问题。比如表单字段不提交、标签无响应、自动填充错误、验证时机不对；屏幕阅读器读错内容、焦点丢失；页面加载时抖动、乱码、表格溢出、标签未闭合导致样式错乱；链接预览、图标、富结果缺失；<dialog>、<details>、popover、<template>行为异常；iframe或视频嵌入空白；HTML邮件在Outlook中崩溃；以及未经信任的HTML渲染时的XSS风险。它涵盖响应式图片、资源提示、lang/dir、Web组件和代码验证。
使用时，只需直接描述你的HTML问题或需求，比如“检查这个表单的可访问性”“修复HTML邮件在Outlook中的布局”“审查这段HTML代码是否存在XSS漏洞”。它会分析具体场景，给出修复后的语义化HTML代码，并解释修改原因。支持批量处理、代码片段审查、以及从零编写符合标准的HTML结构。
适合前端开发、全栈开发、测试工程师、文档工程师等需要频繁处理HTML标记的人员。也适合内容创作者（如HTML邮件编写）、可访问性合规检查人员，以及任何需要确保HTML代码健壮性和安全性的开发者。
使用时注意：本技能专注HTML标记本身，不处理CSS样式、JavaScript行为、SEO策略、Markdown转换。如果问题涉及样式或布局，请配合css技能；涉及DOM交互，请配合javascript技能。建议在修复HTML后，再用其他工具进行视觉和功能验证。
核心特点
与同类HTML技能不同，该技能不仅覆盖基础语义和表单，还深度处理现代HTML特性（dialog、details、popover、template）、HTML邮件兼容性、XSS安全，以及可访问性合规（ARIA、键盘导航等），而其他技能通常只关注基本语法。
注意事项
不适合处理CSS样式、JavaScript交互、SEO策略、Markdown转换，以及非HTML的代码问题。
常见问题
这个Skill能修复CSS布局问题吗？
不能，它只处理HTML标记本身。CSS样式问题请使用css技能。
能检查HTML邮件在Outlook中的兼容性吗？
可以，它会识别Outlook特有的渲染问题，添加表格属性、内联样式和条件注释来修复。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/html-x-5/raw/index.md 读取 HTML 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/html-x-5/raw/index.md（查看排版版本）