核心用法
html-coder 是一套面向专业前端开发的综合性技能系统，核心能力覆盖三大层级：
基础层：完整支持HTML5语义元素（<article>、<section>、<nav>等）、文档结构规范、文本格式化与链接系统，提供符合W3C标准的文档模板。
功能层：深度表单开发能力，包括HTML5原生验证（required、pattern、type="email"等）、ARIA无障碍属性、字段集组织；多媒体支持涵盖响应式图片（<picture>+srcset）、懒加载（loading="lazy"）、Canvas/SVG矢量图形及音视频嵌入。
高级层：集成HTML5 API生态（Geolocation、Web Storage、Web Workers、SSE）、拖拽交互、微数据结构化标记，并配备完整的WCAG 2.1无障碍合规指南。
显著优点
- 模板资产丰富：预置34个行业模板，横跨企业站、电商、餐饮、SaaS、作品集等垂直场景，开箱即用
- 标准权威性高：直接引用WHATWG Living Standard与W3C规范，MDN/W3C双重校验链路
- 无障碍优先设计：内置ARIA最佳实践、键盘导航测试清单、色彩对比度指南
- 性能优化内建：原生懒加载、DOM深度优化建议、现代格式（WebP）引导
- 工具链闭环：集成W3C Validator、Can I Use、Lighthouse审计、HTML5 Outliner等官方工具
潜在局限
- 动态能力边界：纯标记语言，复杂交互逻辑需依赖配套CSS/JS技能（文档明确提示需
add-css-style.md/add-javascript.md） - 运行时安全盲区：HTML本身不包含执行沙箱，XSS防护需开发者自行实施（模板未内建CSP策略）
- 浏览器兼容性：部分HTML5 API（如Web Workers、Geolocation）需polyfill或降级方案
适合人群
- 初级开发者：通过
getting-started.md与34个模板快速建立标准化开发习惯 - 中高级前端：作为语义化标记、无障碍审计、SEO结构化数据的速查手册
- 全栈/后端工程师：需要生成合规HTML邮件模板或管理后台视图时参考
- 产品经理/设计师：理解HTML能力边界，进行技术可行性评估
常规风险
| 风险类型 | 具体表现 | 缓释建议 |
|---------|---------|---------|
| 安全风险 | 模板直接渲染用户输入可能导致XSS | 所有`innerHTML`操作前强制转义，启用CSP |
| 兼容性风险 | 老旧浏览器不支持`<picture>`/懒加载 | 提供`<img>`降级方案，使用Modernizr检测 |
| SEO风险 | 错误使用语义标签（如`<div>`冒充`<button>`）影响爬虫理解 | 遵循文档"Semantic HTML"章节，定期W3C验证 |
| 无障碍风险 | 缺失`alt`文本或错误ARIA标签导致屏幕阅读器失效 | 使用文档内置无障碍检查清单逐项核对 |
| 性能风险 | 未优化大图导致LCP指标劣化 | 严格执行`srcset`+`loading="lazy"`规范 |
生态定位
本技能作为"静态结构层"专家，需与CSS（表现层）、JavaScript（行为层）技能协同工作，文档明确提供add-css-style.md与add-javascript.md的集成指引，形成完整前端开发闭环。