一篇教程文章
网页三剑客HTML、CSS、JS到底是什么？
前端入门科普：网页三剑客HTML、CSS、JS到底是什么？一文看懂网页底层原理
我们日常浏览的官网、博客、购物页面、短视频网页，所有看得见、点得动的网页，全部离不开前端三大基石，也就是大家常说的网页三剑客：HTML、CSS、JavaScript。
很多前端新手刚开始学习，始终分不清三者的区别，不知道各自负责什么工作。今天用通俗易懂的语言+极简可运行代码，分开拆解每一门技术，再讲解三者如何配合工作，零基础也能彻底看懂。
一、通俗类比：一秒分清三者分工
不用复杂术语，用盖房子类比，轻松记住三者定位：
-
HTML：房屋骨架
搭建网页整体结构，决定页面有标题、段落、按钮、图片，只有光秃秃的结构，无样式、无交互。 -
CSS：全屋装修
负责页面所有外观样式，修改颜色、字体、布局、间距，让简陋的页面变得美观好看。 -
JavaScript：智能控制系统
赋予网页交互能力，实现点击、弹窗、数据变化、动态特效，让静止的网页真正动起来。
一句话口诀：HTML搭结构，CSS做美化，JS做交互。
二、单独详解：三大技术各司其职
1. HTML —— 网页骨架，负责内容与结构
HTML 全称超文本标记语言，它不是编程语言，没有逻辑、没有运算，唯一作用就是搭建网页结构，承载网页所有文字、图片、按钮、链接等内容。
所有网页的基础都是HTML，没有HTML，网页就没有任何内容。
核心作用
- 划分网页头部、主体、底部区域
- 放置文字、图片、链接、表单、列表等所有页面元素
- 搭建页面整体层级结构
纯HTML代码示例（无样式，原生毛坯页面）
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<head>
<title>纯HTML</title>
</head>
<body>
<h1></h1>
<p>HTML负责网页结构，是网页最基础的骨架</p>
<a href="#">点击链接<button</button>
</body>
</html>
运行效果：浏览器直接展示原生默认样式，字体丑陋、排版靠左、没有配色，是最原始的网页毛坯状态。
2. CSS —— 网页美颜，负责样式与布局
CSS 全称层叠样式表，专门用来修饰HTML结构，无法独立运行，必须依附HTML元素生效。
CSS不新增任何页面内容，只改变页面长相和排版。
核心作用
-
- 修改文字大小、颜色、字体、行间距
-
- 设置背景色、圆角、阴影、边框
-
- 实现页面居中、多栏布局、弹性排版
-
- 制作鼠标悬浮动画、渐变效果
-
- 适配电脑、手机不同屏幕尺寸
HTML+CSS结合代码示例（静态美观页面）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<head>
<!-- HTML+CSS样式代码 -->
<style>
h1 {
color: #2c3e50;
text-align: center;
}
p {
font-size: 16px;
color: #666;
}
button {
padding: 6px 12px;
border: none;
background-color: #409eff;
color: #fff;
border-radius: 4px;
}
/* 鼠标悬浮按钮变色 */
button:hover {
background-color: #66b1ff;
</style>
</head>
<body>
<h1>网页三剑客科普</h1>
<p>HTML负责网页结构，CSS负责网页美化</p>
<a href="#">点击链接<button></button>
</html>
运行效果：页面排版整齐、配色舒适、按钮有悬浮效果，页面颜值拉满，但页面依旧是静止的，点击按钮没有任何反应。
3. JavaScript —— 网页灵魂，负责交互与动态逻辑
简称JS，是真正的编程语言，拥有变量、循环、判断、函数等完整编程逻辑，是网页实现交互的核心。
静态页面做好结构和样式后，想要网页响应人的操作，必须依靠JS。
核心作用
-
- 监听鼠标点击、键盘输入、页面滚动等操作
-
- 弹窗提示、表单校验、数据判断
-
- 动态修改页面文字、颜色、样式
-
- 对接后端接口，请求网络数据
-
- 实现轮播图、倒计时、弹窗、下拉菜单等网页特效
HTML+CSS+JS完整代码示例（可交互网页）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
<title>三剑客完整页面</title>
<style>
h1 {
color: #2c3e50;
text-align: center;
}
p {
font-size: 16px;
color: #666;
}
button {
padding: 6px 12px;
border: none;
background-color: #409eff;
color: #fff;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #66b1ff;
}
</style>
</head>
<body>
<h1>网页</h1<p>HTML结构 | CSS美化 |</p>
<button onclick="clickBtn()">点击我触发交互<!-- JS交互代码 -->
<script>
function clickBtn() {
alert('JS生效啦！网页已经可以交互了✨');
}
</script>
</body>
</html>
运行效果：页面美观整洁，点击按钮会弹出提示框，网页真正实现人机交互，变成完整可用的网页。
三、三者配合流程：浏览器如何渲染网页？
浏览器打开网页时，会按照固定顺序执行三类代码，缺一不可：
-
第一步：解析HTML
读取HTML代码，生成网页DOM结构，渲染出所有文字、按钮、图片等基础内容。 -
第二步：加载CSS
读取CSS样式，给所有HTML元素统一美化，完成页面布局和视觉优化，生成静态美观页面。 -
第三步：执行JavaScript
运行JS代码，监听用户操作，动态修改页面内容和样式，实现所有交互功能。
四、三者核心区别总结表
| 技术 | 角色定位 | 核心功能 | 语言类型 | 是否可独立运行 |
|---|---|---|---|---|
| HTML | 网页骨架 | 搭建结构、存放页面内容 | 标记语言 | 可以，仅显示浏览器原生简陋页面 |
| CSS | 网页美颜 | 美化样式、完成页面布局 | 样式表语言 | 不可以，必须依托HTML才能生效 |
| JS | 网页灵魂 | 编写逻辑、实现人机交互 | 脚本编程语言 | 可以，可独立运行代码；操作网页必须依赖HTML |
五、新手学习顺序建议
- 先学HTML：打好页面结构基础，熟悉各类标签用法
- 再学CSS：掌握页面布局和美化技巧，做出好看的静态页面
- 最后学JavaScript：学习编程逻辑，实现网页交互特效
所有前端框架（Vue、React、uniapp）、小程序、移动端网页，全部都是基于这三门基础技术封装而来，学好网页三剑客，才算真正入门前端。
文末总结
- HTML：有内容，让网页有东西可看
- CSS：有颜值，让网页变得好看
- JS：有灵魂，让网页可以互动
三者相辅相成，共同构成了整个互联网网页的底层地基，学好这三门技术，你就已经敲开了前端开发的大门。