web技术介绍

你每天打开浏览器刷到的术介绍每一个页面，背后都跑着同一套东西：HTTP、术介绍HTML、术介绍CSS、术介绍JavaScript。术介绍四样，术介绍不多。术介绍但就是术介绍这四样，撑起了今天你看到的术介绍所有网站——从街边小店的菜单页到淘宝首页，底层逻辑没区别。术介绍

先聊HTTP。术介绍浏览器和服务器之间的术介绍对话规则，就这么简单。术介绍你敲个网址，术介绍浏览器发个请求过去，术介绍服务器把东西扔回来。请求里带着你要什么、你能接受什么格式；响应里带着状态码、内容类型、实际数据。200表示一切正常，404表示东西没了，500表示服务器自己崩了。搞过爬虫的人对这些数字特别敏感，因为每个数字背后对应着不同的处理策略。HTTP/1.1 用了二十年，现在 HTTP/2 和 HTTP/3 慢慢铺开，多路复用、头部压缩这些改进，说白了就是让对话更快、更省流量。

HTML 是骨架。你看到的标题、段落、图片、按钮，全是标签堆出来的。<div> 和 <span> 这两个标签你可能听得最多，前者是块级容器，后者是行内容器，区别在于会不会换行。HTML5 之后多了 <header>、<article>、<nav> 这些语义化标签，写出来的代码可读性好一些，搜索引擎也更容易理解页面结构。不过说实话，很多老网站到现在还是一堆 div 套 div，能跑就行。

CSS 管长相。同一个 HTML，换个 CSS 文件，视觉上可以完全不同。颜色、间距、字体、布局，全归它管。Flexbox 和 Grid 出来之后，写布局比以前舒服太多了。早年间用 float 做三栏布局，清浮动能清到人崩溃。现在几行代码就搞定。响应式设计也是 CSS 的活儿，媒体查询根据屏幕宽度切换样式，手机上单列，桌面上多列。Bootstrap、Tailwind 这些框架本质上就是帮你写好了一大堆 CSS 类名，拿来直接用。

JavaScript 让页面活过来。点击按钮弹个框、表单提交前校验、页面滚动加载更多内容，都是它在干活。以前 JS 只跑在浏览器里，现在 Node.js 让它也能跑在服务器上。前后端用同一门语言，这事儿在十年前还挺新鲜，现在已经很普遍了。React、Vue、Angular 这些前端框架，核心思路是把页面拆成组件，数据变了自动更新视图，省得你手动操作 DOM。手动操作 DOM 有多烦？想象一下一个列表有100条数据，你删掉第3条，得自己找到对应的元素、移除、再更新后面的索引。框架帮你把这些脏活干了。

把这四样串起来看：HTTP 负责传输，HTML 定义结构，CSS 控制表现，JavaScript 处理交互。一个典型的页面加载流程是这样的——浏览器发 HTTP 请求，服务器返回 HTML 文档，浏览器解析 HTML 构建 DOM 树，遇到 CSS 就下载并构建样式规则，遇到 JS 就下载并执行。DOM 树和样式规则结合，算出每个元素最终长什么样，然后绘制到屏幕上。这个过程叫关键渲染路径，优化页面性能基本就是围绕它做文章。

Web 技术还有一个特点：向后兼容性极强。1995 年写的 HTML 页面，今天用 Chrome 打开大概率还能正常显示。这种兼容性既是好事也是包袱——好在你不用太担心老代码跑不了，坏在浏览器得背着几十年的历史包袱往前走，有些设计上的妥协一直留到现在。

想动手试试的话，打开浏览器按 F12，Elements 面板里能看到当前页面的 HTML 结构，Console 里可以直接写 JS 跑。改改 CSS 看看效果，刷新就恢复。这是最直接的入门方式，比看十篇教程都管用。

(责任编辑：知识)