简介：网页设计基础练习资源，面向刚开始接触HTML与CSS的初学者，目标是完成三个包含文字、图片和可跳转超链接的页面。压缩包共8个文件，以3个html页面文件为主，配有4个webp和1个jpg图片素材，整体体积约176KB，结构轻量，适合学生课设或自学模仿。三个HTML页面分别演示段落、标题、强调文字等基础标签，图片插入与alt属性，以及锚点跳转、新窗口打开链接等常见交互写法；搭配的图片素材可直接引用，便于替换路径后运行测试。若结合CSS对页面配色和间距进行微调，即可形成一个完整的多页面小站点。已有4972人下载学习，按压缩包内的文件组织逐一打开对照，可以快速理解页面从结构到样式的搭建流程，适合作为第一次网页设计作业的参考范本。
1. 三个页面的网页设计：从单页 Demo 到多页面站点的第一步
「网页设计实现三个页面（文字、图片、超链接可以跳转）」这个标题看起来像是课程作业或入门练习，但你把它做扎实了，实际上练的是多页面站点的基本功。三个页面意味着你不再只面对一个 HTML 文件，而是开始处理文件之间的组织关系、图片资源的位置、导航怎么让访问者在页面间来回跳转——这些恰恰是很多人在单页 Demo 里永远碰不到的问题。这篇文章我按自己平时搭小站点的习惯，把理论、代码、参数和踩坑一次性讲清楚，你照着做完，不仅能交差，还能顺手摸清一套可复用的多页面工作流。
2. 动手之前：先想清楚三个页面的目录结构和跳转关系
2.1 为什么三个页面也要先规划文件组织
很多人做第一个多页面项目时，习惯把所有文件堆在一个文件夹里：index.html、page1.html、page2.html、1.jpg、2.png。三个页面、五六张图片还能凑合，但一旦页面增加到十个、图片增加到几十张，这种平铺结构就会失控。你可能会遇到：图片重名互相覆盖、想换图片却不知道哪些页面在引用、CSS 文件放哪里都不合适。
我一般会在一开始就按「页面、样式、图片」三层来组织。这不是为了显得专业，而是为了让相对路径清晰可算。三个页面时你可能感受不到回报，但这是唯一一个不需要重构就能直接往十页、二十页扩展的结构。另一个现实原因是：很多部署平台（比如静态托管服务）对目录结构有默认约定，index.html必须在站点根目录，图片和样式分开放也方便设置缓存策略。
文件命名同样值得现在就定规矩。页面文件用小写英文字母加连字符，比如about.html、product-list.html，不要用中文文件名，也不要用大写字母混合小写字母——某些服务器（尤其是 Linux 环境）区分大小写，About.html和about.html会被当成两个不同的文件。图片名用描述性的英文，banner-home.jpg比img1.jpg好一百倍，三个月后你回来看代码时能直接读懂。
2.2 相对路径与绝对路径：图片和页面跳转的底层规则
超链接跳转的本质是告诉浏览器「目标文件在哪」。浏览器解析地址有两种方式：相对路径和绝对路径。绝对路径是从站点根目录开始的完整路径，比如/images/banner.jpg；相对路径是相对于当前页面所在位置的路径，比如../images/banner.jpg。在多页面项目中，我几乎只用相对路径，因为站点根目录在本地预览和线上部署时可能不同，绝对路径在这两种环境下经常对不上。
相对路径的规则其实就是两句话：同级目录直接写文件名；想往上走一层目录就用../，走两层就用../../。如果你把页面放在pages/子目录里，图片放在根目录的images/下，那么从pages/about.html引用图片的路径就是../images/team.jpg，意思是「从当前目录pages/先退到上一级，再进入images/」。这个../是最容易出错的地方，少写一层图片就裂，多写一层路径直接 404。
另一个容易忽略的点是：链接跳转的目标文件如果和当前页面在同一个目录，直接写文件名就够了，不需要加./前缀。但有些开发者习惯加./明确表示「当前目录」，这也没问题。关键是要统一——不要一个页面写./about.html，另一个页面写about.html，排查问题时你会怀疑人生。我自己的习惯是：同一目录不写前缀，跨目录必须写../，绝不混用。
2.3 三页站点的最小目录骨架：一份可直接抄的清单
基于上面的规则，我给出一个最常用的三页面目录结构。这个结构覆盖了「首页 + 两个内容页」的典型场景，也够你完成标题要求的文字、图片、超链接跳转：
my-site/ ├── index.html ├── about.html ├── contact.html ├── css/ │ └── style.css └── images/ ├── banner-home.jpg ├── team-photo.jpg └── map-location.png页面之间和资源之间的引用关系如下：三个 HTML 文件都在根目录，所以它们之间的链接直接写文件名，index.html里链接到about.html就写<a href="about.html">。所有页面引用 CSS 统一写css/style.css，引用图片统一写images/xxx.jpg。这个结构的好处是：不管从哪个页面出发，只要你在根目录这一层，路径都是唯一且确定的，不需要考虑../的问题。
提示：如果你把页面放进了
pages/子目录，那么从pages/about.html跳回根目录的index.html就要写../index.html，引用 CSS 也要写../css/style.css。新手阶段别这么干，把三个页面都放根目录，少一层嵌套就少一类路径错误。
3. 用 HTML 把文字、图片、链接落到页面上
3.1 页面骨架与文字结构：语义化标签不是可有可无
每个 HTML 页面都需要一个完整的骨架：<!DOCTYPE html>声明文档类型，<html>根元素，<head>放元信息和标题，<body>放可见内容。这个骨架在三个页面里几乎一样，差别只在<title>和<body>的内容。<title>会显示在浏览器标签页上，也是搜索引擎判断页面主题的重要依据，所以三个页面不要都用同一个标题，首页 - 我的站点和关于我们 - 我的站点这样区分开。
文字内容的标签选择直接影响语义和可访问性。一级标题<h1>每个页面只出现一次，它是页面的内容主题，比如首页的h1写站点名称，关于页的h1写「关于我们」。段落用<p>，列表用<ul>加<li>，需要强调的文字用<strong>或<em>，而不是用<b>和<i>——后两个是表现层面的标签，前两个带有「重要」和「强调」的语义，屏幕阅读器能识别。一个页面如果只有<div>和<span>，结构上没错，但可读性和可维护性都很差。
以首页为例，文字部分我通常会这样组织：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>首页 - 我的站点</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>我的站点</h1> <p>一个用三个页面搭建起来的最小多页面示例</p> </header> <main> <h2>本站简介</h2> <p>这是一个<strong>完全静态</strong>的站点，不依赖任何后端服务。</p> <ul> <li>三个页面之间可以互相跳转</li> <li>图片、文字、超链接一应俱全</li> <li>全部代码可以直接在浏览器中运行</li> </ul> </main> </body> </html><meta charset="UTF-8">这一行是最容易漏的，漏掉之后中文在部分浏览器里会显示成乱码。<html lang="zh-CN">声明页面语言为简体中文，对无障碍和搜索引擎友好。<link rel="stylesheet" href="css/style.css">引入外部样式文件，注意rel="stylesheet"是固定写法，漏了样式就加载不出来。<main>标签标记页面主体内容，一个页面只能有一个。
3.2 图片的三种放置方式与 alt 属性
图片在多页面站点里承担两个任务：内容插图和页面装饰。内容插图用<img>标签，装饰背景用 CSS 的background-image属性。对于页面里的图片，<img>是正确选择，因为它可以通过alt属性提供替代文字，图片加载失败时浏览器会显示这行文字，屏幕阅读器也会朗读它。alt不是可写可不写的，它直接关系到无障碍评分和 SEO。
<img>标签的核心属性有三个：src指向图片文件路径，alt提供替代描述，width和height指定显示尺寸。我建议width和height都写上，即使你觉得「反正 CSS 会控制大小」——写上的好处是浏览器在图片加载完之前就能预留空间，避免页面布局跳动。尺寸单位用像素就行，响应式布局的缩放交给 CSS 的max-width: 100%处理。
<section> <h2>团队照片</h2> <img src="images/team-photo.jpg" alt="团队成员在会议室讨论方案" width="600" height="400"> <p>这是我们团队的日常办公场景，拍摄于一次内部评审会。</p> </section>alt的文字要描述图片内容，而不是写「图片」或「照片」这种废话。如果图片纯粹是装饰性的，alt可以留空但属性要保留，即alt=""，这样屏幕阅读器会跳过它，而不是念出文件名。src路径的写法我在第 2 章讲过：三个页面都在根目录时，统一写images/图片名.jpg；如果你把页面放进了子目录，就要用../images/图片名.jpg修正路径。
3.3 超链接跳转：站内页面、锚点和新窗口的取舍
超链接是三个页面之间唯一的信息桥梁，也是最容易出问题的元素。先看基础语法：<a href="目标地址">链接文字</a>。href是必填属性，没有它<a>就不是链接了。站内跳转时，href写目标页面的文件名，比如href="about.html"。跨目录时按相对路径规则写，href="../pages/about.html"。
除了页面跳转，href还能指向页面内的某个位置，这叫锚点链接。你要先给目标元素一个id，再在链接的href里写#加这个id。比如<h2 id="contact">联系方式</h2>，然后用<a href="#contact">跳到联系方式</a>。这在单页内导航时很好用，但它跳转的是当前页面内部，不是另一个页面。如果你希望从index.html跳转到about.html里的某个锚点，写法是href="about.html#contact"——先指定页面，再指定页面内的锚点。
关于新窗口打开，我用一句话说明白：站内链接不要加target="_blank"，站外链接可以加。target="_blank"会在新标签页打开链接，看起来很方便，但它打断了用户在当前页面的浏览流程，而且如果没有配合rel="noopener"，新页面可以通过window.opener对象反向控制原页面，这是一个安全风险。如果确实要新窗口打开外部链接，请写完整的属性组合：
<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部链接</a>rel="noopener noreferrer"的两个值分别做了两件事：noopener让新页面拿不到原页面的window.opener引用，noreferrer让浏览器不在请求新页面时发送来源地址。如果你用纯静态页面，没有用户登录态，这个风险影响不大，但养成习惯总没错。三个页面之间的互相跳转，直接用不带target的普通链接就好，浏览器默认在当前标签页打开，符合大多数用户的预期。
4. 用 CSS 把三个页面做成一套：导航、配色和公共样式
4.1 公共样式与页面独有样式：一份 CSS 文件怎么管三个页面
三个页面如果各自写一套样式，很快会出现「首页按钮是蓝色，关于页按钮变成了绿色」的失控局面。正确做法是把公共样式抽到一个css/style.css里，三个页面都通过<link>引入。公共样式包括：全局的字体设置、正文颜色、链接默认颜色、导航栏样式、页脚样式、按钮的基础样式。页面独有的样式才放到对应的 HTML 里，用<style>标签包裹。
怎么区分哪些样式是公共的？我给一个判断标准：如果两个页面都出现了同类元素且希望它们长得一样，这个元素的样式就该进公共 CSS。导航栏在三个页面都出现，按钮在首页和关于页都出现，它们的样式就是公共的。只有某个页面独有的组件，比如首页的横版大图 banner，才是页面独有的样式。
CSS 文件内部按模块排列，用注释分隔。我会按这个顺序写：全局重置与基础设置、导航栏、内容区通用样式、页脚、工具类。这样维护时按注释定位很快。选择器优先用 class（.类名），而不是标签名（如div）——标签选择器会把页面上所有同类标签都套上样式，等你需要差异化时就只能到处写覆盖样式，一旦覆盖的顺序不对就出现「改了没反应」的玄学问题。
/* 全局基础设置 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 1.6; color: #333; background-color: #f7f7f7; } /* 导航栏 */ .site-nav { background-color: #2c3e50; overflow: hidden; } .site-nav a { display: inline-block; color: #ffffff; padding: 14px 20px; text-decoration: none; } .site-nav a:hover { background-color: #34495e; }*选择符是重置所有元素的margin和padding，box-sizing: border-box让元素的宽高包含边框和内边距，这两个加在一起能消除很多「尺寸对不上」的麻烦。font-family里先写中文字体名再写英文字体名，最后以sans-serif兜底，这样在缺少指定字体的系统上也能正常渲染。.site-nav a是后代选择器，只作用于导航栏内的链接，不会误伤正文里的链接。
4.2 导航栏：让三个页面真正连成一张网
导航栏是多页面站点最重要的公共组件。它在每个页面上的结构和样式完全一样，唯一不同的是「当前页面」的视觉状态——用户需要知道自己此刻在哪个页面。常见的做法是给当前页面的导航链接加一个特殊 class，比如active，然后用 CSS 让它高亮。这个细节直接影响使用体验，没有当前态标识的导航会让用户在三个页面之间迷路。
导航栏的 HTML 结构我推荐用<nav>加无序列表，而不是一串散落的<a>标签。无序列表在语义上表达「一组项目」，屏幕阅读器能正确地把它们读成导航菜单。看下面的代码，注意index.html和about.html里的差异：
<nav class="site-nav"> <a href="index.html" class="active">首页</a> <a href="about.html">关于我们</a> <a href="contact.html">联系我们</a> </nav>在index.html中，首页链接带active类；在about.html中，关于我们链接带active类；在contact.html中，联系我们链接带active类。对应的 CSS 就是：
.site-nav a.active { background-color: #1abc9c; color: #ffffff; }active类的样式必须写在.site-nav a的后面，因为 CSS 的层叠规则是「后写的覆盖先写的」。如果你的样式没有生效，先检查是不是顺序反了。另一个需要注意的点是链接文字不能只有「首页」「关于」两个字就完事，用户需要从导航文字里预判点击后会看到什么，尽量用「关于我们」「联系我们」这种明确的短语。
4.3 内容区卡片布局：文字、图片排版的常见套路
三个页面的内容区如果只是从上往下平铺，页面会显得很单薄。最常见的升级方案是卡片式布局：每个内容块是一张白色圆角卡片，阴影衬托层次，卡片内部放图片加文字。这种布局简洁、适配性好，也符合大多数人的审美预期。实现方式不复杂，一个class加三条 CSS 属性的事。
<main class="content"> <section class="card"> <img src="images/banner-home.jpg" alt="站点横幅图" width="800" height="400"> <div class="card-body"> <h2>欢迎访问我的站点</h2> <p>这是首页的内容区，这里放了一句引导用户继续浏览的文字。</p> <a href="about.html" class="btn">了解更多</a> </div> </section> </main>对应的 CSS：
.content { max-width: 960px; margin: 20px auto; padding: 0 15px; } .card { background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); margin-bottom: 20px; overflow: hidden; } .card img { display: block; width: 100%; height: auto; } .card-body { padding: 20px; } .btn { display: inline-block; background-color: #1abc9c; color: #ffffff; padding: 10px 24px; border-radius: 4px; text-decoration: none; }.content的max-width: 960px限制内容区最大宽度，margin: 20px auto让它在宽屏幕上水平居中——auto左右边距在块级元素上就是均分剩余空间。.card img设置display: block去掉图片底部多出的几个像素空隙，width: 100%让图片撑满卡片宽度。.btn是一个文字按钮的样板，display: inline-block让它在保持行内特性的同时可以设置宽高和内边距。把这段结构复制到另外两个页面，只改图片和文字内容，三个页面的视觉一致性就有了。
5. 多页面跳转的常见问题排查：链接点了没反应的 5 个原因
5.1 图片裂了但路径看起来没错
现象：<img>标签的src看着是对的文件名也确认存在，但页面上的图片就是裂开不显示。
原因：路径是相对于当前页面的，不是相对于项目根目录的。你在about.html里写了src="images/team.jpg"，但about.html在pages/子目录里，实际查找的路径是「pages/目录下的images/team.jpg」，而真正的图片在项目根目录的images/下，结果就是找不到。另一个常见原因是图片文件名大小写不一致，Windows 本地不区分大小写，部署到 Linux 服务器就 404。
解决：确认当前页面所在目录，用../回到正确层级。图片文件在根目录images/下，页面在pages/下，就从pages/出发先回到上级再加images/。文件名大小写统一改成小写，开发时就管住自己，不要今天写Banner.jpg明天写banner.jpg。
5.2 链接点击无反应或跳错页面
现象：<a>链接看起来正常，点击后要么没反应，要么跳到了一个 404 页面。
原因：href里写的是相对路径，目标文件的实际位置和你写的路径对不上。比如从index.html链接到pages/about.html时写成href="pages/about.html"没问题，但如果页面本身就在pages/里，从它再链接回去就必须写../index.html，写成了index.html就会在当前目录找不到。还有一种情况是href的值以/开头，比如href="/about.html"，这种写法在本地直接双击打开 HTML 文件时会失效，因为/被解析成了磁盘根目录。
解决：全部改用相对路径并统一规则：同目录直接写文件名，跨目录用../修正。避免以/开头的路径，尤其是在本地预览阶段。写完链接后逐个点击一遍，每个页面都要回到首页再进另一个页面，确认双向跳转都正常。
5.3 样式只在某个页面失效
现象：三个页面都引入了css/style.css，但其中一个页面完全没有样式，另外两个正常。
原因：link标签的href写错了相对路径。这个页面可能在子目录里，href="css/style.css"在子目录下解析成了「子目录/css/style.css」，文件不存在所以样式全丢。同样的道理，如果页面在根目录而样式在css/子目录，写href="../css/style.css"反而会出错。
解决：打开出问题的页面，按下 F12 打开开发者工具，在「控制台」里查找 CSS 加载失败的报错信息，确认实际加载的路径和正确路径的差异。然后照着「页面位置 + 相对路径规则」修正href。这里我建议查看页面源码里<link>标签的href值，手动推算一遍再和实际目录对比。
5.4 本地双击打开正常，部署后图片和链接全部失效
现象：在编辑器里用 Live Server 预览一切正常，部署到服务器或托管平台后，图片裂了、样式丢了、链接 404。
原因：本地开发时很多工具会自动处理路径，或者目录结构和部署后的不一致。最常见的是项目文件夹的层级变了：本地项目根目录套着一层父文件夹，部署时直接上传了里面的文件，导致css/style.css在服务器上的真实位置和你写的不一样。还有一种情况是部署平台的根目录设定不同，有些平台要求把文件放在public/或dist/子目录下。
解决：部署前先确认平台要求的根目录结构，把项目里的文件按平台要求重新摆放。如果平台要求文件在子目录，你就把项目文件挪进那个子目录再上传，而不是直接传整个项目文件夹。上传后用一个没打开过的浏览器窗口访问线上地址，从头点一遍所有链接，不要用本地缓存欺骗自己。
5.5 页面显示乱码，中文全部变成问号
现象：HTML 文件里写的中文在浏览器显示成乱码，或者一串问号。
原因：<head>里缺少<meta charset="UTF-8">声明，或者这个声明的位置不对——它必须出现在<head>的前部，最好在第一行。浏览器在没有声明时可能按系统默认编码解析，而系统默认编码和文件的 UTF-8 编码对不上，中文就乱了。另一个原因是编辑器保存文件时用了非 UTF-8 编码，比如 GBK。
解决：在<head>最前面加上<meta charset="UTF-8">，然后在编辑器设置里确认文件保存编码为 UTF-8。如果你用的是常见代码编辑器，设置里搜索「encoding」或「编码」，选择「UTF-8」保存即可。改完编码后重新保存文件，刷新浏览器看效果。这个问题的特点是「本地打开正常，换台电脑或部署后就乱」，本质是编码声明缺失或文件本身编码不对。
6. 收尾验证与进阶：让三个页面像一份真正的小站点
6.1 用浏览器开发者工具做一次完整验收
三个页面做完不是终点，你还需要用开发者工具快速验证一遍。打开任意一个页面，按 F12 进入「网络」标签，刷新页面，检查所有资源的状态码。200表示正常，404表示文件没找到，红色条目都是要修的问题。然后切换到「控制台」标签，这里如果有红色报错（比如图片加载失败、样式表解析失败），会明确列出文件路径和行号。
逐个点击导航栏里的链接，每点一个都确认地址栏的 URL 变化是否符合预期，页面是否正常渲染。重点验证「从首页到关于页」「从关于页到联系页」「从联系页回到首页」这三条路径，双向都要走一遍。很多人只测了正向跳转，反向回来时才发现../路径写错了。这一步养成习惯，以后做十个页面的站点时也能在五分钟内完成基础验收。
6.2 给每个页面加「返回首页」的兜底链接
导航栏里通常已经包含了回首页的链接，但内容比较长的页面，用户滚动到页面底部后还得滚动回顶部才能点击导航。我的做法是在每个页面的页脚区域加一个「返回首页」的链接，这是最低成本的兜底导航。页脚结构如下：
<footer class="site-footer"> <p>本站为技术演示项目</p> <a href="index.html">返回首页</a> </footer>这个链接在三个页面里除了index.html自己不用加（首页不需要返回自己），另外两个页面都加上。页脚样式的核心是「和正文区分开」，我一般用深色背景和较浅的文字颜色，或者用一条上边框加灰色文字。这是技术细节，但也是用户体验的完整度问题——访客在任何位置都能找到出路，而不是被困在页面底部干瞪眼。
6.3 从三个页面扩展到十个页面的结构预演
三个页面跑通之后，如果你想继续往这个方向投入，下一步不是急着加页面，而是把导航结构重新梳理一遍。页面数量超过五个以后，平铺式的导航栏会变得拥挤，你需要考虑分组——把同类页面放到一个下拉菜单里，或者做一个二级导航。但这不是单纯的 CSS 问题，它取决于你的内容组织方式。
我个人的经验是：在第三个页面完成时，就该为每个页面写一行注释，说明这个页面的定位和与其它页面的关系。这行注释未来就是你扩展站点时的地图。比如about.html顶部写「关于我们：介绍站点背景，包含团队照片，从首页导航进入」。等页面数量到十个时，你翻看这些注释就能快速决定新页面放哪个分组、导航怎么改，不用再逐页打开去回忆。做技术方案时多花十分钟打的这些标记，后期能帮你节省按小时计算的时间。这是我踩过不少坑之后养成的习惯，希望你一开始就建立起来，希望帮到你。
本文还有配套的精品资源，点击获取
