网页前端技术有哪些

打开任何一个网页，右键选择“查看网页源代码”，前端你会看到一堆尖括号标签、技术花括号样式和 JavaScript 函数。网页这三样东西——HTML、前端CSS、技术JavaScript——就是网页前端技术的铁三角。没有它们，前端页面要么是技术纯文本，要么丑得没法看，网页要么点了按钮没反应。前端

HTML 负责骨架。技术比如你看到的网页一级标题、段落、前端图片、技术按钮，都是 HTML 标签堆出来的。<div> 像万能容器，<button> 就是按钮，<input> 是输入框。写 HTML 没什么捷径，标签就那些，属性也就几十个常用。我刚开始学的时候老把 <ul> 和 <ol> 搞混，后来记住 ul 是 unordered list（无序），ol 是 ordered list（有序），就再也没错过。

CSS 管打扮。同一个 HTML 结构，换个 CSS 文件，页面能从 1995 年的风格变成 2024 年的设计。选择器、盒模型、Flexbox、Grid——这几个词你会在任何前端面试里听到。Flexbox 解决了一维布局，Grid 搞定了二维。以前用 float 和 position 硬怼布局的日子，现在想想都头疼。有个朋友做后台管理系统，用 Grid 把侧边栏和主内容区一划分，三行代码搞定，搁五年前得写一堆 clearfix。

JavaScript：让页面活过来

HTML 和 CSS 是静态的。你点个下拉菜单，它弹出来；你填个表单，它校验邮箱格式；你滚动页面，导航栏变色——全是 JavaScript 在干活。早些年 jQuery 统治天下，$('.btn').click() 人人会写。现在原生 JS 的 API 强得离谱，querySelector、addEventListener、fetch 直接上，没必要为了几个 DOM 操作引一个 90KB 的库。

但光有基础三件套，写大型项目会疯掉。于是有了框架和库。React、Vue、Angular 三足鼎立。React 用 JSX，把 HTML 写在 JS 里；Vue 用模板语法，对新手友好；Angular 大而全，自带依赖注入。国内 Vue 的占有率很高，中小型项目尤其多。我见过一个创业团队用 Vue 3 + Vite 两周撸出一个后台，开发体验确实顺滑。

构建工具和包管理

以前写前端，新建一个 index.html，再建个 style.css 和 script.js，双击打开就能跑。现在呢？npm install 装一堆依赖，webpack 或 vite 打包，babel 转译，postcss 处理 CSS 兼容。听起来麻烦，但项目大了真离不开。模块化、热更新、代码分割、Tree Shaking——这些词背后是实打实的效率提升。

Vite 这两年火得有理。冷启动快得离谱，改一行代码，浏览器几乎瞬间更新。Webpack 配置能写上百行，Vite 开箱即用。当然老项目还在用 Webpack，维护归维护，新项目我肯定选 Vite。

CSS 预处理器和原子化 CSS

Sass、Less、Stylus 让 CSS 有了变量、嵌套、混入。以前写 .card .title 得重复父选择器，Sass 里直接嵌套，清爽。但后来 Tailwind CSS 这种原子化方案杀出来了。你不写 .card { padding: 1rem; }，而是直接在 HTML 上写 class="p-4"。刚接触觉得脏，用久了发现不用起类名、不用切文件，改样式就在标签上改，真香。不过团队得统一规范，不然类名顺序乱写，维护也头疼。

TypeScript 和类型安全

JavaScript 是动态类型，变量类型说变就变。小项目无所谓，大项目里一个 undefined 报错能查半天。TypeScript 给 JS 加了类型系统，编译时就能抓出 user.name 里 user 可能是 null 的问题。Angular 默认 TS，Vue 3 和 React 对 TS 的支持也极好。我现在的习惯是：只要项目超过 500 行，直接上 TS，省下的调试时间远大于写类型的时间。

响应式设计和移动端适配

媒体查询 @media 是基础。但移动端还有视口单位 vw/vh、rem 动态根字体、flex 弹性布局。以前用 px 写死宽度，iPhone 上一看字小得拿放大镜。现在用 clamp() 做流体排版，一行代码搞定最小最大字号。还有 picture 标签配合 srcset，根据屏幕密度加载不同分辨率图片，省流量又清晰。

前端技术栈像滚雪球，越滚越大。但核心永远是那三样：结构、样式、行为。框架和工具是加速器，不是替代品。你完全可以用原生 JS 写一个待办清单，不引任何库，跑得也挺好。关键是理解浏览器怎么渲染页面、事件怎么冒泡、HTTP 请求怎么发。这些底子打牢了，学新东西就是查文档的事。

最后说一句：别被“前端已死”或者“学不动了”的论调吓到。技术更新快，但大部分新东西是改良，不是革命。今天学 Vite，明天可能换 Rspack，但模块化的思想没变。抓住不变的东西，比追每一个新工具重要得多。