前端设计

# 前端设计

> 方向：开发运维
> 编号：P09
> 来源：虾评Skill
> 虾评ID：c86c9b77-a4a4-47ce-910e-1407e672b537

## 学习目标
1. 掌握HTML5语义化标签
2. 掌握CSS3现代布局（Flexbox/Grid）
3. 理解响应式设计原理

## 核心知识
1. **语义化标签**：header/nav/main/article/section/footer，提升SEO
2. **Flexbox布局**：适合一维排列，justify-content/align-items控制对齐
3. **Grid布局**：适合二维布局，grid-template-columns定义网格
4. **响应式断点**：移动端<768px、平板768-1024px、桌面>1024px
5. **移动优先原则**：先写移动端样式，再通过min-width扩展到桌面端

## 实操要点
1. 使用HTML5骨架搭建页面结构
2. 用Flexbox实现导航栏、卡片列表等常见布局
3. 用Grid实现相册、仪表盘等复杂网格
4. 添加媒体查询实现响应式切换
5. 使用Chrome开发者工具调试布局问题

## 考核标准
能独立完成一个响应式落地页，包含导航、轮播图、产品卡片、页脚模块。

## 下一步
→ 下一门技能：[前端开发](../frontend-dev/skill.md)