A09 实战拼一张个人主页

摘要：把 A03 至 A08 的标签组合成一个可交付的单文件页面，是入门阶段的收口动作。本文给出一次完整实施：先按语义骨架划分区块，再逐区块填入标签，最后按验收清单逐项核对。产出一个含导航、正文、图片、联系方式与页脚的个人主页，可直接作为作品展示。
关键词：页面规划，语义骨架，验收清单，单文件页面

所属：frontend/html / A-入门 ｜上一篇：A08-语义化页面骨架 ｜下一篇：无 ｜返回：A00-总结

1 引言

前七篇各自解决一类标签，但真实页面里它们同时出现，问题也从单点变成组合：导航压在头部、图片挤乱段落、标题层级跳级。本文用一个页面把六类标签串起来，重点不在新知识，而在组合顺序与验收标准。

范围见表 1-1。

项	本文覆盖	本文不覆盖
结构	语义骨架 + 文本 + 图片 + 列表 + 联系信息	表单（已在 A07 单独验证）
样式	仅用最小样式标出分区边界	主题、响应式与视觉设计
交付	单文件 `index.html`，可本地预览	部署上线（见 C 阶段与 D 阶段）

2 预备知识

项	要求	核对方式
环境	A02 的本地服务器可用	能访问 `localhost`
浏览器	Chrome 130+ / Edge 130+	地址栏 `about:version` 查看
素材	一张头像图 `assets/images/avatar.jpg`	文件名全小写
前置	A03 ~ A08	六类标签均可手写

3 原理与实现

3.1 页面规划

按「先分区、再填内容、最后校验」推进，如图 3-1 所示。

flowchart LR
    A["列区块<br/>头部/主体/页脚"] --> B["定标签<br/>header/main/article"]
    B --> C["填内容<br/>标题/段落/图片/列表"]
    C --> D["连导航<br/>相对路径"]
    D --> E["验收<br/>结构+呈现+链接"]

图 3-1 个人主页的实施顺序

图上可见：标签选择发生在内容填写之前，顺序颠倒会导致先写内容再硬套结构。

区块与标签的对应关系见表 3-1。

区块	内容	标签
页头	站点名 + 主导航	`header` + `nav` + `ul`
主体	姓名、简介、头像、技能	`main` + `article` + `h1` + `p`
图区	头像与图注	`figure` + `img` + `figcaption`
技能区	三项技能	`section` + `h2` + `ul`
联系方式	邮箱、城市	`address` + `a`
页脚	版权与年份	`footer` + `time`

实施步骤见表 3-2，按顺序执行即可，不需要回头改结构。

步骤	动作	产出
1	建 `index.html`，写入 doctype 与四层骨架	空页面可打开
2	填入 `header` 与 `nav`	导航可点击
3	填入 `main > article` 与 `h1`、`p`	标题与简介显示
4	插入 `figure` 与头像图	图片显示，带图注
5	添加 `section` 与技能 `ul`	技能成列表
6	补 `address`、`footer` 与 `time`	页脚完整
7	加最小样式标出分区边界	区块可辨认
8	按 4 节清单验收	全部通过

3.2 完整代码

