一、一个网站由几部分组成
任何网站，无论多复杂，都可以拆成四个层次：
结构（HTML）网页的骨架，决定内容「有什么、怎么组织」。
样式（CSS）网页的外观，决定「长什么样」——颜色、布局、字体。
交互（JavaScript）网页的行为，决定「能做什么」——点击、滑动、动态加载。
数据（数据库）网页背后存储的内容——商品、文章、用户信息。
<!-- 结构、样式、交互三者的关系 -->
<p style="color:blue">这是一段文字</p>
<!-- HTML 是「文字」，style 是「颜色」，点击反应靠 JS -->
二、前端：用户看到的一切
前端就是用户在浏览器里直接看到、点到的部分。它决定网站的观感与交互体验。
- HTML / CSS——结构与样式的基石，任何网站都离不开。
- JavaScript / 框架——实现复杂交互，现代网站常用 Vue、React 等框架组织。
- 响应式设计——让同一个网站适配不同屏幕尺寸。
三、后端：看不见的「大脑」
后端运行在服务器上，负责处理业务逻辑、存取数据、提供接口。用户在页面上点击「下单」，真正处理这个动作的是后端。
- 服务端语言——如 Node.js、PHP、Java 等，处理业务逻辑。
- 接口（API）——前后端之间通信的约定，让前端能拿到数据。
- 数据库——结构化地存储商品、订单、用户等数据。
四、部署与运维：让网站一直在线
网站做好之后，要放到服务器上才能被访问，还要保证它稳定运行。
服务器网站运行的物理或云端环境。
域名与解析让用户能通过一个好记的网址访问。
CDN 加速把静态资源分发到各地，加快访问速度。
HTTPS 安全加密传输，保护数据安全。
五、技术选型的基本原则
技术方案不是越新越好，「合适」才是关键。三条基本原则：
- 匹配业务复杂度。展示型官网不需要重型框架，高并发电商也不能用最简陋的方案。
- 优先可维护性。选择成熟、有长期维护的技术，保证未来能持续迭代。
- 留出演进空间。架构上避免「一次性写死」，为后续扩展保留余地。
一 句 话 总 结
前端决定「长什么样、好不好用」，后端决定「能不能用、稳不稳」，部署运维决定「能不能一直被访问」。三者缺一不可。
下 一 步
理论讲完了，看看真实的网站是怎么体现这些原则的。请阅读《案例赏析》。