（2089期）HTML Coder – 语义化网页开发专家 · 无障碍优先

语义化网页开发专家 · 无障碍优先 W3C 标准的语义化 HTML 开发技能，支持表单、多媒体、HTML5 API 与无障碍设计，适合构建现代响应式网页。 使用说明 核心用法 HTML Coder 是面向专业网页开发的结构化技能，专注于语义化标记、HTML5 标准与无障碍合规。核心用法包括： 文档骨架搭建：使用 <!DOCTYPE html> 声明、语义区块元素（<header>、<nav>、<main>、<article>、<footer>）构建清晰的页面结构，而非滥用 <div> 嵌套。 表单与验证：利用 HTML5 原生输入类型（email、tel、date 等）及验证属性（required、pattern、min/max）实现零 JS 基础验证，配合 <fieldset> 与 <label> 提升可访问性。 响应式多媒体：通过 <picture> 元素的 srcset 与 media 查询实现自适应图片，使用 loading="lazy" 优化加载性能；支持 <canvas>、SVG 嵌入及原生音视频控制。 HTML5 API 集成：涵盖 Web Storage（localStorage/sessionStorage）、Geolocation、Drag & Drop、Web Workers 等现代浏览器能力，提供渐进增强方案。 无障碍合规：遵循 WCAG 2.1 标准，确保正确的标题层级、ARIA 属性补充、键盘导航支持及屏幕阅读器兼容性。 显著优点 标准权威性：直接对标 WHATWG HTML Living Standard 与 W3C 规范，代码具备长期兼容性 零依赖原生能力：充分利用浏览器内置验证与 API，减少 JavaScript 依赖，提升性能与可维护性 无障碍优先设计：从标记层面解决色觉障碍、键盘用户、屏幕阅读器用户的访问需求 丰富参考体系：提供 7 份结构化参考文档（CSS/JS 引入、属性全集、术语表、标准规范），降低查阅成本 即插即用模板：包含语义页面结构、无障碍表单、响应式图片等可直接复用的代码片段 潜在缺点与局限性 浏览器兼容性差异：部分 HTML5 API（如 Web Workers、高级表单类型）在旧版浏览器中需降级处理，依赖开发者手动检测（caniuse.com 查询） 样式与行为分离不足：虽强调语义 HTML，但实际项目中仍需紧密配合 CSS 与 JavaScript，单独使用 HTML Coder 难以完成视觉与交互实现 动态内容限制：静态标记技能，对于单页应用（SPA）、虚拟 DOM 操作等现代前端框架场景，需结合 React/Vue 等工具链 安全边界模糊：技能描述提及 API 使用但未明确 Content Security Policy（CSP）配置、XSS 防护等安全实践，需开发者自行补强 适合人群 前端初学者：系统学习语义化标记与 HTML5 标准，建立正确的文档结构思维 全栈开发者：快速生成符合规范的服务端渲染模板、邮件 HTML、静态页面原型 可访问性（a11y）专员：验证现有代码的 WCAG 合规性，优化屏幕阅读器体验 内容编辑与 SEO 从业者：构建搜索引擎友好的页面结构，提升索引效率 常规风险 XSS 注入风险：动态拼接 HTML 时若未转义用户输入，易导致跨站脚本攻击；建议始终使用模板引擎或 DOM API（textContent 替代 innerHTML） API 权限滥用：Geolocation、Storage 等 API 涉及用户隐私，需明确请求权限并提供降级方案，避免违反 GDPR/CCPA 等法规 表单验证绕过：客户端验证仅提升体验，服务端必须二次校验，防止恶意请求绕过前端限制 第三方资源依赖：通过 <link>、<script src> 引入外部资源时，存在供应链攻击风险，建议启用 SRI（Subresource Integrity）校验 原始说明 Expert HTML development skill for building web pages, forms, and interactive content. Use when creating HTML documents, structuring web content, implementing...