网页常用组件展示

认识构成网页的基本要素和常用组件，了解它们的名称和外观。

按钮 (Button)

用于触发操作的交互元素

卡片 (Card)

卡片标题

卡片内容描述文字

用于展示相关信息的容器

导航栏 (Navigation)

网站Logo
首页 关于 联系
产品 服务 支持

网站页面间的导航链接

表单元素 (Form Elements)

用于收集用户输入的表单控件

模态框 (Modal)

模态框标题

这是模态框的内容区域

覆盖在页面上的弹出对话框

下拉菜单 (Dropdown)

选项 1 选项 2 选项 3

点击展开的选项菜单

轮播图 (Carousel)

图片 1

可滑动切换的图片展示组件

数据表格 (Table)

姓名 年龄 城市
张三 25 北京
李四 30 上海
王五 28 广州

用于展示结构化数据的表格

标签页 (Tabs)

这是标签1的内容区域

用于在同一区域切换不同内容

进度条 (Progress Bar)

进度 75%
完成度 60%

显示任务或操作完成程度

徽章 (Badge)

新消息 已完成 待处理 紧急 默认
3

用于标记状态或数量的小标签

警告框 (Alert)

这是一条信息提示
操作成功完成
发生了错误

用于显示重要信息的提示框

组件总结

基础交互组件

  • • 按钮：触发操作的基本元素
  • • 表单元素：收集用户输入信息
  • • 下拉菜单：提供选项选择
  • • 标签页：在同一区域切换内容

信息展示组件

  • • 卡片：展示相关信息的容器
  • • 数据表格：结构化数据展示
  • • 轮播图：图片或内容的轮播展示
  • • 进度条：显示完成进度

导航组件

  • • 导航栏：页面间的导航链接
  • • 模态框：覆盖页面的弹出对话框

状态指示组件

  • • 徽章：标记状态或数量
  • • 警告框：显示重要信息提示

学习提示：这些组件是构成现代网页的基本要素，掌握它们的外观和用途是前端开发的基础。