HTML5详解！在HTML上增加的特性

HTML5 引入了许多新特性，包括语义标签、图形、视频、音频、Canvas 绘图、本地存储、会话存储、WebSocket 通信等。

以下是一些在 HTML5 中新增的特性的示例：

1. 用于绘图的 Canvas 元素：

<canvas id="myCanvas" width="200" height="100">
  你的浏览器不支持Canvas。
</canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = '#FF0000';
  ctx.fillRect(0, 0, 150, 75);
</script>

2. 视频和音频元素：

<!-- 视频 -->
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持视频标签。
</video>
 
<!-- 音频 -->
<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  您的浏览器不支持音频元素。
</audio>

3. 新的语义标签：

<header>...</header>
<nav>...</nav>
<section>...</section>
<article>...</article>
<aside>...</aside>
<footer>...</footer>

4. 内置表单验证：

<form>
  <input type="email" name="user_email">
  <input type="url" name="user_url">
  <input type="date" name="user_date">
  <input type="time" name="user_time">
  <input type="number" name="user_number" min="1" max="5" step="1">
  <input type="range" name="user_range" min="1" max="10">
  <input type="search" name="user_search">
  <input type="color" name="user_color">
</form>

5. 本地存储：

// 存储数据
localStorage.setItem('key', 'value');
// 获取数据
var data = localStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');
// 清除所有数据
localStorage.clear();

6. WebSocket 实现实时通信：

var ws = new WebSocket('ws://www.example.com/socket');
 
ws.onopen = function() {
  console.log('连接已打开...');
};
 
ws.onmessage = function(event) {
  console.log('收到消息:', event.data);
};
 
ws.onclose = function() {
  console.log('连接已关闭...');
};
 
// 发送消息
ws.send('Hello, Server!');

这些特性使得开发者能创建更加丰富和动态的网页应用程序。