我第一次认真帮人看“web第一次作业”是在一个周末的晚上。页面内容写得很完整自我介绍、照片、爱好列表全都有打开也能正常显示乍一看挑不出大毛病。可只要把文件换个目录打开或者换台设备再看问题马上冒出来图片集体裂开样式全丢了导航点了没反应。这绝不是个例几乎每个第一次交web作业的人都会踩到其中至少一两个坑。这篇内容不打算讲什么高深框架就沿着“第一份web作业从零到提交”的完整路径把验收逻辑、准备工作、HTML骨架、CSS样式、简单交互和提交前自查全部串一遍。你会发现作业里最难的根本不是技术而是那些“没人明说但一定会被看”的细节。1. 第一份web作业的验收逻辑先看懂“做出来”之外的要求第一次做web作业的人最容易陷入一个误区只要浏览器里能看到页面就算做完了。但站在验收方的角度看一个网页能不能顺利通过看的往往不是“效果好不好看”而是“页面结构是否完整、资源路径是否正确、代码习惯是否规范”。这三个维度里有两个都藏在显示效果后面不打开源码或换目录预览根本发现不了。1.1 大多数作业里不会写明的隐性清单以最典型的“个人介绍页”来说题目通常只写“利用HTML和CSS制作一个个人主页包含照片、自我介绍和联系方式”。听起来很简单实际检查时通常还会涉及这些隐形项首页文件是否命名为index.html是否放在项目根目录HTML文档结构是否完整有没有 声明和根标签中文内容有没有设置字符编码避免打开变成乱码是否合理使用语义化标签而不是从头到尾全是div图片是否使用相对路径换目录后还能不能正常显示页面里的链接是否真的能点击跳转而不是纯装饰样式是写在独立CSS文件里还是全部堆在标签上代码缩进是否整齐标签是否正确闭合这些点不会有老师一条条告诉你但任何一个出问题都可能在验收时被单独拎出来问。我见过不少页面效果做得挺花哨的同学最后因为文件名带了中文、图片用了本机绝对路径导致交上去的压缩包在其他电脑上打不开而重新返工。所以第一份作业与其说是技术测试不如说是“工程习惯”的摸底。1.2 先花五分钟读懂题目里的场景动笔之前先别急着写代码把题目多读几遍。你需要确认几件事题目要求的是纯静态页面还是需要包含少量交互是只需要一个页面还是需要多个页面之间互相跳转有没有明确要求使用某种布局方式比如表格布局、浮动布局或弹性盒布局很多第一次写web作业的人题目里写“包含一个表单”结果做完才发现表单根本没有提交按钮题目里要求“导航栏可以跳转到页内锚点”结果只做了外观没写跳转。这些都属于“做了但没做到位”的典型情况。我的建议是拿一张纸把题目里的动词圈出来包含、实现、跳转、展示、提交每一项都对应一个验收点做完之后对着这串动词逐个核对远比反复刷新页面看效果有用。2. 动手写代码前的准备目录、命名与预览工具第一份web作业最容易被忽略的就是开始写代码之前的环境准备。很多初学者下载好编辑器就开始敲写到一半发现图片引用不对、CSS文件找不到再回头改路径效率极低。准备工作做得好后面能省下大量排错时间。2.1 目录结构从第一秒就保持整洁一个干净的项目目录通常长这样web-first-homework/ ├── index.html ├── css/ │ └── style.css ├── js/ │ └── main.js └── images/ └── avatar.jpg根目录下放首页文件index.html样式统一放进css文件夹脚本放进js文件夹图片放进images文件夹。这样做最大的好处是代码里的相对路径会变得非常直观。比如index.html要引用images/avatar.jpg写images/avatar.jpg就能找到如果当前目录没有images这个子文件夹浏览器就会报404错误。另外所有文件名建议统一使用小写英文字母加连字符比如my-page.html千万不要用中文文件名或带空格的命名。中文和空格在某些环境下会被浏览器自动转码轻则路径对不上重则文件直接无法访问。规范命名不是强迫症而是给未来的自己省事。2.2 编辑器与预览方式的取舍代码编辑器至少要满足三个条件有语法高亮、有行号、能自动补全标签。市面上主流的代码编辑器都能做到关键是别用系统自带的纯文本编辑器写代码。没有语法高亮和缩进辅助标签嵌套很容易乱少了闭合括号也很难一眼看出来。预览方面最简单的做法是双击index.html用浏览器打开。做纯静态页面时这种方式完全够用。但如果页面里涉及通过脚本动态加载文件、浏览器的某些接口调用直接用file协议打开可能会被限制此时可以借助代码编辑器内置的本地预览功能或者启动一个本地静态服务来访问页面。第一次作业基本用不到这一步了解即可。真正要提前练熟的是浏览器自带的开发者工具。打开页面后按F12能看到元素面板、样式面板、控制台和网络面板。写web作业的过程中至少有一半的排错工作要在这里完成。比如页面样式不对优先看元素面板里选中的元素再右侧看实际生效的CSS规则图片加载失败优先看网络面板里请求的URL和返回状态。这些工具比一遍遍刷新页面瞎猜有效得多。3. HTML骨架搭建从一张空白页到完整文档HTML是整个web作业的地基。CSS决定页面长什么样JavaScript决定页面能做什么但HTML决定页面里到底有什么内容、结构是否清晰。第一份作业的HTML通常不难难的是“结构完整”和“语义合理”。3.1 一份可以直接对照的基础骨架下面这段代码是个人介绍页最常见的基础结构省去具体内容后可以作为模板参考!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个网页/title link relstylesheet hrefcss/style.css /head body header h1个人介绍/h1 nav ul lia href#intro关于我/a/li lia href#hobby兴趣爱好/a/li lia href#contact联系方式/a/li /ul /nav /header main section idintro h2关于我/h2 p这里写一段自我介绍。/p /section section idhobby h2兴趣爱好/h2 ul li阅读/li li跑步/li /ul /section section idcontact h2联系方式/h2 img srcimages/avatar.jpg alt我的头像 p邮箱a hrefmailto:exampleexample.comexampleexample.com/a/p /section /main footer p版权信息与备案说明/p /footer /body /html第一行!DOCTYPE html是文档类型声明它告诉浏览器“这是一个标准的HTML文档”。缺少这行浏览器会进入怪异模式页面渲染可能出现预料之外的边距和尺寸问题。html langzh-CN声明页面语言为简体中文一方面方便浏览器正确识别语言另一方面对无障碍阅读也有帮助。head里的meta charsetUTF-8尤其重要。没有它页面里的中文极大概率变成乱码。meta nameviewport可以确保页面在手机上不会默认缩放得又小又挤虽然第一次作业未必要求适配手机但加上这个标签本身就能看出你了解现代网页的基础规范。3.2 语义化标签少用div多用有含义的标签很多初学者习惯一个div走天下整页全是div从外观上看好像没问题但代码读起来非常吃力。html里提供了一系列语义化标签它们本身不给页面带来任何视觉效果却能清晰表达“这块区域是谁”header页面头部通常放标题和导航nav导航区域main页面主体内容区section页面中的独立区块article一篇独立的内容footer页面底部版权、补充信息等语义化标签带来的最直接好处是别人看你的代码时不需要逐行读完也能大致理解页面结构。这也是我从作业评审角度非常看重的一个点用对标签的代码往往说明作者理解页面的信息层级而不只是把内容堆上去。文本内容方面h1到h6是六层标题h1一个页面只保留一次比较合适其余小标题按层级往下用。p是段落ul加li是无序列表需要强调的地方可以用strong或em。第一次作业不要求你把所有标签背下来但常用的这几个应该用对。3.3 图片、链接与相对路径的逻辑图片标签img里有两个属性必须写src指向图片路径alt是图片无法显示时的替代文本。alt不仅仅是为了防裂图更是给屏幕阅读器读的说明这也是基础可访问性的一部分。路径方面第一份作业的常见错误是写绝对路径比如file:///C:/Users/xxx/Desktop/avatar.jpg。这种路径在自己的电脑上没问题但作业交到别人手里绝对路径必然失效。正确做法是使用相对路径它表示“从当前文件所在位置出发如何找到目标资源”。index.html在根目录下想找images文件夹里的图片就写images/avatar.jpg如果css文件夹里的样式文件想引用上一级目录的图片就需要写成../images/avatar.jpg这里的../表示“向上一级”。相对路径唯一需要你养成的好习惯就是保持脑子里的项目目录图景。每次引用资源前先问自己目标文件相对于当前文件在哪个位置养成这个意识比记住所有规则都管用。4. CSS样式与布局盒模型、选择器和“样式不生效”的真相内容结构搭好之后下一步就是用CSS让页面具备基本的视觉效果。第一份web作业中CSS相关的坑往往集中在三件事盒模型理解不清楚、选择器使用混乱、样式写了却不生效。下面拆开讲。4.1 先把盒模型吃透布局才不会失控一个HTML元素在页面上占据的空间由四部分组成内容区、内边距、边框、外边距。从里到外分别对应content、padding、border、margin。打个比方把元素想象成一块快递包装content是盒子里面的物品padding是填充泡沫border是纸箱壁margin是纸箱和旁边纸箱之间的距离。布局问题有一半以上出在这个理解上。给一个元素设置了宽度为300px又加了一个20px的padding和1px的border真正占用的横向空间其实是30020×21×2342px。初学者经常因此出现“明明计算好的布局怎么换行”的困惑。要解决这个问题最实用的做法是给所有元素设置box-sizing: border-box* { box-sizing: border-box; }这样元素的宽度会包含padding和border你设置的width就是元素实际占用的宽度布局时好算得多。4.2 选择器的基本规则与优先级CSS的三种基础选择器分别是标签选择器、类选择器和ID选择器。类选择器用.开头适合很多元素共用同一套样式ID选择器用#开头一个页面里同一个ID应该只出现一次。从优先级来说内联样式最高然后是ID、类、标签。第一次写作业的同学很容易出现“同一个类名样式不生效”的情况。比如先写了.nav a { color: red; }后来又写了.nav { color: blue; }。前一规则是一个作用于a标签的选择器后者作用于.nav容器本身两者不冲突但如果你误以为它们都在给同一个元素上色就会有“样式怎么失灵了”的错觉。排查样式不生效时我自己的顺序是检查选择器是否写对了名称和层级检查属性名有没有拼写错误检查样式文件是否通过link正确引入最后打开开发者工具看目标元素实际计算样式里到底有没有这条规则。大部分“不生效”都逃不出这四步。4.3 用flex完成入门级布局第一次作业里最常见的布局需求有三个导航横向排列、内容垂直堆叠、多个卡片并排。这三个需求学一个display: flex就可以覆盖大部分场景。nav ul { list-style: none; display: flex; gap: 16px; padding: 0; } .box-list { display: flex; justify-content: space-between; }display: flex让容器内部的直接子元素从“从上往下堆”变成“从左往右排”gap控制子元素之间的间距justify-content控制子元素在主轴上的分布方式。初学者经常搞混的是容器和子元素的关系flex属性写在父容器上影响的是子元素的排布而不是写在子元素上。想明白这一点布局就不会越写越乱。为了让整个页面看起来不那么挤可以给主体区域设置一个最大宽度并居中main { max-width: 960px; margin: 0 auto; padding: 24px 16px; }这样页面在宽屏上不会拉得又长又散在窄屏上又能自动收缩。第一次作业做到这些视觉上已经是能看的水平了。5. 让作业“活”起来链接、锚点、悬停效果与基础交互很多第一次写web作业的人会忽略“交互”这件事觉得那是JavaScript的范畴自己还没学就不管了。实际上最低成本的交互早就在HTML和CSS里了只是很多人没把它们的用法组合起来。5.1 锚点跳转一个属性就能实现的导航交互在页面导航里点击“关于我”页面自动滚动到对应的内容区域这种效果完全不依赖JavaScript用锚点就能实现。前面骨架代码里已经出现了这个用法导航链接的href写#intro下方对应区域的id设为intro点击时浏览器就会自动滚动到该区域。这个机制的常见错误有三个一是href里的#后面没写对应id二是页面里根本没有这个id的元素三是id重复浏览器不知道跳哪。锚点跳转虽然简单但它能直接提升页面的完成度也是很多作业评分表里明确列出的“页面内部链接”验收点。5.2 CSS悬停与聚焦低成本的高质量反馈给链接和按钮加上悬停效果页面立刻会显得“用心”很多nav a { color: #fff; text-decoration: none; transition: opacity 0.2s ease; } nav a:hover { opacity: 0.75; }transition让颜色或透明度的变化看起来更平滑而不是瞬间跳变。如果你觉得透明线不够直观也可以换成text-decoration: underline或者背景色变化。这类细节不复杂但非常出效果。还值得做的是:focus样式。当用户用键盘Tab键切换到某个链接时浏览器默认会画一个焦点框如果你为了“美观”把默认焦点样式去掉又不加新的焦点样式键盘用户就会完全失去操作反馈。第一次作业里不需要做得太复杂保留默认焦点样式或者改成更明显的边框就是合格的可访问性处理。5.3 少量JavaScript让表单提交有反馈如果作业里包含表单完全可以写十几行JavaScript让提交行为更完整。以最简单的联系表单为例const contactForm document.querySelector(#contact-form); if (contactForm) { contactForm.addEventListener(submit, function (event) { event.preventDefault(); const name document.querySelector(#name).value.trim(); if (!name) { alert(请输入姓名); return; } alert(提交成功我会尽快回复你); }); }event.preventDefault()的作用是阻止表单默认的提交刷新页面行为这样我们能先检查字段内容再给出反馈。这里不需要依赖任何框架纯原生的几行代码就能让页面表现出“有交互能力”的雏形。注意一点如果JavaScript文件是放在head里引用的执行时页面DOM可能还没加载完稳妥的做法是把script标签放在/body之前或者用DOMContentLoaded事件包一层。6. 第一次作业最容易踩的坑中文乱码、图片裂开和样式消失我看了不少第一份web作业后发现真正让代码“突然失常”的并不是复杂逻辑而是几个基础问题反复出现。这里选取三个最典型的完整还原一下它们出现的原因和排查方式。6.1 中文乱码90%是编码声明缺失打开页面发现所有中文变成“锟斤拷”风格的乱码时第一反应不应该是换电脑而是检查head里有没有这一行meta charsetUTF-8HTML文件本质上是纯文本浏览器需要知道这个文件按什么编码规则解读才能正确显示字符。大多数现代编辑器默认保存为UTF-8编码但如果没有在页面中声明charset浏览器可能默认用其他编码解读中文自然就乱了。解决办法就是补上这行meta然后用支持UTF-8保存的代码编辑器重新保存一次文件。6.2 图片裂开相对路径与文件位置的关系图片显示不出来时先别急着怀疑图片文件损坏。90%的“换台电脑图片就没了”都是因为路径写的是本机绝对路径或者相对路径的层级算错了。排查步骤打开开发者工具的网络面板刷新页面找到请求失败的图片记录查看请求的完整URL对比实际存放路径确认引用位置是index.html引用了它还是css包含的图片引用位置不同相对路径的计算起点就不同修正路径后硬刷新浏览器快捷键通常是CtrlShiftR其中最容易忽略的是第3步。比如css/style.css里写的背景图路径是images/bg.jpg那它的意思是“css目录的上一个目录里的images文件夹”也就是项目根目录下的images。如果css放在css文件夹内而图片也在images文件夹内路径往往需要写../images/bg.jpg。这类错误靠肉眼很难发现但网络面板里所有信息都摆在那里。6.3 样式完全不生效从link到选择器逐层排除样式一点都没生效最常见的原因是样式表没有被正确引入。检查顺序可以这样走确认html里link relstylesheet hrefcss/style.css的路径与文件实际位置一致打开网络面板看style.css请求状态是200还是404如果200但还是没样式打开开发者工具的元素面板检查目标元素的计算样式里有没有预期的规则如果计算样式里没有查看是否有更高优先级或更靠后的规则覆盖了它其中有一个很隐蔽的问题link放在head里时如果CSS文件中语法有错误浏览器可能会忽略损坏位置之后的规则。这时需要回到CSS文件里仔细检查大括号是否成对、分号是否完整。有时候只是少了一个}后面所有规则就全部失效了这一点排查时很容易被忽略。6.4 提交前用一张表做最终自查写完之后不要急着打包提交过十分钟再回来按下面这张表逐项过一遍检查项具体操作常见问题文档结构查看源码确认DOCTYPE、html、head、body齐全缺少DOCTYPE导致渲染模式异常字符编码页面是否有charset声明中文乱码文件命名全小写英文、无空格、无中文文件名导致资源加载失败图片路径用相对路径换目录后仍可显示绝对路径在别人电脑上失效链接跳转点击导航链接确认锚点可定位href与id不一致样式生效开发者工具中检查计算样式CSS路径错误、选择器冲突表单交互提交表单时给出反馈缺少提交按钮或JS报错代码整洁缩进一致、标签闭合、删除临时注释嵌套混乱影响阅读这张表现在看起来条目很多实际操作一遍之后就会变成肌肉记忆。我第一次做web作业时没少在图片路径上吃亏交上去的作业在老师电脑上图片全部裂开那次之后才真正学会了“每次引用资源都先想相对路径”这个习惯。第一份作业可以笨拙可以样式朴素但基础规范和自查意识是真的值得从第一次就开始建立的。