直接上手改还是先拆开看我选了拆开看。刚交完第二次作业主题是“web前端开发静态页面综合练习”。任务是做一个完整的企业官网首页包含导航栏、Banner轮播图、服务模块、底部信息和留言表单要求只用HTML CSS 原生JavaScript不能引入框架和 UI 库页面要在主流浏览器和移动端都正常展示。做完之后发现一次看起来“只是第二次作业”的内容其实已经把 web 前端的几个核心基本功全部串起来了——结构语义化、布局模型、响应式处理、表单校验、事件机制全都跑了一遍。这篇文章就当一次完整复盘。我没有用任何框架也没有抄模板每一行代码都是在浏览器里调试过、踩过坑之后留下的最终版本。里面会有完整的语义化结构参考、三套布局方案的对比、一行代码实现响应式栅格的写法、原生 JS 表单校验的细节处理还有我对着“技能大赛试题”思路复盘时发现的高频考点。无论你是正在做类似作业的初学者还是想拿这套内容去备赛都能直接抄作业。1. 作业题目先别急着写先拆需求再动手很多同学拿到题目第一反应是打开编辑器直接敲代码我劝你停下来。第二次作业看起来简单但评分宽严差异极大尤其是如果你的作业最后会拿去对标“web前端开发技能大赛试题”的评分标准那第一步不是写是拆。1.1 先认清楚这一页到底要“满足谁”大部分第二次作业的题目描述只有一句话比如“制作一个企业官网静态首页”。这种情况下你要自己补全需求。我的拆法是列一张需求清单把功能区、内容区、交互点全部列出来顶部导航固定定位包含Logo、菜单项、电话或按钮首屏轮播区至少两张图自动轮播支持左右切换有小圆点指示器服务展示区至少四张卡片单一布局图文结合新闻或产品列表区建议写出两列或三列混合布局底部信息区包含联系方式和版权文本留言表单包含姓名、电话、留言内容空值时要有明确提示。这一份清单其实就是页面骨架后边所有代码都围绕它展开。很多人做作业时“想到哪写到哪”结果页面结构混乱样式代码堆叠严重最后一个小改动牵一发动全身。先拆单再写代码能少熬夜。1.2 技术选型的自我设限才是重点这次作业我给自己定的约束是不碰框架、不碰打包工具、不碰UI组件库连 Bootstrap 都不用。原因很清楚第二次作业的核心考点是 HTML 和 CSS 基本功以及少量交互逻辑。用框架写出来的页面再漂亮老师一眼就能看出你没有掌握布局核心。与之对应的技术清单如下技术模块本次选择选型理由页面结构语义化 HTML5 标签便于阅读贴合评分点布局方案CSS Flexbox CSS Grid兼容性好代码量少响应式方案手动媒体查询理解断点原理不依赖库轮播实现原生 JS requestAnimationFrame掌握定时器与DOM操作表单校验HTML5 约束 JS 兜底兼顾体验与安全数据提交本地模拟提交作业阶段无需后端这套选型对第一次接触完整页面的朋友来说可能稍微有点挑战但是完成之后的收获远超预期。尤其是 Flex 和 Grid 的组合使用基本覆盖了 90% 以上的页面布局场景后面只要你继续做前端一定还会遇到。2. 页面结构怎么写语义化不只是为了让老师满意第一个页面模块是结构框架这是第二次作业最容易掉分的地方。很多人习惯全页面都是div从div classheader到div classfooter所有区域和外部结构完全一致。这样做浏览器能识别但可读性、可维护性和评分都会受影响。语义化标签应该是第二次作业的第一课。2.1 从“头”到“脚”的标准结构参考我把整页结构按照大区块拆出来给你做参考body header classsite-header div classcontainer header-inner a href# classlogoTechNova/a nav classmain-nav ul lia href#home首页/a/li lia href#services服务/a/li lia href#news动态/a/li lia href#contact留言/a/li /ul /nav /div /header main section idhome classbanner aria-label轮播区域.../section section idservices classservices.../section section idnews classnews.../section /main footer classsite-footer.../footer /body注意几个细节header、nav、main、section、footer是 HTML5 语义标签它们让页面结构一目了然。每个section加id方便导航锚点跳转也方便 JS 定位。轮播区用aria-label描述区块功能这是无障碍基础技能大赛评分表里经常会出现“可访问性”这一项。有些同学可能觉得语义化是“虚的”页面看着一样就行。但实际上结构标签对 SEO 友好对屏幕阅读器友好对后续样式的定位也友好。你在浏览器里按 F12 选中元素清晰的语义结构能让你更快找到对应节点调试效率翻倍。2.2 图片和内容不要“裸奔”页面里的图片我全部加了alt文本比如产品卡片上的图写img src... alt数据分析服务示意图。图标类的小图形我直接使用 CSS 背景不占用img标签位。因为作业阶段如果图片加载失败alt文本还能撑住页面信息的完整性不至于一片空白。文本内容同样要注意。如果页面上有“查看更多”、“点击了解”这种引导文字尽量写到完整不要写“点我点我”。这是信息质量的一部分也是评分点里“内容完整性”要求的体现。第二次作业的分数差距往往不是大结构输的而是细节输的。3. 布局方案到底选哪个Flex 和 Grid 的拆解对比我猜你和我一样第一次写这种完整页面时最纠结的就是布局。网上教程一大堆今天说 Flex 无敌明天说 Grid 最强到第三次作业重新做的时候发现这个页面又没了。我给你交个底第二次作业阶段把 Flex 用熟把 Grid 用在刀刃上完全够用。3.1 布局类题目学的是“分配”思维Flex 的核心是“主轴与交叉轴”的一维分配Grid 的核心是“行与列”的二维划分。我用一个特别直白的例子说明你就当它是教室里排座位Flex 就是老师跟你说“这一排你们自己把间距拉开不够出去加凳子”不管你怎么坐反正左到右是一条线。Grid 就是提前在地上画好格子横几排竖几列都画好谁坐哪一格规则由格子决定。服务模块最常遇到的情况是四张卡片一行放四个窄屏时放两个再窄屏时放一个。这种需求用 Flex 写法和 Grid 写法都能实现但它们的思路完全不同。Flex 写法卡片宽度占比靠百分比和flex-wrap控制.services-list { display: flex; flex-wrap: wrap; margin: -12px; } .service-card { width: calc(25% - 24px); margin: 12px; } media (max-width: 768px) { .service-card { width: calc(50% - 24px); } } media (max-width: 480px) { .service-card { width: calc(100% - 24px); } }Grid 写法直接定义列模板一行代码吃掉响应式.services-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } media (max-width: 768px) { .services-list { grid-template-columns: repeat(2, 1fr); } } media (max-width: 480px) { .services-list { grid-template-columns: 1fr; } }对比下来Grid 在“等宽卡片自动换行”的场景里声明式更强我最后用了 Grid。而导航栏、头部信息这种单排分布的场景Flex 的justify-content: space-between一行搞定完全不需要 Grid 上场。3.2 负 margin 方案是 Flex 的经典坑区我第一版用 Flex 写卡片区踩了一个非常经典的坑设置了gap之后卡片和容器边缘的间距不好控制。我的处理方式是用.services-list外面加一个负 margin 容器让卡片的 margin 向外抵消从而实现视觉上的对齐。.services-list { display: flex; flex-wrap: wrap; margin: 0 -12px; } .service-card { flex: 0 0 calc(25% - 24px); margin: 0 12px 24px; }这里flex: 0 0 300px的三段式含义要搞清楚第一个值flex-grow允许放大0 表示默认不放大第二个值flex-shrink允许缩小0 表示默认不缩小第三个值flex-basis项目在主轴上的初始宽度。说人话就是每个卡片初始宽度是计算好的百分比页面再挤也不能把它压扁。如果只想让卡片“能伸缩”可以改成flex: 1 1 300px意思是初始宽度300px空间多就放大空间少允许压缩。这个知识点在技能大赛的布局题里属于送分点但很多人真的会写错。3.3 代码量少不代表不需要考虑策略布局方案的选择要和内容量挂钩。如果服务模块只有三个标签用 Flex 没问题如果是四列到两列到一列的阶梯式变化Grid 更合适。我最后选择的策略是导航与底部信息Flex因为元素少、结构简单服务卡片区Grid因为需要一步控制列数文章列表区Flex 纵向排列因为每一条的“标题摘要时间”是天然的线性流。一套页面混合使用 Flex 和 Grid 一点都不丢人反而说明你能在不同场景下选合适工具。怕的是从头到尾一个flex-direction: column用到底最后页面是能显示了但几乎没法改结构。4. 顺手把响应式一起做了断点和单位这样定第二次作业的常见加分项是“移动端也能看”。很多同学在电脑上看没问题把窗口一缩页面就乱得惨不忍睹。关键原因是拿着写死宽度的思路做响应式比如width: 1200px、font-size: 16px、padding: 20px这些固定值在一个范围内没问题但跨范围之后就没有弹性了。4.1 断点选三个就够我的做法是只设置三个断点不搞花活1200px 以下大屏平板四列改两列768px 以下手机横屏两列改一列导航折叠480px 以下小屏手机所有元素拉通字号略缩。这三个断点是按内容形态划分的每次断点变化的判断依据不是“我要让某个地方好看”而是“这个宽度下用户用几根手指在点屏幕”。1200px 时用户还在用鼠标704 和 480 时基本就是触摸屏了点击面积必须加大导航必须从横向一排变成垂直列表。4.2 字体不要“一根筋”字号我用了rem配合根元素html { font-size: 16px; }。响应式时调整根字号页面内所有用rem的地方一起变代码极简html { font-size: 16px; } media (max-width: 768px) { html { font-size: 14px; } } media (max-width: 480px) { html { font-size: 12px; } }标题h1我用的是clamp()函数一行搞定从电脑到手机的字号范围。clamp(2rem, 5vw, 3.5rem)的意思是最小 2rem最大 3.5rem中间随视口宽度变化。如果你还没学到vw也没关系可以先理解成“字体大小跟随屏幕宽度等比变化”。4.3 图片响应式记得加max-width: 100%页面里所有img我都写了全局样式img { max-width: 100%; height: auto; display: block; }max-width: 100%保证图片不超出父容器height: auto保证不拉伸变形display: block去掉图片底部的幽灵间隙。这三件套是第二次作业里最值钱的三行 CSS一定要刻进肌肉记忆。4.4 真机才能发现问题光改代码不够我还做了两个验证一是用浏览器 DevTools 的设备模拟逐个看 iPhone SE、iPhone 14 Pro Max、iPad 三个档位的效果二是在手机浏览器上直接打开本地服务器地址实际手感来一遍。真机测试发现的问题比模拟器多尤其是底部导航和输入框在键盘弹出时的表现只有真机才能看出来。5. 表单与原生JS校验从“能用”到“好用”留言表单是整个页面里唯一有交互逻辑的部分也是技能大赛题里最容易出“隐藏考点”的地方。很多人的表单长这样form input typetext namename placeholder姓名 input typetel namephone placeholder电话 textarea namemessage placeholder留言/textarea button typesubmit提交/button /form这种表单提交后如果空内容直接被放行体验非常差。第二次作业的标准至少应该达到空值提示、格式校验、提交结果反馈。5.1 HTML5 约束先兜底我先给每个字段加上约束属性form idcontactForm novalidate label forname姓名/label input typetext idname namename required minlength2 maxlength10 placeholder请输入姓名 label forphone电话/label input typetel idphone namephone required pattern^1[3-9]\d{9}$ placeholder请输入11位手机号 label formessage留言内容/label textarea idmessage namemessage required maxlength200 placeholder请输入留言内容最多200字/textarea button typesubmit提交留言/button p idformTip classform-tip/p /form注意我加了novalidate。这个属性很重要它关闭了浏览器的默认气泡提示把校验主动权交给我们的 JS。为什么这么做因为浏览器默认气泡在不同浏览器里的样式不一致而且界面风格和整体页面不搭很难看。如果你不关闭默认校验后面自己写的校验逻辑会被浏览器抢先体验反而更混乱。5.2 JS 校验逻辑的核心写法校验逻辑我拆成了三个函数检查姓名、检查电话、检查长度然后统一进入一个总的校验函数。这里的关键是checkValidity()API 和setCustomValidity()的配合前者负责触发浏览器的原生约束判断后者用来覆盖自定义错误消息。我贴一段核心代码这是技能大赛题里出现频率最高的原生逻辑const form document.getElementById(contactForm); const tip document.getElementById(formTip); function validateField(input) { if (!input.checkValidity()) { if (input.validity.valueMissing) { input.setCustomValidity(这是必填项请填写); } else if (input.validity.patternMismatch) { input.setCustomValidity(输入格式不正确请检查); } else if (input.validity.tooShort) { input.setCustomValidity(输入内容太短了); } else { input.setCustomValidity(); } input.reportValidity(); return false; } input.setCustomValidity(); return true; } form.addEventListener(submit, function (event) { event.preventDefault(); const fields [form.name, form.phone, form.message]; let allPassed true; fields.forEach(function (field) { if (!validateField(field)) { allPassed false; } }); if (allPassed) { tip.textContent 提交成功我们会在1个工作日内联系你。; tip.style.color #2e7d32; form.reset(); } else { tip.textContent 请完整填写后再提交。; tip.style.color #c62828; } });逻辑拆解如下event.preventDefault()阻止表单默认刷新页面这是 JS 表单处理的基础checkValidity()是浏览器原生方法所有约束规则都会被它检查包括required、pattern、minlength、maxlengthvalidity.valueMissing对应“必填但没填”validity.patternMismatch对应“格式不对”validity.tooShort对应“长度不够”setCustomValidity()和reportValidity()搭配使用能弹出自定义的错误气泡同时防止上次校验的错误信息残留。这里有一个大家容易踩的坑如果你在某次校验中调用了setCustomValidity(错误消息)下一次校验时即使字段合法错误消息依然存在。所以在每次校验通过时必须手动setCustomValidity()清空。这行代码少写页面会一直提示错误非常恶心。5.3 表单提交到底提交去哪作业阶段并没有真实后端我的做法是模拟发送。用一个setTimeout模拟等待 800 毫秒然后展示成功提示替换按钮文本为“已发送”。如果后续接真实后端只需要在ajax或fetch的回调里替换tip.textContent那几行即可。button.textContent 发送中...; button.disabled true; setTimeout(function () { button.textContent 发送留言; button.disabled false; }, 800);这段代码在处理低端手机时表现尤其重要。如果你的按钮在发送过程中被反复点击消息会重复提交。我直接让按钮在发送期间disabled物理上禁止二次点击。这是真实项目中“防重复提交”的基本思路不是高级功能但很多新手完全没有这个意识。6. 轮播图背后的核心技术点定时器、缓存与批量事件轮播是第二次作业常见的“加分亮点”却也是翻车重灾区。我第一次写轮播用了一堆querySelectorAll加好几个独立setInterval结果切到第二张图时之前定时器还在跑画面直接抽风。后来把所有轮播逻辑收敛成一个核心函数才算真正解决。6.1 单一定时器原则我的轮播设计为一个setInterval负责自动播放一个index变量记录当前帧一个render函数负责把当前帧翻译成 DOM 变化。开始时先缓存所有轮播相关的节点避免每次切换都重新查找 DOM。(function () { const bannerItems document.querySelectorAll(.banner-item); const dots document.querySelectorAll(.banner-dot); const prevBtn document.querySelector(.banner-prev); const nextBtn document.querySelector(.banner-next); let currentIndex 0; let timer null; function render() { bannerItems.forEach((item, index) { item.style.display index currentIndex ? block : none; }); dots.forEach((dot, index) { dot.classList.toggle(active, index currentIndex); }); } function next() { currentIndex (currentIndex 1) % bannerItems.length; render(); } function prev() { currentIndex (currentIndex - 1 bannerItems.length) % bannerItems.length; render(); } function startAutoPlay() { timer setInterval(next, 3000); } function stopAutoPlay() { clearInterval(timer); } nextBtn.addEventListener(click, next); prevBtn.addEventListener(click, prev); dots.forEach((dot, index) { dot.addEventListener(click, function () { currentIndex index; render(); }); }); const bannerWrap document.querySelector(.banner); bannerWrap.addEventListener(mouseenter, stopAutoPlay); bannerWrap.addEventListener(mouseleave, startAutoPlay); render(); startAutoPlay(); })();关键点在于currentIndex (currentIndex 1) % bannerItems.length。这个取模运算让索引在超过末位时自动归零形成循环。反过来的上一张(currentIndex - 1 bannerItems.length) % bannerItems.length先加长度再取模是为了防止负索引。这两个取模写法是轮播题的标准答案记下来就行。6.2 用事件委托批量绑定小圆点dots.forEach遍历绑定 click 事件绑定逻辑简单直接。但如果你后面写的是动态生成的小圆点推荐用事件委托把监听器挂在轮播容器上通过event.target.classList.contains(banner-dot)判断点击目标。bannerWrap.addEventListener(click, function (e) { if (e.target.classList.contains(banner-dot)) { const index Array.from(dots).indexOf(e.target); currentIndex index; render(); } });事件委托的好处是即使后面小圆点被重新渲染替换也不需要重新绑定监听器。这是技能大赛笔试里喜欢考的概念你可能不写这段代码但要能说清楚“为什么要委托”。6.3 一个被人忽略的体验细节自动播放时用户滑到右侧停了鼠标这个体验并不好。我给轮播容器加了mouseenter暂停、mouseleave继续的逻辑这是最基本的交互克制。在实际项目中用户想看某一张图轮播却擅自跳走是最容易被打断的体验。加上暂停之后页面瞬间显得“懂用户”。7. 常见问题与排查技巧实录这部分是本次作业从“跑起来”到“没问题”之间我实际踩过的坑。整理成速查表你遇到类似问题时可以顺着排查。现象可能原因处理方案顶部导航没固定住只写了position: fixed没给top: 0; left: 0固定定位必须有完整偏移量同时保证 z-index 高于其他模块页面容器在手机上有横向滚动条某个元素宽度超过视口检查width: 100vw和子元素margin-right改用max-width控制图片底部出现白边img默认基线对齐全局设置img { display: block; }表单提交后页面刷新缺少event.preventDefault()在 submit 事件中调用preventDefault轮播切换到第二张后第一张定时器还在跑多个 setInterval 叠加统一使用单一定时器每次都clearInterval再启动手机端点小圆点不方便点击区域太小给点加padding或用width: 20px; height: 20px替代 8px 小点小圆点 active 样式失效类名写错或 CSS 优先度冲突检查classList.toggle的类名是否与 CSS 一致必要时提高选择器优先级输入框在手机上自动放大字号小于 16px移动端输入框字号保持 16px 或以上否则 iOS 会强制缩放页面整体样式正确但动画卡顿频繁操作display/top轮播切换改用opacity或transform过渡减少重排其中“输入框在手机上自动放大”这个问题很多同学第一次写移动端页面都会遇到。原因是 iOS Safari 默认行为为了防止文字过小用户看不清当font-size 16px时自动缩放页面到输入框区域导致整体布局错乱。我最终在input和textarea上统一设置font-size: 16px把问题从源头解决。CSS 优先度冲突是另一个高频问题。我写小圆点 active 样式时初始是.banner-dot样式active 写在后面但同级选择器下哪个写在后边哪个有效。如果你的 active 样式不起作用打开 DevTools 看元素的计算样式中哪一个属性被划掉就能快速定位。F12 浏览器的“应用”面板里直接能看到某条规则被哪条覆盖比瞎猜快太多。8. 从作业到技能大赛题这次的隐藏考点复盘做完这次页面总览之后我又把它当作“web前端开发技能大赛试题”来对照了一遍。我发现技能大赛的作业题和常规老师给的作业底层考点其实高度重合只是题型包装得更加复杂一点。8.1 技能大赛试题爱考的页面元素结合近几年常见的技能大赛模拟题静态页面部分反复出现的模块包括顶部固定导航 导航高亮首屏焦点图自动轮播 手动控制产品/服务卡片响应式列表内容栏目两栏/三栏布局表单校验 提交提示底部版权信息 联系方式。你会发现这不就是我做的那一整套吗所以这次第二次作业如果认真完成后面的技能大赛模拟题其实是同一套基本功换了个皮。8.2 评分点其实写在“规范”里我把赛事评分思路反过来用在了作业上重点检查了三个维度代码规范html、css、js是否分离类名是否语义化交互完整轮播、表单校验、按钮状态反馈是否齐全兼容适配不同宽度下布局是否破损输入框字体是否异常。其中“代码规范”一项很多人忽略。技能大赛试题评分表里经常有“代码规范”这一大项占比达到 10% 甚至更多。这意味着即使你的页面效果满分如果 CSS 全写在 HTML 的style标签里、JS 全写成一坨长流程分数照样扣。我在写代码时特别做了两件事所有类名使用英文语义化不用box1、div2CSS 文件内部按“重置、布局、组件、响应式”分区排列。这一习惯让我在后续改版时不用通读全文件就能快速找到目标位置。8.3 备赛向扩展建议如果之后要拿这个页面去参赛我建议再补三个方向把轮播换成transform: translateX方式实现滑动过渡代码更流畅给导航菜单加滚动监听导航项高亮跟随当前区块变化增加一个简单的懒加载图片进入可视区后再加载。这三个功能单独拆出来都是简单实现但组合在一起就能让这个页面的交互等级从“完成作业”提升到“可参赛”的层次。9. 一些经验总结这波做完最大的感受是web 前端第二次作业其实是一个“把理论变成工程习惯”的分水岭。第一次作业写“hello world”和简单标签时你不需要考虑语义化和布局到了第二次作业你要自己建结构、排布局、做响应、加交互所有东西都需要从零到一推理。没有框架帮你挡复杂度也不会有人给你提示哪些标签该用在哪全靠自己写。如果让我重新做一遍我可能会把两件事做得更早一是在动手前先把所有区块在纸上画一个线框图连网格线都画好二是提前把 PC 端和移动端的断点画入线框而不是写完 CSS 再回头调。线框图看起来是“老派”的做法但对新手整理思路极其有效。写代码时所有尺寸、间距都是“拍脑袋”决定的后面调整必然反复。希望这篇复盘能够帮你把第二次作业做得比自己预期更好。代码可以照抄但布局的取舍、表单的逻辑、轮播的定时器管理最好也吃透。这些不只是作业是往后凡是写 web 前端都会反复用到的看家本领。