搞懂 HTML、CSS 和 JavaScript 的分工关系

如果把网页当成一间房子，HTML 管结构，CSS 管样子，JavaScript 管动作。这个比喻不新，但确实够准。前端入门时先把这三者的边界弄清楚，后面看组件、框架、工程化才不会总是混在一起。

三者分别做什么

HTML：先把骨架搭起来

HTML 负责描述页面里有什么，以及这些内容的语义是什么。标题、段落、图片、表格、按钮，先由它把位置和层级定下来。

没有 HTML，页面就谈不上结构。CSS 没东西可修饰，JavaScript 也没对象可操作。

CSS：负责外观和布局

CSS 用来控制页面看起来是什么样。颜色、字体、间距、对齐方式、响应式布局，这些都归它管。

很多人一开始会把'页面好看'理解成纯视觉问题，实际上 CSS 更像是在解决排版和呈现秩序。好不好看是一回事，能不能稳定排布是另一回事。

JavaScript：让页面动起来

JavaScript 负责交互和动态行为。点击按钮后发生什么，输入框怎么校验，列表怎么更新，弹窗什么时候出现，这些都靠它。

它不只是'加点动画'这么简单。真正有用的是它能响应用户操作，并根据数据改变页面状态。

它们之间怎么配合

这三者不是平行关系，而是有明显的依赖顺序。

HTML 是基础，先有结构。
CSS 依附在 HTML 上，给结构加样式。
JavaScript 通常在结构和样式都存在后再介入，处理交互和数据。

浏览器加载页面时，也基本是这个思路：先解析 HTML 生成 DOM，再解析 CSS 生成样式信息，最后执行 JavaScript。实际渲染过程会更细，但理解到这一步已经足够应付大多数场景了。

一个简单例子：学员档案表格

下面这个例子里，HTML 定义表格结构，CSS 负责样式，JavaScript 通过输入框收集信息，再把内容写到页面上。

运行效果

打开 HTML 文件后，浏览器会依次弹出 3 个输入框，要求输入学员姓名、性别、班级。
直接点击确定也可以，脚本里已经写了默认值。
输入完成后，页面会生成一张带样式的学员档案表。
按 F12 打开控制台，还能看到对应的调试信息。

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>学员档案表格</title>
    <style>
        table {
            border-collapse: collapse; /* 合并单元格边框 */
            margin:  ;
        }
        ,  {
            :  solid ; 
            :  ; 
            : center; 
        }
         {
            : ; 
        }
         {
            : ;
        }

搞懂 HTML、CSS 和 JavaScript 的分工关系