D01 作品集站点

摘要：作品集是最常见的对外页面：三个页面、一套导航、一组项目卡片。它的难点不在标签，而在跨页面的一致性——导航、页脚、路径必须在同一套规则下复用。本文给出目录结构、三页完整结构、导航一致性检查，以及本项目五项取舍的记录方式。
关键词：多页面，导航一致性，目录结构，作品集，路径

所属：frontend/html / D-实战 ｜上一篇：D00-总结 ｜下一篇：D02-文章详情页

1 引言

一个页面时，路径怎么写都不会错；三个页面时，./about.html 与 about.html 的区别、首页在子目录时的相对路径，都会变成错误来源。

本文用一个三页站点把路径与导航固定下来。范围见表 1-1。

项	本文覆盖	本文不覆盖
结构	目录规范、三页骨架、导航与页脚复用	构建脚本与模板抽取（C05）
内容	首页、项目列表、关于页	动态数据与接口
质量	链接可达、图片替代文本、语义骨架	视觉设计与响应式细节

2 预备知识

项	要求	核对方式
环境	A02 的本地服务器	能访问 `localhost`
前置	A05、A08	路径与骨架已掌握
素材	三张项目缩略图，命名 `p1.jpg`、`p2.jpg`、`p3.jpg`	放 `assets/images/`
浏览器	Chrome 130+	开发者工具可用

3 原理与实现

3.1 目录与页面关系

三个页面处于同一层级，所有站内链接都用同目录相对路径，如图 3-1 所示。

flowchart TD
    R["site/"] --> I["index.html 首页"]
    R --> P["projects.html 项目列表"]
    R --> A["about.html 关于"]
    R --> S["assets/"]
    S --> IMG["images/ 三张缩略图"]
    I -->|"./projects.html"| P
    P -->|"./about.html"| A
    A -->|"./index.html"| I

图 3-1 三页站点的目录与链接关系

图上可见：三页同层时链接写法统一为 ./文件名.html，不需要回溯上级目录，路径错误率最低。

3.2 三页结构

<!-- index.html：首页 -->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>李明的工作笔记</title>
    <meta name="description" content="前端开发，关注内容结构与可访问性。" />
  </head>
  <body>
    <header>
      <nav aria-label="主导航">
        <ul>
          <li><a href="./index.html" aria-current="page">首页</a></li>
          <li><a href="./projects.html">项目</a></li>
          <li><a href="./about.html">关于</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>做结构清晰的页面</h1>
      <p>六年经验，负责内容站点与文档系统的前端实现。</p>
    </main>
    <footer><p>© 2026 李明</p></footer>
  </body>
</html>

<!-- projects.html：项目列表，重复头部与页脚，省略 -->
<main>
  <h1>项目</h1>
  <ul>
    <li>
      <h2>技术文档站点</h2>
      <p>基于静态生成的多科目文档站，约 70 篇。</p>
      <img src="./assets/images/p1.jpg" alt="文档站点首页截图" width="480" height="270" loading="lazy" />
    </li>
    <li>
      <h2>博客前台</h2>
      <p>服务端渲染，支持时间线与分类筛选。</p>
      <img src="./assets/images/p2.jpg" alt="博客列表页截图" width="480" height="270" loading="lazy" />
    </li>
    <li>
      <h2>运营后台</h2>
      <p>表单密集的录入界面，接入权限到按钮级。</p>
      <img src="./assets/images/p3.jpg" alt="后台表单页截图" width="480" height="270" loading="lazy" />
    </li>
  </ul>
</main>

<!-- about.html：关于页，重复头部与页脚，省略 -->
<main>
  <h1>关于</h1>
  <p>现居杭州，做前端与文档系统。</p>
  <address>邮箱：<a href="mailto:hello@example.com">hello@example.com</a></address>
</main>

三页的复用与差异见表 3-1。

区块	是否复用	差异点
`head`	复用	`title` 与 `description` 各自不同
导航	复用	当前页用 `aria-current="page"` 标记
主体	不复用	三页内容不同
页脚	复用	无差异

实施步骤见表 3-2。

步骤	动作	产出
1	建 `site/` 与 `site/assets/images/`	目录就绪
2	写 `index.html`，导航链接先写全三页	首页可跳转
3	复制页面生成 `projects.html` 与 `about.html`，改 `title` 与主体	三页齐全
4	复制两张页面时同步改 `aria-current`	导航状态正确
5	放入三张缩略图，补 `alt` 与宽高	图片正常
6	逐页点击导航，确认无 404	链接闭环

4 验证与讨论

打开首页，依次点击三个导航项，确认每页都能到达且当前项有标记。
在任意页面按 Tab 遍历，确认导航项顺序与视觉顺序一致。
缩小窗口到 360 像素宽，确认内容未被截断（允许单列）。
断开网络后刷新，确认样式与图片仍能显示（资源均为本地）。

检查项	预期结果	说明
导航闭环	任意页可到其余两页	图 3-1
当前页标记	`aria-current` 在对应项上	朗读软件可播报
图片加载	三张缩略图均显示	路径与文件名一致
断网可用	页面与图片完整	无外部依赖
结构一致	三页页头页脚文字完全相同	复制时未漏改

本项目五项取舍见表 4-1。

决策点	采用方案	备选方案	不选的理由
页面层级	三页同层	按栏目分目录	页面少时同层路径最短，链接最稳
导航复用	手工复制	模板抽取	三页复制成本低于搭建构建流程
项目展示	列表 + 标题 + 摘要 + 图	卡片网格（CSS）	布局属于样式阶段，先保证结构
图片加载	`loading="lazy"`	全部预加载	首屏无需三张缩略图，节省带宽
页面标题	统一「站点名」	每页带栏目后缀	三页内容差异小，避免重复冗余

讨论与局限。 手工复制导航在页面超过五页后会失控，届时应转入 C05 的模板方案。另 aria-current 只标当前页，跨栏目导航需要区分 page 与 step。

5 常见问题

现象	原因	处理
从子目录页面跳首页 404	绝对路径写成 `/index.html`	改为同目录相对路径
当前页没有高亮	复制页面后未改 `aria-current`	移到当前页对应的链接上
缩略图显示为破图	文件名大小写或目录层级不符	按图 3-1 核对，文件名全小写
三页页脚不一致	手工复制时改动了其中一页	统一文本，逐页比对
手机端横向滚动	图片宽度超出容器	补 `max-width: 100%` 或样式处理

6 结论

序号	结论	依据
1	同层页面用同目录相对路径，错误率最低	图 3-1
2	导航与页脚复用，当前页必须标记	表 3-1
3	复制页面的风险在漏改，需逐页核对	表 3-2、4 节
4	三页以内手工复制优于引入构建	表 4-1

上一篇：D00-总结
下一篇：D02-文章详情页
返回：D00-总结｜科目 README

参考文献

[1] MDN Web Docs · 创建超链接，https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks（访问于 2026-10-29）
[2] W3C · 导航地标与 aria-current，https://www.w3.org/WAI/ARIA/apg/patterns/（访问于 2026-10-29）