HTML5 从入门到精通：实战收官——从零搭建完整静态网站，综合运用所有知识

云水一下2026-05-29 22:03

摘要 ：本文是 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.ico

1.4 设计原则

  • 语义化优先 ：使用 <header>、<nav>、<main>、<article>、<section>、<aside>、<footer> 等。

  • SEO 基础 ：每个页面都有独特的 <title>、<meta name="description">，图片有 alt。

  • 无障碍基础 ：为导航区域添加 aria-label，为表单控件关联 <label>，使用 role 辅助（如 role="navigation"）。

  • 无 CSS：所有样式依赖浏览器默认样式，但布局清晰，内容可读。

二、通用部分：导航栏与页脚

为了代码简洁，每个页面都包含相同的导航和页脚。我们将在每个 HTML 中重复这部分代码（实际项目中可用服务器端包含或模板引擎，但纯 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>

页脚结构

html 复制代码 
<footer>
    <p>&copy; 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 完整代码

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="小萌新的个人作品集首页，展示 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>&lt;meter&gt;</code> 表示当前水平，<code>&lt;progress&gt;</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>&lt;audio&gt;</code>, <code>&lt;video&gt;</code>, <code>&lt;iframe&gt;</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>&copy; 2026 小萌新作品集 | 基于 HTML5 构建 | 本站所有内容均为练习用途</p>
    <p>遵循 CC0 协议 | <a href="#">隐私政策</a></p>
</footer>
​
</body>
</html>

四、作品展示页 works.html ------ 详细作品集

4.1 设计内容

  • 使用 <article> 包裹每个作品，包含图片、描述、技术标签、特点列表，以及一个"查看详情"的锚点或链接（指向本页面的锚点或外部）。

  • 使用 <figure> 和 <figcaption> 展示作品截图。

  • 增加一个表格展示作品信息（作品名、完成时间、技术栈）。

4.2 完整代码

html 复制代码 
<!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>&lt;header&gt;</code>、<code>&lt;nav&gt;</code>、<code>&lt;main&gt;</code>、<code>&lt;article&gt;</code>、<code>&lt;section&gt;</code>、<code>&lt;aside&gt;</code>、<code>&lt;footer&gt;</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>&lt;audio&gt;</code>、<code>&lt;video&gt;</code>、<code>&lt;iframe&gt;</code>、<code>&lt;embed&gt;</code> 等标签，实现了无需插件即可播放媒体文件、嵌入外部地图和 PDF 的能力。展示了 HTML5 对多媒体的原生支持。</p>
        <p><strong>特点：</strong> 支持多种格式备选 (<code>&lt;source&gt;</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>&lt;details&gt;</code>/<code>&lt;summary&gt;</code>（原生折叠）、<code>&lt;progress&gt;</code>/<code>&lt;meter&gt;</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, data-*</td><td>2026-05-24</td><td><a href="advanced_features.html">预览</a></td></tr>
            </tbody>
            <tfoot>
                <tr><td colspan="4">更多作品正在制作中（CSS 布局、响应式设计等）</td></tr>
            </tfoot>
        </table>
    </section>
</main>
​
<footer>
    <p>&copy; 2026 小萌新作品集 | 基于 HTML5 构建 | 本站所有内容均为练习用途</p>
    <p>遵循 CC0 协议 | <a href="#">隐私政策</a></p>
</footer>
​
</body>
</html>

五、关于页 about.html ------ 详细介绍与历程

5.1 设计内容

  • 个人详细介绍（文本）。

  • 学习历程时间线（使用无序列表或定义列表）。

  • 教育经历表格。

  • 音频自我介绍（使用 <audio> 播放一段录音）。

  • 使用 <progress> 展示各阶段学习进度。

5.2 完整代码

html 复制代码 
<!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>&copy; 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 完整代码

html 复制代码 
<!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>&copy; 2026 小萌新作品集 | 基于 HTML5 构建 | 本站所有内容均为练习用途</p>
    <p>遵循 CC0 协议 | <a href="#">隐私政策</a></p>
</footer>
​
</body>
</html>

七、视频作品页 video.html （可选扩展）

为了完整展示多媒体能力，我们增加一个视频页面。嵌入一个本地演示视频（或外部示例视频），并展示 <video> 标签的各个属性。

html 复制代码 
<!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>&copy; 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 的学习，让这些网页变得美观、布局灵活。

如果这篇文章帮你解决了实操上的困惑，别忘记点击点赞、分享 ，也可以留言告诉我你遇到的其它问题，我会尽快回复。动手练习是掌握编程最快的方法，请务必亲手敲一遍本文的所有示例代码，并截图保存你的成果。你的关注是我坚持原创和细节共享的力量来源，谢谢大家。

相关推荐
不总是1 小时前
Windows 系统 Node.js 免安装版（zip）安装与配置教程（2026 最新）
前端·windows·node.js
冬奇Lab1 小时前
每日一个开源项目（第105篇）：Twenty - 跳出 Salesforce 的圈套，定义现代开源 CRM
前端·后端·开源
zhangyao9403302 小时前
开发pc端时，表格的高度怎么设置才能铺满页面
前端·javascript·elementui
kjs--2 小时前
浏览器书签执行脚本
前端
之歆2 小时前
Day16_JavaScript 轮播图与事件工程实战（下篇）
服务器·开发语言·前端·javascript·网络·性能优化
沄媪2 小时前
CSRF 跨站请求伪造
前端·ctf·csrf
kyriewen3 小时前
我关掉了Copilot：因为我写的代码出现在了别人的建议里
前端·javascript·ai编程
欧雷殿4 小时前
从「吸引子引导工程」看我的「一人公司」实践
前端·人工智能·后端
热门推荐
01GitHub 镜像站点02DeepSeek V4 + Claude Code thinking mode 400 错误修复方案03Codex 接入 DeepSeek API 完整配置文档04【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法05【AI】2026 年具身智能模型和世界模型总结06CC-Switch & Claude 基于 Linux 服务器安装使用指南07裂开！ChatGPT 居然开始要手机号验证，附详细解决方法08CC-Switch 全平台下载、安装与使用全指南（Windows/macOS/Linux）09API Key 登录 Codex 也能用插件了，还支持会话删除和导出102026年AI编程工具终极横评：Cursor vs Claude Code vs Copilot