简介面向网页设计初学者这份Web入门资源以“文字图片可跳转超链接”三个页面为核心完整展示了基于HTML与CSS构建多页面信息展示的方法适合课程作业、静态网页练习或前端启蒙阶段参考。压缩包共含8个文件其中3个HTML文件对应三个页面4个WebP与1个JPG分别用作页面配图素材整体仅有176KB体量轻巧便于直接下载浏览与二次修改。已有4971人学习口碑和实用性可见一斑。资源不仅给出页面骨架还覆盖了段落与标题文字、img图片插入、a链接跳转等核心标签的写法并通过CSS对背景色、字号、链接颜色做了基础美化页面间跳转同时演示了锚点方式帮助理解同页定位和外部跳转的差别。初学者可对照页面源码梳理HTML结构与样式规则快速掌握制作简单多页面网站的基本流程。1. 三个页面靠超链接串成一个小站网页设计作业里最容易被小看的题目网页设计课的第一个硬性作业写起来往往就是三个页面有文字、有图片、点超链接能互相跳转。听起来简单但真正动手的人会卡在同一个地方——页面能打开图片裂了链接点了没反应。这个题目考察的核心从来不是花哨的视觉效果而是你是不是真的理解“网站是由多个文件通过超链接关联起来的”这一件事。标题里的“三个页面”意味着你要做一个最小规模的多页面站点而不是一个长得像网站的单个 HTML。它能帮你解决三个问题多页面文件怎么组织、图片和资源路径怎么写、超链接怎么让页面形成可闭合的跳转回路。适合的人群也很明确刚接触 htmlcssjs 网页设计的在校学生、第一次独立做静态站的入门开发者以及所有想把网页设计作业从“能交”做到“敢现场演示”的人。2. 搭出能互相跳转的三个页面目录结构与HTML骨架2.1 三个页面放同一个文件夹相对路径的起点很多人写网页是从“新建一个 HTML 文件然后双击打开”开始的。一旦要做三个页面第一步要改的并不是代码而是文件摆放方式。三个页面要互相跳转最省心的做法是把它们放在同一个文件夹里这个文件夹就是你的站点根目录。我见过太多人把 index.html 放在桌面图片页面放在“文档”里图片又放在另一个子文件夹最后链接路径写成一团乱麻问题根本不在语法而是文件结构从一开始就没有规划。常见做法是这样组织目录web-design-homework/ |-- index.html |-- gallery.html |-- contact.html |-- css/ | -- style.css -- images/ |-- hero.jpg |-- scenery.jpg -- portrait.jpgindex.html作为首页另外两个页面和它平级图片统一收进images样式统一收进css。这样设计有一个直接好处所有页面之间的跳转路径、图片引用路径都非常短而且逻辑一致。相对路径的写法是初学者最容易混淆的地方我习惯给出一张对照表让读者直接对着抄场景写法说明首页跳图片页hrefgallery.html两个页面在同一级目录图片页跳首页hrefindex.html反过来也一样页面引用图片srcimages/hero.jpg图片在根目录的 images 子目录页面引用CSShrefcss/style.css样式表在根目录的 css 子目录从子目录返回上级href../index.html少用目录结构一深就容易迷路三个页面放在同一层目录是为了让超链接的 href 保持最简单形态。这一点想通之后后面的所有跳转都只是复制粘贴。2.2 从零写第一个带文字、图片、超链接的 index.html有了目录结构就可以写第一个页面。下面是一份可以直接抄走的index.html把文字、图片、超链接三类元素都放进去并挂上公共导航!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 !-- 公共导航三个页面都长这样只有当前页的 class 不同 -- nav a hrefindex.html classactive首页/a a hrefgallery.html图片页/a a hrefcontact.html联系页/a /nav main classcontainer h1欢迎来到我的三页面小站/h1 p这是一个用 strong文字/strong、strong图片/strong 和 strong超链接/strong 组成的网页设计作业。/p !-- 图片必须放在 images 目录下路径写相对路径 -- figure img srcimages/hero.jpg alt主页头图 width800 height450 figcaption首页头图图片放在 images 目录下/figcaption /figure p 想看图片展示的效果a hrefgallery.html跳到图片页/a。 有问题想联系我直接去 a hrefcontact.html联系页/a 留言。 /p /main footer pcopy; 2024 网页设计作业 · 三个页面互相跳转/p /footer /body /html这里有几个关键点。charsetUTF-8负责让中文不乱码初学者最容易漏掉这行viewport是移动端的视口设置作业评审如果用手机浏览器打开这行能让页面不缩放错乱link引入 css 文件时用的是相对路径css/style.css它和图片路径一样写错就样式全丢。导航里的三个a标签是页面间跳转的入口当前页那个加了classactive留给 CSS 做高亮。图片标签写上了width和height属性目的是在图片还没加载完时给页面预留位置避免布局跳动。alt 属性则是“后悔药”图片哪天裂了至少浏览器能显示出一行说明文字。2.3 用 Live Server 打开而不是双击为什么地址栏要变成 http://写完第一个页面很多人的习惯动作是双击index.html。这样页面能打开但地址栏是file:///C:/...而不是网站的形态。双击打开的方式叫file协议它不是超链接的完整工作环境。三个页面之间通过a标签跳转时file协议下多数浏览器会直接加载新文件也能跳但有些浏览器会限制本地文件之间的访问权限表现就是“页面能开图片裂了”或者“链接点了没反应”。这些坑有时候非常玄学查代码怎么都查不出问题其实就是运行环境不对。我的习惯是从第一个页面开始就用本地 HTTP 服务打开文件。VS Code 装一个 Live Server 插件然后在 HTML 文件上右键选择Open with Live Server。也可以直接用命令行起服务cd web-design-homework npx serve .启动后浏览器访问http://localhost:3000或http://localhost:5500。地址栏出现http://开头说明页面已经跑在真实网站环境里超链接跳转、CSS 加载、后续加 JavaScript 都不会遇到file协议的限制。这一步对三个页面的跳转作业尤其重要因为在 http 环境下相对路径的解析逻辑和线上服务器完全一致你在本机能跑通交上去就不会翻车。3. 把文字和图片落到页面上图片路径与图文排版3.1 图片的两种来源本地相对路径与网络绝对地址网页设计作业里的图片来源无非两种自己准备放在images文件夹里的本地图片或者直接引用网上某个地址的图片。我建议作业用本地图片因为网络图片会引入两个不可控因素断网的时候图片直接裂掉以及某些网站的防盗链机制让图片在其他域名下不显示。你辛辛苦苦布置好的页面评审老师一打开发现头图是裂的印象分直接打折扣。本地图片的引用方式已经写在上一章的代码里了核心就是这一条img srcimages/scenery.jpg alt风景图 width600 height400写src时要注意这里的路径是相对于“当前页面所在的目录”去找的不是相对于硬盘根目录。页面在项目根目录图片在根目录下的images文件夹里所以是images/scenery.jpg。如果是网页间互相跳转href也可以指向图片文件本身比如做一个“查看大图”的链接a hrefimages/hero.jpg target_blank查看原图/a这张对比表可以帮你快速决定用哪种来源来源写法示例优点坑本地图片images/scenery.jpg离线可开、不受外网影响路径和文件名大小写容易错网络图片https://example.com/photo.jpg不用准备素材省事断网就裂、防盗链、跨域限制还有一种折中做法是用占位图服务临时顶位置等素材到位再替换。但作业提交前务必把图片换成本地文件否则交上去的就是一个依赖外网的空壳。3.2 让页面不像“作业”挂一份最基础的 CSS纯 HTML 的页面只能叫“能打开的文本”加上 CSS 才算网页设计。这里给出一份适合三页面小站的基础样式表它做的事情很简单统一文字间距、给导航栏上色、让图片自适应宽度、给页脚留出空间。/* css/style.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Microsoft YaHei, PingFang SC, sans-serif; line-height: 1.7; color: #333; background-color: #f7f7f7; } .container { max-width: 960px; margin: 0 auto; padding: 20px; } nav { background-color: #2c3e50; padding: 12px 20px; } nav a { color: #fff; text-decoration: none; margin-right: 24px; } nav a.active { color: #f1c40f; border-bottom: 2px solid #f1c40f; } figure { margin: 16px 0; text-align: center; } figure img { max-width: 100%; height: auto; } h1 { margin-bottom: 12px; font-size: 28px; } p { margin-bottom: 12px; } footer { text-align: center; color: #888; padding: 24px 0; background-color: #eee; margin-top: 24px; }* { margin:0; padding:0; }是清空浏览器默认间距不然页面上下左右会留一圈白边max-width: 960px让内容在大屏幕上不铺满整行阅读体验好很多.container配合margin: 0 auto把内容块水平居中nav a.active就是给当前页面导航高亮的规则黄色文字加下划线让浏览者一眼知道自己站在哪个页面。figure img的max-width: 100%是图片适配的关键否则手机宽度的屏幕上图片会横向溢出。写 CSS 有个容易被忽略的细节三个页面都要在head里引入同一个style.css。只给首页引入跳到图片页之后样式就全丢了导航栏颜色和字体全变回默认值整个作业立刻显出原形。3.3 文字排版的最小组合标题、段落、列表与强调文字是三个页面里最基础的元素但基础不等于“随便写”。html5 网页设计作业里最常见的文字结构是四件套标题h1到h6、段落p、列表ul/ol、行内强调strong/em。它们有各自明确的语义不要混用。下面这段是联系页contact.html的文字部分h1联系我/h1 p下面是 em常用/em 的联系方式点击即可发起跳转动作/p ul lia hrefmailto:webmasterexample.com给我发邮件/a/li lia hrefindex.html回到首页/a/li lia hrefgallery.html去看图片页/a/li /ul blockquote p“网页设计的第一步是把信息层次理清楚。”/p /blockquoteh1每个页面只出现一次是整个页面的主题em是斜体强调strong是加粗强调不要为了样式而滥用ul列表天然适合放一组超链接导航和联系方式都用它blockquote是引用块放在页面底部可以充当一句收尾语。文字排版做到这一步页面已经有了清晰的视觉层级评分老师不会觉得这是“只写了三行字的交差作业”。4. 超链接跳转的完整写法站内跳转、新窗口与锚点4.1 三个页面互相跳a 标签的 href 与相对路径超链接是这个作业的灵魂。三个页面之间互相跳转靠的是a标签的href属性。第二章里已经出现了hrefgallery.html这种写法它的意思是以当前页面所在位置为基准在同一目录下找gallery.html文件并跳转。图片页gallery.html的导航和首页必须保持结构一致只是激活态位置不同nav a hrefindex.html首页/a a hrefgallery.html classactive图片页/a a hrefcontact.html联系页/a /nav这样写浏览器解析hrefindex.html时会拼出完整地址。如果当前访问的是http://localhost:5500/gallery.html点击后浏览器请求的是http://localhost:5500/index.html。理解这一点你就明白了为什么三个页面必须放在同一目录它们互相跳转的路径是最短的写错的可能性也最小。检查超链接是否形成“闭环”我通常按这条路径走一遍首页 → 图片页 → 联系页 → 首页。每一步都要有链接可点不能出现某个页面只能进不能出。三个页面的作业跳转回路必须闭合这是最容易扣分也最好自查的一个点。4.2 target_blank 和 _self什么时候开新窗口、什么时候原地跳代码里链接能不能跳是一回事跳完之后页面怎么表现又是另一回事。a标签的target属性控制这一点两个值最常用target 值行为建议使用场景_self当前标签页跳转站内三个页面互相跳_blank新标签页打开外部链接、查看大图、下载文件站内跳转用_self就好因为用户在你的小站里浏览需要的是“前进后退”的连贯体验。外部链接建议用_blank让用户留在你的页面上同时新开一个标签看外部内容a hrefhttps://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a target_blank relnoopener noreferrer 查看 MDN 的 a 标签完整文档 /a注意这里我加了一个relnoopener noreferrer。这是血泪经验target_blank打开的新页面可以通过window.opener反向操作原页面加上noopener可以切断这种关联。在作业里不写通常也不会暴露问题但这是一个从入门阶段就值得建立的规范。翻车案例见过不少写了_blank不带rel被安全扫描工具报漏洞其实一行代码就能解决。4.3 用锚点和 mailto 把“能跳转”的范围扩大“跳转”不只有页面与页面之间还有页面内部的跳转。长页面里“回到顶部”就是最典型的锚点跳转footer a href#top回到顶部/a /footer页面主体的根元素上加一个id作为跳转目标body idtop锚点的原理是#后面跟目标元素的id点击后浏览器滚动到该元素位置。同一个长页面里也可以给每个小节设锚点h2 idsection-intro项目简介/h2 p……/p h2 idsection-review项目复盘/h2 !-- 页面中部的目录区 -- a href#section-intro跳到项目简介/a a href#section-review跳到项目复盘/aid必须是唯一的整个页面不允许有两个idsection-intro。作业里如果某个页面内容很长加一个锚点导航会让页面结构清晰很多属于加分项。mailto是另一种“跳转”它把用户带出浏览器唤起邮件客户端a hrefmailto:webmasterexample.com?subject网页设计作业反馈给站长写信/a?subject网页设计作业反馈是邮件的标题参数。需要注意mailto依赖本机装了邮件客户端如果评分电脑没配置邮件程序点击会没反应。所以作业里我的习惯是mailto链接只作为辅助旁边一定留一个普通的站内链接作为兜底入口确保任何环境下都能继续浏览。4.4 三个页面重复的导航用 JavaScript 自动高亮当前页三个页面的导航结构一模一样只有classactive的位置不同。两个页面手动改没问题页面一多就容易漏改或者改了 A 页忘了 B 页。htmlcssjs 网页设计的作业里有一个小脚本可以把这个过程自动化// 放在每个页面 body 的最底部或者外部 js 文件里 const currentPage location.pathname.split(/).pop(); document.querySelectorAll(nav a).forEach(function (link) { if (link.getAttribute(href) currentPage) { link.classList.add(active); } });这段代码的逻辑是先通过location.pathname拿到当前访问的文件名比如gallery.html再遍历导航栏里的所有a标签如果某个链接的href与当前文件名一致就给它加上active类CSS 里对应的高亮样式自然生效。这样三个页面导航栏代码可以完全复制粘贴不用手动维护哪一页该亮。不用 JavaScript 也可以手动维护三个页面的active完全够用。但如果你在学 htmlcssjs 网页设计这十几行代码是性价比极高的一次练习用到了 DOM 操作、遍历、条件判断还把三个页面真正串成了一个整体。5. 网页设计与制作的避坑清单图片不显示、链接打不动的常见原因5.1 图片裂开但路径没写错文件名大小写与中文名现象代码里写的路径千真万确images/hero.jpg文件也确实存在但浏览器里图片就是显示不出来F12 打开开发者工具Network 面板里那条图片请求显示 404。原因最常见的是文件名大小写不一致。Windows 系统默认不区分文件大小写你在资源管理器里看到Hero.JPG代码里写的是hero.jpg双击打开本地文件时浏览器“睁一只眼闭一只眼”能显示。但一旦把作业部署到 Linux 服务器或者用 Live Server 以 http 方式访问大小写敏感立刻生效图片就裂了。另一个原因是文件名带中文或空格浏览器会对 URL 做编码某些环境二次解析时匹配不上原始文件。解决图片文件一律重命名为纯小写英文加连字符比如hero.jpg、scenery-01.jpg。写代码前先确认文件真实存在再复制文件名到src里不要手敲。养成这个习惯图片路径问题能消灭掉八成。这和超链接的 href 是同一套规则文件叫什么代码就写什么一个字都不能差。5.2 超链接点了没反应或提示“本机限制”默认浏览器与 file 协议现象页面上的链接点了没反应或者弹出一个提示大意是“由于本机限制此操作已被取消”。你检查了 href地址没问题代码没毛病。原因这种情况多半不是 HTML 的问题而是运行环境。如果你用双击方式直接用file://协议打开页面部分浏览器会限制本地文件之间的跳转权限表现就是链接“点了白点”。还有一类场景是链接出现在邮件客户端或办公软件里机器上的默认浏览器或协议关联被组策略禁用点击外部超链接时操作系统直接拦截。这属于本机限制和你的网页代码无关。解决开发阶段统一用 Live Server 或npx serve起 http 服务地址栏是http://开头超链接在真实网站环境下解析问题几乎消失。如果是在办公软件里点链接被限制去系统设置的“默认应用”里把浏览器关联恢复这不是网页设计能解决的问题但你要能向老师解释清楚别让代码背锅。5.3 相对路径迷路用 ../.. 却不知道当前在哪现象图片和 CSS 全部加载失败跳转链接点了之后 404页面结构散架。原因相对路径的基准是“当前页面所在目录”不是站点根目录。很多人把页面分成pages/、assets/、images/多级目录后还沿用原来的路径写法。比如从pages/about.html里引用根目录的图片正确写法是../images/team.jpg写成images/team.jpg就会在pages/目录下找images结果当然是找不到。解决在这个三页面作业里最稳妥的做法就是避免深目录让三个页面保持平级统一用images/xxx.jpg和css/style.css。如果一定要用多级目录我建议打开浏览器开发者工具的 Network 面板看它实际请求的完整 URL对照自己的目录结构逐段排查。路径问题用眼睛看很难看出来看请求地址最快。5.4 页面能打开但 CSS 不生效link 路径出错与缓存现象HTML 内容完整文字图片都在但没有任何配色和间距导航栏是默认的白色背景黑字整个页面回到“裸奔”状态。原因一是link标签的href路径写错CSS 文件没有被加载二是浏览器缓存了旧版 CSS你改了样式但页面还在用上一次的版本三是 CSS 文件内容有问题比如第一行带了 BOM 头或者花括号没闭合导致后面的规则全被忽略。解决先按 F12 打开开发者工具切到 Network 面板刷新页面看style.css这条请求的状态。如果是红色 404去查href路径如果是 200点进去看返回内容是不是你写的最新代码如果内容和最新不一致强制刷新CtrlF5清缓存。最后检查 CSS 文件开头不要放中文注释或空字符第一行直接写选择器。这一套流程走完九成的样式失效问题都能定位。6. 交作业前多走一步用浏览器开发者工具验证跳转与布局6.1 三步验证法把“能不能跳”从玄学变成可验证临交作业的时候不要只看代码“觉得没问题”我用一套三步验证法在五分钟内完成自检。第一步按 F12 打开开发者工具切到 Network 面板刷新首页检查index.html、style.css、hero.jpg这三条请求是否全部返回 200。任何一条红色 404先去修路径。第二步按验证路径走一遍首页 → 图片页 → 联系页 → 首页每跳一次观察地址栏变化和 Network 面板新增的请求确认页面确实发生了跳转而不是原地刷新。第三步把浏览器窗口宽度拖到 375px 左右模拟手机屏幕检查图片有没有横向溢出、导航链接是不是还点得到。这三步分别对应三个最容易翻车的点资源加载、页面跳转、移动端适配。走完这三步作业的“可演示性”就有了保证。6.2 我会做的最后一个动作把整个文件夹压缩再交网页设计作业最常见的低级错误是把index.html单独拖进邮件附件图片和样式文件一个不带。老师解压之后打开只有一个纯文本页面评分自然难看。我的习惯是交付之前把整个项目文件夹压缩成一个 zip 包然后换一台电脑解压双击打开index.html自检一次。这一步能同时验证三件事文件有没有带全、相对路径换个环境还灵不灵、首页入口是不是能在同级目录里找到其他两个页面。说到底网页设计作业考的不是你把代码背得多熟而是你能不能交付一个“换台机器还能跑得起来”的最小站点。我写这类三页面作业写了很多次最深的体会是这个题目所有的坑都集中在“路径”两个字上。图片路径、样式表路径、超链接 href 路径本质上是一回事——你要清楚地知道每个资源相对于当前页面在哪里。理解这一点三个页面只是起点以后做到三十个页面、三百个页面思路也不会乱。希望帮到你。本文还有配套的精品资源点击获取