HTML5页面展示代码

HTML5是一种用于展示网页内容的标记语言。它是HTML的最新版本，引入了许多新的功能和标签，使得网页开发更加灵活和丰富。在本文中，我们将介绍一些常见的HTML5标签和功能，并提供相应的代码示例。

1. <canvas>标签

<canvas>标签是HTML5的一个重要特性，它提供了一个可以用JavaScript绘制图形的容器。通过使用<canvas>标签，我们可以实现各种复杂的图形和动画效果。

例如，下面的代码展示了如何在一个<canvas>标签中绘制一个矩形：

<canvas id="myCanvas"></canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(50, 50, 200, 100);
</script>

在这个例子中，我们首先创建了一个<canvas>标签，然后通过JavaScript代码获取到该标签的上下文对象。接下来，我们使用上下文对象的fillStyle属性设置矩形的填充颜色，并使用fillRect方法绘制矩形。

2. <video>和<audio>标签

HTML5还引入了<video>和<audio>标签，用于在网页中嵌入视频和音频文件。这些标签使得在网页中播放多媒体内容变得非常简单。

下面的代码展示了如何在一个<video>标签中嵌入一个视频文件：

<video controls>
  <source src="myvideo.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

在这个例子中，我们使用了<video>标签，并在其中添加了一个<source>标签。<source>标签用于指定要嵌入的视频文件的URL和类型。controls属性表示在视频上显示播放控制器。

<audio>标签的用法与<video>标签类似，只是它用于嵌入音频文件。下面的代码展示了如何在一个<audio>标签中嵌入一个音频文件：

<audio controls>
  <source src="mysong.mp3" type="audio/mp3">
  Your browser does not support the audio tag.
</audio>

3. 地理定位

HTML5还引入了地理定位功能，使得网页可以获取用户的地理位置信息。这对于一些基于位置的应用非常有用，例如提供附近商家的信息。

下面的代码展示了如何使用地理定位功能获取用户的当前位置：

<button onclick="getLocation()">Get Location</button>

<script>
  function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      alert("Geolocation is not supported by this browser.");
    }
  }

  function showPosition(position) {
    alert("Latitude: " + position.coords.latitude +
    " Longitude: " + position.coords.longitude);
  }
</script>

在这个例子中，我们首先创建了一个按钮，然后使用JavaScript代码定义了一个getLocation函数。这个函数通过调用getCurrentPosition方法来获取用户的当前位置，并将位置信息传递给showPosition函数进行展示。

通过上述示例代码的介绍，我们了解了一些HTML5的常见标签和功能。HTML5为网页开发提供了更多的可能性，使得我们可以创建出更加丰富和交互性的网页。如果你对HTML5感兴趣，可以继续深入学习和探索更多的功能和用法。