HTML5 浏览器支持学习笔记

1. HTML5 和浏览器支持的历史

HTML5 是一种标准化的超文本标记语言，用于创建和呈现网页。HTML5 在 2014 年正式发布，但并非所有浏览器都支持它的所有功能。

在过去的几年里，大多数主流浏览器都已经支持了 HTML5 中的大多数功能，包括语义元素、音频/视频、Canvas、Web 存储和地理位置等。

以下是几个主流浏览器对 HTML5 的支持情况：

Google Chrome：Chrome 支持 HTML5 中的几乎所有功能，并且具有很好的性能和稳定性。
Firefox：Firefox 也支持几乎所有 HTML5 功能，同时还支持 WebVR 技术。
Safari：Safari 对 HTML5 的支持较好，但并不完全支持所有功能。
Edge：Edge 已经成为 Chromium 内核的浏览器，支持 HTML5 中的绝大部分功能。
Internet Explorer：IE11 仍然是许多企业和政府机构使用的浏览器，但它对 HTML5 的支持非常有限。

2. HTML5 实例

2.1 语义元素

HTML5 中引入了一些新的语义元素，比如 header、footer、nav、main 等。这些元素提供了更清晰和更可读的文档结构。

htmlCopy Code
<!DOCTYPE html>
<html>
  <head>
    <title>语义元素示例</title>
  </head>
  <body>
    <header>
      <h1>欢迎来到我的网站！</h1>
      <nav>
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">关于</a></li>
          <li><a href="#">联系我们</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <h2>HTML5 新特性</h2>
        <p>HTML5 中引入了许多新的特性，比如音频/视频、Canvas、Web 存储等。</p>
      </article>
      <aside>
        <h3>您可能还感兴趣</h3>
        <ul>
          <li><a href="#">HTML 教程</a></li>
          <li><a href="#">CSS 教程</a></li>
          <li><a href="#">JavaScript 教程</a></li>
        </ul>
      </aside>
    </main>
    <footer>
      <p>&copy; 2023 binjie09</p>
    </footer>
  </body>
</html>

2.2 音频/视频

HTML5 提供了内置的支持音频和视频的标签，分别是 <audio> 和 <video>。

htmlCopy Code
<!DOCTYPE html>
<html>
  <head>
    <title>音频/视频示例</title>
  </head>
  <body>
    <h1>这是一个视频示例</h1>
    <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
      您的浏览器不支持 HTML5 视频。
    </video>
    <h1>这是一个音频示例</h1>
    <audio controls>
      <source src="music.mp3" type="audio/mpeg">
      <source src="music.ogg" type="audio/ogg">
      您的浏览器不支持 HTML5 音频。
    </audio>
  </body>
</html>

2.3 Canvas

HTML5 中引入了 <canvas> 元素，可以用于绘制图形、动画等。

htmlCopy Code
<!DOCTYPE html>
<html>
  <head>
    <title>Canvas 示例</title>
  </head>
  <body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
      var canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "#FF0000";
      ctx.fillRect(0, 0, 150, 75);
    </script>
  </body>
</html>

2.4 Web 存储

HTML5 提供了两个 Web 存储机制：localStorage 和 sessionStorage。

htmlCopy Code
<!DOCTYPE html>
<html>
  <head>
    <title>Web 存储示例</title>
  </head>
  <body>
    <h1>Web 存储示例</h1>
    <p>在这个示例中，您可以在文本框中输入一些内容，然后点击按钮保存到 localStorage 中。</p>
    <input type="text" id="myInput">
    <button onclick="saveData()">保存数据</button>
    
    <script>
      function saveData() {
        var data = document.getElementById("myInput").value;
        localStorage.setItem("myData", data);
        alert("数据已成功保存！");
      }
    </script>
  </body>
</html>

以上就是 HTML5 浏览器支持的学习笔记和实例，希望能对您有所帮助。