搞懂 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: 20px 0;
}
th, td {
border: 1px solid #333; /* 表格边框 */
padding: 10px 20px; /* 单元格内边距 */
text-align: center; /* 内容居中对齐 */
}
th {
background-color: #f0f0f0; /* 表头背景色 */
}
h2 {
color: #2f4f4f;
}
</style>
</head>
<body>
<script>
// 第一步：通过 prompt() 获取用户输入的学员信息（姓名、性别、班级）
// 声明变量存储输入结果，设置合理的默认提示值
let studentName = prompt("请输入学员姓名", "张三");
let studentGender = prompt("请输入学员性别", "男");
let studentClass = prompt("请输入学员班级", "前端开发 1 班");
// 第二步：定义学员档案表格的 HTML 字符串（使用反引号模板字符串，方便拼接变量和格式化）
// 模板字符串中可以直接嵌入变量 ${变量名}，支持换行，可读性更强
let studentTable = `
<h2>学员档案表</h2>
<table>
<thead>
<tr> <!-- 表头行 -->
<th>学员姓名</th>
<th>性别</th>
<th>所属班级</th>
</tr>
</thead>
<tbody>
<tr> <!-- 学员数据行 -->
<td>${studentName}</td>
<td>${studentGender}</td>
<td>${studentClass}</td>
</tr>
</tbody>
</table>
`;
// 第三步：生成表格 - 输出到页面
document.write(studentTable);
// 额外：控制台输出学员档案（方便调试查看，巩固 console.log() 的使用）
console.log("学员档案：", studentName, studentGender, studentClass);
</script>
</body>
</html>
这个例子里分别用了什么
HTML 用 <table>、<th>、<td>、<h2> 搭出了表格和标题。
CSS 用 border-collapse、background-color、padding 这些属性把表格整理得更清楚，至少看起来不像原始输出。
JavaScript 先用 prompt() 拿到输入，再用模板字符串拼出 HTML，最后通过 document.write() 写进页面。这个写法不算最现代，但拿来说明三者关系很直接，反而省事。
顺手记住这几句就够了
- HTML 负责内容和结构。
- CSS 负责样式和布局。
- JavaScript 负责交互和行为。
- 浏览器先看结构，再看样式，最后执行脚本。
前端框架不是把这三者替换掉，而是在它们之上再做一层抽象。底层逻辑还是没变：先有结构，再有样式，最后才是行为。
