在数字化时代，HTML5 作为网页开发的核心技术，已经成为大学生必须掌握的技能之一。期末作业中，如何运用 HTML5 的强大功能，打造出既美观又实用的网页，成为许多大学生的关注焦点。本文将为你提供一份详细的实战指南，帮助你轻松上手 HTML5，顺利完成期末作业。

一、HTML5 简介

HTML5 是第五代超文本标记语言（HTML）的缩写，它扩展了 HTML 和 CSS 的功能，引入了许多新特性，如音频、视频、绘图、离线存储等。HTML5 的出现，使得网页开发更加便捷，用户体验更加丰富。

二、HTML5 基础知识

2.1 结构元素

HTML5 引入了一些新的结构元素，如 <header>、<nav>、<footer>、<article>、<section> 等，这些元素可以帮助我们更好地组织网页内容。

2.2 表单元素

HTML5 对表单元素进行了扩展，如 <input>、<select>、<textarea> 等，增加了许多新类型，如日期、时间、颜色等。

2.3 媒体元素

HTML5 支持直接在网页中嵌入音频、视频等多媒体元素，无需借助外部插件。

三、实战项目：制作一个个人博客

以下是一个利用 HTML5 制作个人博客的实战项目，我们将从基本结构开始，逐步完善。

3.1 网页结构

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的个人博客</title>
</head>
<body>
    <header>
        <h1>我的个人博客</h1>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于我</a></li>
                <li><a href="archive.html">文章归档</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <article>
            <h2>文章标题</h2>
            <p>文章内容...</p>
        </article>
    </section>
    <footer>
        <p>版权所有 &copy; 2021</p>
    </footer>
</body>
</html>

3.2 响应式布局

为了适应不同屏幕尺寸的设备，我们可以使用 CSS3 的媒体查询（Media Queries）来实现响应式布局。

@media screen and (max-width: 600px) {
    header, footer {
        text-align: center;
    }
    nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    nav ul li {
        display: block;
        margin-bottom: 5px;
    }
}

3.3 媒体元素

在博客中，我们可以使用 HTML5 的 <video> 和 <audio> 元素嵌入视频和音频。

<section>
    <article>
        <h2>视频教程</h2>
        <video controls>
            <source src="video.mp4" type="video/mp4">
            您的浏览器不支持视频标签。
        </video>
    </article>
    <article>
        <h2>音乐播放器</h2>
        <audio controls>
            <source src="music.mp3" type="audio/mpeg">
            您的浏览器不支持音频标签。
        </audio>
    </article>
</section>

四、总结

通过以上实战项目，我们可以看到 HTML5 在网页开发中的应用。掌握 HTML5 的基础知识，结合实战经验，相信你能够在期末作业中游刃有余。祝你顺利完成作业，取得好成绩！