HTML5实用大全(Part.2)

由于提出的问题涉及的内容较多，我将选取几个典型的HTML5特性及其用法进行解答。

1. 用于媒体播放的<video>标签：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

2. 用于绘图的<canvas>标签：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 150, 75);
</script>

3. 用于地理定位的navigator.geolocation API：

navigator.geolocation.getCurrentPosition(function(position) {
  console.log("Latitude is :", position.coords.latitude);
  console.log("Longitude is :", position.coords.longitude);
});

4. 用于本地存储的localStorage：

localStorage.setItem('key', 'value');
var data = localStorage.getItem('key');

5. 用于表单验证的新的表单类型和属性：

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  <input type="email" id="email" name="email" required>
  <input type="submit">
</form>

这些例子展示了HTML5中的一些常用特性及其简单用法。实际应用中，你可能需要根据具体需求来调整这些代码。