最近后台经常有人问我“web第3次作业怎么做”，有的大二学生马上要交，有的自学前端卡在第3个阶段的练习上。这个标题看起来平淡，但只要你做过几次课程设计，就会知道“第3次作业”往往是第一道分水岭：第1次作业可能只是写一个会显示的网页，第2次作业是把样式调得像样，到了第3次，通常开始引入一点交互逻辑，比如表单校验、点击弹窗、动态渲染数据。很多人第一次在这里翻车，也说不出自己到底差在哪。

这篇我打算不按教科书的方式讲，而是直接以一个做过这类作业、也帮人改过不少作业的过来人身份，把“web第3次作业”从拆题、选方案、写结构、调样式、加交互到提交避坑整个流程完整走一遍。你拿到的作业题目可能不是一模一样，但核心考察点八九不离十，把底层逻辑吃透了，不管题目怎么变形都能应对。

1. 先搞清楚这次作业到底考什么

很多人拿到作业题目就开始查代码，看到某个教程的页面好看就照着抄，结果抄完不知道自己写了什么，老师一问就露馅。正确的顺序是先把题目翻译成考点，再决定怎么写。

1.1 阶段定位：第三次作业的前后逻辑

在绝大多数Web开发入门课程里，作业难度是按阶段爬坡的。第1次作业通常只要求“用HTML把页面结构写出来”，甚至不要求好看，目的是确认你认识标签、会用标题段落列表。第2次作业加上CSS，开始考察选择器、盒模型、颜色字体这些基础样式能力。到了第3次作业，课程大概已经讲完CSS主流布局（Flex、Grid）以及JavaScript最基础的DOM操作和事件处理，所以作业里会同时出现三种能力要求：结构、表现、行为。

这件事用写作文来类比就特别清楚。第一次作业是给你一个提纲，你把句子填进去；第二次是让你把句子打磨通顺、段落排整齐；第三次是要求你的文章能表达观点、有逻辑推进。不会还有人认为“第三次作业就是找一个漂亮模板换换字吧”？换模板只会让你越来越被动，因为你自己写的页面换了字也不一定能跑通，更别提应付后续的项目课。真正要练的，是把一个需求拆成“这页有什么、长什么样、能干什么”三个问题，再分别用三种语言去回答。

还有一个容易忽略的点：这个阶段老师并不指望你做得多惊艳，而是想看到你的“可读性”和“规范意识”。同样的功能，代码命名混乱、缩进随意、CSS全部堆在style属性里，和结构清晰、文件分离、注释得当，在水平上是两个维度的差距。第3次作业恰恰是养成这些习惯的最佳时机，之后再写大项目就很难改了。

1.2 常见考法和隐藏评分点

我大概总结了一下，这类作业常见的题目方向有这些：

• 个人主页或作品展示页，要求有导航、内容区、底部信息
• 带表单的页面，要求实现输入校验和提交反馈
• 数据展示页面，要求从静态数组或表格中渲染内容，支持简单筛选
• 图片轮播或Tab切换之类的交互组件
• 一个多区块页面，要求移动端能正常浏览

不同题目的表面要求不同，但隐藏评分点高度一致。我列一张表给你参考：

看出重点了吗？老师的第一道验收门槛其实是“页面打开不报错，功能点都能点”，第二道才是“美观和专业性”。很多同学把时间全花在调一个渐变背景上，结果表单提交后控制台飘红一片，这是典型的抓错重点。先把功能做完整，再去抠视觉效果，这个顺序不要颠倒了。

2. 方案选型：原生三件套才是最优解

当作业明确要求做交互时，第一反应是“要不要用框架”的同学不在少数。我见过有人第3次作业就直接引Vue的，也见过用各种UI库拼出一个看起来很唬人的页面。最后得分反而不如老老实实写原生代码的人高，为什么？

2.1 为什么不建议一上来就用框架

原因倒不是老师保守，而是这个阶段引入框架会带来三个实际问题。

第一，原理讲不清楚。作业通常还要写设计说明或者现场演示，老师会顺手问一句“你这段数据是怎么渲染上去的”。用框架时你只能回答“我调了接口、把数组赋给响应式变量”，至于模板编译、虚拟DOM、生命周期，你其实没学透，被追问问到第三层就卡住了。用原生DOM操作，你就必须知道如何创建节点、修改文本、绑定事件，每一个动作都在你的掌控范围内。

