HTML5新特性：语义化与多媒体

学习HTML5新增的语义标签、音频视频、Canvas绘图和本地存储。 · 难度：入门 · +15XP

一、语义化标签

HTML5引入了大量语义化标签，让页面结构更清晰。常用标签包括：<header>、<nav>、<main>、<article>、<section>、<aside>和<footer>。

<header>
  <h1>我的博客</h1>
  <nav><a href="#">首页</a></nav>
</header>
<main>
  <article>
    <h2>文章标题</h2>
    <p>内容...</p>
  </article>
</main>
<footer>&copy; 2025</footer>

二、多媒体元素

使用<audio>和<video>直接嵌入媒体，无需插件：

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

三、Canvas绘图

<canvas>元素配合JavaScript绘制图形：

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  var c = document.getElementById('myCanvas');
  var ctx = c.getContext('2d');
  ctx.fillStyle = 'blue';
  ctx.fillRect(10, 10, 150, 80);
</script>

四、本地存储

localStorage和sessionStorage提供键值对存储：

// 存储
localStorage.setItem('username', '小明');
// 读取
var user = localStorage.getItem('username');

练习提示：在starter_code中补充一个<audio>元素，使用controls属性，并添加一个本地存储计数器来记录页面访问次数。