相信大家都是资深网民，日常百度搜索、淘宝购物、B站刷视频，早已对各类网站轻车熟路。
在享受网络带来的极致便利时，你有没有那么一瞬间好奇过：这些网页到底是怎么被做出来的？
如果你一直不清楚背后原理，这篇文章一定要看完。它会帮你彻底打通认知，甚至让你发现：原来亲手做一个属于自己的网站，并没有那么难。
我们平时看到的网站，本质上是由一个个网页组合而成的。
以百度为例：打开浏览器，新建标签页看到的就是百度首页；当你输入关键词并点击搜索，网页就会通过脚本，向服务器请求对应的数据。
这里就出现一个很有意思的问题：
同一台服务器，可能同时被成千上万台电脑访问，服务器是怎么精准识别每一台设备，并把正确的数据传回给对应的用户呢？
答案就是——IP 地址。
每一台联网设备、每一台服务器，都有属于自己的唯一 IP。
但我们平时只输入 www.baidu.com ，并不会记一串数字 IP，这就需要域名解析服务器帮忙，把域名翻译成 IP。
浏览器会带着自身 IP 去“问路”，拿到服务器 IP 后，通过三次握手建立可靠连接，随后服务器会把一整套资源发给浏览器：
-
HTML：网页结构文件
-
CSS：网页样式文件
-
JavaScript：网页交互脚本
-
图片、字体等静态资源
浏览器拿到这些文本后，并不会直接展示，而是开始“加工渲染”：
先把 HTML 解析成 DOM 树，把 CSS 解析成样式树，再合并成渲染树。
浏览器按照渲染树，一步步在屏幕上绘制：文本就绘制成文字，图片就加载展示，再根据样式设置字体、颜色、大小。
绘制完成，你看到的完整网页就出现了。
讲到这里，很多人都会问一个灵魂问题：
那 JavaScript 是干嘛的？
很简单：HTML 搭骨架，CSS 做颜值，JS 负责让网页“活起来”。
浏览器加载完 JS 脚本后，并不会立刻全部执行，而是先通过 API 查找 DOM 树上的元素，比如按钮、输入框、文字标签，再把对应的行为绑定上去。
比如我们给一个按钮绑定点击事件，只有用户真正点击时，对应的逻辑才会触发。
不同按钮可以绑定不同行为，靠的就是 id、class、标签名这些标记来精准识别。
讲到这里，你大概已经明白：网站的“门面”部分，就是前端负责的。
一个前端工程师，核心就是搞定这三件套：
HTML + CSS + JavaScript。
入门其实非常友好。
比如想在页面上显示一段文字，用一个文本标签就行：
hello world
想让它更好看，加点 CSS 样式，变红、加粗：
span {
color: red;
font-weight:bold;
}
想让它能点击、弹弹窗，直接加一行内联事件：
hello world
点击文字，浏览器立刻弹出提示框，简单又直观。
这就是前端最迷人的地方：所见即所得，写一行就能看到一行效果。
如果你也对前端开发感兴趣，想系统入门、从零搭建自己的第一个网站，欢迎在评论区留言。
下期我会继续带来更实用、更易懂的前端干货，带你一步步从零基础，写出真正能运行的网页。
