网页三件套：HTML、CSS、JavaScript 到底在做什么？

写在前面

我一直想彻底搞清楚网页开发到底是怎么回事。以前写 C++ 的时候，我知道代码是怎么被编译、链接、执行的——一切都在本地，一切都是确定的。但是网页开发呢？什么 HTML、CSS、JavaScript，它们到底是什么关系？为什么要分成三个东西？能不能合在一起？

这篇文章是我从 C++ 转向理解前端开发时的笔记，把这些问题都梳理了一遍。

三件套分别是什么？

如果非要用一句话来说清楚：

• HTML = 网页的骨架（有什么）
• CSS = 网页的装修（长什么样）
• JavaScript = 网页的电路（会做什么）

用 C++ 来类比可能更好理解：

网页技术	类比 C++
HTML	像结构体定义——描述"有什么"：一个段落、一个按钮、一张图片
CSS	像给结构体变量设属性值——描述"长什么样"：颜色、大小、位置
JavaScript	像 main() 函数和业务逻辑——描述"怎么动"：点击后弹出提示、数据交互

再打个比方，就像一座房子：

• HTML 是房子的骨架——几面墙、几个房间、门窗在哪
• CSS 是房子的装修——墙壁刷什么颜色、地板用什么材质
• JavaScript 是房子的电路和水管——灯能亮、水能流、门铃能响

它们是如何合作的？

非常简单，像是在一个文件里同时写三种东西：

<!-- HTML：定义结构 -->
<button id="myBtn" class="blue-btn">点击我</button>

<style>
  /* CSS：定义样式 */
  .blue-btn {
    background: blue;
    color: white;
    border-radius: 8px;
  }
</style>

<script>
  // JavaScript：定义行为
  document.getElementById('myBtn').onclick = function() {
    alert('你点击了按钮！');
  }
</script>

三者在浏览器中一起协作：HTML 创建元素 → CSS 给它穿上衣服 → JavaScript 让它拥有行为。

为什么是三个分开的东西？不是同时诞生的

这个问题我一开始也很困惑——为什么要分成三个？学了之后才发现，它们不是同时诞生的，而是一个渐进演变的过程。

1990年：只有 HTML

Tim Berners-Lee 发明了万维网。最初的网页只有 HTML，就是纯文本加一些链接，像一篇格式简单的文档。当时的"浏览器"只能显示标题、段落和链接，没有任何样式可言。

你能想象吗？最早的网页连图片都没有，更别提颜色和布局了。

1994-1996年：CSS 诞生

随着网页变多，人们想控制颜色和布局。最初大家只能用 HTML 的 <font> 标签和 <table> 来布局，这就像用锤子拧螺丝——能拧，但极其痛苦。

于是 W3C（万维网联盟）发明了 CSS，把"样式"从"结构"中分离出来。

为什么要分离？ 想象一下你要给一个 1000 页的网站改主题色——如果颜色写在每个 HTML 文件里，你得改 1000 个地方。用 CSS 的话，改一个文件就够了。这就是所谓的关注点分离。

1995年：JavaScript 诞生

Brendan Eich 在 Netscape 浏览器花了 10 天创造了 JavaScript。目的是让网页能做动态的事情——鼠标悬停时改变颜色、验证表单输入、弹出提示框。在此之前，网页是完全静态的，你点了一个链接就只能等下一页加载。

为什么不集成为一个东西？

这个问题我想了很久，得到的答案是：因为不同的东西变化的速度和涉及的人群不一样。

• 网页的结构（HTML）相对稳定
• 设计师要调整样式（CSS），他们不想碰逻辑
• 程序员要改行为（JS），他们不想碰样式

就像一辆车：底盘（HTML）、外壳喷漆（CSS）、发动机电脑（JS）——虽然装在一起，但由不同的工程师维护，分开设计更合理。

从 C++ 到前端的思维转换

学到这里我最大的感受是：前端的"代码"不是运行在你的电脑上的，而是发送给用户的浏览器的。

在 C++ 里，你写好代码 → 编译 → 生成 .exe → 用户下载运行。

在前端里，你写好代码 → 直接把源码（HTML/CSS/JS）发给浏览器 → 浏览器现场编译+运行。

这就是为什么前端代码是"可见的"——任何人打开你的网页都可以看到源码。这也解释了为什么前端开发不需要"安装"什么，一个浏览器就够了。

小结

HTML  → 结构（骨架）
CSS   → 样式（装修）
JS    → 行为（电路）

这三者不是同时诞生的，而是随着网页从"文档"演变为"应用"的过程中逐步加入的。理解了这个演变过程，就能理解为什么它们是分开的，以及它们各自承担什么角色。