HTML5高级部分

HTML5的高级部分通常指的是那些更复杂或者需要特殊技巧来实现的HTML特性。以下是一些例子：

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. 使用地理位置(Geolocation)API:

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

4. 使用Web存储:

// 存储数据
localStorage.setItem('key', 'value');
// 获取数据
var data = localStorage.getItem('key');

5. 使用Web Workers:

// main.js
var worker = new Worker('worker.js');
worker.postMessage('hello');
worker.onmessage = function(e) {
  console.log('Received message: ' + e.data);
};
 
// worker.js
onmessage = function(e) {
  console.log('Received message in worker: ' + e.data);
  postMessage('hello back');
};

这些例子展示了HTML5中的一些高级特性，包括绘图、地理位置、Web存储和Web Workers等，它们可以用来创建更复杂的Web应用程序。