学习HTML5是一个激动人心的旅程，因为它让你能够创建互动性强、兼容性好且功能丰富的网页。在这个教程中，我们将从零开始，逐步学习HTML5的基础，并附赠一个完整的课程表源码实例，帮助你快速上手。
第一课：HTML5简介
1.1 HTML5是什么？
HTML5是超文本标记语言（HTML）的第五个版本，它在2008年被正式推出。与之前的版本相比，HTML5带来了许多新特性和改进，包括更好的跨平台兼容性、增强的语义化标签、丰富的图形和多媒体支持等。
1.2 HTML5的优势
- 语义化标签：HTML5引入了许多新的语义化标签，如
<header>,<nav>,<section>,<article>,<footer>等，使网页的结构更加清晰。 - 多媒体支持：HTML5提供了对音频和视频的内置支持，无需额外的插件，如Flash。
- 离线存储：通过
localStorage和sessionStorage，HTML5允许网页在离线状态下存储数据。 - 绘图能力：HTML5的
<canvas>元素提供了强大的绘图功能，可以创建动态图形和动画。
第二课：HTML5的基本结构
2.1 基本结构
一个HTML5文档的基本结构包括以下几个部分：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
2.2 简单示例
以下是一个简单的HTML5页面示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个HTML5页面</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是我的第一个HTML5页面。</p>
</body>
</html>
第三课：HTML5语义化标签
3.1 语义化标签的作用
使用语义化标签可以使网页的结构更加清晰，方便搜索引擎抓取和阅读。
3.2 标签示例
以下是一些常用的HTML5语义化标签：
<header>：表示页面的页眉部分。<nav>：表示导航链接。<section>：表示页面中的一个区域。<article>：表示页面中的一篇文章。<footer>：表示页面的页脚部分。
第四课：HTML5多媒体支持
4.1 音频和视频
HTML5提供了<audio>和<video>元素，用于在网页中嵌入音频和视频。
4.2 音频示例
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
您的浏览器不支持音频元素。
</audio>
4.3 视频示例
<video controls>
<source src="video.mp4" type="video/mp4">
您的浏览器不支持视频元素。
</video>
第五课：HTML5课程表源码实例
5.1 实例描述
以下是一个简单的HTML5课程表源码实例，包括课程列表、课程详情等。
5.2 源码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>课程表</title>
</head>
<body>
<header>
<h1>我的课程表</h1>
</header>
<nav>
<ul>
<li><a href="#monday">周一</a></li>
<li><a href="#tuesday">周二</a></li>
<!-- 其他天 -->
</ul>
</nav>
<section id="monday">
<h2>周一</h2>
<article>
<h3>数学</h3>
<p>时间：8:00-9:30</p>
</article>
<!-- 其他课程 -->
</section>
<footer>
<p>版权所有 © 2023</p>
</footer>
</body>
</html>
通过本教程，你将能够从零开始学习HTML5，并掌握创建基本网页的技能。祝你在HTML5的旅程中一切顺利！