把 CSS 和 JS
从 HTML 里请出去

结构、样式、交互 — 各归其位

导读

一个 HTML 文件里塞着结构、样式和交互三种不同语言，项目小时还行；一旦页面变多，行数飙升，人看着累，AI 加载起来也慢。这一节教我们用最基本的两个标签，把混合代码拆成三个文件。

核心观点

01 样式统一维护，说改就改。一个 card 样式被多个页面复用时，抽出来改一处，所有页面同步生效。

02 行数减少，负担就减少。原生 60+ 行的文件，拆完不到 20 行。找代码更快，AI 上下文也更短。

03 不同语言分文件存放。CSS 和 JS 的语法本就与 HTML 大不相同，各自独立才能做到职责清晰。

实操步骤

把样式挪到 style.css

新建 style.css，把 HTML 内 <style> 标签内部的内容复制进去（不要复制标签本身）。然后回 HTML，删除原 <style> 片段，改用 <link> 引入。

把脚本挪到 script.js

新建 script.js，复制 <script> 标签内部的函数代码。删除原 <script> 块，在 </body> 前添加 <script src="script.js"></script> 引用。

保存并刷新浏览器

三个文件保存后，刷新页面 — 表现完全一致，说明连接成功。VS Code 中可顺手用 Option + Shift + F 优化缩进。

改动前后

拆分前

index.html （所有内容）内部含 <style> 内部含 <script> 总行数 60+

拆分后

index.html （纯结构） style.css （样式） script.js （交互）行数 < 20

连接引用

/＊ index.html 头部＊/ <link rel="stylesheet" href="style.css"> /＊ body 结束前＊/ <script src="script.js"></script>

路径选择

相对路径更稳妥
部署到服务器时，整个项目一起打包，index.html 与 style.css 的相对位置不会变。

绝对路径易失效
本地电脑路径与服务器路径结构不同；一旦换环境，链接就断了。

写法参考
style.css 和 ./style.css 效果完全一样 — 指向同一目录。

❝ 让不同语言各司其职，
是让项目可持续生长的关键一步。 — 前端清晰架构的核心

本次要点

由 CuteNote.app 颜值笔记生成

把 CSS 和 JS从 HTML 里请出去