第二，依赖和部署容易出幺蛾子。引CDN链接你没备案也用得好好的，但如果离线评审或者教室网络差，页面可能直接白屏。用原生三件套，一个文件夹拷到哪里都能跑，这是在给自己降低风险。

第三，作业粒度太小，框架优势发挥不出来。框架是为“状态多、组件多、复用强”的大型应用准备的。第三次作业撑死一个页面加几个交互，用框架等于杀鸡用牛刀，还要写一堆配套配置，折腾半天不如直接写三行原生代码利索。

说到这你可能会问，那什么时候可以学框架？至少先把原生JS的“获取元素—绑定事件—操作属性/内容”这套闭环彻底搞熟，再进框架，你会觉得概念都变得好理解得多。否则你学框架的时候根本不知道它在替你做什么，遇到Bug就只能靠猜。

2.2 目录结构与代码组织

就算只是一个小页面，我也建议从一开始就按照“项目”的方式去组织。不是说非要用构建工具，但文件该分开就分开，命名该规范就规范。一个标准的作业目录大概长这样：

web-third-homework/ ├── index.html ├── css/ │ └── style.css ├── js/ │ └── main.js └── images/ ├── avatar.jpg └── banner.png

index.html 放在根目录，CSS和JS各归各的文件夹，图片集中在images里。这么做的好处有两个：一是老师打开你的作业时一目了然，二是你自己调试的时候不需要在一大堆代码里翻来翻去。文件名不要用中文，不要带空格，浏览器对带中文的文件路径很容易出错；统一用英文小写加短横线，比如 style.css、user-form.js。

HTML里引用外部文件的写法也顺手给一下：

<!-- 放在 head 标签内，用于引入 CSS --> <link rel="stylesheet" href="css/style.css"> <!-- 放在 body 标签的最后，用于引入 JS，避免阻塞页面渲染 --> <script src="js/main.js"></script>

这里有个新手最容易犯的错误：script标签放到了head里，然后脚本里写document.getElementById去取页面元素，结果页面还没解析完，元素根本不存在，代码直接报错null。把脚本放到body末尾，至少能避开这一类“元素找不到”的尴尬。

3. 实操过程：三段式带你完成一个高分页面

这一部分我就按照“结构—表现—行为”的顺序，手把手带你写完一个典型的第3次作业页面。假设题目是“制作一个个人主页，包含导航、展示卡片、技能数据表格、联系表单，表单需要输入校验和提交反馈”。我用这个例子把所有关键点过一遍，题目不同也能套用同样的方法论。

3.1 第一步：把结构写对（HTML语义化）

不要一上来就写CSS，也不要想着一口气写完所有代码。先拿出五分钟，在草稿纸上画一下页面草图：顶部一个导航栏，左边或中间是个人信息卡片，下方是技能表格，再往下是联系表单，最底部是版权信息。把这个当成大纲，然后按大纲顺序填HTML。

完整骨架参考如下：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的个人主页</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header class="site-header"> <h1 class="logo">小王的个人主页</h1> <nav class="main-nav"> <ul> <li><a href="#intro">个人简介</a></li> <li><a href="#skills">技能</a></li> <li><a href="#contact">联系我</a></li> </ul> </nav> </header> <main class="container"> <section id="intro" class="intro-card"> <img src="images/avatar.jpg" alt="头像照片" class="avatar"> <div class="intro-text"> <h2>你好，我是小王</h2> <p>一名正在学习Web开发的在校学生，热爱用代码实现有趣的想法。</p> </div> </section> <section id="skills" class="skills-section"> <h2>掌握技能</h2> <table class="skills-table"> <thead> <tr> <th>技能名称</th> <th>熟练程度</th> <th>最近更新时间</th> </tr> </thead> <tbody> <tr> <td>HTML + CSS</td> <td>熟练</td> <td>2025-01-10</td> </tr> <tr> <td>JavaScript</td> <td>学习中</td> <td>2025-02-08</td> </tr> <tr> <td>Git</td> <td>入门</td> <td>2025-02-20</td> </tr> </tbody> </table> </section> <section id="contact" class="contact-section"> <h2>联系我</h2> <form id="contact-form" class="contact-form"> <div class="form-row"> <label for="name">姓名</label> <input type="text" id="name" name="name" placeholder="请输入你的姓名" required> </div> <div class="form-row"> <label for="email">邮箱</label> <input type="email" id="email" name="email" placeholder="请输入邮箱" required> </div> <div class="form-row"> <label for="message">留言内容</label> <textarea id="message" name="message" rows="4" placeholder="想对我说的话..." required></textarea> </div> <button type="submit" class="submit-btn">提交留言</button> </form> <p id="form-status" class="form-status"></p> </section> </main> <footer class="site-footer"> <p>&copy; 2025 小王 · 基于原生HTML/CSS/JavaScript构建</p> </footer> <script src="js/main.js"></script> </body> </html>

