网站开发基础名词

做网站会碰到一堆名词。不用现在全搞懂，先过一遍知道它们各自负责什么，遇到不懂的直接问 AI。

这一章的目标不是让你学会开发，而是让你能准确描述问题。

"页面上按钮点了没反应"和"控制台报了一个接口 500"，AI 给出的回答质量完全不同。

核心三件

出问题时按这个分：内容不对是 HTML 或数据，样子不对是 CSS，点了没反应是 JavaScript。

名词	大概是什么
运行时（如 Node.js）	让 JavaScript 能在你电脑上跑，装依赖和起本地服务器都要用
包管理器（如 pnpm、npm）	给项目装依赖的工具，理解成"装零件"
Git	记录代码改了什么，改崩了能回退
代码托管平台	放代码的地方，多了协作和部署能力

名词	大概是什么
TypeScript	JavaScript 加了类型检查，写着麻烦一点但能少踩坑
Markdown	纯文本写文档的格式，说明文件和 AI 工具都在用
框架（如 React、Vue）	把页面拆成组件来拼，做复杂应用基本会用到
接口 / API	程序之间互相调用的约定，前端要数据、调模型本质都是调接口
环境变量	不写在代码里的配置，比如密钥和数据库地址

这三个词最常被混用，但分清它们能省很多沟通成本：

浏览器（前端）
   ↓ 发请求
服务端（后端）
   ↓ 读写
数据库 / 文件存储

一个实际用得上的判断：任何不能让用户看到的东西，都不能只在前端做。 价格校验、权限判断、密钥调用都必须在后端——前端的代码用户都能看到和修改。

类型	特点	适合
静态页面	内容提前生成好，访问时直接返回文件	介绍页、文档、博客
动态页面	每次访问时才生成	个人中心、订单、需要登录的内容

这个区别影响成本和速度：静态页面几乎不花服务器资源，动态页面每次访问都要计算。很多产品把本该静态的页面做成了动态的，然后为服务器多花了几倍钱。

页面白屏、样式歪了、接口没数据，大部分问题打开开发者工具看一眼就有头绪。

三个面板对应三类问题：Console 看代码错，Elements 看样式错，Network 看数据错。

一开始知道这三个就够。快捷键在不同系统上不一样，直接在浏览器菜单里找"开发者工具"最省事。

Network 面板里会看到数字，认识这几个就能定位大半问题：

最容易误判的是 500。

看到页面报错就去改前端代码，是在错的地方找问题。500 意味着请求已经到达服务端并且那边崩了——要去看服务端日志，前端怎么改都没用。

跟着教程把项目跑起来，碰到不认识的词直接问：

我没学过编程，用大白话给我解释一下 ____ 是什么，
它在一个网站里负责哪一块，出问题时通常表现成什么样。

最后一句是关键。只问"是什么"会得到一段维基百科式的解释，问"出问题时什么样"才能真正用上。

第一次碰到 TypeScript 不用慌，知道它比 JavaScript 多了类型检查就够了。真遇到一堆报错时再看细节也来得及。

先系统学完再开工。 学了两周，产品一行没写。

把不该公开的逻辑放在前端。 价格和权限校验被用户绕过。

该静态的页面做成动态。 服务器成本多几倍。

看到页面报错就改前端。 500 要去看服务端日志。

问 AI 只问"是什么"。 得到一段没法用的定义。

不会用开发者工具。 每个问题都靠猜和试。

打开你正在做的项目，在浏览器里依次看一遍 Console、Elements、Network 三个面板，找出至少一条请求并说出它的状态码和返回内容。