🧪 前端基础练习

通过实践学习 CSS Flexbox 的核心概念，创建一个专业的三列产品卡片布局，并实现响应式设计。

通过实践学习 CSS Grid 的核心概念，创建一个 3x3 的图片画廊布局，掌握现代网格布局技术。

通过创建一个精美的卡片组件，学习 CSS 盒模型的核心概念：content、padding、border 和 margin。

通过创建带有通知徽章的图标组件，学习 CSS position 属性的四种定位方式：static、relative、absolute、fixed。

通过创建各种加载动画，学习 CSS transition、transform 和 @keyframes 动画的使用。

学习 CSS transform 属性，包括平移、旋转、缩放、倾斜，以及 3D 透视效果

学习 CSS filter 属性，掌握模糊、灰度、亮度、对比度等滤镜效果

通过创建一个现代化的 Hero 区域，学习 CSS 渐变的核心技巧：线性渐变、径向渐变和多色渐变。

通过设计卡片和按钮组件，学习 CSS 阴影属性，包括 box-shadow、text-shadow、多层阴影和内阴影。

通过设计一个着陆页，学习 CSS 背景属性，包括 background-image、background-size、多层背景等。

通过创建独特的卡片和图片形状，学习 CSS clip-path 属性，包括基础形状、多边形和动画效果。

学习使用媒体查询创建适应不同屏幕尺寸的响应式网页布局

掌握 CSS 自定义属性（CSS Variables），学会创建主题色彩系统、实现动态样式切换

学习如何使用 CSS 变量和 prefers-color-scheme 媒体查询实现深色模式

通过设计一篇博客文章的排版，学习 CSS 字体属性、行高、字间距等文本排版技巧。

通过创建一组现代化按钮，学习 CSS 按钮样式、悬停效果、禁用状态等交互设计技巧。

学习如何美化表单元素，包括输入框、按钮、单选复选框等

掌握 CSS 伪元素，学会使用 ::before、::after 创建装饰性元素和特殊效果

学习使用语义化 HTML 标签构建结构清晰、可访问性强的网页

通过创建一个完整的联系表单，学习 HTML 表单元素、输入类型、验证属性等核心知识。

通过创建一个产品价格表，学习 HTML 表格的结构标签、合并单元格、表头分组等知识。

通过创建一个产品特性页面，学习 HTML 列表的三种类型：无序列表、有序列表和描述列表。

通过创建一个产品展示页面，学习 HTML 图片标签、响应式图片、figure 元素等媒体相关知识。

通过创建一个文档页面，学习 HTML 链接的各种用法：内部链接、外部链接、锚点定位等。

通过设置页面元信息，学习 HTML head 元素、meta 标签、Open Graph 等 SEO 基础知识。

通过优化一个交互组件，学习 ARIA 属性、键盘导航、屏幕阅读器支持等 Web 可访问性知识。

通过创建一个媒体播放页面，学习 HTML5 的 video、audio、source、track 等原生媒体元素。