前端第二周作业实战：HTML+CSS响应式页面从设计到校验全流程

最近在技术社区闲逛时，经常看到标题写着“第二周作业”的提问帖。这类标题看似简陋，背后往往是一个很典型的场景：某个前端训练营或自学小组，前两周刚讲完 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 id="works"> <h2>我的作品</h2> <div class="work-grid"> <article class="work-card"> <img src="images/work-1.jpg" alt="项目一的界面截图"> <h3>某电商平台界面</h3> <p>使用 Flex 布局实现的响应式商品列表页面。</p> </article> <article class="work-card"> <img src="images/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 属性指向对应输入框的 id：

<form id="contact-form"> <div class="form-group"> <label for="name">姓名</label> <input type="text" id="name" name="name" required> </div> <div class="form-group"> <label for="email">邮箱</label> <input type="email" id="email" name="email" required> </div> <div class="form-group"> <label for="message">留言内容</label> <textarea id="message" name="message" rows="4" required></textarea> </div> <button type="submit">发送</button> </form>

label 和 input 关联后，用户点击“姓名”两个字也能让对应的输入框获得焦点，对键盘输入和移动端触屏操作都更友好。这就是为什么需要 id 和 for 的值保持一致，它们就像是门牌号的匹配关系。

页脚 footer 里一般放版权声明和社交链接，写法比较固定：

<footer> <p>© 2024 我的名字 保留所有权利</p> </footer>

footer 不需要太多花样，重点是语义正确。有些学员喜欢把分享图标堆在 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 单位。默认根字号是 16px，1rem 等于 16px，所以 0.875rem 就是 14px，1.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 属性、type="email" 的格式检查、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 里写的是class="work-card"，CSS 里却写成了.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 type="button">，点击按钮不会触发表单提交事件，自然也就不会触发监听器。反过来，如果按钮在表单外面，点击它不会触发表单提交，也不会有提交事件。

建议在表单交互开发时，先设置一个临时测试逻辑：点击按钮后立即在 Console 里打印一行日志，确认事件触发成功，再继续写校验逻辑。这样能把“事件没绑定”和“校验代码写错”两个问题分开，避免混在一起排查。

6. 提升作业完成度的三个小技巧

作业写完只是及格线，想拿到一个更高的评价，往往体现在一些容易被忽略的细节上。这些技巧不复杂，但很多人不会主动去做。

6.1 注释写清楚，老师看得更轻松

在 CSS 和 JavaScript 里写注释，是一个成本极低但回报极高的习惯。比如：

/* 导航栏固定定位，避免遮挡内容 */ .header { position: sticky; top: 0; }

// 邮箱格式校验，避免用户填写的格式无法正常回复 const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

注释的价值不只是给别人看，更多是给未来的自己看。作业写到后面，你会忘记当初为什么写某条规则。这时注释就像路标，帮你快速回忆起当时的思考。训练营老师批改作业时，看到关键位置有注释，也能确认你是真的理解这段代码的作用，而不是复制粘贴来的。

6.2 提交说明和版本记录

如果是通过代码托管平台提交作业，建议在提交说明里写清楚这次改了什么。比如：第一版完成页面骨架；第二版调整响应式断点；第三版修复表单校验问题。不需要写长篇大论，两三行就够，但能让批改方看到实现过程。

我实际见过的训练营作业评分里，不少导师明确表示在意提交过程的规范化。一次提交就完成的作业和分多次提交、每次都有明确说明的作业，在最终评价上的差异是存在的。这从侧面也反映了你有没有版本管理的意识。

6.3 给自己的页面做一次逐项检查

最后提交前，建议打开页面，逐项检查一遍这份清单：

• 导航栏在所有宽度下是否可用，点击锚点是否能平滑滚动
• 作品卡片图片是否正常显示，alt 文本是否正确
• 页面在手机宽度下是否出现横向滚动条
• 表单每个输入框是否都能正常输入，提交时校验是否生效
• 字体大小是否合理，有没有太小或太大的文字
• 点击所有链接，确认没有死链

这个过程很像考试最后检查答题卡：知识点可能都会，但粗心大意丢分最可惜。很多“第二周作业”的问题其实都不是难问题，而是检查不够仔细。

我个人在实际辅导中体会最深的一点是：第二周作业的重点从来不是追求一个完美的作品，而是通过这次实战把课程里零散的知识点串成一条线。你可能熬夜改了半天布局，最后发现只是少了一个 flex-wrap，也可能调试一晚上报错，结果发现是 script 标签位置不对。这些过程看着浪费时间，但每一次排查都能让下一步走得更稳。如果你正在写这类作业，不要急着提交，先把页面拆成“结构、样式、交互”三层，逐层审查一遍，大概率能比仓促提交多拿不少分。