📖 导读

网页是怎么来的？什么是 HTML、CSS、JavaScript？HTML、CSS、JavaScript 各管什么？如何合作？这篇序章不写代码，只帮开发者理清 “三剑客” 的分工与合作，为自己动手做前端开发铺路。

# 文章目录

一、网页是怎么来的？

二、“前端三剑客” | 分工

三、“前端三剑客” | 合作

— 下面进入本文的内容正题 —

🛠 流程简述

1.发起指令：用户在浏览器（客户端）上输入网址（如 www.baidu.com）。

2.发送请求：浏览器接到用户指令后，通过网络向服务器发送 HTTP 请求，告诉服务器：“我需要这个网页的图片、样式、脚本等资源”。

3.返回响应：服务器收到客户端请求后，将资源打包，以 HTTP 响应的形式发回给客户端浏览器，里面包含了网页的核心代码（HTML、CSS、JavaScript 等文件）。

4.浏览器渲染：客户端浏览器拿到服务器传送的资源后，开始在自己内部执行以下解析与渲染操作：

问什么是 HTML？

◦搭骨架：决定页面里有什么内容（如标题、段落、图片、表单等）。

◦理关系：规定谁包含谁（比如列表里包含列表项）。

◦贴标签：给内容赋予 “身份”，告诉浏览器这是什么。

📝 备注

•超文本（HyperText）：指包含多媒体内容（如图片、视频）并能通过超链接与其他文档建立关联的文本系统。

•标记（Markup）：通过特定的标签（如 <p>、<img>），给网页里的内容贴上 “身份牌”，让浏览器清楚它到底是个什么东西。

•语言（Language）：是一套浏览器能解析的书写规则与语法。

⚠️ 注意

HTML 是一门 “标记语言（Markup Language）”，而不是 “编程语言（Programming Language）”！实际开发用不到，但考试可能常考~

问为什么 HTML 不是 “编程语言” 而是 “标记语言” ？

答它不具备变量、循环以及逻辑判断等编程能力，它只负责给网页的内容贴标签这一件事！

问什么是 CSS？

◦外观修饰（样式）：控制内容的视觉特征，例如设定文字的字号、颜色、粗细、字体，以及为容器添加背景色、边框、阴影、圆角等。

◦空间排布（布局）：控制元素在页面上的空间占位与排列方式，例如决定元素是横向排列还是纵向排列、是居中对齐还是分布在两端。

问什么是 “层叠” ？

答当多个样式规则同时作用于同一个元素时，浏览器会根据优先级（如权重更高、后来居上）将这些规则叠加计算。同时，由于样式会自动从父元素（如 <body>）顺延到子元素（如 <p>），所以这些层层叠加的规则最终会呈现出唯一的视觉效果。

📝 备注

CSS 是外观的掌控者，它专注于视觉表现，不改变内容的本质。

问什么是 JavaScript？

◦行为交互（事件处理）：监听并响应用户的操作，例如点击按钮、滑动页面、键盘输入等，并根据用户的操作执行相应的代码逻辑。

◦动态操作（页面与样式修改）：在页面运行期间，动态地读取、增加、修改或删除页面中的内容与结构，同时可以实时更改元素的视觉样式。

◦数据与逻辑处理：执行计算、进行条件判断、处理数据，并在不刷新页面的情况下与服务器进行数据通信（如发送请求、接收响应），实现页面的局部更新。

📝 备注

网页只要涉及 “动态变化” 和 “交互动作”，都是由 JavaScript 来完成。

◦HTML 与 CSS：浏览器自上而下解析 HTML 构建文档结构，同时加载 CSS 并构建样式规则。CSS 的加载和解析通常会阻塞页面的渲染，以保证用户看到的页面一开始就是带有正确样式的，避免画面闪烁。

◦HTML/CSS 与 JavaScript：JavaScript 的加载和执行通常依赖于 HTML 结构是否已经构建完成（否则 JavaScript 找不到要操作的元素）。同时，JavaScript 的执行可能会修改 DOM 结构或 CSS 样式，因此在 JavaScript 执行完毕后，浏览器可能需要进行重新计算布局和渲染。

🔍 问题前置

在 HTML 中，我们管 <p> 叫 “标签（Tag）”；
而在 CSS 中，我们却管它叫 “元素（Element）”。

为什么会有这种叫法上的差异？它们俩到底是不是同一个东西？

【答案涉及的细节非本文内容，已截断处理~不过，对于实际开发来说，叫法可以随意点~】