HTML5引入了许多令人兴奋的新特性和改进，使得网页开发更加强大和灵活。在本节课中，我们将探索一些主要的HTML5新特性。
语义化标签
HTML5引入了一系列的语义化标签，使开发者能够更清晰地描述网页的结构和内容，提高了可访问性和搜索引擎优化（SEO）效果。以下是一些常用的语义化标签：
<header>: 定义文档或节的头部，通常包含网页的标题、导航和其他引导性的内容。<nav>: 定义导航链接的容器。<section>: 定义文档中的独立部分，例如文章、章节或页面模块。<article>: 定义独立的内容，如博客文章、新闻报道等。<aside>: 定义与主要内容相关但可以独立存在的部分，如侧边栏、广告、标注等。<footer>: 定义文档或节的底部，通常包含版权信息、联系方式等。
<header><h1>网页标题</h1><nav><ul><li><a href="#">首页</a></li><li><a href="#">关于我们</a></li><li><a href="#">产品</a></li></ul></nav></header><section><h2>文章标题</h2><p>这是一篇文章的内容...</p></section><aside><h3>广告</h3><img src="ad.jpg" alt="广告图"></aside><footer><p>© 2023 公司名称. 版权所有.</p></footer>
媒体元素
HTML5引入了媒体元素，使得在网页中嵌入音频和视频内容更加方便。以下是HTML5媒体元素的示例：
<audio>: 用于嵌入音频内容，可以设置音频的来源、控制按钮和其他属性。<video>: 用于嵌入视频内容，可以设置视频的来源、控制按钮、尺寸和其他属性。
<audio src="audio.mp3" controls>您的浏览器不支持音频标签。</audio><video src="video.mp4" controls width="640" height="360">您的浏览器不支持视频标签。</video>
新的表单元素
HTML5引入了一些新的表单元素，使得用户交互更加便捷和灵活。
-
<input type="date">: 用于选择日期。
<input type="range">: 用于选择范围内的数值。<input type="color">: 用于选择颜色。
<label for="birthday">选择生日:</label><input type="date" id="birthday" name="birthday"><label for="volume">音量:</label><input type="range" id="volume" name="volume" min="0" max="100"><label for="color">选择颜色:</label><input type="color" id="color" name="color">
通过学习HTML5新特性，我们可以更好地构建具有语义化结构、丰富媒体内容和灵活表单交互的网页。这些新特性为网页开发带来了更多的可能性和创造力。