模块 3.2

前端基础——结构、样式与交互分离

把结构、样式、交互各自放回自己的位置

零到全栈 · 李勃老师 · 2026

所有东西堆在一起的时候
麻烦还不够明显
拆开了，才能看清各自是什么

这一节做的不是“增加功能”，而是把现在已经有的页面，整理成更像真正项目的样子。

ONE FILE FOR EVERYTHING

先回顾一下，现在这个文件里有什么

HTML

页面结构

标签写在 <body> 里

CSS

页面样式

写在 <style> 里

JavaScript

页面交互

写在 <script> 里

目前还好，但文件一大，查找、修改、复用都会越来越麻烦

WHY SPLIT

为什么要把它拆开

01 想改按钮颜色，就该直接去找样式，而不是在一个大文件里翻来翻去

02 不同页面如果要复用同一套样式，就不应该每个页面都重复写一遍

03 后面项目变大之后，混在一起的代码会越来越难找、越来越难改

04 即使交给 AI 来改，文件太大也会带来上下文负担

STEP 1 · CSS

第一步，把 CSS 独立出来

新建文件

style.css

把 <style> 和 </style> 之间的内容完整复制进去，但不要把标签本身也复制过去。

然后回到 index.html

删掉原来的 <style>...</style>，在同样的位置换成这行引用。

STEP 2 · JAVASCRIPT

第二步，把 JavaScript 独立出来

新建文件

script.js

把 <script> 和 </script> 之间的代码复制进去，同样不要把标签本身带过去。

然后回到 index.html

删掉原来的 <script>...</script>，在 </body> 之前换成这行引用。

AFTER SPLITTING

拆完之后，index.html 会变得很干净

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="card">...</div>
    <script src="script.js"></script>
  </body>
</html>

HTML 里只保留结构，以及对外部 CSS 和 JavaScript 文件的引用

SAVE · REFRESH · VERIFY

三个文件都保存之后，刷新浏览器

01 背景还是浅灰色

02 内容还是在白色卡片里

03 点击按钮，文字还是会变化

04 如果变回白底黑字，优先检查 style.css 的路径和文件名

FOLDER STRUCTURE

现在，这个文件夹里应该有三个文件

最小前端项目结构

zero-to-tech/
  index.html
  style.css
  script.js

各司其职

index.html 负责结构
style.css 负责样式
script.js 负责交互逻辑

RELATIVE PATHS

这里其实又回到了路径问题

index.html

当前文件

→

style.css

同一个文件夹

→

script.js

同一个文件夹

href="style.css" 和 src="script.js" 都是在说：去当前文件所在的文件夹里找它

CHECKPOINT

这节课结束时，你至少应该做到什么

文件夹里有三个文件：index.html、style.css、script.js

刷新浏览器后，页面外观和行为与之前完全一致

能说出 <link rel="stylesheet"> 和 <script src="..."> 各自在做什么

理解“同一个文件夹”和相对路径的关系

拆开之后
结构、样式、交互
才真正各回各位

下一节我们继续进入模块 3.3，开始接触 Git 与 GitHub。

零到全栈 · 模块 3.2 完