零基础学前端最容易卡住的不是语法本身而是看十遍教程一合上电脑还是写不出一个完整页面。这不是人笨是学习方式出了问题。我平时经常看到零基础入门前端的朋友在社区里问该刷什么题刷多少够其实比题目数量更重要的是题目背后训练的到底是什么能力。这篇内容不打算重新铺一遍 HTML/CSS/JS 教程而是把适合零基础入门前端必刷的经典题目挑出来讲清楚每道题为什么值得刷、怎么刷、刷到什么程度算过关。整体分为三个方向HTML/CSS 的结构与布局题、JavaScript 的应用题、以及把两者串起来的综合小页面。所有示例都控制在入门难度以内不涉及框架也不涉及复杂工程概念适合刚学完语法、准备开始动手练的人。1. 为什么零基础刷题而不是先埋头看十遍教程1.1 刷题的核心价值建立一个可以纠错的反馈闭环很多人学前端的第一周是这样的浏览器打开教程跟着示例敲一遍页面出来了觉得我会了。第二天再开一个新页面照着印象写结果样式全乱要回去翻教程才能继续。问题出在哪儿出在看教程和会做题之间缺了一个关键环节——主动输出。看教程时大脑处于被动接收模式跟着示例敲代码其实是誊写不是思考。而刷题是主动提取知识的过程给你一道题没有现成上下文你必须从记忆里把相关知识点捞出来组织成可运行的代码。运行结果会告诉你对还是不对报错信息会告诉你哪里考虑不周。这个尝试-报错-修正-通过的循环就是程序员常说的反馈闭环。我习惯用一个做菜的类比菜谱看三遍步骤能背下来但真正起锅烧油时火候、咸淡、翻锅顺序全要重新学。前端也一样教程是菜谱刷题才是第一次独立做菜。只有实际操作暴露出来的问题才真正属于你自己要解决的问题。所以零基础阶段刷题不是为了应付面试是为了建立这个反馈闭环让自己从眼睛会了变成手也会了。1.2 入门阶段的题单筛选标准小、单点、可自检必刷题不等于多刷题。在入门阶段选择题目要守住三个标准否则很容易陷入题海战术的疲惫感。第一体量要小。一道题最好在 5 到 20 分钟内能完成。零基础的学习者工作记忆有限一道题超过半小时还没思路说明题目超出了当前能力圈这时候最重要的是降低难度而不是死磕。第二考点要单点。一道题最好只围绕一个核心技能点。比如两栏布局就只考布局闰年判断就只考条件分支。如果一道题同时考察 flex、事件委托、异步回调对入门者来说信息量过载做完了根本不知道自己是哪里不会。第三结果可自检。代码写完能立刻运行、马上看到对错。命令行题目、控制台输出题、页面渲染题都符合这个标准那些谈谈你对闭包的理解这类开放题更适合有基础之后再做。时间配比上我建议是看教程:敲题 1:2即每看一小时教程至少拿出两小时做练习。每天保持 1 到 2 道题的节奏比周末一口气刷十道有效得多因为编程能力的增长靠的是连续性不是单次强度。1.3 最常见的入门误区用理解代替练习我见过不少零基础同学最大的误区不是不努力而是把看懂了当成会了。他们觉得教程里的例子都跑通了知识点也都能说出来但一遇到新题目就卡住。原因是看懂的是别人的解题链脑中并没有形成自己的调用链。举个例子很多人觉得 CSS 权重计算很简单知道 id class 标签。但真给你一道题要求在某个交集选择器、伪类、行内样式混杂的页面里定位样式不生效的原因就会手忙脚乱。原因就在于权重这个知识点只是被记住了没被练习内化成条件反射。刷题就是把知识的调用次数拉高。同一个知识点被调用过十次遇到相关场景时才会随叫随到只调用过一次那它只是躺在笔记里的字。这就像背单词背一遍肯定记不住放进句子里用几遍再见时就能立刻反应出意思。所以与其反复看教程追求看懂不如每天写几道题让知识在输出中被真正激活。2. HTML/CSS 方向的必刷小体量题每道都对应一个真实页面能力2.1 语义化页面骨架与导航结构第一类题不是炫技的页面效果而是最容易被轻视的 HTML 结构题。题面可以很简单不使用任何 CSS写一个博客首页的 HTML 骨架要求包含顶部导航、文章列表、侧边栏和底部版权信息。这道题考察的是语义化标签的掌握程度顶部用 header导航用 nav主体区域用 main文章列表用 article侧边栏用 aside底部用 footer时间用 time 标签。题目本身没有视觉反馈但拿到代码时能不能逐一说出每个标签为什么放在这里就是最好的自检方式。header h1我的博客/h1 nav ul lia href/首页/a/li lia href/archive归档/a/li /ul /nav /header main article h2文章标题/h2 p发布时间time datetime2025-01-012025年1月1日/time/p p文章摘要……/p /article /main aside h3关于我/h3 p博主简介……/p /aside footer p版权所有/p /footer为什么这道题必刷因为绝大多数刚入门的人习惯所有区块都用 div 包裹因为 div 在浏览器里看起来也没问题。但语义化标签关系到无障碍阅读、SEO 结构、代码维护质量是前端基本功。判题标准也很简单不看页面渲染效果只看 HTML 代码你能不能说清楚每个标签的作用和层级关系如果说不清说明结构意识还不到位。常见的错有三类导航链接不包列表直接用 a 标签串成一排该用 h2/h3 的地方用了很大的 spanarticle 和 section 混用语义层级混乱。这些错误在浏览器里都不报错但以后项目一复杂问题全冒出来。2.2 两栏与三栏布局至少掌握三种实现思路布局题是 CSS 入门必刷中的必刷其中最经典的就是左侧固定 200px右侧自适应的两栏布局以及进阶的左右固定中间自适应三栏布局。我建议零基础把这题做三遍第一遍用浮动实现第二遍用 flex 实现第三遍用 grid 实现。刷这道题的目的不是背代码而是理解剩余空间分配这五个字。浮动方案是了解历史要记住需要清除浮动想明白为什么浮动会导致父容器高度塌陷flex 方案是当前主流要理解 flex-grow、flex-shrink、flex-basis 分别管什么以及flex: 1其实是简写完整写法是flex: 1 1 0%grid 方案要理解1fr是比例单位不是固定像素。.container { display: flex; } .sidebar { width: 200px; flex-shrink: 0; } .content { flex: 1; }零基础最容易踩的坑有两个。一是以为flex: 1只等于flex-grow: 1忽略了对 base 和 shrink 的影响二是在 grid 里写grid-template-columns: 200px 1fr时不知道 1fr 到底是怎么计算的。两个坑的本质都是没有理解分配剩余空间的机制。建议做题时把数字改一改比如把固定宽度改成 20%看布局如何变化加深理解。2.3 不定宽高的水平垂直居中能做四种方案才算过关如何让一个元素在父容器中水平垂直居中是前端社区流传最广的入门题之一几乎每一批零基础学习者都会遇到。这道题的价值在于它考察的是布局思路的广度而不是某个单一技术的熟练度。题面通常这样描述父容器尺寸任意子元素不定宽高要求水平垂直居中。能写出的方案至少有四种flex 的justify-content: center; align-items: centergrid 的place-items: center定位加 transform 的position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)以及 table-cell 的vertical-align: middle方案。我的建议是初学阶段就把这四种都写一遍然后思考它们各自的优缺点。flex 和 grid 代码短、语义清晰是现代项目首选定位加 transform 不依赖父容器开启 flex 或 grid适合某些特殊场景table-cell 方案老但兼容性极强适合维护旧项目。提示这题有个经典坑有人为了居中先把子元素的宽高写死结果内容一变居中就失效了。真正要练的是不定宽高时的稳而不是固定尺寸下的满。这道题练的是布局心智模型能快速判断在哪种场景下选哪种方案比多背一个属性重要得多。2.4 卡片组件从布局细节到交互反馈完成上面几道题之后可以挑战一个综合度更高但每部分都不难的任务做一个卡片组件。要求包含头像、标题、描述文本和一个按钮按钮在 hover 时轻微上浮或变色。这个任务看似简单实际覆盖了盒子模型、border-radius、padding 和 margin 的比例、溢出隐藏、过渡动画等一长串知识点。做题时注意几个容易出细节问题的位置头像和文字放在同一行时优先用 flex 的align-items: center对齐不要靠 margin 手动微调否则换行后就乱掉描述段落设置合理的 line-height让文字不贴在容器边缘按钮加cursor: pointer否则用户不知道它能点。如果头像用了圆形裁切父容器要配合overflow: hidden不然图片角会戳出圆角边界。验收标准看起来很简单缩小浏览器窗口卡片不破、文字不溢出、按钮状态可感知。很多零基础同学写一个静态卡片没问题一加上缩窗口不破这个条件就发现原来自己的 padding 写得太死、min-width 没考虑过、flex 布局没有设置最小内容尺寸。这些恰恰是真实开发中最常见的问题。3. JavaScript 入门阶段最值得反复刷的题从变量作用域一路做到异步判断3.1 输入输出与条件判断闰年判断JS 入门第一道必刷题我推荐闰年判断。它的题面是写一个函数isLeapYear(year)传入年份返回 true 或 false判断规则是能被 4 整除但不能被 100 整除或者能被 400 整除。这道题单看很简单但它一次考查了函数定义、参数传递、条件分支、模运算、布尔返回值五个基础点。零基础做题时的常见问题也很有代表性把console.log和return混为一谈导致调用函数后拿不到返回值判断条件写得拖沓比如嵌套了好几层 if 但逻辑重复还有人会忽略能被 400 整除这个特殊规则。function isLeapYear(year) { if (year % 400 0) { return true; } if (year % 100 0) { return false; } if (year % 4 0) { return true; } return false; }一段好答案不只是跑得通还要逻辑清晰、容易读。做完这道题后可以做个延伸把文件里写死年份改成从输入框读取年份点击按钮后显示结果这道题就瞬间变成了表单校验的雏形训练的是把独立函数接到页面交互上的能力。3.2 数组和字符串的四个高频小题数组和字符串是前端日常操作的两大核心对象。我建议零基础把下面这四个小题当成一组来刷反转字符串、统计某个字符出现的次数、数组去重、求数组最大值/最小值。这四个题看起来简单但它们背后的通用能力是读数据、处理数据、得到结果这是所有前端数据处理逻辑的地基。做题时可以先用自己的思路写一遍比如数组去重用双重循环也是对的能跑通就算过关然后再看现代写法——字符串反转可以用split()、reverse()、join()数组去重可以用Set或filter配合indexOf。这里有一个值得提醒的事零基础阶段不要急着背 API。你只需要知道我要一个去重后的新数组这个需求然后去看文档找到对应方法用过两三次之后自然记住。反过来如果一开始抱着文档硬背过两周全会忘光因为没有使用场景帮你在脑子里建立索引。先自己实现再看标准做法才是最有效的刷题方式。3.3 闭包与作用域一个计数器函数闭包是很多零基础学习者第一个被劝退的概念但其实入门阶段只需要练一道题就能理解大半。题面是写一个函数createCounter调用它返回一个新函数新函数每次被调用时计数加一并返回当前值。function createCounter() { let count 0; return function () { count 1; return count; }; } const counter createCounter(); console.log(counter()); // 1 console.log(counter()); // 2很多人的困惑点在于count 明明定义在 createCounter 内部createCounter 执行完之后 count 不是应该消失了吗答案是当内部返回的函数仍然引用 count 时count 不会被回收机制清理掉它被保存在了闭包里。用生活类比来说闭包像房间角落里的储物箱函数的临时变量被清走了但闭包里的箱子还在因为返回的函数始终能拿到箱子的钥匙。零基础不需要背闭包是函数和其词法作用域的组合这类定义能写出返回函数并保留内部变量的代码并能解释清楚 count 为什么一直保留就已经过了概念关。后面再学防抖、节流时你会发现它们用的就是同一个核心机制。3.4 DOM 操作与事件点击列表输出序号这道题考察 DOM 操作和事件监听题面是页面中有一个包含 5 个 li 的 ul点击任意一个 li 时弹出或输出它的序号0 到 4。这道题最经典之处在于它暴露了 JS 初学者的第一个大坎异步回调时机与作用域保存。用for (var i 0; i 5; i)给每个 li 绑定点击事件时运行后会发现不管点击哪个 li输出的都是 5。原因是 var 声明的 i 是函数作用域循环结束之后 i 已经变成了 5点击回调执行时取到的自然都是 5。解法有两个方向一是把 var 改成 let利用块级作用域把每次循环的 i 锁住二是用闭包包一层把 i 作为参数传进去。再进阶一点还可以改成事件委托不在每个 li 上绑定事件而是在 ul 上统一监听通过event.target判断点击的是不是 li再用>