这段结构里有几个值得说透的地方。

第一，语义化标签。header、nav、main、section、table、form、footer这些标签不是随便用的，每一个都告诉浏览器和搜索引擎这块区域是什么角色。对比直接用一堆div拼出来的页面，你的代码可读性和维护性会好很多。尤其是表格，用table而不是div拼格子，原因不只是语义，还因为table天然拥有表格的列对齐逻辑，用div去模拟表格行列在响应式下简直是灾难。

第二，表单控件的name属性。id是给JavaScript用的，name是给表单提交用的。就算你不打算真正把数据提交到服务器，也应遵循这个约定。以后学Ajax提交表单时，表单序列化拿到的键名就是name，没有name的控件不会被提交，这是很多线上问题的坑源之一。

第三，label的for属性。for的值等于对应控件的id，这样点击文字就能聚焦到输入框。这个细节看起来小，但对可访问性和易用性的提升很实在，也是作业评分里低调的加分项。

写HTML时我习惯一次性写出完整的结构，包括所有静态文字、图片占位、表格数据，然后再考虑下一步。因为CSS选择器依赖这个结构，JavaScript也依赖这个结构，基础不牢，后面加多少装饰都像在沙滩上盖楼。

3.2 第二步：把页面做美（CSS布局和细节）

结构写好后，打开页面会看到一个排列整齐但有点原始的文档流页面。这时候CSS要解决的核心问题，是把元素从“从上到下堆叠”变成“按设计稿摆在该在的位置”。

CSS代码放在css/style.css中，核心段如下：

