随着互联网技术的不断发展，HTML5作为新一代的网页开发标准，已经逐渐取代了传统的HTML4。HTML5不仅继承了HTML4的优良传统，还在功能上进行了极大的扩展和优化。本文将揭秘HTML5与HTML4的五大区别与优势，帮助您更好地了解HTML5的新特性。

1. 音视频支持

HTML5引入了<video>和<audio>标签，使得在网页上嵌入音视频内容变得简单快捷。与HTML4相比，HTML5无需依赖第三方插件，如Flash，即可实现音视频的播放。这使得网页在播放音视频时更加流畅，同时也降低了浏览器的负担。

<video src="movie.mp4" controls></video>
<audio src="music.mp3" controls></audio>

2. 新增语义化标签

HTML5新增了许多语义化标签，如<header>, <footer>, <article>, <section>, <nav>等，这些标签有助于提高网页的可读性和结构化。与HTML4相比，HTML5的语义化标签使得搜索引擎优化（SEO）更加容易实现。

<header>
  <h1>网站标题</h1>
</header>
<section>
  <h2>文章标题</h2>
  <p>文章内容...</p>
</section>
<footer>
  <p>版权信息</p>
</footer>

3. 离线应用支持

HTML5提供了离线应用的支持，使得网页应用能够在用户断开网络的情况下正常运行。这得益于HTML5引入的Application Cache、Web Storage和Web SQL Database等技术。

<!DOCTYPE html>
<html manifest="appcache.appcache">
<head>
  <title>离线应用示例</title>
</head>
<body>
  <h1>离线应用示例</h1>
  <p>这是一个离线应用示例，当您断开网络时，网页内容仍然可以访问。</p>
</body>
</html>

4. 多媒体支持

HTML5对多媒体的支持更加丰富，包括对WebGL、Canvas和SVG等图形技术的支持。这使得网页开发者在制作复杂图形和动画时更加得心应手。

<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, 200, 100);
</script>

5. 设备访问权限

HTML5提供了对设备访问权限的支持，如地理位置、摄像头和麦克风等。这使得网页应用能够更好地与用户设备互动，为用户提供更加个性化的服务。

<noscript>
  您的浏览器不支持 Geolocation。
</noscript>
<script>
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    alert("Geolocation is not supported by this browser.");
  }
</script>

<script>
  function showPosition(position) {
    var x = position.coords.latitude;
    var y = position.coords.longitude;
    alert("Latitude: " + x + "\nLongitude: " + y);
  }
</script>

综上所述，HTML5在音视频支持、语义化标签、离线应用、多媒体支持和设备访问权限等方面相较于HTML4具有显著的优势。掌握HTML5的新特性，将有助于您开发出更加丰富、高效和个性化的网页应用。