最近在技术社区闲逛时经常看到标题写着“第二周作业”的提问帖。这类标题看似简陋背后往往是一个很典型的场景某个前端训练营或自学小组前两周刚讲完 HTML 和 CSS 基础第三周开始要求完成第一个综合性实战页面。以我接触过的一个训练营为例第二周作业是“个人作品集页面”要求用纯 HTML CSS 实现响应式布局并加少量 JavaScript 做表单校验。今天就把我辅导学员完成这类作业时的完整思路整理出来从需求拆解到踩坑排查给正在赶作业和自学前端的朋友一个可直接参考的路线。我见过太多同学卡在这个阶段不是不会写标签而是不知道一份作业从拿到题目到最终提交中间要经过哪些步骤。如果你现在正对着“第二周作业”几个字发愁这篇内容就是为你写的。1. 拿到作业先别写代码需求拆解与整体设计很多人在第二周作业上翻车不是因为代码能力不够而是因为根本没想清楚作业到底要考察什么。拿到题目就打开编辑器开始敲敲到一半发现结构不合理推翻重来反而浪费更多时间。1.1 第二周作业到底在考察什么训练营把作业安排在第二周通常不是为了让学员做出一个多惊艳的网站而是为了验证三件事第一HTML 语义化标签有没有真正理解而不是全程 div 一把梭第二CSS 布局能力尤其是 Flex 或 Grid 有没有入门能不能用它们实现常见的页面布局第三响应式设计的基本意识页面在手机和电脑上不能一个样。以个人作品集页面为例它几乎涵盖了前两周所有的知识点头部导航、作品展示卡片、关于我介绍区、联系表单。每个区域分别对应不同的布局场景比如导航栏是横向排列作品卡片是网格状排列表单是纵向排列。如果你能把这几块都做出来前两周的内容就基本过关了。1.2 先在纸上画草图再写代码我要求学员做的第一件事不是打开编辑器而是拿一张 A4 纸把页面大概长什么样画出来。不需要多精细方框代替区块线条代替间距重点是明确从上到下有哪些区域每个区域里放哪些内容。这么做的好处有两个。一是避免写着写着发现漏掉某个模块二是能提前判断布局难度。比如你画完草图发现作品区想放六张卡片三列两行那就要用到 Flex 的换行或者 Grid 的固定列数如果只放三张卡片一行排满那用 Flex 的 justify-content 就能解决。草图阶段就能预先决定大概要用什么布局方案后面写代码就顺畅得多。1.3 项目文件夹怎么组织作业虽然只是单页面也不要所有文件堆在一个目录里。我习惯的项目结构是这样的project/ ├── index.html ├── css/ │ └── style.css ├── js/ │ └── main.js └── images/ ├── work-1.jpg ├── work-2.jpg └── work-3.jpg这样组织的好处是路径关系清晰css 文件夹里只放样式文件js 文件夹里只放脚本images 放图片素材。同时建议所有文件使用小写英文命名不要出现“作业最终版2.0.html”这种文件名也不要在路径里使用中文名。我在浏览器调试时就遇到过很多次图片路径里带中文名本地打开没问题发给别人或者部署上线后直接 404排查半天才发现是文件名编码的问题。初始的 HTML 骨架可以直接用编辑器的快捷生成功能比如在 VS Code 里输入一个感叹号再按 Tab就能生成标准的 HTML5 模板。接下来先不急着填内容把页面当成一个空壳确认各个区块都在再往里填具体内容。2. HTML 语义化与整体骨架搭建这段时间训练营普遍强调语义化标签原因在于HTML 不只是给浏览器看的也是给搜索引擎和读屏软件看的。把页面结构写得像一份条理清晰的文档比所有内容都塞在 div 里要负责任得多。2.1 为什么语义化标签如此重要语义化的核心作用可以理解为给页面里的每个区域贴上门牌号。header 是页眉告诉他这是一个导航区域main 是主体内容区footer 是页脚告诉用户这是页面底部通常放版权信息或联系方式。从样式角度来说div 加上 class 也能实现同样的视觉效果但语义化标签对后续维护和协作更友好。打个比方你进一栋办公楼门牌上写着“会议室”和写着“201室”的区别。前者一看就知道是干什么的后者还得查图纸。训练营的老师在批改作业时滚动阅读源码看到清晰的 header、main、section、article、footer和看到一片 div 嵌套第一印象完全不同。2.2 导航栏与核心内容区的写法个人作品集页面的导航栏一般放在 header 内部包括 logo 或名字以及几个锚点链接作品、关于、联系。因为页面是单页链接都用哈希跳转比如href#works配合 CSS 的 scroll-behavior 就能实现平滑滚动。主体内容可以按功能拆成几个 section作品展示区用 section 包裹内部每一个作品独立用 article 标签关于我区域用 section 加一个简短的自我介绍联系表单区用 section 包裹表单元素这里有个比较容易被忽略的细节每个 section 最好加一个标题标签比如h2写“我的作品”。从语义化角度看section 表示一个独立的主题区块配套标题才能让结构更完整从开发调试角度看有标题的区块在浏览器开发者工具的 Accessibility 面板里更容易查看读屏用户也能快速跳转。作品卡片的 HTML 结构可以这样写section idworks h2我的作品/h2 div classwork-grid article classwork-card img srcimages/work-1.jpg alt项目一的界面截图 h3某电商平台界面/h3 p使用 Flex 布局实现的响应式商品列表页面。/p /article article classwork-card img srcimages/work-2.jpg alt项目二的界面截图 h3个人博客首页/h3 p基于语义化标签搭建的轻量内容页。/p /article /div /section注意图片的 alt 属性不要漏。作业要求里如果有“图片懒加载”或“无障碍访问”这类加分项alt 文本写好了就能加分。另外作品标题用的 h3 而不是继续用 h2是为了保持标题层级清晰section 的大标题是 h2里面的内容是 h3层级不要跳。2.3 联系表单与页脚的实现细节联系表单是第二周作业里相对复杂的部分因为涉及 label、input、textarea 的配合。一个常见的低级错误是input 只写了 placeholder却漏了与 label 的关联。正确写法是给每个表单项加一个 label通过 for 属性指向对应输入框的 idform idcontact-form div classform-group label forname姓名/label input typetext idname namename required /div div classform-group label foremail邮箱/label input typeemail idemail nameemail required /div div classform-group label formessage留言内容/label textarea idmessage namemessage rows4 required/textarea /div button typesubmit发送/button /formlabel 和 input 关联后用户点击“姓名”两个字也能让对应的输入框获得焦点对键盘输入和移动端触屏操作都更友好。这就是为什么需要 id 和 for 的值保持一致它们就像是门牌号的匹配关系。页脚 footer 里一般放版权声明和社交链接写法比较固定footer p© 2024 我的名字 保留所有权利/p /footerfooter 不需要太多花样重点是语义正确。有些学员喜欢把分享图标堆在 footer 里用一堆图片结果图片没加载出来留下一串空白链接。如果真要加社交链接直接用文本链接更稳妥后续再换成图标也不迟。3. CSS 布局方案与细节打磨HTML 骨架搭好后接下来的 CSS 是决定作业观感的核心环节。第二周作业里最常出现的布局问题就是不知道怎么把元素排到想要的位置。这一节我会把 Flex 布局中最常用的几个场景拆开讲透再补上响应式适配的一些实操细节。3.1 为什么先学 Flex 而不是 Grid第二周作业的页面规模通常不大用 Flex 布局基本可以覆盖 90% 的场景。Flex 处理“一行内如何排列多个元素”这个问题非常顺手而 Grid 更擅长处理“二维矩阵”像宫格一样定位行和列。作品区如果只有三张卡片一行排开Flex 完全够用六张卡片两排Flex 配合 flex-wrap 也能实现。可以这样理解 Flex 的核心逻辑它让容器里的子元素共同参与一条主轴的排列。.work-grid { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }display: flex让子元素横向排列flex-wrap: wrap允许换行一行放不下时自动换到下一行gap控制子元素的间距这个属性比 margin 好用不需要担心首尾多余间距问题justify-content: center让整组卡片水平居中对应的卡片宽度可以写成百分比或固定值.work-card { width: 300px; }横向排列加换行宽度固定就能自然形成每行多列的效果。这里的 gap 属性兼容性已经很好不需要担心旧浏览器的问题。训练营作业通常不需要像企业项目那样考虑 IE 兼容所以可以放心用。3.2 颜色、字体与间距统一才是高级感很多学员的作业看起来“乱”不是功能问题而是视觉上缺少统一感。颜色一会儿红一会儿蓝字体一会儿衬线一会儿黑体间距忽大忽小。解决这个问题最简单的方式定义 CSS 变量。:root { --primary-color: #2c3e50; --accent-color: #e67e22; --background-color: #f8f9fa; --text-color: #333333; --spacing-base: 16px; --font-family: PingFang SC, Microsoft YaHei, sans-serif; }页面里所有颜色、间距、字体都从变量里取改动一处全局生效。比如想让页面的主色调从深蓝变成墨绿只需要改--primary-color一个值其他所有引用它的地方自动更新。这套思路在训练营阶段就建立起来后面做复杂项目时会省很多事。字号建议使用 rem 单位。默认根字号是 16px1rem 等于 16px所以 0.875rem 就是 14px1.5rem 就是 24px。用 rem 的好处是后续想整体缩放页面字号只需要调整根元素的 font-size比如在移动端媒体查询里把根字号设小一点全站文字都会跟着缩小。还有一个小技巧正文的行高设置在 1.6 到 1.8 之间阅读体验会比较舒服。行高太小时文字挤在一起太疏又显得松散。这个参数不需要背写完之后肉眼扫一眼感觉舒服就对了。3.3 响应式适配两种断点的取舍响应式页面最常见的做法是用媒体查询media query针对不同屏幕宽度设置不同样式。关键问题是断点怎么选。网上有标准推荐值比如 768px 是 iPad 竖屏1024px 是 iPad 横屏但我更建议从实际内容出发当页面排版开始“别扭”时就是需要设断点的地方。以作品卡片为例三张 300px 宽的卡片加间距总宽度大约 950px那么桌面端的断点可以设在 1024px 以上。屏幕宽度小于 1024px 时三列会变得拥挤这时可以让卡片宽度改为 45%或者直接把卡片变成一列。移动优先还是桌面优先的写法区别主要体现在媒体查询条件上。移动优先是默认写手机样式再用media (min-width: 768px)覆盖成平板或桌面样式。桌面优先则相反默认写桌面样式用media (max-width: 767px)覆盖成手机样式。我建议新手采用移动优先理由很简单手机屏幕内容少样式的约束少写起来不容易漏再逐步增加宽屏样式思路更线性。下面是导航栏的示例/* 默认样式移动端导航 */ .nav-links { display: none; } /* 屏幕宽度达到 768px 及以上 */ media (min-width: 768px) { .nav-links { display: flex; gap: 24px; } }这种写法的逻辑是手机上默认隐藏导航链接用一个按钮控制展开桌面端宽度足够直接横向排列。如果你觉得“隐藏再显示”的思路有点绕可以先从桌面优先开始写完桌面样式再考虑小屏怎么调整。关键是保持一种书写习惯不要一会儿移动优先一会儿桌面优先容易把自己弄晕。响应式还有一个常被忽略的点图片也要响应式。CSS 里给 img 加上最大宽度限制img { max-width: 100%; height: auto; }这样图片在窄屏下不会超出容器宽度也不会变形。3.4 导航栏固定在顶部之后如果想让导航栏在页面滚动时始终可见常用的做法是 position: fixed。但这里有一个常见坑固定定位的元素脱离文档流页面内容会往上顶导致顶部区域的前一部分被导航栏挡住。解决办法有很多最直接的一种是给主体内容加一个 padding-top值等于导航栏的高度body { padding-top: 60px; }更稳妥的办法是不要用 fixed而是用 sticky.header { position: sticky; top: 0; }sticky 定位不会被父容器裁剪且元素在正常文档流中占据位置滚动到顶部时才会“吸”在顶部就不需要额外设置 padding。我实际测试下来sticky 对单页面站点的导航栏非常合适。不过 sticky 有一个限制它只在没有设置 overflow 为 hidden 的父容器内生效这在训练营作业里一般不会遇到可以直接放心用。4. 表单交互与 JavaScript 基础增强第二周作业里如果包含 JavaScript 需求一般不会太难通常就是表单校验和按钮交互。这一部分虽然代码量不大却是区分“会切图”和“会写前端”的一个关键点。4.1 表单校验原生 HTML 属性优先HTML 本身提供了不少校验能力比如 input 的 required 属性、typeemail 的格式检查、minlength 和 maxlength。这些属性在没有写任何 JavaScript 的情况下就能完成基础校验浏览器会弹出对应的提示文字。但原生校验有个让人头疼的地方不同浏览器的提示文案和样式不一致而且表单提交时如果校验失败默认行为是阻止提交并显示气泡。如果希望提示样式更统一或者要加“邮箱格式不对”这类自定义提示就需要 JavaScript 介入。最简单的做法是监听 form 的 submit 事件用e.preventDefault()阻止默认提交然后读取表单字段的值手动校验通过后再做后续处理const form document.getElementById(contact-form); form.addEventListener(submit, function (e) { e.preventDefault(); const name document.getElementById(name).value.trim(); const email document.getElementById(email).value.trim(); const message document.getElementById(message).value.trim(); if (!name) { alert(请填写姓名); return; } const emailPattern /^[^\s][^\s]\.[^\s]$/; if (!emailPattern.test(email)) { alert(请填写正确的邮箱地址); return; } if (message.length 10) { alert(留言内容至少 10 个字符); return; } // 模拟提交成功 const tip document.createElement(p); tip.textContent 提交成功我会尽快回复你; form.appendChild(tip); form.reset(); });这里的正则用了最基础的一种邮箱匹配它不是完美方案但应付训练营作业已经足够。真正生产环境的邮箱校验还要考虑更多边界情况这里不展开。value.trim()的作用是去掉输入内容首尾的空格。用户在姓名框里敲了一个空格再提交trim 之后就是空字符串判断逻辑就能捕获到这个情况不会让一个纯空格的“姓名”通过校验。4.2 移动端菜单按钮与平滑滚动如果页面导航栏在移动端是隐藏的通常需要一个按钮来控制显示。交互逻辑也不复杂点击按钮给导航链接容器加一个 class比如 open样式里针对这个 open 类显示导航链接const menuBtn document.getElementById(menu-btn); const navLinks document.querySelector(.nav-links); menuBtn.addEventListener(click, function () { navLinks.classList.toggle(open); });CSS 部分只需要加一条.nav-links.open { display: flex; flex-direction: column; }这个交互的要点是 classList 的 toggle 方法第一次点击加 open 类第二次点击移除不用自己在代码里判断当前状态。看起来简单但不少学员会写成先判断再 add 或 remove代码多了好几行逻辑反而容易出错。锚点平滑滚动可以用一行 CSS 解决html { scroll-behavior: smooth; }这个属性启动后点击页面内的锚点链接滚动过程就是平滑过渡的不需要 JavaScript。如果想让特定元素滚动到视野中间也可以配合 scroll-margin-top 调整锚点位置防止固定导航遮挡标题section { scroll-margin-top: 70px; }建议在做完整体页面后统一调试这一段因为导航栏高度不同需要的偏移值也不同。70px 只是一个参考值以你自己页面的实际导航高度为准。4.3 调试时先打开浏览器开发者工具JavaScript 相关的常见错误就算再小心也难免遇到。一个比较实用的建议是写完交互代码后立刻按 F12 打开浏览器开发者工具切到 Console 面板看有没有报错信息。红色报错里一般会直接告诉你是哪一行出了问题。比如常见的“Cannot read properties of null”基本就是document.getElementById找不到对应 id回头看 HTML 里那个 id 是不是拼错了或者脚本加载的时机太早、DOM 还没渲染完。如果想让脚本在 DOM 加载完成后执行有两个简单方案把script标签放到 body 末尾或者给脚本加defer属性。训练营作业阶段建议直接把 script 放到 body 的最后最朴素也最不容易出错。5. 常见问题与排查实录这一节整理的是我在辅导“第二周作业”过程中出现频率最高的问题。把它们放在一起方便你写完代码后对照检查。我特意没有用非常官方的措辞而是按照当初一步步排查的真实顺序。5.1 样式不生效先看选择器和文件路径样式完全不生效的最常见原因有三个CSS 文件没有被引入、选择器写错了、样式被其他规则覆盖了。先确认 CSS 是否引入成功最简单的方法是打开开发者工具的 Network 面板刷新页面看 style.css 的状态码是不是 200。如果是 404检查 index.html 里的 link 路径是不是写对。路径问题有一个极易踩的坑css/style.css写成了style.css在根目录下找不到文件样式自然全丢。如果文件加载成功但样式无效接着看选择器。比如 HTML 里写的是classwork-cardCSS 里却写成了.work-card漏了前面的点选择器就失效了。开发工具里选中一个元素Elements 面板右侧的 Styles 区域会列出所有匹配的样式规则没匹配上的规则不会出现在列表里排查起来很快。还有一种情况是样式被覆盖。比如在全局样式里写了p { color: red }又在某个类选择器里写了.intro { color: blue }两条规则都作用于同一个段落最终谁生效要看选择器的优先级不是看谁写在后面。这时候可以在 Styles 面板里看到被划掉的那条规则说明它被另一条更高优先级的规则覆盖了。5.2 图片不显示路径、文件名与格式图片不显示有很多原因第一个要查的是路径。images/work-1.jpg是相对路径表示从当前 HTML 文件所在目录出发去找 images 文件夹。如果 HTML 文件在项目根目录图片在根目录下的 images 文件夹里这个路径就没问题。但如果你把 HTML 文件放在了 html 子目录里路径就不对了需要改成../images/work-1.jpg表示先退回上一级再进入 images 文件夹。第二个要查的是文件名是否完全一致包括大小写和扩展名。work-1.jpg不等于Work-1.jpg也不等于work-1.jpeg。尤其在 Windows 资源管理器里默认可能不显示扩展名容易造成文件实际是 png 但代码里写 jpg 的情况。建议在编辑器里打开文件结构面板直接确认真实文件名。第三个是图片本身是否损坏双击图片文件如果能正常打开说明图片文件没问题。还有一个容易忽略的问题图片文件过大比如一张 5MB 的图片浏览器加载缓慢看起来像是显示不出来。训练营项目用到的图片尽量控制在 200KB 以内可以用在线工具压缩一下页面加载速度会明显提升。5.3 水平居中与垂直居中别再硬记 vertical-align居中问题在作业里几乎是必考。水平居中相对简单块级元素用margin: 0 auto文本用text-align: center。垂直居中就复杂一些很多人的第一反应是 vertical-align: middle但它在正常文档流里只对行内元素和 table-cell 元素生效对普通 div 是无效的。推荐使用 Flex 解决居中.flex-center { display: flex; align-items: center; justify-content: center; }一行文字、一个按钮、甚至一个完整的面板都能用它快速居中。这里的 align-items 控制交叉轴对齐justify-content 控制主轴对齐两个都是 center 就是水平垂直都居中。还有一种写法是给元素设置固定宽高然后用绝对定位加 margin 负值比如.box { width: 200px; height: 100px; position: relative; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px; }这种写法在很多老项目里能看到但现在完全可以用 Flex 替代代码更短语义也更清晰。除非你的项目需要兼容特别老的浏览器否则直接用 Flex 就好。5.4 表单提交后页面刷新了写了 preventDefault 之后表单仍然刷新页面最常见的原因是事件监听没有真正绑定到 form 元素上。检查一下document.getElementById(contact-form)返回的是不是 null如果 script 被放在 head 里、页面还没解析完表单就执行了所以找不到元素。解决办法就是前面提到的把 script 放到 body 末尾。另一个原因是按钮的 type 没有写成 submit。HTML 里 button 的默认 type 就是 submit如果写成了button typebutton点击按钮不会触发表单提交事件自然也就不会触发监听器。反过来如果按钮在表单外面点击它不会触发表单提交也不会有提交事件。建议在表单交互开发时先设置一个临时测试逻辑点击按钮后立即在 Console 里打印一行日志确认事件触发成功再继续写校验逻辑。这样能把“事件没绑定”和“校验代码写错”两个问题分开避免混在一起排查。问题排查思路快速解决方案样式完全不生效检查 CSS 文件是否引入、选择器是否正确Network 面板查看 CSS 状态码确认 link 路径局部样式被覆盖检查选择器优先级和书写顺序开发工具 Styles 面板查看被划掉的规则图片 404检查路径、文件名大小写和扩展名在编辑器文件树中确认实际文件名图片加载慢图片文件太大压缩图片控制在 200KB 以内元素不居中检查是否用了 vertical-align 对块级元素使用 Flex 的 align-items 和 justify-content表单提交刷新事件未绑定或按钮 type 错误把 script 放 body 末尾检查 submit 事件6. 提升作业完成度的三个小技巧作业写完只是及格线想拿到一个更高的评价往往体现在一些容易被忽略的细节上。这些技巧不复杂但很多人不会主动去做。6.1 注释写清楚老师看得更轻松在 CSS 和 JavaScript 里写注释是一个成本极低但回报极高的习惯。比如/* 导航栏固定定位避免遮挡内容 */ .header { position: sticky; top: 0; }// 邮箱格式校验避免用户填写的格式无法正常回复 const emailPattern /^[^\s][^\s]\.[^\s]$/;注释的价值不只是给别人看更多是给未来的自己看。作业写到后面你会忘记当初为什么写某条规则。这时注释就像路标帮你快速回忆起当时的思考。训练营老师批改作业时看到关键位置有注释也能确认你是真的理解这段代码的作用而不是复制粘贴来的。6.2 提交说明和版本记录如果是通过代码托管平台提交作业建议在提交说明里写清楚这次改了什么。比如第一版完成页面骨架第二版调整响应式断点第三版修复表单校验问题。不需要写长篇大论两三行就够但能让批改方看到实现过程。我实际见过的训练营作业评分里不少导师明确表示在意提交过程的规范化。一次提交就完成的作业和分多次提交、每次都有明确说明的作业在最终评价上的差异是存在的。这从侧面也反映了你有没有版本管理的意识。6.3 给自己的页面做一次逐项检查最后提交前建议打开页面逐项检查一遍这份清单导航栏在所有宽度下是否可用点击锚点是否能平滑滚动作品卡片图片是否正常显示alt 文本是否正确页面在手机宽度下是否出现横向滚动条表单每个输入框是否都能正常输入提交时校验是否生效字体大小是否合理有没有太小或太大的文字点击所有链接确认没有死链这个过程很像考试最后检查答题卡知识点可能都会但粗心大意丢分最可惜。很多“第二周作业”的问题其实都不是难问题而是检查不够仔细。我个人在实际辅导中体会最深的一点是第二周作业的重点从来不是追求一个完美的作品而是通过这次实战把课程里零散的知识点串成一条线。你可能熬夜改了半天布局最后发现只是少了一个 flex-wrap也可能调试一晚上报错结果发现是 script 标签位置不对。这些过程看着浪费时间但每一次排查都能让下一步走得更稳。如果你正在写这类作业不要急着提交先把页面拆成“结构、样式、交互”三层逐层审查一遍大概率能比仓促提交多拿不少分。