引言

对于大一新生来说，学习HTML5是开启前端编程之旅的第一步。HTML5作为现代网页开发的核心技术，掌握它可以帮助你轻松构建网页和丰富的网络应用。为了帮助你更好地学习和掌握HTML5，本文将提供一个详细的HTML5题库，通过一系列挑战来检验和提升你的编程技能。

HTML5基础题库

1. HTML5文档结构

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

参考代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5文档结构</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

2. HTML5语义化标签

题目描述：使用HTML5的语义化标签替换以下非语义化标签。

非语义化标签：

<div id="header"></div>
<div id="nav"></div>
<div id="main"></div>
<div id="footer"></div>

参考代码：

<header></header>
<nav></nav>
<main></main>
<footer></footer>

3. HTML5多媒体嵌入

题目描述：在网页中嵌入一个视频和一个音频文件。

参考代码：

<video controls>
    <source src="movie.mp4" type="video/mp4">
    您的浏览器不支持视频标签。
</video>

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    您的浏览器不支持音频标签。
</audio>

4. HTML5表单元素

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

参考代码：

<form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username"><br><br>
    
    <label for="password">密码：</label>
    <input type="password" id="password" name="password"><br><br>
    
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">男性</label><br>
    
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女性</label><br><br>
    
    <input type="checkbox" id="subscribe" name="subscribe" value="yes">
    <label for="subscribe">订阅新闻</label><br><br>
    
    <input type="submit" value="提交">
</form>

5. HTML5 Canvas绘图

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

参考代码：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
    您的浏览器不支持Canvas标签。
</canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(100, 50, 40, 0, 2 * Math.PI);
    ctx.stroke();
</script>

总结

通过以上题库的挑战，你可以巩固HTML5的基础知识，并提升你的编程技能。记住，实践是学习编程的最佳途径，不断练习和尝试新的项目将帮助你更快地掌握HTML5。祝你在前端编程的道路上越走越远！