网页应用的 4 种积木

4 种积木，搭出所有交互

几乎所有网页应用都由同样的基本组件拼成：输入框、选择器、按钮、展示卡片。不管是记账工具还是 AI 生成器，拆开来看都是这 4 种。

点击下方任意一块，看它在真实应用里是什么角色。

积木拆解

首页动画游戏科技生活

投稿

搜索视频、UP主

搜索

推荐动画番剧游戏科技生活美食时尚

用 AI 做出第一个网页应用——零基础也能搞定！

科技小白 · 23.4万观看

我用 AI 做了个心情记录网页，太治愈了

UP主日常 · 8.1万观看

网页积木讲解：认识输入框、按钮和展示区

编程启蒙 · 5.6万观看

↑ 点击上面页面里的任意区域

网页里还有文字、图片、反馈提示等元素。但这 4 类是你做第一个应用时最先会用到的。

普通网页的目标是展示内容，读完就结束了。网页应用的目标是完成一个动作：用户输入、触发操作、看到结果。

判断标准很简单：如果你只能看，它是网页；如果你能做，它是应用。

只能看

普通网页

文章、海报、作品集

内容读完即结束

用户是观众

可以做

网页应用

工具、记录、生成器

用户输入 → 触发 → 看结果

用户是操作者

回到你在第一节课写的想法。现在你认识了 4 种积木，可以把它补充得更具体：用户需要在哪里输入？点什么触发？结果怎么展示？

用下方工具把积木细节补充到你的想法里。

完善你的想法

你在第一节课写的想法会自动出现在这里。选出需要哪些积木，补充细节，再复制最终的想法。

第一步 · 你的应用想法

第二步 · 选出需要的积木

选完积木并填完细节后，你可以把这段话直接发给 AI，让它根据你的积木清单搭出第一版。

做一个心情记录器，用户写完感受就点击保存。这个应用至少用到了哪两种积木？