简介网页设计基础练习资源面向刚开始接触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 hrefabout.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 langzh-CN head meta charsetUTF-8 title首页 - 我的站点/title link relstylesheet hrefcss/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 /htmlmeta charsetUTF-8这一行是最容易漏的漏掉之后中文在部分浏览器里会显示成乱码。html langzh-CN声明页面语言为简体中文对无障碍和搜索引擎友好。link relstylesheet hrefcss/style.css引入外部样式文件注意relstylesheet是固定写法漏了样式就加载不出来。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 srcimages/team-photo.jpg alt团队成员在会议室讨论方案 width600 height400 p这是我们团队的日常办公场景拍摄于一次内部评审会。/p /sectionalt的文字要描述图片内容而不是写「图片」或「照片」这种废话。如果图片纯粹是装饰性的alt可以留空但属性要保留即alt这样屏幕阅读器会跳过它而不是念出文件名。src路径的写法我在第 2 章讲过三个页面都在根目录时统一写images/图片名.jpg如果你把页面放进了子目录就要用../images/图片名.jpg修正路径。3.3 超链接跳转站内页面、锚点和新窗口的取舍超链接是三个页面之间唯一的信息桥梁也是最容易出问题的元素。先看基础语法a href目标地址链接文字/a。href是必填属性没有它a就不是链接了。站内跳转时href写目标页面的文件名比如hrefabout.html。跨目录时按相对路径规则写href../pages/about.html。除了页面跳转href还能指向页面内的某个位置这叫锚点链接。你要先给目标元素一个id再在链接的href里写#加这个id。比如h2 idcontact联系方式/h2然后用a href#contact跳到联系方式/a。这在单页内导航时很好用但它跳转的是当前页面内部不是另一个页面。如果你希望从index.html跳转到about.html里的某个锚点写法是hrefabout.html#contact——先指定页面再指定页面内的锚点。关于新窗口打开我用一句话说明白站内链接不要加target_blank站外链接可以加。target_blank会在新标签页打开链接看起来很方便但它打断了用户在当前页面的浏览流程而且如果没有配合relnoopener新页面可以通过window.opener对象反向控制原页面这是一个安全风险。如果确实要新窗口打开外部链接请写完整的属性组合a hrefhttps://example.com target_blank relnoopener noreferrer外部链接/arelnoopener 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和paddingbox-sizing: border-box让元素的宽高包含边框和内边距这两个加在一起能消除很多「尺寸对不上」的麻烦。font-family里先写中文字体名再写英文字体名最后以sans-serif兜底这样在缺少指定字体的系统上也能正常渲染。.site-nav a是后代选择器只作用于导航栏内的链接不会误伤正文里的链接。4.2 导航栏让三个页面真正连成一张网导航栏是多页面站点最重要的公共组件。它在每个页面上的结构和样式完全一样唯一不同的是「当前页面」的视觉状态——用户需要知道自己此刻在哪个页面。常见的做法是给当前页面的导航链接加一个特殊 class比如active然后用 CSS 让它高亮。这个细节直接影响使用体验没有当前态标识的导航会让用户在三个页面之间迷路。导航栏的 HTML 结构我推荐用nav加无序列表而不是一串散落的a标签。无序列表在语义上表达「一组项目」屏幕阅读器能正确地把它们读成导航菜单。看下面的代码注意index.html和about.html里的差异nav classsite-nav a hrefindex.html classactive首页/a a hrefabout.html关于我们/a a hrefcontact.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 classcontent section classcard img srcimages/banner-home.jpg alt站点横幅图 width800 height400 div classcard-body h2欢迎访问我的站点/h2 p这是首页的内容区这里放了一句引导用户继续浏览的文字。/p a hrefabout.html classbtn了解更多/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里写了srcimages/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时写成hrefpages/about.html没问题但如果页面本身就在pages/里从它再链接回去就必须写../index.html写成了index.html就会在当前目录找不到。还有一种情况是href的值以/开头比如href/about.html这种写法在本地直接双击打开 HTML 文件时会失效因为/被解析成了磁盘根目录。解决全部改用相对路径并统一规则同目录直接写文件名跨目录用../修正。避免以/开头的路径尤其是在本地预览阶段。写完链接后逐个点击一遍每个页面都要回到首页再进另一个页面确认双向跳转都正常。5.3 样式只在某个页面失效现象三个页面都引入了css/style.css但其中一个页面完全没有样式另外两个正常。原因link标签的href写错了相对路径。这个页面可能在子目录里hrefcss/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 charsetUTF-8声明或者这个声明的位置不对——它必须出现在head的前部最好在第一行。浏览器在没有声明时可能按系统默认编码解析而系统默认编码和文件的 UTF-8 编码对不上中文就乱了。另一个原因是编辑器保存文件时用了非 UTF-8 编码比如 GBK。解决在head最前面加上meta charsetUTF-8然后在编辑器设置里确认文件保存编码为 UTF-8。如果你用的是常见代码编辑器设置里搜索「encoding」或「编码」选择「UTF-8」保存即可。改完编码后重新保存文件刷新浏览器看效果。这个问题的特点是「本地打开正常换台电脑或部署后就乱」本质是编码声明缺失或文件本身编码不对。6. 收尾验证与进阶让三个页面像一份真正的小站点6.1 用浏览器开发者工具做一次完整验收三个页面做完不是终点你还需要用开发者工具快速验证一遍。打开任意一个页面按 F12 进入「网络」标签刷新页面检查所有资源的状态码。200表示正常404表示文件没找到红色条目都是要修的问题。然后切换到「控制台」标签这里如果有红色报错比如图片加载失败、样式表解析失败会明确列出文件路径和行号。逐个点击导航栏里的链接每点一个都确认地址栏的 URL 变化是否符合预期页面是否正常渲染。重点验证「从首页到关于页」「从关于页到联系页」「从联系页回到首页」这三条路径双向都要走一遍。很多人只测了正向跳转反向回来时才发现../路径写错了。这一步养成习惯以后做十个页面的站点时也能在五分钟内完成基础验收。6.2 给每个页面加「返回首页」的兜底链接导航栏里通常已经包含了回首页的链接但内容比较长的页面用户滚动到页面底部后还得滚动回顶部才能点击导航。我的做法是在每个页面的页脚区域加一个「返回首页」的链接这是最低成本的兜底导航。页脚结构如下footer classsite-footer p本站为技术演示项目/p a hrefindex.html返回首页/a /footer这个链接在三个页面里除了index.html自己不用加首页不需要返回自己另外两个页面都加上。页脚样式的核心是「和正文区分开」我一般用深色背景和较浅的文字颜色或者用一条上边框加灰色文字。这是技术细节但也是用户体验的完整度问题——访客在任何位置都能找到出路而不是被困在页面底部干瞪眼。6.3 从三个页面扩展到十个页面的结构预演三个页面跑通之后如果你想继续往这个方向投入下一步不是急着加页面而是把导航结构重新梳理一遍。页面数量超过五个以后平铺式的导航栏会变得拥挤你需要考虑分组——把同类页面放到一个下拉菜单里或者做一个二级导航。但这不是单纯的 CSS 问题它取决于你的内容组织方式。我个人的经验是在第三个页面完成时就该为每个页面写一行注释说明这个页面的定位和与其它页面的关系。这行注释未来就是你扩展站点时的地图。比如about.html顶部写「关于我们介绍站点背景包含团队照片从首页导航进入」。等页面数量到十个时你翻看这些注释就能快速决定新页面放哪个分组、导航怎么改不用再逐页打开去回忆。做技术方案时多花十分钟打的这些标记后期能帮你节省按小时计算的时间。这是我踩过不少坑之后养成的习惯希望你一开始就建立起来希望帮到你。本文还有配套的精品资源点击获取