HTML5 从入门到精通：实战收官——从零搭建完整静态网站，综合运用所有知识
摘要：本文是 HTML5 零基础系列的第九篇，也是基础部分的收官之作。我们将从头开始，综合运用前八篇学到的所有 HTML5 知识（骨架、文本格式化、列表、表格、表单、链接、图片、音频、视频、语义化标签、高级特性、SEO 和无障碍基础），搭建一个完整的静态网站——“小萌新个人作品集”。网站包含首页、作品展示页、关于页、联系页等多个页面，并采用合理的文件结构、语义化布局、基础 SEO 优化和无障碍增强。完成本篇后，你已经可以自信地写出规范、专业、可维护的 HTML5 代码。
一、项目概述：我们要做什么？
1.1 网站名称
小萌新个人作品集（Xiao Mengxin Portfolio）
1.2 网站结构（多页面）
| 页面文件名 | 页面标题 | 主要内容 |
|---|---|---|
index.html | 首页 - 小萌新作品集 | 欢迎语、个人简介、精选作品展示（图片及链接）、技能列表（使用<meter>或列表） |
works.html | 作品展示 - 小萌新作品集 | 使用语义化标签和<figure>/<figcaption>展示多个作品（每个作品包含图片、描述、技术标签） |
about.html | 关于我 - 小萌新作品集 | 详细个人介绍、学习历程（可使用<progress>展示技能进度）、教育经历表格、音频自我介绍（可选） |
contact.html | 联系我 - 小萌新作品集 | 使用表单收集用户信息（姓名、邮箱、消息），并显示联系方式（邮箱、社交媒体链接） |
video.html（可选） | 视频作品 - 小萌新作品集 | 嵌入一个视频（可以是项目演示或自我介绍视频），展示<video>和<iframe>用法 |
我们至少实现4 个核心页面，并使用统一的导航栏和页脚。
1.3 技术栈
纯 HTML5（不使用任何 CSS 和 JavaScript，但会使用属性如
contenteditable、<details>等增强体验）。文件组织：创建一个文件夹
portfolio，内部结构如下：
portfolio/ ├── index.html ├── works.html ├── about.html ├── contact.html ├── video.html （可选） ├── images/ （存放项目图片、头像等） │ ├── avatar.jpg │ ├── work1.jpg │ ├── work2.png │ ├── work3.jpg │ └── ... ├── audio/ （存放自我介绍音频） │ └── intro.mp3 ├── video/ （存放演示视频） │ └── demo.mp4 └── favicon.ico1.4 设计原则
语义化优先：使用
<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>等。SEO 基础：每个页面都有独特的
<title>、<meta name="description">，图片有alt。无障碍基础：为导航区域添加
aria-label，为表单控件关联<label>，使用role辅助（如role="navigation"）。无 CSS：所有样式依赖浏览器默认样式，但布局清晰，内容可读。
二、通用部分：导航栏与页脚
为了代码简洁，每个页面都包含相同的导航和页脚。我们将在每个 HTML 中重复这部分代码（实际项目中可用服务器端包含或模板引擎，但纯 HTML 学习阶段，手动复制是合理的）。
导航栏结构
<header> <h1>小萌新作品集</h1> <p>前端开发学习者 | 创意无限</p> </header> <nav aria-label="主导航"> <a href="index.html">首页</a> | <a href="works.html">作品展示</a> | <a href="about.html">关于我</a> | <a href="contact.html">联系我</a> | <a href="video.html">视频作品</a> </nav>页脚结构
<footer> <p>© 2026 小萌新作品集 | 基于 HTML5 构建 | 本站所有内容均为练习用途</p> <p>遵循 <abbr title="Creative Commons Zero">CC0</abbr> 协议 | <a href="#">隐私政策</a></p> </footer>三、首页index.html—— 欢迎与亮点展示
3.1 设计内容
欢迎区域：一段热情的介绍文字，包含contenteditable属性，让访客可以临时修改欢迎语。
个人简介：简短的自我介绍 + 头像图片。
技能标签：使用无序列表展示技能，并使用<meter>或<progress>表示熟练度（静态）。
精选作品（带链接）：展示三个作品的缩略图，点击跳转到作品详情页（或 works.html 的锚点）。
折叠面板 FAQ：使用<details>展示一两个常见问题。
3.2 完整代码
<!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="小萌新的个人作品集首页，展示 HTML5 项目、技能和创意。"> <meta name="keywords" content="HTML5,作品集,前端,小萌新"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <!-- 预连接（示例） --> <link rel="preconnect" href="https://fonts.googleapis.com"> </head> <body> <header> <h1>小萌新作品集</h1> <p>前端开发学习者 | 创意无限</p> </header> <nav aria-label="主导航"> <a href="index.html">首页</a> | <a href="works.html">作品展示</a> | <a href="about.html">关于我</a> | <a href="contact.html">联系我</a> | <a href="video.html">视频作品</a> </nav> <main> <!-- 欢迎区域：可编辑 --> <section aria-labelledby="welcome-title"> <h2 id="welcome-title">✨ 欢迎来到我的创作空间</h2> <div contenteditable="true" style="border:1px solid #ccc; padding:8px; background:#f9f9f9;"> <p>你好！我是小萌新，一名热爱前端开发的新手。这个网站完全使用 HTML5 标签构建，没有一行 CSS，但结构清晰、语义丰富。你可以尝试编辑这段文字（刷新后恢复）。</p> </div> </section> <!-- 个人简介 + 头像 --> <section aria-labelledby="intro-title"> <h2 id="intro-title">👤 关于我（简版）</h2> <figure> <img src="images/avatar.jpg" alt="小萌新的头像，一个正在打代码的卡通形象" width="120" height="120"> <figcaption>小萌新 · 代码爱好者</figcaption> </figure> <p>我专注于前端技术，目前已经掌握了 HTML5、基础 SEO、无障碍设计，并正在深入学习 CSS 和 JavaScript。我相信“简洁清晰”的代码是最好的沟通语言。</p> <p><strong>学习格言：</strong> <q>纸上得来终觉浅，绝知此事要躬行。</q></p> </section> <!-- 技能熟练度（使用 meter 模拟） --> <section aria-labelledby="skills-title"> <h2 id="skills-title">📊 技能树（自我评估）</h2> <ul> <li>HTML5 语义化：<meter value="0.9" min="0" max="1" low="0.3" high="0.8" optimum="0.9">90%</meter></li> <li>SEO 基础：<meter value="0.75" min="0" max="1">75%</meter></li> <li>无障碍设计：<meter value="0.6" min="0" max="1">60%</meter></li> <li>CSS（学习中）：<progress value="30" max="100">30%</progress></li> <li>JavaScript（预备）：<progress value="10" max="100">10%</progress></li> </ul> <p><small>注：<code><meter></code> 表示当前水平，<code><progress></code> 表示学习进度。</small></p> </section> <!-- 精选作品展示（带链接） --> <section aria-labelledby="featured-title"> <h2 id="featured-title">🏆 精选作品</h2> <div> <article> <h3>📝 语义化博客页面</h3> <a href="works.html#blog-demo"> <img src="images/work1_thumb.jpg" alt="语义化博客页面截图" width="200"> </a> <p>使用 HTML5 语义化标签构建的博客首页，包含 header、nav、main、article、aside、footer 等。</p> <p><strong>技术：</strong> HTML5 语义化, 结构优化</p> </article> <article> <h3>🎬 多媒体展厅</h3> <a href="works.html#media-demo"> <img src="images/work2_thumb.png" alt="多媒体展厅截图" width="200"> </a> <p>集成了音频、视频、iframe 地图和 PDF 嵌入的综合多媒体页面。</p> <p><strong>技术：</strong> <code><audio></code>, <code><video></code>, <code><iframe></code></p> </article> <article> <h3>📋 高级特性实验室</h3> <a href="works.html#advanced-demo"> <img src="images/work3_thumb.jpg" alt="高级特性实验室截图" width="200"> </a> <p>演示 contenteditable、details/summary、progress、meter、draggable 等 HTML5 新特性。</p> <p><strong>技术：</strong> HTML5 高级属性与标签</p> </article> </div> <p><a href="works.html">查看全部作品 →</a></p> </section> <!-- 折叠面板：常见问题 --> <section aria-labelledby="faq-title"> <h2 id="faq-title">❓ 常见问题（点击展开）</h2> <details> <summary>这个网站用了 CSS 吗？</summary> <p>没有！整个网站只有 HTML5 标签和属性，所有样式均来自浏览器默认样式。这样做是为了专注学习 HTML 的结构和语义。</p> </details> <details> <summary>我可以复制使用这些代码吗？</summary> <p>当然可以！这些代码完全开源，欢迎用于学习和自己的项目中。建议你动手重新敲一遍，加深记忆。</p> </details> </section> </main> <footer> <p>© 2026 小萌新作品集 | 基于 HTML5 构建 | 本站所有内容均为练习用途</p> <p>遵循 CC0 协议 | <a href="#">隐私政策</a></p> </footer> </body> </html>四、作品展示页works.html—— 详细作品集
4.1 设计内容
使用
<article>包裹每个作品，包含图片、描述、技术标签、特点列表，以及一个“查看详情”的锚点或链接（指向本页面的锚点或外部）。使用
<figure>和<figcaption>展示作品截图。增加一个表格展示作品信息（作品名、完成时间、技术栈）。
4.2 完整代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>作品展示 - 小萌新作品集</title> <meta name="description" content="小萌新的 HTML5 作品展示，包括语义化博客、多媒体展厅、高级特性实验室等。"> <link rel="icon" href="favicon.ico"> </head> <body> <header> <h1>小萌新作品集</h1> <p>前端开发学习者 | 创意无限</p> </header> <nav aria-label="主导航"> <a href="index.html">首页</a> | <a href="works.html">作品展示</a> | <a href="about.html">关于我</a> | <a href="contact.html">联系我</a> | <a href="video.html">视频作品</a> </nav> <main> <h2>📁 全部作品</h2> <p>以下是我学习 HTML5 过程中完成的代表性练习项目，每个作品都运用了特定的标签或技术。</p> <article id="blog-demo"> <header> <h3>1. 语义化博客页面</h3> <p>完成时间：2026年5月 | 标签：<mark>语义化</mark> <mark>SEO</mark></p> </header> <figure> <img src="images/work1_full.png" alt="语义化博客页面完整截图" width="500"> <figcaption>图：博客首页布局（无 CSS）</figcaption> </figure> <p>这个作品展示了如何使用 <code><header></code>、<code><nav></code>、<code><main></code>、<code><article></code>、<code><section></code>、<code><aside></code>、<code><footer></code> 构建清晰的内容结构。同时加入了基础的 SEO meta 标签和 ARIA 无障碍属性。</p> <ul> <li>优点：语义化清晰，利于搜索引擎抓取。</li> <li>待改进：暂无视觉样式（即将学习 CSS）。</li> </ul> <p><a href="semantic_blog.html" target="_blank">在线预览（如果存在）</a> | <a href="#top">返回顶部</a></p> </article> <hr> <article id="media-demo"> <header> <h3>2. 多媒体展厅</h3> <p>完成时间：2026年5月 | 标签：<mark>音频</mark> <mark>视频</mark> <mark>嵌入</mark></p> </header> <figure> <img src="images/work2_full.png" alt="多媒体展厅截图" width="500"> <figcaption>图：包含音频、视频和 iframe 地图的页面</figcaption> </figure> <p>综合运用了 <code><audio></code>、<code><video></code>、<code><iframe></code>、<code><embed></code> 等标签，实现了无需插件即可播放媒体文件、嵌入外部地图和 PDF 的能力。展示了 HTML5 对多媒体的原生支持。</p> <p><strong>特点：</strong> 支持多种格式备选 (<code><source></code>)，提供封面图 (<code>poster</code>)，并具备简单的 JS 控制按钮演示。</p> <p><a href="media_gallery.html" target="_blank">查看完整多媒体页</a></p> </article> <hr> <article id="advanced-demo"> <header> <h3>3. 高级特性实验室</h3> <p>完成时间：2026年5月 | 标签：<mark>contenteditable</mark> <mark>details</mark> <mark>progress</mark> <mark>draggable</mark></p> </header> <figure> <img src="images/work3_full.png" alt="高级特性实验室截图" width="500"> <figcaption>图：HTML5 高级属性演示</figcaption> </figure> <p>这个实验页面展示了 <code>contenteditable</code>（可编辑内容）、<code><details></code>/<code><summary></code>（原生折叠）、<code><progress></code>/<code><meter></code>（进度与度量）、<code>draggable</code>（拖拽支持）和 <code>data-*</code> 自定义属性。无需 JavaScript 就能实现一定的交互效果。</p> <p><a href="advanced_features.html" target="_blank">体验高级特性</a></p> </article> <!-- 作品信息表格 --> <section> <h3>📊 作品信息汇总表</h3> <table border="1"> <caption>作品列表及详情</caption> <thead> <tr><th>作品名称</th><th>核心标签/属性</th><th>完成日期</th><th>预览链接</th></tr> </thead> <tbody> <tr><td>语义化博客</td><td>header, nav, main, article, section, aside, footer</td><td>2026-05-20</td><td><a href="semantic_blog.html">预览</a></td></tr> <tr><td>多媒体展厅</td><td>audio, video, iframe, embed, source</td><td>2026-05-22</td><td><a href="media_gallery.html">预览</a></td></tr> <tr><td>高级特性实验室</td><td>contenteditable, details, progress, meter, draggable, />
五、关于页about.html—— 详细介绍与历程
5.1 设计内容
个人详细介绍（文本）。
学习历程时间线（使用无序列表或定义列表）。
教育经历表格。
音频自我介绍（使用<audio>播放一段录音）。
使用<progress>展示各阶段学习进度。
5.2 完整代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>关于我 - 小萌新作品集</title> <meta name="description" content="了解小萌新的学习经历、技能掌握情况和自我介绍音频。"> <link rel="icon" href="favicon.ico"> </head> <body> <header> <h1>小萌新作品集</h1> <p>前端开发学习者 | 创意无限</p> </header> <nav aria-label="主导航"> <a href="index.html">首页</a> | <a href="works.html">作品展示</a> | <a href="about.html">关于我</a> | <a href="contact.html">联系我</a> | <a href="video.html">视频作品</a> </nav> <main> <h2>🌟 关于我</h2> <section> <h3>我是谁？</h3> <p>大家好，我是小萌新，一名对前端开发充满热情的自学者。我拥有 1 年的 HTML/CSS 学习经验，目前正在系统学习 JavaScript。我热衷于构建结构清晰、语义准确、对所有人友好的网页。</p> <p>我相信“代码是写给未来自己和同事看的”，所以格外注重代码的可读性和可维护性。这个作品集网站完全使用 HTML5 标签构建，是我学习路上的里程碑。</p> </section> <section> <h3>📅 学习历程</h3> <ul> <li><strong>2025年9月</strong>：初次接触 HTML，了解基本标签（h1-p-img-a）。</li> <li><strong>2025年11月</strong>：学习表格、表单，完成了第一个注册页面。</li> <li><strong>2026年1月</strong>：深入语义化标签，重构了个人博客结构。</li> <li><strong>2026年3月</strong>：学习多媒体标签和 HTML5 高级特性。</li> <li><strong>2026年5月</strong>：完成本作品集网站，准备进入 CSS 学习阶段。</li> </ul> </section> <section> <h3>🎓 教育背景</h3> <table border="1"> <caption>学历与培训</caption> <thead><tr><th>时间</th><th>学校/机构</th><th>专业/课程</th></tr></thead> <tbody> <tr><td>2022-2026</td><td>XX大学</td><td>计算机科学与技术（本科）</td></tr> <tr><td>2025-2026</td><td>在线前端学院</td><td>前端开发工程师课程（进行中）</td></tr> </tbody> </table> </section> <section> <h3>🎧 语音自我介绍</h3> <p>如果你不想看文字，可以播放下面的音频：</p> <audio controls> <source src="audio/intro.mp3" type="audio/mpeg"> <source src="audio/intro.ogg" type="audio/ogg"> 你的浏览器不支持 audio 元素，请升级浏览器或阅读文字介绍。 </audio> <p><small>音频内容：简单介绍我的学习动机和未来计划。</small></p> </section> <section> <h3>📈 技术学习进度（自评）</h3> <p>HTML5 基础：<progress value="90" max="100">90%</progress></p> <p>SEO & 无障碍：<progress value="60" max="100">60%</progress></p> <p>CSS 基础：<progress value="20" max="100">20%</progress></p> <p>JavaScript 预备：<progress value="10" max="100">10%</progress></p> </section> </main> <footer> <p>© 2026 小萌新作品集 | 基于 HTML5 构建 | 本站所有内容均为练习用途</p> <p>遵循 CC0 协议 | <a href="#">隐私政策</a></p> </footer> </body> </html>
![]()
六、联系页contact.html—— 表单与联系信息
6.1 设计内容
联系表单（姓名、邮箱、消息、提交按钮），使用<form>并指向测试地址https://httpbin.org/post。
联系方式区域（邮箱、社交媒体占位链接）。
使用<fieldset>和<legend>分组表单。
增加一个<details>折叠提示：如何与我合作。
6.2 完整代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>联系我 - 小萌新作品集</title> <meta name="description" content="通过表单联系小萌新，或查看邮箱、社交媒体账号。"> <link rel="icon" href="favicon.ico"> </head> <body> <header> <h1>小萌新作品集</h1> <p>前端开发学习者 | 创意无限</p> </header> <nav aria-label="主导航"> <a href="index.html">首页</a> | <a href="works.html">作品展示</a> | <a href="about.html">关于我</a> | <a href="contact.html">联系我</a> | <a href="video.html">视频作品</a> </nav> <main> <h2>📬 联系我</h2> <p>无论你是想合作项目、交流技术，还是单纯打个招呼，都欢迎填写下面的表单。我会尽快回复！</p> <form action="https://httpbin.org/post" method="post"> <fieldset> <legend>基本信息</legend> <p> <label for="name">姓名：</label> <input type="text" id="name" name="name" placeholder="请输入真实姓名" required> </p> <p> <label for="email">电子邮箱：</label> <input type="email" id="email" name="email" placeholder="example@domain.com" required> </p> <p> <label for="subject">主题：</label> <select name="subject" id="subject"> <option value="合作">合作邀请</option> <option value="技术交流">技术交流</option> <option value="建议反馈">建议反馈</option> <option value="其他">其他</option> </select> </p> </fieldset> <fieldset> <legend>详细内容</legend> <p> <label for="message">消息：</label><br> <textarea id="message" name="message" rows="6" cols="50" placeholder="请写下你想说的话..." required></textarea> </p> <p> <label> <input type="checkbox" name="subscribe" value="yes"> 订阅我的学习笔记邮件（不定期发送） </label> </p> </fieldset> <p> <button type="submit">发送消息</button> <button type="reset">重新填写</button> </p> </form> <hr> <section> <h3>其他联系方式</h3> <ul> <li>📧 邮箱：<a href="mailto:xiaomengxin@example.com">xiaomengxin@example.com</a></li> <li>🐦 Twitter：<a href="#">@xiaomengxin_dev</a>（示例）</li> <li>💻 GitHub：<a href="#">github.com/xiaomengxin</a></li> </ul> </section> <details> <summary>💡 合作小贴士</summary> <p>如果你有项目合作意向，请尽量在表单中描述项目类型、预算和期望时间。我会根据空闲情况评估并回复。如果是技术问题，欢迎直接在邮件中提问，我会尽力解答。</p> </details> </main> <footer> <p>© 2026 小萌新作品集 | 基于 HTML5 构建 | 本站所有内容均为练习用途</p> <p>遵循 CC0 协议 | <a href="#">隐私政策</a></p> </footer> </body> </html>
![]()
七、视频作品页video.html（可选扩展）
为了完整展示多媒体能力，我们增加一个视频页面。嵌入一个本地演示视频（或外部示例视频），并展示<video>标签的各个属性。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>视频作品 - 小萌新作品集</title> <meta name="description" content="小萌新的项目演示视频和自我介绍视频。"> <link rel="icon" href="favicon.ico"> </head> <body> <header> <h1>小萌新作品集</h1> <p>前端开发学习者 | 创意无限</p> </header> <nav aria-label="主导航"> <a href="index.html">首页</a> | <a href="works.html">作品展示</a> | <a href="about.html">关于我</a> | <a href="contact.html">联系我</a> | <a href="video.html">视频作品</a> </nav> <main> <h2>🎥 视频作品演示</h2> <section> <h3>项目介绍视频（示例）</h3> <video controls width="640" poster="images/video_poster.jpg"> <source src="video/demo.mp4" type="video/mp4"> <source src="video/demo.webm" type="video/webm"> 你的浏览器不支持 video 标签。 </video> <p>这段视频演示了“语义化博客”页面的结构和屏幕阅读器的导航效果（模拟）。</p> </section> <section> <h3>嵌入外部内容：B站教程</h3> <iframe width="640" height="360" src="https://player.bilibili.com/player.html?bvid=BV1GJ411x7h7" title="B站 HTML5 教程" frameborder="0" allowfullscreen> </iframe> <p>注：以上为占位示例，实际可替换为你的视频 ID。</p> </section> </main> <footer> <p>© 2026 小萌新作品集 | 基于 HTML5 构建 | 本站所有内容均为练习用途</p> <p>遵循 CC0 协议 | <a href="#">隐私政策</a></p> </footer> </body> </html>
![]()
八、项目文件组织与测试建议
创建文件夹：在电脑上新建portfolio，然后创建images、audio、video子文件夹。
准备素材：
放入头像avatar.jpg，作品截图work1_thumb.jpg、work1_full.png等（可以使用免费占位图片或自己绘制简单截图）。
放入一个简短的自我介绍音频intro.mp3（可用手机录音或 TTS 生成）。
放入一个示例视频demo.mp4（可用免费测试视频，如 Big Buck Bunny 的片段）。
放入favicon.ico（可从网上生成）。
编写代码：将上面提供的每个页面的代码分别保存为对应的.html文件，确保相对路径中的图片、音频、视频文件存在。
本地测试：双击index.html在浏览器中打开，通过导航栏点击所有页面，检查链接是否正常，媒体文件是否播放。如果图片缺失，会显示alt文本。
验证语义：使用浏览器开发者工具（F12）查看元素结构，检查是否使用了正确的语义标签。
九、总结与反思
通过这个综合项目，我们实践了以下知识：
✅HTML 文档结构：<!DOCTYPE>、<html>、<head>、<body>，meta 信息。
✅文本与格式化：标题、段落、加粗、斜体、高亮<mark>、代码<code>、引用<q>。
✅列表与容器：无序/有序列表、定义列表、<div>、<span>。
✅链接与图片：超链接、相对/绝对路径、图片及alt、图片作为链接。
✅表格：<table>、合并单元格、<thead>/<tbody>/<tfoot>。
✅表单：各种<input>、<select>、<textarea>、<button>、<label>、<fieldset>。
✅多媒体：<audio>、<video>、<source>、<iframe>、<embed>。
✅语义化标签：<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>、<figure>/<figcaption>。
✅高级特性：contenteditable、data-*、<details>/<summary>、<progress>/<meter>、draggable、hidden。
✅SEO 基础：<title>、<meta name="description">、canonical、语义化。
✅无障碍基础：aria-label、role、语义化标签优先。
这个项目证明：即使用纯 HTML5（无 CSS 和 JS），也能创建出内容完整、语义清晰、具备一定交互（折叠面板、可编辑、进度条）的网站。接下来，进入 CSS 的学习，让这些网页变得美观、布局灵活。
如果这篇文章帮你解决了实操上的困惑，别忘记点击点赞、分享，也可以留言告诉我你遇到的其它问题，我会尽快回复。动手练习是掌握编程最快的方法，请务必亲手敲一遍本文的所有示例代码，并截图保存你的成果。你的关注是我坚持原创和细节共享的力量来源，谢谢大家。