HTML5进阶内容

HTML5进阶内容主要包括一些较为高级的HTML5特性和功能，例如Canvas绘图、SVG绘图、地理位置API、多媒体标签（如<video>和<audio>）、表单控件（如日期选择器、颜色选择器）、Web Workers、Web Storage（本地存储）、WebSocket通信等。

以下是一些示例代码：

1. 使用Canvas绘图：

<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>

2. 使用SVG绘图：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

3. 地理位置API：

<script>
if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(function(position) {
    console.log("Latitude is :", position.coords.latitude);
    console.log("Longitude is :", position.coords.longitude);
  });
} else {
  console.log("Geolocation is not supported by this browser.");
}
</script>

4. 多媒体播放：

<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>

5. 使用Web Workers：

// main.js
const worker = new Worker('worker.js');
worker.postMessage('hello');
worker.onmessage = function(e) {
  console.log('Message received from worker: ' + e.data);
};
 
// worker.js
onmessage = function(e) {
  console.log('Message received in worker: ' + e.data);
  postMessage('hello back');
};

6. 使用WebSocket进行实时通信：

var ws = new WebSocket("ws://localhost:8080");
ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};
 
ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
};
 
ws.onclose = function(evt) {
  console.log("Connection closed.");
};      

这些代码示例展示了HTML5中一些高级特性的使用方法，可以帮助开发者在实际项目中应用这些功能。