正在加载...

HTML 小项目 — 个人站点

上一课 总结 画出了你的 HTML 工具箱并指向这里作为练习。本课不是又一张技能地图。它是一份搭建简报：规划三页、共享一套导航壳、填入真实内容，并用短验收表证明站点。

为什么现在做小项目

教程一次讲一个主题。微型个人站逼你组合：每页地标、可用的相对链接、一张信息图、列表或数据表、带 label 的联系表单。交付那一包——即使没 CSS 难看——也胜过死记属性。把它当成一次专注会话的清单。

直接回答

1) 至少三个文件：index.html、about.html、contact.html。2) 每页复用同一套 header/nav/footer 地标并保证链接互通。3) 首页真实简介、关于短故事、联系页带标签的 name/email/message 表单。4) 一张有意义 alt 的信息图，外加技能列表或小事实表。5) 用键盘 Tab；修好缺失 label 与断链。6) 说「完成」前勾掉验收表每一行。

📊 Acceptance criteria

Item Done when
Shared nav Same landmark links work on every page
Semantics header, nav, main, and footer on each page
Home & about Real paragraphs — not placeholder lorem forever
Media At least one informative image with useful alt
Data A skills list or a small facts table
Form Labeled name, email, message + a real submit button
Quality Keyboard tab order makes sense; no unlabeled controls

动手前先规划

先草图：站名、三页用途、哪张照片、关于页放哪些技能/事实。定文件夹——三个 HTML 放一起以便简单相对链接。人名/品牌定一次，让 h1 与 title 一致。

共享壳 — 从这里开始

把 header/nav 复制到每页；只改 main。相对 href 必须与文件名精确匹配。稍后放真正的 button type=submit——不要用空 div 假装提交。

Shared nav starter

html 
<header>
<h1>Alex Site</h1>
<nav aria-label="Main">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<main>
<!-- page content -->
</main>
<footer>
<p>© Alex</p>
</footer>

阅读外壳

  • header+nav+main+footer 给出清晰地标
  • nav 上的 aria-label 便于以后第二导航
  • 相对链接把三个文件连成站
  • 重复外壳；只换 main
  • 每页 title 也放短标题
  • 总结列过习惯——这里一起落实

联系表单起步

联系页是表单技能遇见项目的地方。每个控件配可见 label。加上 name 供将来后端。即便还不向服务器提交，标记里也要有真正的 submit。

Contact form starter

html 
<form action="#" method="post">
<p>
<label for="name">Name</label>
<input id="name" name="name" type="text" required>
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
</p>
<p>
<label for="msg">Message</label>
<textarea id="msg" name="message" rows="5" required></textarea>
</p>
<button type="submit">Send</button>
</form>

可行搭建顺序

  1. 外壳复制到三文件；修好导航链接。2. 写首页 intro 与关于故事（+列表/表）。3. 照片放 images/，设 src 与具体 alt。4. 粘贴表单；确认 label、name、submit。5. 打开三页；变窄；Tab 到提交。6. 勾验收行——轻量 CSS 以后再说。

本项目易错点

  • 导航只改一页导致链接漂移
  • 联系字段只有 placeholder 没有 label
  • 用布局表格撑整页而不是地标
  • 有意义的照片用空 alt
  • 留下 lorem 却说「完成」
  • 三页未过关就跳进框架或重 CSS
  • 忘记总结习惯：先结构与 label

小结

  • 本课是动手个人站搭建，不是又一张课程地图
  • 三页共享 header/nav/main/footer 与可用相对链接
  • 组合媒体、列表或表格、带标签联系表单
  • 验收表就是「完成」的定义
  • 用键盘检查后再用 CSS 抛光
  • 后续可选主题（SVG…）是额外——先交付这个站

短提醒

卡住就回到验收表——不要去背新标签。目标是练习把本课技能组合进能在浏览器打开的小站。

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
4
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 60 的 68
Html 教程