🎯 第十二章：综合实战项目

通过完整项目巩固所学知识，产出可展示的作品

🎓 学习目标：通过三个实战项目，将前面所学的 HTML 知识融会贯通，创建专业级的网页作品，为求职或展示做好准备。

项目 A：个人电子简历

📄 项目概述

创建一个专业的在线个人简历页面，展示你的教育背景、工作经历、技能和联系方式。

语义化结构 列表 链接 图片 表单

📋 项目要求

  1. 页面结构
    • 使用语义化标签（header, main, section, footer）
    • 清晰的文档大纲（h1-h6 层级）
    • 添加跳转到主要内容的链接（skip link）
  2. 个人信息区域
    • 个人照片（使用 figure 和 figcaption）
    • 姓名和职位标题
    • 联系方式（邮箱链接、电话链接）
  3. 工作经历
    • 使用时间线或列表展示工作经历
    • 每段经历包含：公司、职位、时间、职责描述
  4. 教育背景
    • 学校、专业、学历、时间
  5. 技能列表
    • 使用无序列表展示技能
    • 可以分类（技术技能、软技能等）
  6. 联系我表单
    • 姓名、邮箱、主题、留言内容
    • 表单验证（required、email 类型）
    • 使用 fieldset 和 legend 分组
📦 交付物：
  • index.html（单页面简历）
  • images/ 文件夹（存放照片等图片）
  • 通过 W3C 验证，无错误
  • Lighthouse 可访问性评分 ≥ 90

项目 B：产品落地页 (Landing Page)

🚀 项目概述

创建一个产品推广落地页，包含 Hero 区域、特性介绍、多媒体嵌入、FAQ 和注册表单。

语义化布局 多媒体 details/summary 表单 SEO

📋 项目要求

  1. Hero 区域
    • 大标题和副标题
    • 背景图片或视频
    • CTA（行动号召）按钮
    • 使用 header 标签包裹
  2. 导航栏
    • 固定在顶部的导航
    • 平滑滚动到各区块的锚点链接
    • 使用 nav 标签
  3. 特性介绍
    • 使用 section 分隔不同特性
    • 每个特性包含：图标、标题、描述
    • 使用 article 或 div 包裹每个特性卡片
  4. 多媒体展示
    • 产品图片（使用响应式图片 srcset）
    • 产品演示视频（video 标签）
    • 或嵌入 YouTube 视频（iframe）
  5. FAQ 折叠面板
    • 使用 details 和 summary 标签
    • 至少 5 个常见问题
  6. 注册/联系表单
    • 姓名、邮箱、公司（可选）
    • 产品兴趣（多选 checkbox）
    • 提交按钮
  7. 页脚
    • 社交媒体链接
    • 版权信息
    • 使用 footer 标签
📦 交付物：
  • index.html（落地页）
  • 完整的 Open Graph 和 Twitter Card 标签
  • 多尺寸 favicon 配置
  • 图片懒加载实现

项目 C：技术博客文章页

📝 项目概述

创建一个技术博客文章页面，展示文章语义化结构、代码高亮、目录导航和评论区域。

文章语义化 代码展示 目录导航 评论表单 代码高亮插件

📋 项目要求

  1. 文章结构
    • 使用 article 标签包裹整篇文章
    • 使用 header 包含标题、作者、发布时间
    • 使用 section 分隔不同章节
    • 正确的标题层级（h1 文章标题，h2 章节，h3 小节）
  2. 目录导航
    • 侧边栏显示文章目录
    • 锚点链接跳转到各章节
    • 使用 nav 和 ol/ul 实现
  3. 代码展示
    • 使用 pre 和 code 标签展示代码
    • 引入 Prism.js 或 highlight.js 实现代码高亮
    • 为代码块添加语言标识
  4. 代码高亮集成 
    <!-- 引入 Prism.js -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>

<!-- 使用代码高亮 -->
<pre><code class="language-html">
<!DOCTYPE html>
<html>
<head>
    <title>示例</title>
</head>
</html>
</code></pre>
  5. 图片和多媒体
    • 文章配图（使用 figure 和 figcaption）
    • 响应式图片
    • 图片描述（alt 文本）
  6. 标签和分类
    • 文章标签（使用 ul/li）
    • 分类信息
  7. 评论区域
    • 使用 section 包裹
    • 显示现有评论列表
    • 发表评论表单（姓名、邮箱、评论内容）
  8. 相关文章
    • 使用 aside 标签
    • 相关文章链接列表
📦 交付物：
  • index.html（博客文章页）
  • 代码高亮样式配置
  • 文章包含至少 3 个代码示例
  • 至少 2 张配图
  • 完整的评论表单

项目提交检查清单

检查项 项目 A 项目 B 项目 C
W3C HTML 验证通过 ☐ ☐ ☐
语义化标签正确使用 ☐ ☐ ☐
图片有 alt 文本 ☐ ☐ ☐
表单有 label 关联 ☐ ☐ ☐
标题层级正确 ☐ ☐ ☐
Lighthouse 可访问性 ≥ 90 ☐ ☐ ☐
响应式视口设置 ☐ ☐ ☐
完整的 meta 标签 ☐ ☐ ☐

学习成果展示

🎉 完成这三个项目后，你将能够：
💼 求职建议：将这些项目部署到 GitHub Pages 或 Netlify，并在简历中附上链接。这是展示你前端技能的最佳方式！
← 上一章：HTML 性能与最佳实践 🏠 返回首页 →