网页常用组件展示

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

按钮 (Button)

用于触发操作的交互元素

卡片 (Card)

卡片标题

卡片内容描述文字

用于展示相关信息的容器

导航栏 (Navigation)

网站Logo

网站页面间的导航链接

表单元素 (Form Elements)

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

模态框 (Modal)

模态框标题

这是模态框的内容区域

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

下拉菜单 (Dropdown)

点击展开的选项菜单

轮播图 (Carousel)

图片 1

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

数据表格 (Table)

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

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

标签页 (Tabs)

这是标签1的内容区域

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

进度条 (Progress Bar)

进度 75%
完成度 60%

显示任务或操作完成程度

徽章 (Badge)

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

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

警告框 (Alert)

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

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

组件总结

基础交互组件

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

信息展示组件

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

导航组件

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

状态指示组件

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

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