前端Frontend
网页开发入门网页上用户能看到和操作的部分
打开网站后看到的文字、图片、按钮和表单，以及点击后发生的页面变化，主要由前端负责。它运行在浏览器里，通常由 HTML、CSS 和 JavaScript 构成；保存数据、核对权限等事情会交给后端 Backend。
NIMBUS产品 定价 登录
用户在这里看见和操作把想法变成网站输入一句描述，生成你的第一个页面。免费开始
HTML 内容结构CSS 视觉样式JS 交互逻辑
什么时候用
- 按钮能点、表单能填、操作后页面会变化——这些用户直接使用的部分由前端实现浏览器里的真实操作按钮保存输入框oil@example.com操作结果✓ 已保存用户操作后，页面要立即给出看得见的结果
- API 接口 API 返回数据后，前端把它变成用户看得懂的卡片、列表和提示接口数据 → 页面内容API 返回{ "name": "小林", "plan": "Pro" } → 页面显示小林 · Pro 会员前端把机器数据整理成人能读懂的界面
- 同一份页面要在手机和电脑上都能正常阅读和操作同一功能，两种屏幕手机 390px单列 · 大按钮电脑 1440px双列 · 完整导航不是把电脑页面等比例缩小
- 先把注册、下单等关键流程做通，再补动画、阴影和装饰先保证关键流程填写邮箱→提交→看到成功动画和阴影可以等流程能用以后再补
什么时候不用
- 不要把数据库密码或 API 密钥写进前端：前端代码会下载到访客浏览器，任何人都能查看访客能查看前端代码app.jsconst DB_PASSWORD = "admin-123"const AI_KEY = "sk-live-••••"下载到浏览器的代码，不是保密空间
- 画面看起来像按钮不等于能用；点击、提交、成功和报错都要真的接通看起来像按钮，但没有行为画面保存点击后没有请求 · 没有提示视觉完成不等于功能完成
- 不要只在浏览器判断价格和权限；访客能改前端代码，后端必须重新检查浏览器里的值可以被修改页面价格¥99 → 改完再提交¥1价格和权限必须由后端重新核对
- 只有一个简单页面时，不要同时装多套框架；依赖越多越难升级和排错一个简单页面React→Vue→jQuery→三套状态库依赖越多，安装、升级和排错越复杂
组成结构 · Anatomy
HTML标题 · 表单 · 内容
CSS颜色 · 布局 · 响应式
JavaScript点击 · 状态 · 请求
浏览器中的页面用户最终看到的结果
1内容结构StructureHTML 描述标题、段落、按钮、表单等页面内容
2视觉样式PresentationCSS 负责颜色、字体、间距、布局和不同屏幕尺寸
3交互逻辑BehaviorJavaScript 响应操作、保存状态，并向后端请求数据
4浏览器Browser加载三种代码，把它们组合成用户可以操作的页面
典型使用场景
产品官网与落地页
产品官网让访客看懂产品并开始使用
AI WORKSPACE
把想法变成真正的产品
描述你的需求，生成并发布第一个页面。
免费开始 →文字、布局、按钮点击与跳转都由前端实现
登录、注册和资料表单
注册表单填写账号并获得即时反馈
创建账号
输入、聚焦、校验提示和按钮状态都是前端交互
从 API 加载内容列表
内容列表把 API 数据变成可阅读的卡片
设计入门12 篇文章前端基础8 个练习Git 协作5 个任务
GET /api/courses → JSON → 卡片列表
根据操作展示成功或失败状态
操作反馈保存后明确告诉用户结果
保存设置
状态✓ 保存成功更新时间刚刚
失败时应在同一位置说明原因和下一步