学习目标：先认清每一部分做什么

• HTML：组织标题、段落、图片、按钮和表单等元素，回答“页面上有什么”。
• CSS：控制颜色、尺寸、间距、布局和不同屏幕下的呈现，回答“元素看起来怎样”。
• JavaScript：响应点击、输入等操作，更新页面状态，回答“用户操作后会发生什么”。
• 后端与数据库：接收请求、执行业务规则并保存或读取数据，常用于账号、评论、订单等功能。
• 资源与配置：图片、字体、图标等供页面调用；配置文件则记录项目运行所需的设置。

这些部分并非每个网站都必须齐全。只有 HTML、CSS 和少量 JavaScript，也能组成可浏览的静态网站；需要跨设备保存数据或进行账号验证时，才通常要接入后端与数据库。

知识梳理：从浏览器到服务器

浏览器读取 HTML 后，会按照元素层级构建页面结构，再应用 CSS 规则完成排版与视觉呈现。JavaScript 可以监听按钮点击、校验输入或改变某个元素的文字。若操作需要读取服务器上的数据，浏览器会发出请求，后端程序处理请求后再返回结果；数据库负责保存结构化数据，后端则决定如何读取和更新它。

例如，文章标题和正文属于 HTML 结构，标题字体与正文宽度由 CSS 控制，“展开全文”按钮的点击行为可由 JavaScript 管理。若读者提交评论，后端还要检查请求并将评论写入数据库，之后再把结果返回给浏览器。

学习步骤：用一个欢迎卡片看懂代码分工

先创建项目目录，把结构、样式和行为分开放置，便于阅读和修改：

my-site/
  index.html
  styles.css
  app.js
  images/
    banner.jpg

接着在 index.html 中放入标题、说明和按钮。这里的元素决定卡片包含什么，引用外部样式表和脚本文件后，浏览器才能分别加载对应代码：

<main class="card">
  <h1>欢迎来到我的网站</h1>
  <p>这里展示网站代码的基本分工。</p>
  <button id="hello">点我互动</button>
</main>

然后在 styles.css 中设置卡片外观。类选择器 .card 只负责匹配相应元素并应用样式，不会改变标题或段落的文字内容：

.card {
  max-width: 32rem;
  margin: 2rem auto;
  padding: 1.5rem;
  background: #f2f6ff;
  border-radius: 12px;
}

最后在 app.js 中监听按钮操作。点击后，浏览器弹出提示；这是前端交互，不会自动把数据保存到服务器：

const button = document.querySelector("#hello");
button.addEventListener("click", () => {
  alert("你好，欢迎访问！");
});

这个小例子中，HTML 提供卡片内容，CSS 负责卡片宽度、边距、底色和圆角，JavaScript 让按钮产生响应。图片目录用于存放视觉资源；如果网站只有这类本地展示，不必为了“组成完整”而额外添加后端。

范例延伸：什么时候需要后端代码

把欢迎卡片改成留言板时，前端可以负责显示表单、检查输入是否为空，并把留言发送给服务器。后端接收留言后，可验证长度、过滤不合适的输入，再写入数据库；浏览器随后展示提交结果。账号登录、购物车跨设备同步、文章管理等功能也常采用类似流程。

因此，查看网站代码时，可以按职责辨认：描述内容结构的找 HTML，控制外观的找 CSS，处理浏览器内操作的找 JavaScript，处理请求与业务规则的找后端，长期保存记录的找数据库。掌握这条分工线，就能从一个简单页面逐步读懂更完整的网站项目。