引言

作为一名大一计算机科学或相关专业的学生，掌握HTML5是学习网页开发的基础。HTML5是现代网页开发的核心技术之一，它提供了丰富的功能，使得网页可以更加生动和交互。本文将为您提供一个HTML5实战题库，帮助您通过实际操作来提升编程技能。

HTML5基础题库

1. HTML5文档结构

题目描述： 请编写一个HTML5文档的基本结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

2. HTML5语义化标签

题目描述： 使用HTML5的语义化标签来重构以下HTML代码。

<div id="header">Header</div>
<div id="nav">Navigation</div>
<div id="main">Main Content</div>
<div id="footer">Footer</div>

答案：

<header>Header</header>
<nav>Navigation</nav>
<main>Main Content</main>
<footer>Footer</footer>

3. HTML5多媒体元素

题目描述： 在HTML5中添加音频和视频元素，并允许用户通过控件控制播放。

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

<video controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

4. HTML5表单元素

题目描述： 创建一个简单的表单，包括文本输入、密码输入、单选按钮和复选框。

<form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">

    <label for="password">Password:</label>
    <input type="password" id="password" name="password">

    <label>
        <input type="radio" name="gender" value="male"> Male
    </label>
    <label>
        <input type="radio" name="gender" value="female"> Female
    </label>

    <label>
        <input type="checkbox" name="subscribe"> Subscribe to newsletter
    </label>

    <input type="submit" value="Submit">
</form>

高级题库

1. HTML5离线存储

题目描述： 使用HTML5的离线存储API创建一个简单的应用程序，允许用户离线访问内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Offline App</title>
</head>
<body>
    <h1>Welcome to the Offline App</h1>
    <script>
        if ('caches' in window) {
            caches.match('/index.html').then(function(response) {
                if (response) {
                    response.text().then(function(html) {
                        document.body.innerHTML = html;
                    });
                }
            });
        }
    </script>
</body>
</html>

2. HTML5 Canvas绘图

题目描述： 使用HTML5 Canvas绘制一个简单的圆形。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas Circle</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.arc(100, 100, 50, 0, 2 * Math.PI);
        ctx.stroke();
    </script>
</body>
</html>

3. HTML5 Web Workers

题目描述： 使用HTML5 Web Workers在后台线程中执行一个复杂的计算任务。

// worker.js
self.addEventListener('message', function(e) {
    var num1 = e.data.num1;
    var num2 = e.data.num2;
    var result = num1 * num2;
    self.postMessage(result);
});

// main.js
var worker = new Worker('worker.js');
worker.postMessage({num1: 10, num2: 20});
worker.onmessage = function(e) {
    console.log('The result is: ' + e.data);
};

通过以上实战题库，您可以逐步提升自己的HTML5编程技能。不断练习和探索，相信您将能够在网页开发的道路上越走越远。