html5新增的标签有哪些

<!-- HTML5 新增的语义化标签示例 -->

<!-- <article> 标签定义独立的内容，通常是一个文章或博客帖子 -->
<article>
  <h1>HTML5 新增标签</h1>
  <p>这篇文章介绍了 HTML5 中新增的一些标签。</p>
</article>

<!-- <section> 标签定义文档中的一个区域，例如章节、页眉、页脚或文档的其他部分 -->
<section>
  <h2>语义化标签</h2>
  <p>HTML5 引入了许多新的语义化标签，使页面结构更加清晰。</p>
</section>

<!-- <header> 标签表示一组介绍性或导航性的内容，通常包含网站的标志和导航菜单 -->
<header>
  <h1>我的网站</h1>
  <nav>
    <ul>
      <li><a href="#home">首页</a></li>
      <li><a href="#about">关于我们</a></li>
      <li><a href="#contact">联系我们</a></li>
    </ul>
  </nav>
</header>

<!-- <footer> 标签表示页面或章节的底部，通常包含版权信息、联系信息等 -->
<footer>
  <p>&copy; 2023 我的网站. 版权所有.</p>
</footer>

<!-- <aside> 标签定义页面内容之外的内容，通常作为侧边栏使用 -->
<aside>
  <h3>相关链接</h3>
  <ul>
    <li><a href="https://developer.mozilla.org">MDN Web Docs</a></li>
    <li><a href="https://www.w3schools.com">W3Schools</a></li>
  </ul>
</aside>

<!-- <main> 标签定义文档的主要内容，每个页面只能有一个 <main> 元素 -->
<main>
  <p>这是页面的主要内容。</p>
</main>

<!-- <figure> 和 <figcaption> 标签用于定义图像或其他媒体内容及其标题 -->
<figure>
  <img src="example.jpg" alt="示例图片">
  <figcaption>这是一个示例图片的说明。</figcaption>
</figure>

<!-- <video> 和 <audio> 标签用于嵌入多媒体内容 -->
<video controls>
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

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

<!-- <canvas> 标签用于绘制图形，需要使用 JavaScript 来操作 -->
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 150, 75);
</script>

<!-- <progress> 标签表示进度条 -->
<progress value="70" max="100"></progress>

<!-- <meter> 标签表示度量衡 -->
<meter value="2" min="0" max="10">2 out of 10</meter>

<!-- <details> 和 <summary> 标签用于创建可折叠的内容块 -->
<details>
  <summary>点击这里展开更多内容</summary>
  <p>这里是隐藏的内容，只有在用户点击时才会显示。</p>
</details>

解释说明：

1. 语义化标签：如 <article>、<section>、<header>、<footer>、<aside>、<main> 等，这些标签使 HTML 文档结构更加清晰，有助于搜索引擎优化（SEO）和无障碍访问（Accessibility）。
2. 多媒体标签：如 <video> 和 <audio>，用于嵌入视频和音频文件。
3. 绘图标签：如 <canvas>，用于绘制图形，常与 JavaScript 结合使用。
4. 进度和度量标签：如 <progress> 和 <meter>，用于表示进度条和度量衡。
5. 交互式标签：如 <details> 和 <summary>，用于创建可折叠的内容块。