简介这份资源面向网页设计初学者与前端入门学习者围绕“三个页面”的完整实现展开重点解决文字排版、图片展示与超链接跳转三大基础能力的落地问题。压缩包共8个文件包含3个html页面文件、4个webp图片与1个jpg图片整体约176KBhtml负责页面结构与跳转逻辑图片素材用于内容填充与视觉呈现体积轻量便于直接打开对照练习。资源中涉及HTML文档结构、段落与标题标签、img图片引用、a标签超链接以及锚点跳转等核心知识点可帮助读者理解多页面组织方式与页面间导航的实现思路。目前已有4972人学习下载适合作为课堂练习、课后作业或自学练手素材通过对照页面文件与素材快速掌握网页基础元素的组合与跳转效果调试方法。1. 从零手写三个能跳转的网页这套方案到底解决什么问题很多人第一次接触 web 前端卡住的地方不是“不会写标签”而是不知道一个能跑起来、能点、能跳转的最小站点到底该长什么样。你打开编辑器面对空白文件脑子里只有零散的p、img、a却拼不出一个完整可交付的东西。这套方案要解决的就是这件事用三个互相跳转的页面把文字、图片、超链接这三样最基础的元素串成一个真正能用的站点。它适合两类人——正在做 web 课程设计、需要交一份完整作业的学生以及想快速验证某个页面结构、不想被框架绑架的开发者。三个页面不多但足够把“结构、样式、跳转关系”这条主线走通后面再学框架心里是有底的。2. 需求拆解与技术选型为什么三个页面用纯 HTML 加 CSS 就够2.1 先把“三个页面”的需求翻译成可验收的条目“网页设计实现三个页面文字、图片、超链接可以跳转”——这句话看着简单但真动手前得把它拆成能打勾的清单否则做到一半就会漏东西。我一般会拆成下面这几条页面数量三个独立 HTML 文件文件名清晰比如index.html、gallery.html、about.html。文字每个页面至少有标题、段落字体、字号、行距有基本设置不能是浏览器默认的“裸奔”样式。图片至少一个页面包含图片展示图片能正常加载有替代文本尺寸不撑破布局。超链接三个页面之间能互相跳转导航栏在每个页面都出现点哪个都能到。跳转正确性不能出现点了没反应、跳到 404、或者跳回自己这种问题。这份清单就是后面验收的依据。很多同学交作业时被扣分不是做得难看而是“跳转关系”没闭环——比如从首页能到图片页但图片页回不去首页。需求拆到这个粒度做的时候就不会漏。2.2 技术选型纯 HTML CSS不引入框架的理由这个项目最容易翻车的地方是选型过度。有人一上来就上 Vue、React结果三个静态页面配一堆构建工具环境还没跑通作业截止了。我的判断很直接三个页面、无数据交互、无后端纯 HTML CSS 就是最优解。理由有三条。第一交付物是静态文件双击就能打开不依赖任何服务器环境老师或评审拿到就能看。第二跳转用a href原生支持不需要路由库少一层抽象就少一类 bug。第三样式用外部 CSS 文件统一管理三个页面共享同一套导航和配色改一处全站生效这本身就是“工程化”的雏形。提示如果课程明确要求用某个框架那按课程要求来如果只是“实现三个能跳转的页面”纯 HTML CSS 是性价比最高的选择。2.3 目录结构三个页面怎么组织才不乱目录结构看着是小事但它决定了你后面改起来顺不顺。我一般用这样的结构project/ ├── index.html # 首页文字为主 ├── gallery.html # 图片展示页 ├── about.html # 介绍页含跳转入口 ├── css/ │ └── style.css # 全站共用样式 └── images/ ├── banner.jpg └── photo-01.jpgcss和images分开放HTML 文件放在根目录。这样写link relstylesheet hrefcss/style.css和img srcimages/photo-01.jpg时路径清晰不会出现“图片在本地能看、换台电脑就裂了”的情况。路径问题后面避坑章节会专门讲这里先把结构定下来。3. 页面结构设计三个页面各自负责什么跳转关系怎么连3.1 首页 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 !-- 顶部导航三个页面共用保证跳转闭环 -- nav classnavbar a hrefindex.html classactive首页/a a hrefgallery.html图片展示/a a hrefabout.html关于/a /nav main classcontent h1欢迎来到我的站点/h1 p这是一个用纯 HTML 和 CSS 搭建的三页站点包含文字、图片和超链接跳转。/p p你可以点击上方导航进入图片展示页或关于页。/p /main footer classfooter p© 2025 我的站点/p /footer /body /html这段代码里nav是导航区三个a标签分别指向三个页面classactive用来标记当前页方便 CSS 高亮。main放主体文字footer放版权信息。注意href写的是相对路径三个文件在同一目录下直接写文件名即可。langzh-CN和charsetUTF-8是中文页面的基本配置少了可能出现乱码。3.2 图片展示页 gallery.html图片加载与布局图片页的重点是“图片能正常显示且不破坏布局”。我一般用网格布局配合object-fit控制图片比例。main classcontent h1图片展示/h1 div classgallery figure img srcimages/photo-01.jpg alt示例图片一 figcaption示例图片一/figcaption /figure figure img srcimages/banner.jpg alt示例图片二 figcaption示例图片二/figcaption /figure /div /mainfigure和figcaption是语义化标签图片和说明文字绑在一起比单纯堆img更规范。alt属性是替代文本图片加载失败时会显示也是无障碍访问的基本要求。对应的 CSS 这样写.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .gallery img { width: 100%; height: 200px; object-fit: cover; /* 裁剪填充避免图片变形 */ border-radius: 8px; }grid-template-columns配合auto-fit和minmax屏幕宽就多列、窄就少列不用写媒体查询也能自适应。object-fit: cover是关键它让不同尺寸的图片统一填充到 200px 高度不会一张高一张矮把布局撑乱。3.3 关于页 about.html跳转入口与信息说明关于页承担两个作用说明站点信息以及提供返回其他页面的入口。它的结构和首页类似但内容更偏介绍。main classcontent h1关于本站/h1 p本站点用于演示三个页面之间的超链接跳转包含文字、图片两种内容形式。/p p想查看更多图片请前往 a hrefgallery.html图片展示页/a。/p p想回到起点请前往 a hrefindex.html首页/a。/p /main这里把跳转链接嵌在正文里和导航栏形成双重入口。正文内的a是行内链接导航栏的是全局链接两种方式都覆盖到跳转关系就完整了。三个页面互相之间都有路径可达不存在“孤岛页面”。3.4 共用样式 style.css导航高亮与基础排版三个页面共用一套样式这是“改一处全站生效”的关键。核心是导航栏和基础排版。* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Microsoft YaHei, sans-serif; line-height: 1.6; color: #333; } .navbar { display: flex; gap: 24px; padding: 16px 32px; background: #2c3e50; } .navbar a { color: #ecf0f1; text-decoration: none; } .navbar a.active { color: #f39c12; /* 当前页高亮 */ font-weight: bold; } .content { max-width: 960px; margin: 32px auto; padding: 0 16px; }box-sizing: border-box让内边距不撑大元素宽度是布局不跑偏的基础。.navbar a.active给当前页加高亮色用户一眼知道自己在哪。.content限制最大宽度并居中长文本不会横跨整个屏幕阅读体验好很多。这套样式三个页面共用导航栏外观完全一致跳转时视觉不跳变。4. 关键实现细节跳转、路径与图片加载的落地写法4.1 超链接跳转的三种写法与适用场景超链接看着简单但写法不同行为差别很大。项目里常用的有三种!-- 1. 相对路径同目录下跳转最常用 -- a hrefgallery.html图片展示/a !-- 2. 锚点跳转跳到当前页某个位置 -- a href#top回到顶部/a !-- 3. 新窗口打开不覆盖当前页 -- a hrefabout.html target_blank relnoopener关于新窗口/a相对路径是三个页面互跳的主力只要文件在同一目录写文件名就行。锚点跳转适合长页面内部定位比如页面底部放一个“回到顶部”。target_blank是新窗口打开加relnoopener是安全习惯防止新页面通过window.opener操作原页面。这个项目里导航栏用相对路径正文内链也用相对路径保持行为一致。4.2 图片路径与加载失败的处理图片加载失败是交作业时的高频问题根因几乎都是路径写错。判断方法很简单打开浏览器开发者工具看 Console 或 Network 面板红色报错会直接告诉你哪个路径 404。!-- 正确图片在 images 目录下 -- img srcimages/photo-01.jpg alt示例图片 !-- 错误多写了一层或少了目录名 -- img src./images/images/photo-01.jpg alt示例图片路径规则是以当前 HTML 文件所在位置为起点。index.html在根目录images也在根目录所以写images/photo-01.jpg。如果 HTML 在子目录里路径就要相应调整。另外图片文件名建议用英文或拼音避免中文和空格某些环境下中文文件名会加载失败。注意图片文件本身不要太大单张控制在 500KB 以内否则打开页面会明显卡顿。4.3 导航栏复用三个页面保持一致的做法三个页面都要有导航栏最怕的是改了一个忘了另一个。我的做法是把导航栏 HTML 写成完全相同的片段复制到三个页面里样式统一由.navbar控制。虽然 HTML 有重复但三个静态页面没必要上模板引擎复制粘贴反而最直接。关键是复制时保证三点一致链接顺序一致、href路径一致、active类只加在当前页对应的链接上。比如gallery.html里active要加在“图片展示”那个a上而不是首页。这样用户跳转时高亮跟着变体验才连贯。4.4 响应式基础让三个页面在手机上也能看现在评审很可能用手机打开你的页面所以基础响应式要有。最简单的方式是加 viewport meta 标签配合弹性布局。meta nameviewport contentwidthdevice-width, initial-scale1.0这行代码让页面宽度跟随设备宽度不加的话手机上会按桌面宽度缩放字小得看不清。布局上导航栏用flex加gap图片用grid加auto-fit都已经自带自适应能力。如果导航项在窄屏挤在一起可以加一条媒体查询media (max-width: 480px) { .navbar { flex-direction: column; gap: 8px; } }屏幕小于 480px 时导航竖排点起来不费劲。响应式不用做太复杂这几点覆盖到手机上就能正常看和跳转。5. 避坑与常见问题排查跳转和图片最容易翻车的五个点5.1 点了链接没反应或者跳到 404现象点击导航链接页面没变化或者浏览器显示“找不到文件”。原因通常是href路径写错或者文件名大小写不一致。比如文件叫Gallery.html链接写gallery.html在某些系统上能过换台机器就 404。解决统一文件名全小写href和实际文件名逐字核对用开发者工具 Network 面板看请求的实际路径。5.2 图片显示不出来只有一个裂图标现象页面布局在但图片位置是空白或裂图。原因有三类——路径错、文件名错、图片文件不在预期目录。解决先看alt文本有没有显示显示了说明标签在、图没加载再看 Network 面板图片请求是不是 404最后核对images目录下文件名和src是否完全一致包括扩展名.jpg和.jpeg的区别。5.3 三个页面样式不一致导航栏颜色不一样现象跳转后导航栏颜色、间距变了像两个站点。原因通常是某个页面漏引了style.css或者引了但路径不对。解决检查每个 HTML 的head里都有link relstylesheet hrefcss/style.css路径一致。如果用了内联样式覆盖把内联样式删掉统一走外部 CSS。5.4 中文乱码标题和正文变成问号现象页面打开后中文显示为乱码。原因是没声明字符编码或者编辑器保存的编码和声明的不一致。解决每个 HTML 的head第一行加meta charsetUTF-8同时确认编辑器保存文件时用的是 UTF-8 编码两者一致就不会乱码。5.5 页面能跳转但回不到上一页现象从首页能到图片页但图片页没有回首页的入口。原因是导航栏没复制全或者某个页面漏了链接。解决三个页面的导航栏必须包含全部三个链接形成闭环。检查方法从任意页面出发能否通过点击到达另外两个页面都能到才算合格。6. 验收与答辩怎么证明这三个页面真的能用验收这件事很多人栽在“自己觉得没问题一演示就翻车”。我一般会走一套固定流程你也可以直接照做。第一步本地双击打开index.html不通过任何服务器确认页面能正常渲染。这一步排除环境依赖问题。第二步依次点击导航栏三个链接确认每次都能跳到正确页面且当前页高亮正确。第三步在图片页确认所有图片正常显示缩放浏览器窗口看布局是否自适应、图片是否变形。第四步打开开发者工具切到 Network 面板刷新页面确认没有红色 404 请求。第五步用手机或浏览器移动模式打开确认导航可点、文字可读。下面这张表可以作为验收清单逐项打勾验收项合格标准检查方式页面数量三个 HTML 文件齐全目录查看跳转闭环任意页可达另外两页逐一点击导航图片加载无裂图、无 404Network 面板样式一致导航栏三页统一对比三个页面中文显示无乱码直接查看移动端可读可点移动模式打开答辩时评审常问的问题无非几个“跳转怎么实现的”“图片路径怎么管的”“样式怎么复用”。回答时不要背概念直接打开代码指给他看a href是跳转images/是路径style.css是共用样式。能指着代码说清楚比说一堆术语管用。我自己的血泪经验是交作业前一定要换一台电脑打开一次。有次我在自己机器上一切正常换台机器图片全裂原因是图片用了绝对路径C:\Users\...换机器自然找不到。从那以后我每次做完静态页面都强制走一遍“换目录打开 Network 面板查 404”的流程再没翻过车。希望这套流程和这份方案能帮你把三个页面的作业稳稳交出去。本文还有配套的精品资源点击获取