作为一个带过不少前端入门课、也批改过无数份第二次作业的人每次看到同学们提交上来关于image和a标签的页面我其实都能一眼看出哪些人是真正动手敲过代码、踩过坑的哪些人只是照着教程把示例抄了一遍。原因其实很简单这两个标签虽然看起来简单但隐藏的细节非常多稍微一个路径写错、一个href没加协议头页面表现就会完全不一样。这篇就把“第二次作业img和a标签”从需求拆解、核心属性、实操步骤到常见问题全部梳理一遍既给正在写作业的同学当一份“避坑指南”也给自学入门的朋友提供一个可以直接照着练的模板。很多同学拿到作业第一反应是“不就两个标签吗一个插图片一个加链接五分钟写完。”但真正做完你会发现写完和写对是两码事写对和写得专业又是另一码事。所以我建议你把这篇文章当成一份“写完作业之后回头看”的参考资料而不是单纯的第一步教程——当然零基础跟着操作也完全没问题。1. 作业拆解与设计思路1.1 为什么第二次作业偏偏是这两个标签如果你已经做过第一次作业大概率用的是h1、p、div这类最基础的盒子标签它们解决的核心问题是“页面上有内容”。而到了第二次作业突然引入img和a本质上是完成一次关键升级让页面从“只有文字”变成“可看、可点”的真正的网页。用我常跟学生打的比方来说HTML 标签大致可以分成三类一类是“搭骨架”的比如html、body、div一类是“填内容”的比如h1、p、li而img和a则属于第三类——它们是“连外部”的标签。img负责把图片资源“引进”页面a负责把用户带到另一个资源或位置。理解了这个分类你就不会把它们当成普通的盒子去套用它们的属性体系、行为逻辑和前面学过的标签完全不一样。另外还有一个教学上的考虑这两个标签经常要配合使用。比如最常见的首页 Banner 图片点击之后跳转到详情页这个场景就是a把img包起来。如果你把两个标签分开学得很熟但组合使用的时候却不会嵌套那后面学 CSS 做卡片组件、做轮播图都会吃大亏。1.2 这份作业通常考察的三个核心点根据我看到的各个教学班的布置习惯第二次作业的考察点基本集中在以下三个方面你可以对照检查自己的作业有没有覆盖全。第一个核心点是对“属性”这个概念的理解。之前学文本标签时你可能不需要写什么属性但img不写src就显示不了图片a不写href就没有跳转功能。这两个标签是 HTML 里最早逼着你认真对待“属性”的关卡同时也是属性最多的两个基础标签。第二个核心点是“路径”的掌握。图片能不能显示出来链接能不能跳转成功很大程度取决于资源路径写没写对。是相对路径还是绝对路径是同级目录还是上级目录这里面的门道本作业里能暴露得淋漓尽致。第三个核心点是“嵌套”和“语义化”。作业一般会要求你实现“点击图片跳转链接”这类效果那到底是把img放在a里面还是把a放在img里面写反了虽然有时候能显示但语义完全错误也不符合 HTML 规范。1.3 作业页面结构怎么规划才合理很多同学一上来就写代码结果页面做到一半发现想加的东西加不进去结构调整起来极其痛苦。我建议动手之前先在脑子里画一个极简的结构图哪怕只是三行草稿也比你直接开写要稳。以这次作业为例你要做的页面可以包含三个区块顶部一个导航区用a做几个链接中间一个图片展示区用img展示若干张图底部一个友情链接区继续用a做外链。如果你时间充裕再加一个“点击图片进入详情”的交互这样页面既有图片又有链接作业要求全部覆盖页面看起来也是一个完整的小作品而不仅仅是标签的堆砌。规划完结构再写代码你会发现思路清晰很多哪里放img哪里放a哪些地方需要把两者嵌套在一起一眼就能想明白。这比你边写边想、写到哪算哪要高效得多也更像一个正经的前端开发者的工作方式。2.img标签属性、路径与踩坑记录2.1src与alt一个管显示一个管兜底img标签最核心的两个属性是src和alt。src是图片资源的地址没有它图片就无从谈起而alt是图片加载失败或无法显示时的替代文字同时也是无障碍阅读和 SEO 的重要依据。这里我特别想强调alt的兜底作用。平时网络正常时你根本看不到alt的存在觉得它可有可无可一旦图片地址写错、网络变慢、或图片被服务器删除页面显示的就是一个破碎的图标加一段文字。没有alt的话用户看到的就是一个纯破碎图标体验非常辣鸡。正确示范是这样的img srcimages/cat.jpg alt一只橘猫趴在窗台上有些同学会问alt写中文还是英文写什么都行关键要准确描述图片内容不要写“图片”“照片”这类废话——它不能告诉用户任何有效信息。另外alt还有一个隐藏作用如果图片是纯装饰性的、没有任何信息量规范建议把alt留空但不要删掉属性写成alt这样屏幕阅读器会直接跳过这张图而不是读出一个莫名其妙的文件名。2.2 图片路径99%的同学第一次都会栽在这里路径错误是img标签最大的坑也是作业里最常见的错误。你代码写得很标准结构也正确但图片就是显示不出来十个里有八个是路径问题。路径分两种一种是绝对路径完整到可以直接定位资源一种是相对路径相对于当前页面文件所在位置去定位资源。作业场景里最常用的是相对路径但它恰恰是初学者最容易搞混的地方。比如你的页面文件在项目根目录的index.html图片放在images文件夹里那么正确写法是img srcimages/cat.jpg。如果你的页面在pages文件夹里图片在根目录的images文件夹里那么你需要先退回上级目录再进入images写成img src../images/cat.jpg。很多同学把../漏掉或者在不需要../的地方多加了一个导致路径找不到资源。提示判断路径是否正确有一个快速办法在浏览器打开你的页面按F12进入开发者工具在 Elements 面板里找到图片元素鼠标悬停在src地址上如果浏览器能预览出图说明路径正确如果提示 404 或直接无预览基本就是路径写错了。另外我强烈建议图片文件用英文命名不要用中文名也不要有空格。中文文件名在某些环境下会引发编码问题空格会被转义成%20虽然可能能显示但会给后续维护挖坑。2.3 宽高设置、加载优化与图片格式选择很多同学会把图片尺寸的控制直接交给 CSS这一点我支持但这里要区分一个概念width和height属性写在 HTML 里只是给浏览器一个预期尺寸真正做响应式布局时推荐在 CSS 里控制尺寸HTML 属性只是兜底方案。不过在你还没学 CSS 的阶段用属性控制宽高完全没问题img srcimages/cat.jpg alt一只橘猫 width400 height300但你要小心这种写法如果只写width不写height图片会按比例缩放不容易变形但如果两个都写而数值比例和原图不一致图片会被拉伸变形看起来非常难受。所以要么两个按比例写要么只写一个让浏览器自动算。关于加载优化新版本的浏览器普遍支持loadinglazy属性意思是图片进入视口附近才开始加载而不是页面一打开就把所有图片全部请求一遍。如果作业图片很多比如你做的是相册页或画廊页给每张图片加上loadinglazy网络流量和初次加载速度都会明显改善img srcimages/photo-1.jpg alt风景照片 loadinglazy图片格式方面现在 Web 端最常见的就三种JPG 适合照片类色彩丰富的场景PNG 适合需要透明背景的图WebP 是 Google 主推的新格式体积更小、质量更好但极老的浏览器可能不支持。平时练习用 JPG 和 PNG 足够正式项目再考虑 WebP 甚至 AVIF。2.4title属性别和alt搞混还有一个经常被忽略的属性是title。它和alt的差别在于alt是图片加载失败时的替代说明title是鼠标悬停在图片上时的提示文字。二者可以同时存在也可以只有其一。实际开发中title用得比较多的是产品图片、头像这类用户会主动去悬停查看的场景。比如img srcimages/team.jpg alt团队成员合影 title点击查看团队成员介绍不过它也有一个坑移动端没有鼠标悬停概念所以title在手机上是无效的。作业里如果要做移动端适配可别把关键信息只放在title里。3.a标签连接、跳转与更多玩法3.1href不是随便写的链接的几种正确姿势a标签的灵魂是href属性它的值决定了链接要去哪。但很多同学以为href就是写网址这个理解太窄了。实际上href能接受很多不同类型的值我按使用频率排一下。外部链接是最直观的直接指向一个完整的 URL但这里有个极常见的错误写外部链接容易漏了https://协议头。因为“前端能自动补全”这个错觉太普遍了实际上一旦漏掉协议头浏览器会认为这是站内相对路径结果跳转到一个不存在的本地地址直接 404。比如a hrefwww.example.com是错误的正确写法是a hrefhttps://www.example.com。页面内锚点跳转也常考。同一页面内点击一个按钮平滑滚动到页面的特定位置可以用#加元素的id来实现。比如a href#section-footer跳到底部/a ... div idsection-footer底部区域/div点击那个链接浏览器会直接定位到idsection-footer的区块。这个功能做目录导航、回到顶部按钮时非常好用。还有邮件链接和电话链接分别是mailto:和tel:协议。这个作业阶段可能用不到但面试里常被问到建议先了解存在即可。3.2target_blank与安全性的问题target属性控制链接在哪里打开。默认值是_self也就是在当前标签页打开如果要让链接在新标签页或新窗口打开就写target_blank。这个属性本身很简单但你如果用target_blank打开新页面就引出了一个安全话题。老浏览器里新打开的页面可以通过window.opener对象反向控制原页面的地址这称为反向 tabnabbing 漏洞。虽然现代浏览器已经默认给target_blank的链接加上了隐式的noopener行为但为了保险起见、也为了严谨业界普遍建议显式加上a hrefhttps://example.com target_blank relnoopener noreferrer外部链接/anoopener禁止新页面访问window.openernoreferrer则进一步隐藏来源信息。它们不会影响用户体验但能明显提升安全性。写作业时加上这个细节老师一看就知道你是个有心人。3.3download属性与浏览器下载行为download属性是 HTML5 推出的一个新特性作用是让浏览器不要跳转到链接目标而是直接触发下载。但这里有一个非常关键的规则要牢记download只在同源 URL 下才完全有效。什么意思呢如果你的链接指向的是同一个站点的文件加download之后可以正常下载但如果链接指向的是跨域地址比如图片在另一台服务器上浏览器往往会忽略download属性仍然直接打开图片。这背后的原因是浏览器出于安全考虑不允许一个页面随意强制下载其他站点的资源。此外download还可以额外指定一个下载后的文件名a hreffiles/report.pdf download2024年度报告.pdf下载报告/a这个属性做文件下载场景时非常实用作业里如果有“下载二维码”或“下载附件”这类需求download就是你最省事的解法。3.4 链接的“可点击区域”和“可访问性”a标签还有一个容易忽略的视觉问题浏览器默认会给没有href属性的a标签加上悬浮手型而给有链接的a标签下划线。但作业里经常出现的情况是你想做“一个按钮样式的链接”于是给a套了一层 CSS却忘了它本质还是链接键盘用户可以通过 Tab 键聚焦并回车激活这个特性千万不要去破坏。从可访问性的角度讲a的文字内容最好能描述清楚链接的目的比如不要写“点击这里”而要写“查看商品详情”——后者在屏幕阅读器里能直接告诉用户“这个链接会进入商品详情页”。还有一点a标签内不要嵌套另一个a标签。因为浏览器解析时会把内层的a拆出来最终导致结构混乱、样式错乱。这一点写作业时不太会遇到但实际开发中有人确实会写出这种嵌套然后跑来问为什么布局乱套了。4. 实操把img和a组合成一个小项目4.1 场景设定做一个“图片画廊 外链导航”页面为了让这次作业更好玩也为了覆盖更多知识点我们做一个组合场景一个迷你图片画廊页面。它包含一个顶部导航区两三个站内链接和站外链接中间是图片展示区每张图片都是可点击的点击会跳转到图片描述中的详情页底部是一个“回到顶部”的锚点链接。页面结构大概这样先写一个header里面放导航链接然后写main里面放图片卡片图片用img点击跳转用a把img包住最后写footer放一个a href#top的锚点链接。这个场景能一次性覆盖img的 src、alt、width、loading 属性a的 href、target 属性a嵌套img的组合用法锚点跳转的实现。4.2 步骤一准备图片资源与项目目录我刚把图片放进去老是不显示最后发现根目录没建对这是很多同学都会经历的。这里直接说标准做法在项目文件夹里新建一个images目录把你准备的3到5张图片JPG 或 PNG 都可以放进去文件名改成英文小写比如gallery-1.jpg、gallery-2.jpg。然后新建一个index.html文件放在项目根目录下。这样你的目录结构是project/ ├── images/ │ ├── gallery-1.jpg │ ├── gallery-2.jpg │ └── gallery-3.jpg └── index.html这个结构简洁清晰后面写相对路径也方便。注意index.html不能放进images里也不能放在更深的子目录里不然路径就要多写几层../很容易出错。4.3 步骤二写导航区用a做站内跳转和站外跳转导航区用最朴素的写法一个nav包裹几个anav a hrefindex.html首页/a a hrefabout.html target_blank关于我们/a a hrefhttps://developer.mozilla.org/zh-CN/ target_blank relnoopener noreferrerMDN 文档/a /nav第一行是站内链接指向同目录下的另一个页面第二行虽然是站内链接但加了target_blank点击后在新标签页打开第三行是外部链接指向 MDN 官网同时加了relnoopener noreferrer。这里面有一个值得注意的细节站内链接的href不要写index.html前边加什么乱七八糟的路径如果是同目录直接写文件名就行。如果你链接的是一个不存在的about.html浏览器打开会显示 404这也是正常现象——作业里只需要保证链接逻辑正确页面文件本身是否都存在不是重点。4.4 步骤三写图片展示区用a包裹img展示区是这次作业的核心先放一张图的完整代码a hrefhttps://example.com/gallery/1 target_blank img srcimages/gallery-1.jpg alt海边日落风景照 width400 loadinglazy /a这段代码的逻辑是把整张图片当作可点击区域点击后新标签页打开对应的详情页。注意链接的href这里我给的是一个虚拟地址真实作业中你应该填一个真实存在的页面地址比如你自己的另一个 HTML 文件或者某篇文章的完整链接。写这种嵌套时有一个顺序问题要提醒你外层是a内层是img。反过来写虽然浏览器通常也能解析出图片和链接但不符合规范而且可能出现不可预期的样式错乱。可以从语义上这样理解图片是“被展示的内容”链接是“对内容的操作”容器在外、内容在内这和div包p是一个道理。如果你有三张图用三组这样的嵌套并列排放就可以了。用一组div包裹它们方便后续统一控制布局。4.5 步骤四做“回到顶部”的锚点链接在页面顶部加一个idtop的锚点然后在页面底部放一个链接body idtop ... a href#top回到顶部/a /body点击底部的“回到顶部”浏览器会自动滚动到idtop的位置。如果你想更平滑地滚动过去需要配合 CSS 的scroll-behavior: smooth不过这个是后话作业阶段能实现跳转即可。常见错误是忘记给目标元素加id或者href里忘了写#导致链接点了没反应。检查时第一眼看href有没有#第二眼看目标元素的id是否存在基本能解决九成问题。4.6 步骤五补全完整页面并预览把上面的内容拼起来一个最简的完整页面大概长这样!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的图片画廊 - 第二次作业/title /head body idtop nav a hrefindex.html首页/a a hrefabout.html target_blank关于我们/a a hrefhttps://developer.mozilla.org/zh-CN/ target_blank relnoopener noreferrerMDN 文档/a /nav main h1精选图片/h1 div a hrefhttps://example.com/gallery/1 target_blank img srcimages/gallery-1.jpg alt海边日落风景照 width400 loadinglazy /a a hrefhttps://example.com/gallery/2 target_blank img srcimages/gallery-2.jpg alt城市夜景俯拍 width400 loadinglazy /a a hrefhttps://example.com/gallery/3 target_blank img srcimages/gallery-3.jpg alt山间清晨薄雾 width400 loadinglazy /a /div /main footer a href#top回到顶部/a /footer /body /html保存文件直接用浏览器打开index.html你会看到页面上有三张图片全部可点击底部可以回到顶部。作业的核心需求到这里就已经完整实现了。注意这里完全没有 CSS所以页面看起来比较朴素但这不是问题。第二次作业考察的是标签本身等你学了 CSS再给这些标签加排版、加颜色、加悬停效果这个小画廊立刻就能变成一个像模像样的作品页。5. 常见问题排查手册5.1 图片不显示的六大原因我判断一个学生有没有认真做过作业就是看他能不能自己排查出图片不显示的原因。这里我把最高频的原因整理成一张排查清单现象常见原因解决办法图片区域显示破图标图片路径错误检查src的路径层级确认文件名大小写整个图片区域空白src为空或未写确认是否漏写src属性图片显示但非常模糊图片本身分辨率低换高清图或更换大图资源图片变形拉伸同时写了不成比例的宽高只写一个宽度属性让高度自动本地能显示但上传后不显示文件没跟着上传或路径变了检查服务器文件结构重新调整路径外链图片不显示图片网站有防盗链换成自己的图片资源图片路径写没写对有一个最直接的判断方法在浏览器地址栏直接输入你src里写的相对路径值看能不能访问到图片文件。比如你把src写成images/cat.jpg那你就在地址栏输入localhost:8080/images/cat.jpg如果用的是本地服务器或直接拼在你项目访问路径后面能显示就说明路径没错。5.2 链接点击没反应的几种情况链接点了没反应很多人第一反应是代码有问题但往往问题出在别处。最常见的是把href漏了比如写a点这里/a浏览器不知道这是链接也就不会给任何点击响应。这种情况加上href就能解决。其次就是外部链接没写https://我之前已经强调过代码里写a hrefwww.example.com浏览器会把www.example.com当作相对路径去拼接当前域名点击自然打不开目标网站。还有一种情况是链接被页面其他元素覆盖了比如某个div悬浮在链接上方挡住了点击事件。这种问题用肉眼一时看不出来打开开发者工具选中链接元素查看它所在位置是否有其他元素重叠就能定位。5.3 在新标签页打开却未能生效这个问题几乎全是target_blank写错造成的。常见错误包括漏写target属性的引号、把target写成href的属性、或者在href里加blank字样之类。正确写法已在上文给过检查时逐一比对即可。另外强调一点target属性的值目前标准写法是_blank有下划线前缀不要写成blank。老式写法曾经支持直接targetblank但推荐标准里稳妥的是_blank两种写法在某些浏览器里表现不一致。5.4 图片加载失败时显示一个难看的破图默认情况下如果图片加载失败浏览器会显示一个带边框的破图图标和旁边的文字放在一起非常丑。最简单的处理方案是挨个检查图片地址是否有效如果你等待网络恢复后就能正常显示那就涉及到加载失败时的用户体验问题可以用onerror属性来做兜底替换成一张默认图。img srcimages/not-exist.jpg alt商品图片 onerrorthis.onerrornull; this.srcimages/placeholder.jpg;这段代码的意思是如果图片加载失败就把它替换为占位图同时把onerror置空避免无限循环。这是前端开发里很实用的兜底技巧作业里加了会非常加分。不过onerror内的 JavaScript 语法对初学者来说有点超纲如果你还没学到 JS理解它的用途就好不必死记。等你会写 JS 之后再回来看这段代码会觉得很简单。5.5 作业里容易忽略的闭合问题最后说一个细节问题标签闭合。img是自闭合标签不需要/img结束标签很多同学会习惯性写一个/img这是 HTML5 里明确不允许的。而a标签必须成对出现有开始必须有结束漏写/a会导致后续所有内容全部变成链接样式这几乎是每天都能遇到的学生作业错误。趁这个机会推荐一个工具VSCode 里装一个“Auto Close Tag”插件自动闭合标签再装一个“Live Server”插件改完代码浏览器自动刷新。这两个插件能帮你省掉大量无意义的排错时间。实测下来装了插件后标签不闭合这类低级错误基本不会再犯。6. 进阶方向从作业到真实项目的差距6.1 响应式图片srcset与sizes是你下一步要学的作业阶段用固定width就够了但一到真实项目你会发现同一张图片需要适配手机、平板、桌面不同屏幕总不能写三遍img吧。这时候就需要学习srcset和sizes属性。简单说srcset允许你给浏览器提供多张不同尺寸的图片浏览器根据设备像素比和视口宽度自行选一张最佳的img srcimages/cat-800.jpg srcsetimages/cat-400.jpg 400w, images/cat-800.jpg 800w, images/cat-1200.jpg 1200w sizes(max-width: 600px) 400px, 800px alt一只橘猫这段代码的意思是如果视口宽度在600px以下就用400px宽的那张图否则用800px宽的那张。这样手机用户不会下载一张巨大的桌面图加载速度会快很多。这是性能优化里非常重要的一块也是面试常考点。6.2 图片懒加载与loading属性的局限我在上面的示例代码中给img加过loadinglazy它确实能延迟图片加载提升首屏速度。但真实项目里尤其是图片特别多、还要做滚动加载的场景单纯靠这个属性是不够的。因为loadinglazy的加载策略完全由浏览器决定开发者无法精确控制“当图片滚到视口前多少像素时开始加载”。如果你需要更精细的控制就要用 Intersection Observer 搭配 JavaScript监听图片元素进出视口的时机动态为src赋值。这个技术已经有非常成熟的封装库和框架组件可以用了等你学到 JS 或 Vue/React 后再深入了解。6.3 图片自上而下加载与占位体验还有一个真实项目中常见的体验优化网速慢时图片从上往下一行行加载出来页面看起来会闪动、跳动。解决办法是提前给图片容器设定宽高比或者使用 CSS 的aspect-ratio属性让图片区域在图片加载前就占据好最终空间。这个规律我在作业里经常提醒同学width和height属性不仅仅是“控制大小”那么简单它还能减少页面内容布局的偏移。你在写作业时如果能给每张图片都明确写一个合理的尺寸页面加载时就不容易出现元素跳动这个细节老师一眼就能看出来你动了脑子。6.4 关于“a标签下载带 token 的图片”网上的热词里有一条很实际的问题“a标签下载视频请求头怎么带token”。直接回答你普通的a标签下载是浏览器直接发起 GET 请求无法自定义请求头所以带token这件事靠a标签本身是做不到的。解决办法一般是先用 JavaScript 的fetch发起带请求头的请求拿到 Blob 数据再用URL.createObjectURL()生成一个临时链接最后动态创建一个a并触发点击完成下载。这涉及 JS 知识作业阶段不用管但你如果已经学到 JS可以尝试着按这个思路实现一遍对理解浏览器的下载机制帮助很大。同理如果图片本身需要登录才能访问直接写在img src...里往往无法显示因为图片请求同样带不上登录凭证除非你把 token 放在 URL 参数里由服务端校验——但这仅限于 GET 请求很多安全严格的场景并不鼓励这么做。6.5 SVG 与图标字体的替代方案作业里用img展示的一般是 JPG/PNG 位图。但真实项目里Logo、图标这类小图形用位图会失真而且放多个尺寸就要导出多张图非常麻烦。主流的替代方案有两个SVG 内联和图标字体。SVG 是矢量图任意缩放不模糊可以直接写在 HTML 里甚至可以用 CSS 控制颜色图标字体则是把图标做成字体文件通过i或span标签配合 class 使用比如 Font Awesome。这两个方案各有优劣但你如果想知道为什么很多网站的图标那么清晰、颜色还能跟随主题切换答案就在这里。6.6 标签管理、SVN/Git 标签等“伪相关”概念搜索热词里混进来一些奇怪的概念例如“svn标签”“git入门之标签”和“anki标签管理”。这里的“标签”是完全不同维度的东西和 HTML 里的a、img标签没有关系我提一下目的是防止你被带偏。Git 的 tag 是版本管理里的里程碑标记SVN 的 tag 是分支目录的一种惯例Anki 的 tag 是笔记卡片的分类关键字。它们都叫“标签”但属于截然不同的技术栈学习路径上千万别混在一起。HTML 的标签是给浏览器解析的语法结构这一个核心区别抓住了就不会再混淆。写在最后一点个人经验这次作业是我的老熟人了批过几百份自己也从零写过很多遍。我最大的体会是这两个标签的“下限极低上限极高”。说下限低是因为小学生照着教程敲十分钟也能出来一个能点的页面说上限高是因为从路径管理、性能优化、可访问性到安全性每一个维度展开都是一大套知识体系。所以第二次作业其实是给你打开了一扇门门外是资源加载、网络请求、浏览器渲染这些“真前端”的世界。如果你正好在写这份作业我建议你别急着交。完成基础功能后自己试着问三个问题我把alt都写好了吗外部链接都加了rel吗页面内部的锚点跳转能正常工作吗这三个问题回答完你的作业质量就已经超过一大半的同期同学了。最后再分享一个小技巧把今天这个小画廊页面留着别删。等你学会 CSS回来给它加样式等你学会 JavaScript回来给它加交互等你学会框架把这个页面用 Vue 或 React 重写一遍。你会有一种强烈的“原来我真的在进步”的感觉。这比做一百道练习题都更有成就感。