<!-- 运行环境：Chrome 130+；保存为 html-practice/index.html，UTF-8 -->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>李明 · 个人主页</title>
    <style>
      /* 仅用于标出分区边界，正式样式见 CSS 科目 */
      body { max-width: 46rem; margin: 0 auto; padding: 1.5rem; font: 16px/1.7 system-ui, sans-serif; }
      header nav ul { display: flex; gap: 1rem; list-style: none; padding: 0; }
      figure { margin: 0; }
      img { max-width: 100%; height: auto; display: block; }
      figcaption { color: #555; font-size: 0.875rem; }
      section { border-top: 1px solid #ddd; padding-top: 0.5rem; }
    </style>
  </head>
  <body>
    <header>
      <p>李明的工作笔记</p>
      <nav aria-label="主导航">
        <ul>
          <li><a href="./index.html">首页</a></li>
          <li><a href="#skills">技能</a></li>
          <li><a href="#contact">联系</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <article>
        <h1>李明</h1>
        <p>前端开发，关注内容结构与可访问性。维护一个技术文档站点。</p>

        <figure>
          <img src="./assets/images/avatar.jpg" alt="头像：浅色背景下的侧脸照片" width="320" height="320" loading="lazy" />
          <figcaption>头像照片，2026 年 8 月摄于苏州。</figcaption>
        </figure>

        <section id="skills">
          <h2>技能</h2>
          <ul>
            <li>HTML 结构设计与语义化</li>
            <li>CSS 布局与响应式</li>
            <li>构建流程与自动化部署</li>
          </ul>
        </section>

        <section id="contact">
          <h2>联系方式</h2>
          <address>
            邮箱：<a href="mailto:hello@example.com">hello@example.com</a><br />
            城市：杭州
          </address>
        </section>
      </article>
    </main>

    <footer>
      <p>最后更新：<time datetime="2026-10-29">2026 年 10 月 29 日</time></p>
    </footer>
  </body>
</html>

4 验证与讨论

保存文件，浏览器访问 http://localhost:3000/index.html。
打开 Elements 面板，核对骨架与图 3-1 一致：header → main > article → footer。
逐个点击导航：首页与页内锚点都能到达目标位置。
按表 4-1 逐项打勾，任一项不通过则回到对应步骤。
断网后刷新，确认页面仍完整显示（单文件、无外部依赖）。

序号	验收项	判定标准	依据
1	文档结构	doctype、html、head、body 齐全	A03
2	标题层级	仅一个 h1，h2 从属于 h1	A04
3	图片	正常显示，有 alt 与图注	A05
4	列表	导航与技能均为 ul/li	A06
5	语义骨架	main 唯一，section 均有标题	A08
6	链接	三个导航目标均可达，无 404	A05
7	时间	time 带 datetime 属性	A08
8	无外部依赖	断网刷新仍正常	4 节步骤 5

实施过程中的取舍记录见表 4-2。

决策点	采用方案	备选方案	不选的理由
页面数量	单文件 `index.html`	拆成多个页面	入门阶段只验证结构，多文件增加路径出错点
样式位置	内联 `<style>`	外部 `styles/main.css`	单文件便于分发，外部样式留到 CSS 科目
头像区结构	`figure` + `figcaption`	`div` + `p`	图注与图片需在结构上成对
导航锚点	页内 `#id`	独立页面	页面内容少，锚点即可完成跳转
联系方式	`address`	`p` + `br`	联系信息有专门标签，语义更准确

讨论与局限。 内联样式随文件增长会失控，超过一个页面即应抽出外部样式表。页内锚点依赖固定 id，改名时需同步导航。页面在窄屏下只有一条纵向滚动，未做多列布局，这属于样式层面，不影响结构验收。

5 常见问题

现象	原因	处理
导航点击后位置偏上	固定头部遮挡锚点	用 CSS 的 `scroll-margin-top`
图片撑破容器	未限制最大宽度	加 `max-width: 100%`
技能区标题不显示	`section` 内缺少 h2	补标题，保持结构完整
邮箱链接点击无反应	`href` 未使用 `mailto:`	改为 `mailto:地址`
提交到线上后图片丢失	路径大小写与服务器不一致	文件名全小写，按 A05 规则核对

6 结论

序号	结论	依据
1	先定骨架再填内容，返工最少	图 3-1、表 3-2
2	验收按清单逐项进行，不靠目测	表 4-1
3	单文件适合入门交付，多页面需外部样式	表 4-2
4	结构正确后，样式可以整体替换	3.2 节 style 注释

上一篇：A08-语义化页面骨架
返回：A00-总结｜科目 README

参考文献

[1] MDN Web Docs · HTML 基础，https://developer.mozilla.org/zh-CN/docs/Web/HTML（访问于 2026-10-29）
[2] Web Content Accessibility Guidelines 2.2，W3C，https://www.w3.org/TR/WCAG22/（访问于 2026-10-29）