前端三件套：HTML、CSS、JS，一次讲透

前端三件套：HTML、CSS、JS，一次讲透

---

一个比喻开始

做一个网页，就像盖一栋房子。

角色	负责什么
HTML	骨架——房子的结构，哪里是墙、哪里是门、哪里是窗
CSS	装修——墙刷什么颜色、门用什么材质、窗帘什么风格
JS	智能系统——按下开关灯亮、有人来门铃响、温度高了自动开空调

三者缺一不可，配合起来，才是一个能住的房子。

---

一、HTML：这房子"有什么"

HTML 的全称是 HyperText Markup Language，超文本标记语言。

别被名字吓到。它干的事很简单：告诉浏览器，页面上有什么东西。

html
<h1>欢迎来到我的博客</h1>
<p>这是一段正文。</p>
<img src="cat.jpg" alt="一只猫">
<button>点我</button>

翻译成人话：

• <h1> → 这是个大标题
• <p> → 这是段文字
• <img> → 这里放张图片
• <button> → 这里有个按钮

HTML 不管好不好看，只管有没有。

就像毛坯房，你能看到墙在哪、门在哪，但没有任何装饰。

---

二、CSS：这房子"长什么样"

CSS 的全称是 Cascading Style Sheets，层叠样式表。

它只干一件事：给 HTML 里的每个元素，定规矩——颜色、大小、位置、间距，全归它管。

css
h1 {
  color: #333;
  font-size: 32px;
  text-align: center;
}

button {
  background: blue;
  color: white;
  border-radius: 8px;
  padding: 10px 20px;
}

翻译：

• 标题 → 深灰色、32号字、居中
• 按钮 → 蓝色底、白字、圆角、带内边距

CSS 不创造内容，只负责美不美。

同样一段 HTML，换套 CSS，风格可以从"性冷淡"变成"赛博朋克"。

---

三、JS：这房子"能干什么"

JS 的全称是 JavaScript。

它是唯一能让页面动起来、能交互、能做判断的语言。

js
const btn = document.querySelector('button');

btn.addEventListener('click', () => {
  alert('你点了我！');
});

翻译：找到那个按钮，用户一点，弹个提示。

再举个实际的：

场景	JS 在做什么
点击"加载更多"，底部多出10条内容	操作 DOM，动态增加元素
搜索框输入时，实时显示匹配结果	监听输入事件，过滤数据
表单提交前，检查邮箱格式对不对	验证数据，给出反馈
轮播图每3秒自动切换下一张	定时任务，自动执行

HTML 和 CSS 是静态的，JS 才让页面"活"了。

---

四、三者怎么配合？一个完整例子

假设我们要做一个点击按钮弹出问候的功能：

html
<!-- HTML：有一个按钮 -->
<button id="helloBtn">打招呼</button>

<!-- CSS：按钮长这样 -->
<style>
  #helloBtn {
    background: #4CAF50;
    color: white;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
  }
</style>

<!-- JS：点了之后干什么 -->
<script>
  document.getElementById('helloBtn').addEventListener('click', () => {
    alert('你好，欢迎光临！');
  });
</script>

步骤	谁在干活
页面出现一个绿色按钮	HTML 提供元素 + CSS 负责样式
点击按钮弹出提示	JS 监听事件并执行动作

---

一句话总结

	一句话
HTML	决定页面上有什么
CSS	决定页面上好不好看
JS	决定页面上能干什么

三个不是竞争关系，是分工协作。

学前端，先学 HTML 搭结构，再学 CSS 做样式，最后学 JS 加交互。这条路线，走了二十多年，依然是最稳的。