/* 全局基础 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 1.6; color: #333; background-color: #f5f7fa; } .container { max-width: 960px; margin: 0 auto; padding: 20px; } /* 导航栏 */ .site-header { display: flex; justify-content: space-between; align-items: center; background-color: #2c3e50; padding: 12px 24px; } .main-nav ul { display: flex; gap: 20px; list-style: none; } .main-nav a { color: #ecf0f1; text-decoration: none; padding: 6px 10px; border-radius: 4px; transition: background-color 0.3s; } .main-nav a:hover { background-color: #34495e; } /* 个人卡片区 */ .intro-card { display: flex; gap: 24px; background: #fff; padding: 32px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); margin-top: 24px; } .avatar { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; } /* 表格样式 */ .skills-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; margin-top: 12px; } .skills-table th, .skills-table td { border: 1px solid #e0e4e8; padding: 12px 16px; text-align: left; } .skills-table th { background-color: #f0f2f5; font-weight: 600; } /* 表单样式 */ .contact-section { background: #fff; padding: 32px; border-radius: 12px; margin-top: 24px; } .form-row { margin-bottom: 18px; } .form-row label { display: block; font-weight: 600; margin-bottom: 6px; } .form-row input, .form-row textarea { width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; font-family: inherit; } .form-row input:focus, .form-row textarea:focus { outline: none; border-color: #3498db; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15); } .submit-btn { background-color: #3498db; color: #fff; border: none; padding: 12px 28px; border-radius: 6px; font-size: 16px; cursor: pointer; transition: background-color 0.3s; } .submit-btn:hover { background-color: #2980b9; } /* 底部 */ .site-footer { text-align: center; padding: 24px; color: #888; } /* 响应式 */ @media (max-width: 640px) { .site-header { flex-direction: column; gap: 8px; } .intro-card { flex-direction: column; align-items: center; text-align: center; } }

这份CSS其实把一个关键布点思路体现得很明显：能用Flex解决的问题就不要动手写float或者inline-block。导航栏用flex来水平排列 logo 和导航菜单，个人卡片区用flex实现图和文字左右布局，表格宽度用百分比撑满容器。Flex的align-items、justify-content这两个属性负责垂直和水平对齐，一旦会用，日常百分之八十的布局需求都能解决。

要注意的是box-sizing: border-box。默认情况下，一个设置了width为100%的输入框，再加上padding和border，实际宽度会超过容器，导致页面出现横向滚动。加了border-box之后，padding和border被算进width内部，这行代码我在所有项目里都会放在最前面，可以说是最性价比最高的全局CSS规则之一。

做样式时有两个细节最容易影响观感。第一个是字体栈：body里写“PingFang SC, Microsoft YaHei, sans-serif”是为了适配苹果和Windows两套系统，不加的话容易出现不同电脑上显示效果差异很大的情况。第二个是表单输入框的focus状态，这行box-shadow和边框变色看起来很不起眼，却能让整个表单的高级感提升一个档次——用户知道自己点到了哪里，这是交互设计的基本礼仪。

媒体查询是移动端友好最重要的一个环节。我写的@media (max-width: 640px)里，把导航改成了纵向排列，把卡片改成了居中纵向排列。这个写法在老师用电脑演示或者屏幕较小时，都不会出现元素重叠或溢出。第3次作业只要做到了这种程度的响应式，就超过了同阶段大多数同学。

3.3 第三步：让页面活起来（JavaScript交互）

结构有了、模样有了，接下来就是整个作业的分水岭：交互逻辑。这一步也是“很多人觉得会了，一写就废”的重灾区。

我的main.js代码如下：

// 获取表单相关元素 var form = document.getElementById('contact-form'); var statusText = document.getElementById('form-status'); // 校验邮箱格式 function isValidEmail(email) { var pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; return pattern.test(email); } // 处理表单提交 form.addEventListener('submit', function (event) { event.preventDefault(); var nameInput = document.getElementById('name'); var emailInput = document.getElementById('email'); var messageInput = document.getElementById('message'); var nameValue = nameInput.value.trim(); var emailValue = emailInput.value.trim(); var messageValue = messageInput.value.trim(); if (nameValue === '') { statusText.textContent = '请填写姓名'; statusText.className = 'form-status error'; nameInput.focus(); return; } if (!isValidEmail(emailValue)) { statusText.textContent = '请填写有效的邮箱地址'; statusText.className = 'form-status error'; emailInput.focus(); return; } if (messageValue === '') { statusText.textContent = '请填写留言内容'; statusText.className = 'form-status error'; messageInput.focus(); return; } // 所有校验通过后的模拟提交 statusText.textContent = '提交成功，感谢你的留言！'; statusText.className = 'form-status success'; form.reset(); });

这段代码的逻辑非常直白，但踩过的坑基本都包含在注释和写法里了，拆开讲几个关键点。

事件监听的addEventListener是首选方式，而不是在HTML里写οnclick="xxx()"。两者的区别在于：用addEventListener，逻辑和结构分离，后续维护只改JS文件，不需要去HTML里找函数名；更重要的是，addEventListener可以给同一个元素绑定多个处理函数，而onclick赋值会把之前的处理函数覆盖掉。从第3次作业开始，请像记住“饭前洗手”一样记住用addEventListener。

为什么监听submit而不是在提交按钮上监听click？因为表单提交的触发方式不止“点按钮”这一种——在输入框里按回车也会触发submit，用点击事件会漏掉这种情况。用submit监听，并以event.preventDefault()阻止默认提交动作，就有了一个统一且正确的拦截时机。这个细节非常小，但它是“会不会写正规前端”的一个标志性区别。

再看校验逻辑。HTML里虽然已经写了required，但前端校验绝不能只依赖浏览器自带的约束校验，因为required的提示样式在不同浏览器里不统一，而且当你想在同一个区域集中显示友好提示时，浏览器默认行为反而碍事。所以我在JS里手动检查每一项，用trim()去掉首尾空格，避免用户只输入一堆空格还校验通过。

邮箱校验用了正则表达式。新手可能觉得这个正则怪吓人的，其实它的意思就是：开头是一串字母数字或._%+-，然后有一个@，中间是域名，最后是至少两个字母的顶级域名。不要在作业里自己写十几行if去判断有没有@，有没有点，正则一行搞定且逻辑更完整。

最后是form.reset()，这个调用会把表单恢复到初始状态。很多新手会在提交成功之后手动把每个输入框的value清空，代码啰嗦不说，还容易漏掉下拉框或单选框的状态。reset方法一步到位，这是标准做法。

除了表单交互，如果你作业里还需要轮播图或者Tab切换，核心思路也是同一套：定义一个状态变量（比如currentIndex），通过监听按钮点击来改变状态，再根据状态去更新对应DOM元素的样式或位置。这里就不展开写每一个组件了，掌握了事件和DOM操作这两板斧，花点时间都能写出来。

3.4 联调与自查清单

写完不等于做完。把代码全部拼好以后，我习惯打开浏览器走一遍完整的“用户流程”，对照下面的清单逐项检查：

• 页面能否正常打开，控制台有没有红色报错
• 导航链接能不能跳到对应区块
• 图片能不能正常显示，右键图片查看是否有裂图
• 表单不输入任何内容直接点提交，是否给出友好提示
• 输入错误的邮箱格式，是否有对应报错
• 输入全部合法内容后提交，是否显示成功信息，表单是否重置
• 缩小浏览器窗口到手机宽度，页面是否发生重叠或出现横向滚动条
• 快速点击多次提交，会不会出现重复提交或异常状态

这个清单看起来琐碎，却能在交作业前帮你拦截掉至少一半的翻车现场。我见过太多人交了“自己觉得写完但其实一次都没运行过”的作业，图片挂了、表单没反应，这些问题只要点开页面三秒钟就能发现，但是因为没做完整检查，最后还是变成了一个个红叉。把检查当成写作业的必要组成部分，不是一个可选项。

4. 提交前后：这些坑我当年都踩过

很多问题不是不会写，而是不知道哪里出了问题。这一节我把第3次作业阶段的典型故障集中整理出来，按“现象—原因—解决”的模式写，你遇到问题直接对号入座。

4.1 常见问题速查表

这张表覆盖了高频问题中的百分之八十。每次作业总有同学栽在同样的坑里，而这些问题几乎都能在几分钟内定位并修复。别让低级错误掩盖了你真正想展示的能力。

4.2 让人崩溃的三类错误排查思路

遇到Bug时，最忌讳的就是像无头苍蝇一样乱改代码。我建议养成“分文件定位”的思维习惯：先判断错误属于HTML、CSS还是JavaScript。

页面内容出现了但位置不对、样式不对，那问题大概率在CSS。先打开浏览器开发者工具，找到元素并选中它，右侧样式面板会显示这个元素被哪些规则命中。如果真的存在冲突规则，你会看到某条样式被划了删除线，说明被更高优先级的规则覆盖了。这个时候要么提高选择器权重（比如用类选择器而不是标签选择器），要么检查有没有在多个位置重复定义同一个类的样式。

页面完全没有内容或者白屏，优先级最高的事情是打开Console看报错。看到一个红色的Uncaught TypeError: Cannot read properties of null，基本就是你的脚本尝试获取一个不存在的元素。原因是常见的两种：脚本放在head里导致执行时DOM还没加载完，或者ID拼写错误。前者把script放到body末尾就好，后者仔细比对你引用的ID和HTML里写的id。

还有一种特别隐蔽的情况：看起来代码没问题，但页面展示的还是旧效果。这种通常是浏览器缓存了CSS或JS文件。在文件路径后面加一个版本参数，比如style.css?v=2，或者直接强制刷新（Windows用Ctrl+F5，Mac用Cmd+Shift+R）就能解决。自己在本地调试建议开无痕窗口，可以避免很多缓存相关的“灵异事件”。

4.3 快速提分的小细节

功能都通了之后，我还会花半小时做一轮“表面工程”优化，因为同样功能的情况下，书面整洁度真的会影响第一印象。这些小细节包括：

• 每个section区块加一个标题层级关系，h1只有一个，h2按区块排列，不要跳级
• 图片加alt属性，就算是一张装饰性图像也写个简单的描述
• 表单的label与input用for和id关联
• 代码缩进统一用两个空格或四个空格，不要混着来
• 在关键JS函数前面加几行注释，说明这个函数干什么用
• CSS里给同一类样式分区，用注释标注header区、footer区
• 删除代码里调试用的console.log，避免因为忘记删而暴露出试探过程

这每一项单独拎出来都不难，但是组合在一起，老师打开代码文件的第一观感就完全不一样了。代码也是给人看的，观感好加上功能完整，分数自然不会低。

5. 一些个人使用习惯与扩展方向

写作业的目标不只是交差，更要通过每一次练习巩固可迁移的技能。我把自己这几年做前端小项目时沉淀下来的工作习惯放在这里，希望你能提前养成，而不是等到写团队项目时才着急。

5.1 我平时写网页的效率习惯

第一，写代码之前一定先在纸上画草图。哪怕是三分钟的画框式草稿，也会让之后的结构清晰很多。不要觉得画图浪费时间，省掉后期来回改结构的痛苦，效率反而更高。

第二，本地调试尽量用一个本地服务器环境，而不是直接双击打开index.html。直接双击使用的是file://协议，在加载外部JSON或者使用某些浏览器API时会受到限制。最简单的启动方式是装一个VS Code的Live Server插件，右键Open with Live Server即可；或者终端里跑一行Python命令：

python -m http.server 8080

然后在浏览器打开 http://localhost:8080 ，能看到你的目录列表，点进index.html就是正常访问效果。这个习惯能让你提前规避很多文件协议下的怪问题，同时模拟了真实部署环境。

第三，写JavaScript时多使用浏览器开发者工具的Element和Console面板。不要用alert调试，alert会阻塞页面交互，体验极差；在代码里加console.log打印关键变量的值，才是正常调试姿势。观察Console由红变干净，是代码“从有问题到没问题”的最直观证据。

第四，哪怕只是一个小作业，也值得放进版本管理里。装一个Git环境，在项目根目录执行git init、git add .、git commit -m "third homework"，之后你改坏了代码还能从容回退，这比手动复制多个带日期后缀的文件强一百倍。这个动作看起来是“额外负担”，但它会在你第N次改错代码时救你一命。

5.2 这页作业还能继续升级成什么

如果基础功能已经稳稳完成，时间还充裕，我建议按下面的方向做一个“加赛项”，既巩固知识又提升作业的完成度。

把静态的表格数据改成用JavaScript数组渲染。在JS里定义一个skills数组，里面放几个对象，然后遍历数组生成表格行。这比在HTML里写死表格行更能体现JavaScript的数据驱动思路，你也能在实际操作中体会到“数据展示逻辑”是怎么一回事。

给表单加一个remember me的效果，用localStorage把用户输入的昵称和邮箱存下来，下次打开页面时自动填充。这个功能的实现简单，只要会用localStorage.setItem和getItem，就能把体验感拉高一个档次，而且这是很多真实网站都在用的交互。

还有其他可以尝试的方向：

• 加一个返回顶部的按钮，监听window的scroll事件，动态显示或隐藏按钮
• 把多个卡片数据写成一个对象数组，点击卡片时通过重建内容实现一个简单的详情切换
• 给页面加上深色模式，用CSS变量和一段简单的class切换实现主题变化

这些扩展方向其实都没有跳脱“HTML结构+CSS样式+JavaScript交互”的框架，只是在熟练程度上更进一步。如果你做完了基础任务还能做到其中一两个，无论是自己心里的成就感还是老师的评分，都会有不同。

最后再分享一个真实的经验

我到现在还记得自己第三次作业那个页面：运行起来后，表单校验怎么都过不了，怎么改都是提示邮箱格式不对。后来发现是我把正则里的@符号写成了中文全角@，那一刻真的又气又笑。从那以后我养成了一个习惯，凡是代码里出现对标点符号、引号、圆括号可疑的地方，第一件事先切成英文输入法再检查一遍。所以如果你也遇到“代码和教程一模一样但就是跑不通”，先别怀疑人生，去检查标点符号是不是在中文状态下输入的，这个概率比你想象的高得多。

写作业这件事，说到底是在和自己较劲：同样的功能，能不能让自己的代码更干净，让页面的每一个细节都经得起推敲。把每一次作业当成一个小项目来做，等你真正进入实习岗位的时候，你会发现当初那些看似傻乎乎的坚持，全都在为你省时间。