Frontend Academy · 课时

HTML、CSS 与 JavaScript：各层的职责

Q: 「HTML、CSS 与 JavaScript：各层的职责」这节课中我会学到什么？

了解 HTML、CSS 和 JavaScript 分别为网页提供什么，以及为什么分离关注点能让网站更易维护。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

了解 HTML、CSS 和 JavaScript 分别为网页提供什么，以及为什么分离关注点能让网站更易维护。

HTML、CSS 与 JavaScript：各层的职责 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

网络的三大支柱

每个网页都由三种相互补充的技术构成：HTML负责结构，CSS负责呈现，JavaScript负责行为。将三者分开，是前端开发中最重要的原则之一。

HTML——结构与含义

HTML（HyperText 标记语言）描述内容是什么。标题、段落、列表、表单——HTML 赋予内容语义含义，让浏览器、搜索引擎和屏幕阅读器都能理解。

<!DOCTYPE html>
<html lang="en">
  <head><title>My Page</title></head>
  <body>
    <h1>Hello World</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

CSS——呈现与样式

CSS（层叠样式表）描述内容看起来如何。颜色、字体、间距、布局和动画都由 CSS 负责。将样式放在 CSS 中，意味着您只需编辑一个文件，就能重新设计整个网站。

body {
  font-family: system-ui, sans-serif;
  background: #f0f4f8;
  color: #1a202c;
}
h1 {
  color: #2b6cb0;
}

JavaScript——行为与交互

JavaScript 描述用户操作或数据发生变化时会发生什么。点击按钮、提交表单、更新计数器、获取新文章——所有行为都属于 JavaScript 的职责范围。

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('#count').textContent++;
});

为什么要分开这三层？

关注点分离意味着：设计师可以修改 CSS，而不必接触 JavaScript；工程师可以添加功能，而不必重写 HTML；同一份 HTML 可以搭配多个 CSS 主题。这样代码更易于维护、测试和复用。

没有 CSS 的 HTML

在 CSS 加载之前，浏览器会显示原始 HTML：普通文本、可用的链接和浏览器原生的表单控件。对于网络连接较慢或禁用了 JavaScript 的用户来说，这是基础体验。优秀的 HTML 应当让这种体验也可以接受。

渐进式增强

渐进式增强：先从可用的 HTML 开始，再添加 CSS 来改善外观，最后添加 JavaScript 来实现行为。每一层都会增强上一层，因此即使某一层失效，体验也会平稳降级。

内嵌样式与外部文件

您可以将 CSS 嵌入 <style> 标签，并将 JavaScript 嵌入 <script> 标签，但使用外部的 .css 和 .js 文件更好。浏览器可以缓存这些文件，也可以将它们拆分成更小的文件，并分别进行维护。

浏览器应用这三者

浏览器读取 HTML 来构建 DOM，读取 CSS 来构建 CSSOM，应用样式，然后执行可以修改两者的 JavaScript。了解这个顺序有助于您编写在正确时间运行的代码。

常见错误：混合各层

将样式写在 HTML 中（style="" 属性）、将 HTML 写在 JavaScript 中（字符串拼接），以及将行为写在 CSS 中（display:none 技巧），都会混合不同层次。每种做法都会让代码更难调试、测试和交接给队友。

框架不会改变基础

React、Vue 和 Angular 在浏览器中最终仍会生成 HTML、CSS 和 JavaScript。理解这三层，意味着您能理解每个框架的输出，并调试那些被抽象层隐藏的问题。

快速检查

网页的布局和视觉外观由哪一层负责定义？

回顾：每一层的作用

HTML = 结构和含义。CSS = 外观和布局。JavaScript = 行为和交互。在代码库中清晰地分开这三者，您的队友以及未来的您都会感谢现在的您。

常见问题解答

「HTML、CSS 与 JavaScript：各层的职责」课时是免费的吗？

是的 — 「HTML、CSS 与 JavaScript：各层的职责」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「HTML、CSS 与 JavaScript：各层的职责」这节课中我会学到什么？

了解 HTML、CSS 和 JavaScript 分别为网页提供什么，以及为什么分离关注点能让网站更易维护。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「HTML、CSS 与 JavaScript：各层的职责」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy