HTML5，作为现代网页开发的核心技术，自2014年正式发布以来，已经深刻地改变了互联网的格局。它不仅提供了更加丰富的功能，还极大地提升了网页的性能和用户体验。以下是引领网页革命的十大HTML5核心技术揭秘：

1. Canvas和SVG图形

HTML5引入了Canvas和SVG，这两个技术使得在网页上绘制图形和动画成为可能。

Canvas

Canvas允许开发者使用JavaScript在网页上绘制图形、文本和图像。以下是一个简单的Canvas绘制矩形示例：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 100);

SVG

SVG是一种基于可扩展标记语言的图形矢量格式，它可以定义复杂的图形。以下是一个简单的SVG示例：

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

2. 音频和视频标签

HTML5提供了<audio>和<video>标签，使得在网页上嵌入音频和视频文件变得更加容易。

音频

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

视频

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

3. 本地存储

HTML5提供了localStorage和sessionStorage，使得网页能够在用户关闭浏览器后仍然保留数据。

// 设置数据
localStorage.setItem("key", "value");

// 获取数据
var value = localStorage.getItem("key");

// 删除数据
localStorage.removeItem("key");

4. 表单改进

HTML5引入了许多新的表单控件，如日期选择器、颜色选择器等，以及表单验证功能。

日期选择器

<input type="date" name="bday" min="1900-01-01" max="2018-12-31">

颜色选择器

<input type="color" id="favcolor" name="favcolor">

5. 拖放API

HTML5的拖放API允许用户将文件或元素拖放到网页上，并执行相应的操作。

// 设置拖放事件
document.getElementById('mydiv').addEventListener('dragover', function(e) {
  e.preventDefault();
});

document.getElementById('mydiv').addEventListener('drop', function(e) {
  e.preventDefault();
  var file = e.dataTransfer.files[0];
  // 处理文件
});

6. Geolocation

HTML5的Geolocation API允许网页访问用户的地理位置信息。

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    // 使用经纬度
  });
} else {
  // 浏览器不支持Geolocation
}

7. Web Workers

Web Workers允许开发者创建在后台运行的线程，从而不会阻塞主线程。

// worker.js
self.addEventListener('message', function(e) {
  // 处理消息
});

// 主线程
var worker = new Worker('worker.js');
worker.postMessage('Hello, world!');

8. WebSocket

WebSocket提供了一个全双工通信通道，使得实时数据传输成为可能。

var ws = new WebSocket('ws://example.com/socketserver');

ws.onopen = function() {
  ws.send('Hello, server!');
};

ws.onmessage = function(event) {
  var data = event.data;
  // 处理数据
};

ws.onclose = function() {
  // 连接关闭
};

9. 文件API

HTML5的文件API允许网页访问用户上传的文件，并对其进行操作。

var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(e) {
  var file = e.target.files[0];
  // 处理文件
});

10. History API

HTML5的History API允许开发者在不刷新页面的情况下改变URL。

history.pushState({path: '/new-page'}, 'New Page', '/new-page');
window.onpopstate = function(event) {
  // 处理返回
};

总结来说，HTML5为网页开发带来了革命性的变化，使得网页功能更加丰富，用户体验更加出色。通过掌握这些核心技术，开发者可以构建出更加先进和高效的网页应用。