内容摘要：WED前端开发，说白了就是用HTML、CSS和JavaScript这三样东西，把设计稿变成浏览器里能点、能滑、能响应的页面。但真要动手，光知道这三件套远远不够。我见过太多人卡在“会写标签但做不出像样界

WED前端开发，端开说白了就是发技用HTML、CSS和JavaScript这三样东西，术分把设计稿变成浏览器里能点、端开能滑、发技能响应的术分页面。但真要动手，端开光知道这三件套远远不够。发技我见过太多人卡在“会写标签但做不出像样界面”的术分阶段，问题往往出在对技术细节的端开理解深度上。

HTML负责结构，发技但结构不只是术分div堆砌。语义化标签比如<header>、端开<nav>、发技<article>，术分不只是给SEO看的。屏幕阅读器靠它们理解页面，团队协作时别人一眼能看懂你的布局意图。有次我接手一个项目，前任用了几十个无意义的div，改一个导航栏得翻三遍代码。换成语义化标签后，维护成本直接砍半。

CSS这块，Flexbox和Grid已经成了标配。但很多人只记了属性，没搞懂轴的概念。比如justify-content和align-items，在Flex里一个管主轴一个管交叉轴，主轴方向一变，效果全反。我建议新手别死记，直接在浏览器里改数值看变化。另外，响应式设计不是加几个@media就完事。移动端优先还是桌面端优先，决定了你写min-width还是max-width。我自己的习惯是从移动端开始，因为约束多，逼着你把核心内容先理清楚。

JavaScript的坑更深。DOM操作现在虽然被框架取代了不少，但理解事件冒泡、委托这些机制，调试时能救命。比如一个列表项点击，你给每个li绑事件，新增元素就得重新绑。用事件委托挂在父级，一劳永逸。ES6的模块化、箭头函数、解构赋值，这些不是炫技，是让代码可读性上一个台阶。我见过用var写了几百行全局变量的老项目，改一个函数提心吊胆，生怕变量污染。

框架方面，React、Vue、Angular各有拥趸。React的JSX把HTML写进JS里，刚开始别扭，习惯了发现组件复用真香。Vue的上手曲线更平缓，模板语法对新手友好。Angular适合大型团队，但学习成本高。我的判断是：小项目用Vue快速出活，中大型且团队有React经验就上React，Angular除非公司技术栈定死了，否则新项目慎选。

构建工具从Grunt、Gulp到Webpack，再到现在的Vite。Vite冷启动快得离谱，开发体验提升明显。但配置这东西，够用就行。我见过有人为了一个静态页面配了半小时Webpack，最后发现直接开个http-server更省事。工具是服务目标的，别本末倒置。

性能优化是老生常谈，但具体怎么做？图片懒加载用loading="lazy"一行搞定。关键CSS内联，非关键异步加载。JS代码分割用动态import()。这些手段背后都是减少首屏阻塞。我测过一个页面，把首屏不需要的第三方库拆出去后，LCP从4.2秒降到1.8秒。数字不会骗人。

浏览器兼容性现在比十年前好太多，但IE遗留项目还在某些行业苟着。遇到这种，polyfill和autoprefixer是标配。不过我更想说的是：别为了兼容0.1%的用户，牺牲99.9%用户的体验。该放弃就放弃。

最后聊点实在的。前端技术更新快，但基础永远值钱。HTML的语义、CSS的盒模型、JS的原型和闭包，这些吃透了，学新框架就是几天的事。我见过追新框架追得飞起，但连flex: 1和flex: auto区别都说不清的人。技术深度比广度更决定你能走多远。另外，多逛MDN，少看二手教程。官方文档永远是最准的。