★ FEATURED ARTICLE 第二次HTMLCSS作业往往是前端入门路上第一道正式的坎。第一次作业可能只是写几个标签、改两段样式到了第二次通常就要完整做一个静态页面了——导航栏、图文列表、表单、页脚……要求一下子多了不少。今天这篇就跟你说说面对这种“web前端第二次作业”正确的打开方式是什么以及我作为过来人踩过哪些坑、总结过哪些套路。我会按一个完整的实操流程来讲先讲拿到作业后怎么拆需求再讲HTML结构怎么搭才规范然后讲CSS布局和样式的核心用法接着专门花一章讲样式“不生效”的排查思路最后给你一份提交前的自查清单。文章里所有示例都是可以直接照抄的你抄完再按自己的内容改就能少走很多弯路。1. 动手写代码之前把作业需求拆成一页纸1.1 “读完题目”比“会写代码”更重要第二次作业最容易翻车的地方不是技术不会而是需求没看明白就开写。比如题目要求做“个人主页”有的同学直接做了个“产品介绍页”结构全不对再比如要求“包含表单页面”结果只做了展示页注册按钮点了没反应直接扣分。我的习惯是把作业要求里的每一条单独拎出来转成一个个可以验收的小功能。你可以在草稿纸上画一张这样的表题目要求原话我理解为对应实现方式页面主题明确有清晰的标题层级一眼知道是讲什么的h1、header、title包含导航栏顶部有链接可跳转到页面不同分区nav a 锚点至少三张图片图片不裂开、有替代文字img alt 合理路径有信息录入区域可提交姓名、邮箱等字段form input label使用外部CSS样式独立成文件不用内联style引入css/style.css页面美观颜色统一、间距合理、没有溢出错位色板变量 Flex布局把这张表拍下来或者贴在屏幕边上写代码的时候随时对照。别小看这一步它能让你少做很多无用功。1.2 在纸上画线框图用“盒子思维”拆页面HTML和CSS最核心的想法是把整个页面看成一层一层摞起来的“盒子”。每个盒子有自己的宽、高、内边距、外边距和边框。所以动手写代码之前强烈建议你拿一支笔在纸上先画一个线框图。不需要画得多好看就是把页面的轮廓画出来。拿“个人主页”举例通常长这样顶部网站标题 导航栏横排链接中部一个展示照片和简介的横幅区域中部三列卡片每张卡片是一段介绍或一个项目底部版权信息和社交链接这一步最大的价值是让你提前知道页面应该分成几块、每块里面有什么、哪块和哪块是并列关系。等你写HTML的时候其实就是在把这些盒子一个个填进去写CSS的时候就是给这些盒子设置位置和外观。线框图即是你的施工图。1.3 目录结构与命名从第一次作业就养成好习惯很多同学第一次写前端习惯把所有代码堆在一个index.html里CSS全写在style标签里图片直接丢在桌面。这次真的别再这样了。推荐的最小目录结构是这样my-project/ ├── index.html ├── css/ │ └── style.css └── images/ ├── avatar.jpg └── project-01.png这样的好处有三个作业交给老师后对方双击index.html就能正常打开图片不会因路径问题全部裂掉。CSS和HTML分离是第二次作业的硬性要求——至少在我见过的大多数课程里“外部样式表”是明确扣分项对应点不分离直接扣分。后续你学JavaScript、学了需要打包构建的项目这个结构习惯能无缝迁移。命名上HTML文件一般就叫index.html这是默认首页图片文件名别用中文、别带空格统一用英文小写加连字符比如about-me.png而不是“我的头像.png”。很多在线代码托管平台和服务器对中文文件名极不友好这个坑现在避开以后能省很多事。2. HTML不要写成“div套娃”标签选型与结构规范2.1 语义化标签不只是“显得专业”第二次作业筛选优秀的标准往往不是页面多炫而是结构多清楚。所谓“语义化”就是“用合适的标签表达内容的本意”。拿导航栏举例新手最喜欢写div classheader div classnav a href#首页/a a href#项目/a /div /div看着没毛病但浏览器、搜索引擎和屏幕阅读器都不会认为这一组链接是“导航”。换成语义化标签之后就清楚多了header nav a href#home首页/a a href#projects项目/a /nav /header页面主体同理。一段独立完整的文章内容应该用article一个侧边栏应该用aside页脚用footer。这些都是HTML5里现成的标签为什么放着不用呢还有一个很容易被忽略的细节一个页面里h1标题只能有一个。h1相当于文章的“主标题”搜索引擎据此判断页面主题。很多同学一上来写好几个h1虽然页面看着没区别但在语义上等于一篇论文有好几个题目很混乱。建议的结构是“h1整个页面主题→ h2每个板块标题→ h3板块里的小标题”逐级往下不要跳级。2.2 图片、链接和路径作业里扣分最密集的地方图片和链接看着简单实际上我第一次看到学生作业时最常见的bug就是“图片显示不出来”和“点击链接没反应”。先说图片。img标签里有三个属性要养成肌肉记忆img srcimages/avatar.jpg alt个人头像照src是图片路径用相对路径从当前HTML文件的角度去找文件。alt是图片无法加载时显示的文字也是屏幕阅读器读给视障用户的内容。这个属性是很多作业评分表里的验收点别留空。width/height先别急着写死在HTML里放到CSS里管更灵活。再说链接。导航里的a标签除了href#这种占位写法更规范的姿势是使用锚点跳转。比如导航里的“项目”希望跳到页面中间的项目板块就可以这样写nav a href#projects项目/a /nav对应的板块上加一个idsection idprojects ... /section这样点导航就会自动滚动到对应区域。注意多个链接不能共用同一个idid在同一个页面里必须唯一。2.3 表格和表单第二次作业里最容易被写乱的两种东西第二次作业经常要求做一个表单或表格很多同学是用div硬拼出来的其实HTML原生标签就够了而且代码量更少、结构更清晰。表单的核心结构长这样form action# methodpost label forname姓名/label input typetext idname nameusername placeholder请输入姓名 label foremail邮箱/label input typeemail idemail nameemail placeholderexampleemail.com button typesubmit提交/button /form这里有个新手极容易踩的坑label的for属性要和input的id完全一致比如forname对应idname。这样点击“姓名”这几个字时对应的输入框会自动获得焦点体验好评分也容易拿。表格的核心结构长这样table thead tr th scopecol项目名称/th th scopecol完成时间/th /tr /thead tbody tr td个人主页/td td2024-05-20/td /tr /tbody /tablethead包表头tbody包数据行th是表头单元格td是普通单元格。表格的边框和间距不要用HTML属性写比如border1而是放到CSS里控制这也是外部样式表的价值体现。2.4 class和id命名让老师一步看懂你的代码命名这件事很多同学不重视。随手写classbox1、classbox2或者classa、classb代码能跑但毫无信息量。我自己检查和改作业时最怕看到这种命名因为完全猜不到这个元素是干嘛的。推荐的做法是“内容导向命名”这个元素是什么就叫什么。不推荐推荐说明box1nav一看就知道是导航content2project-card项目卡片的容器redwarning按含义命名而不是按颜色leftsidebar按角色命名而不是按位置命名的价值在单人小作业里不明显但等你写复杂页面或者跟同学合作开发时这一条就是“代码能不能维护”的分水岭。而且很现实的一点是规范的命名在作业评分里通常会被单独表扬。3. CSS别死记硬背选择器把布局逻辑串起来理解3.1 选择器搞清楚“谁在改谁”比记住一大堆规则更关键CSS的语法核心只有一句话选择器 声明块。选择器决定了“我要改页面上哪些元素”声明块决定了“我要把这些元素改成什么样”。第二次作业最常用的选择器就这几类/* 元素选择器选中所有p标签 */ p { color: #555; } /* 类选择器选中classnav的元素 */ .nav { display: flex; } /* id选择器选中idheader的元素 */ #header { background: #f8f9fa; } /* 后代选择器选中导航里面的所有a标签 */ .nav a { text-decoration: none; margin-right: 16px; }很多同学搞不清“类选择器写点”和“id选择器写井号”的来历其实很好记class在英文里是“类”你给它起名字相当于打个标签用点号表示id是“身份证号”全页面唯一用井号表示。选择器权重是另外一个常问的问题。简单记一个规则id 类 元素。比如p idintro classtext一行文字/p#intro { color: red; } .text { color: blue; } p { color: green; }最终这行文字是红色因为id选择器权重最高。这条规则在排查“为啥我写的样式没生效”时特别有用后面专门说。3.2 盒模型页面排版错乱的九成原因都在这里所有HTML元素都是“盒子”每个盒子从内到外一共四层内容区content、内边距padding、边框border、外边距margin。新手最常问的问题是“为什么我设置了宽度元素的实际宽度却比预期大”。我们来看一个常见的翻车现场div classbox内容/div.box { width: 300px; padding: 20px; border: 5px solid #333; }这个盒子的实际占用宽度是多少很多人以为是300px但其实按默认的box-sizing: content-box来算是300内容宽 20*2左右内边距 5*2左右边框 350px这一下就比预期宽了50px如果旁边还有别的盒子布局就会错乱。解决办法是把全页面统一改成“边框盒”模型* { box-sizing: border-box; }这样上面那个盒子不管padding和border怎么加实际宽度都固定是300px。border-box在真实项目里的使用率几乎是100%我强烈建议把它当成默认习惯而不是需要刻意记忆的知识点。3.3 Flex布局解决“怎么排成一排”这个经典问题第二次作业常见的布局无非这么几种水平导航、三列卡片、图片文字并排。这些用传统float也能做但容易踩塌陷的坑用Flex布局几乎是一行代码的事。三列卡片的核心代码div classcards div classcard卡片一/div div classcard卡片二/div div classcard卡片三/div /div.cards { display: flex; gap: 20px; /* 卡片之间的间距 */ justify-content: space-between; } .card { flex: 1; /* 三张卡片等宽 */ padding: 24px; border: 1px solid #eee; border-radius: 8px; }这里最关键的两个属性display: flex让容器里的子元素变成“弹性盒子”默认水平排列。justify-content控制主轴方向的对齐方式space-between让第一个贴左、最后一个贴右、中间的均分空隙正好是卡片布局最常见的需求。flex: 1的意思是“按剩余空间的比例扩大”三张卡片都写flex: 1它们就自动三等分。如果你要做导航栏就再加一个垂直居中给容器加上align-items: center导航里的文字和Logo就会在垂直方向上对齐不用再手动算行高。3.4 字体、颜色和单位一眼看上去“干净”的页面是怎么调出来的很多同学的页面功能都对但一眼看过去就是“不舒服”问题基本集中在字体、颜色和间距上。先看单位。第二次作业阶段掌握“px为主、rem为辅”就够了。px是绝对单位1px就是1像素rem是相对单位相对的是根元素html的字体大小。浏览器默认根字号是16px所以1rem 16px。如果你想让整个页面的字体大小可以统一缩放可以这样设置html { font-size: 16px; } body { font-size: 1rem; /* 即16px */ line-height: 1.6; /* 行高设为字号1.6倍阅读更舒适 */ }颜色方面别再一张页面用七八种颜色了。新手最容易让页面变“脏”的原因就是用了一堆大红大绿。推荐一个很偷懒但非常有效的做法选一个主色一个辅色再加一个中性色。比如:root { --primary: #2c3e50; /* 深蓝灰用于标题和导航 */ --accent: #e74c3c; /* 红色用于强调和按钮 */ --bg: #f8f9fa; /* 浅灰用于页面背景 */ }这就是CSS自定义属性也叫CSS变量好处是你想换主题色时只改一处全页面跟着变。这个技巧说简单但也确实超出很多第二次作业的水平属于性价比很高的“加分项”。4. 样式为什么“没生效”最常见的几个翻车现场4.1 从“文件路径”到“缓存刷新”先排除这些低级但高发的问题作业写完了打开浏览器一看页面全裸——HTML内容都在但所有CSS样式全丢了。这种时候不要慌按下面的顺序排查外部样式表有没有正确引入。检查index.html里这行代码的位置和路径link relstylesheet hrefcss/style.csshref里的路径是相对于当前HTML文件的位置。如果目录结构是“css文件夹在index.html的同级”就写css/style.css如果样式表在上一级就要写../css/style.css。路径写错是最常见的原因。文件有没有保存。听起来很傻但真的有人改完CSS忘记按CtrlS或者CSS文件保存了、HTML没保存。我排查学生问题时“先保存再刷新”这句话说了不下几十遍。浏览器缓存。如果你改了CSS但页面始终是旧效果大概率是缓存。按F12打开开发者工具切到Network网络面板勾选Disable cache禁用缓存再刷新一次。这是最标准的调试姿势。有没有中文标点或漏写分号。CSS里每个声明后面必须有英文分号。这类问题很难一眼看出来可以把代码复制到代码编辑器里看有没有红色波浪线。4.2 选择器权重与覆盖顺序为什么后写的样式反而没生效还有一种更隐蔽的情况样式文件引入了、内容也匹配但就是不生效。这时候八成是“优先级”问题。看这个经典例子p classtext文字/pp { color: red; } .text { color: blue; }最终文字是什么颜色答案是蓝色因为类选择器的权重高于元素选择器。如果你写的是#main .text { color: blue; } .text { color: green; }那么前一条生效因为id 类的权重远大于单个类。有个很实用的排查口诀先看选没选中匹配度再看谁更重要权重最后看谁的顺序在后同等权重下后写的覆盖先写的。这个排查链路能解决90%的“样式没生效”。4.3 经典布局翻车图片空隙、外边距合并、父级高度塌陷第二次作业里有三个“看着奇怪但几乎人人都会遇到”的布局问题这里一次性说透。第一个图片下方多出一条白线。img默认是行内元素行内元素的底部会跟文字基线对齐所以图片下方会留下一段空隙。解决方式一行代码img { display: block; }第二个两个相邻盒子的上下margin叠在一起。比如上面的盒子设置了margin-bottom: 30px下面的盒子设置了margin-top: 20px你以为间距是50px实际只有30px。这就是“外边距合并”父子、上下兄弟之间都会发生。解决方式要么只用一个margin推荐要么给父容器加overflow: hidden。第三个浮动元素的父级高度塌陷。如果你还在用float做多列布局子元素浮动后父容器会“认为“自己没有高度导致背景和边框塌缩。最稳妥的解决方式是彻底放弃float排版改用Flex。这也是现代前端的主流做法考试作业里用Flex布局不仅代码更少还更不容易出bug。5. 交作业之前按这个清单自查一遍5.1 功能性检查每个链接、每张图片、每个表单字段都要过一遍很多同学写完直接打包提交结果导航的锚点没对齐、表单字段点击没反应、图片裂了好几张这些问题其实在提交前花十分钟就能全部发现。可以按下面这张表格逐项打钩检查项操作方式通过标准页面标题看浏览器标签页显示的不是“index.html”默认文字导航链接逐个点击能跳到对应板块或能打开正确的页面图片显示浏览页面全部图片没有裂图alt文字有内容表单提交点击提交按钮有响应跳转、提示或刷新CSS外部化看代码结构样式在css/style.css里不是内联style编码看meta标签meta charsetUTF-8存在文件完整性双击index.html脱离编辑器环境也能正常打开这里特别说一下最后一项。很多同学在编辑器里打开预览没问题但把整个文件夹发给别人后别人双击index.html发现图片全裂了、样式全丢了。原因基本都是用了“绝对路径”或者“没有把文件夹一起打包发送”。提交时应当把整个项目文件夹压缩成一个zip而不是只发一个index.html。5.2 代码可读性老师未必会读你的代码但读了就一定知道深浅作业评分时老师通常先看页面效果然后再看代码。代码注释和缩进对你的成绩没有直接加分但能影响老师对“这个学生到底理解了没有”的判断。建议做到最基础的两点用统一的两空格或四空格缩进不要按下Tab键不松手乱跳。在关键区块上写一行中文注释解释这部分的用途。比如/* 导航栏 */ nav { display: flex; justify-content: space-between; } /* 项目卡片区 */ .cards { display: flex; gap: 20px; }写注释不是给浏览器看的浏览器会忽略它们注释是给“读代码的人”看的包括未来的自己。你两个月后再打开这个文件如果没有注释大概率想不起来当时为什么要这么写。5.3 适配不同窗口宽度最少要会一招响应的入门写法第二次作业一般只要求桌面端的正确展示但如果你能顺手做一点响应式适配页面在老师的小屏笔记本或缩放窗口下不产生横向滚动条就很加分。最入门的一招是给容器设置最大宽度并居中.container { max-width: 1200px; margin: 0 auto; }这样窗口超过1200px时页面不会撑满整屏窄于1200px时容器跟随变窄不会出现横向滚动条。更进一步可以用一个最简单的媒体查询让小屏幕下三列卡片变成一列media (max-width: 768px) { .cards { flex-direction: column; } }意思就是“屏幕宽度小于768px时卡片改成一列竖排”。站在第二次作业的角度这句已经足够“秀肌肉”了。5.4 一个可复用的完整小页面骨架讲了这么多最后给你一个可以直接抄的迷你页面骨架把上面的知识点串在一起。HTML结构用语义化标签CSS用Flex布局加统一盒模型路径按本项目目录写!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 nav classnav span classlogoMy Site/span div classnav-links a href#about关于/a a href#projects项目/a a href#contact联系/a /div /nav /header main section idabout classabout h1你好我是A同学/h1 p一名正在学习Web前端开发的初学者这是我的第二个页面作业。/p /section section idprojects classprojects h2我的项目/h2 div classcards div classcard项目一/div div classcard项目二/div div classcard项目三/div /div /section section idcontact classcontact h2联系我/h2 form action# methodpost label forname姓名/label input typetext idname namename label foremail邮箱/label input typeemail idemail nameemail button typesubmit提交/button /form /section /main footer p© 2024 A同学/p /footer /body /html配套的CSS* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Microsoft YaHei, sans-serif; line-height: 1.6; color: #333; background: #f8f9fa; } .main { max-width: 1200px; margin: 0 auto; } .nav { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #2c3e50; color: #fff; } .nav-links a { color: #fff; text-decoration: none; margin-left: 20px; } .about { padding: 80px 24px; text-align: center; } .projects { padding: 40px 24px; } .cards { display: flex; gap: 20px; justify-content: space-between; } .card { flex: 1; padding: 32px; background: #fff; border: 1px solid #eee; border-radius: 8px; } .contact { padding: 40px 24px; } input { display: block; width: 100%; margin-bottom: 12px; padding: 8px; } footer { text-align: center; padding: 24px; background: #2c3e50; color: #fff; }这个骨架包含了一篇达标作业所需的全部要素语义化结构、导航锚点跳转、表单、外部样式、Flex布局、统一盒模型、卡片式排版。你可以把它当成出发点往里面填自己的真实内容再根据作业要求增删模块。最后说点个人的体会。做第二次HTMLCSS作业时遇到最多的问题其实是“看着会了一写就废”。我的建议是别一上来就追求花哨的动画、渐变、阴影先把一个结构清晰、内容完整、样式整洁的页面稳稳交出来。基础打得牢后面学JavaScript才会真正施展得开。第一次做得慢没关系第二次就是用来把第一次的坑填平的。
阅读完成 · 觉得有帮助？
