用途：该技能面向现代 HTML5 与 CSS3 开发，帮助编写语义化、可访问、利于 SEO 的网页结构，并实现移动端、平板、桌面与电视等多视口下的响应式布局。
主要能力：涵盖语义化 HTML5 与无障碍地标角色（如 header/nav/main/article/footer 及 aria 标签）；Flexbox 与 CSS Grid（含 subgrid）多列响应式布局；CSS 自定义属性用于组件主题与零运行时深色/浅色模式设计令牌；容器查询（@container）与 :has() 实现基于容器宽度和父子状态的样式；使用 clamp() 实现流式排版；通过 @layer 管理级联层。
使用方式：以标准文档骨架开始，包含 charset、viewport meta 与样式表链接；用语义元素替代纯 div 结构；用 Grid 的 repeat(auto-fit, minmax(300px, 1fr)) 等模式构建自适应网格；用容器查询让组件按自身容器宽度自适应；推荐移动优先与媒体查询组合。
最佳实践：始终包含 viewport meta；优先使用原生 CSS 嵌套和 :has() 减少 Sass 构建步骤；保证颜色对比度符合 WCAG AA（4.5:1）并为图片提供描述性 alt；用 clamp() 实现流式字号；避免用 !important 解决优先级问题，改用 @layer；不要移除焦点轮廓而不提供 :focus-visible；交互元素使用 button 而非带 onclick 的 div。
常见问题与解决：布局溢出改用百分比或 min/max；Flex 项不换行需加 flex-wrap: wrap；Grid 间隙不显示需检查浏览器支持。
限制：资料未提供安装命令、平台支持范围、收费方式或性能数据，暂未提供相关信息。