前端教程

打开浏览器按下 F12，前端教程你看到的前端教程那些花花绿绿的代码就是前端。

很多人觉得前端简单——不就是前端教程写写页面吗？我一开始也这么想。直到第一次接手一个后台管理系统，前端教程光是前端教程表格排序和分页逻辑就折腾了整整两天。那时候才明白，前端教程前端不是前端教程“画页面”，它更像是前端教程在浏览器这个沙盒里搭积木，每一块都得严丝合缝。前端教程

HTML 不是前端教程编程语言，但别小看它

HTML 是前端教程骨架。你写 <div>、前端教程<span>、前端教程<ul>，前端教程浏览器就按你的前端教程意思把内容摆出来。听起来很直白对吧？但实际项目里，一个按钮是用 <button> 还是 <div> 加点击事件，差别很大。前者天然支持键盘回车触发，后者你得自己补一堆无障碍属性。我刚入行时图省事全用 <div>，后来被测试同事追着提 bug，改到崩溃。

语义化标签不是玄学。<nav>、<main>、<article> 这些东西，屏幕阅读器认，搜索引擎也认。你写 <div class="nav"> 浏览器照样渲染，但机器不知道那是导航。这就是区别。

CSS 的坑，踩过的人才懂

CSS 看起来更简单——给元素上色、调间距、排布局。然后你遇到垂直居中。然后你遇到浮动清除。然后你发现 z-index 怎么调都不生效，因为父元素建了层叠上下文。

我至今记得一个案例：给弹窗设了 z-index: 9999，结果被一个 z-index: 1 的固定头部盖住了。查了半天，原因是弹窗的父容器有 transform 属性，直接创建了新的层叠上下文。那个 9999 只在父容器内部有效。这种规则文档里写得清清楚楚，但不踩一次根本记不住。

Flexbox 和 Grid 现在已经是标配了。Flex 适合一维排列，Grid 适合二维布局。我个人的习惯是：组件内部用 Flex，页面大框架用 Grid。当然这不是铁律，很多时候两者混着用更顺手。

JavaScript 才是分水岭

HTML 和 CSS 决定你页面长什么样，JavaScript 决定它能干什么。变量、函数、事件监听，这些基础就不说了。真正拉开差距的是对异步的理解。

回调地狱这个词现在提得少了，但 Promise 和 async/await 用不好照样出问题。我见过一个搜索框，用户每输入一个字符就发一次请求。没做防抖，也没处理竞态——后发的请求先返回，结果展示的是旧关键词的结果。修起来不难，加个防抖、用 AbortController 取消前一个请求就行。但如果不理解异步的执行顺序，你连问题出在哪都找不到。

框架方面，React、Vue、Svelte 各有各的生态。初学的话，我建议先把原生 DOM 操作写熟。知道 addEventListener 怎么工作、知道事件冒泡和捕获的区别，再去用框架，你会明白框架帮你省掉了什么。

工具链让人又爱又恨

Webpack、Vite、Babel、ESLint、Prettier……前端工程化是另一个世界。Vite 出来之后，冷启动速度确实快了一个量级。但配置这东西，项目不同需求不同，没有一套万能模板。我现在的做法是：新项目直接用 Vite 的官方模板，需要什么再加什么，不提前堆一堆用不上的插件。

前端更新快，这是事实。但核心的东西没怎么变——理解浏览器怎么渲染、理解事件怎么流转、理解数据怎么驱动视图。这些搞明白了，换框架只是换语法。

别被那些“三天学会前端”的标题骗了。三天能写出一个能看的页面，但写不出能维护的项目。真正的前端能力，是在一次次改需求、修 bug、优化性能里长出来的。