HTML5【新特性总结】
HTML5 引入了许多新特性，以下是一些主要的：
- 语义化标签：HTML5 提供了一些新的语义化标签，如
<header>,<nav>,<section>,<article>,<aside>, 和<footer>，这些标签可以让页面更容易阅读和理解。 - 画布（Canvas）：HTML5 的
<canvas>元素可以通过 JavaScript 来创建图形，这是一种替代 Flash 的方式。 - 视频和音频：HTML5 提供了
<video>和<audio>标签来嵌入视频和音频内容。 - 表单控件：HTML5 增加了色彩选择器、日期选择器、时间选择器、数字输入框等表单控件。
- 本地存储：HTML5 的 Web Storage API 允许网页本地存储数据（如 localStorage 和 sessionStorage）。
- 地理定位：HTML5 的 Geolocation API 可以获取用户的地理位置信息。
- Web Workers：HTML5 的 Web Workers API 允许在后台运行脚本，不影响用户界面的交互。
- WebSocket：HTML5 引入了 WebSocket API，提供了在用户浏览器和服务器之间建立一个双向通信的通道。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>HTML5 新特性</title>
</head>
<body>
<!-- 语义化标签 -->
<header>
<h1>我的网站</h1>
</header>
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
<section>
<h2>最新新闻</h2>
<article>
<h3>新闻标题</h3>
<p>新闻内容...</p>
</article>
</section>
<aside>
<h4>侧边栏</h4>
<p>侧边内容...</p>
</aside>
<footer>
<p>版权信息</p>
</footer>
<!-- 视频和音频 -->
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持视频标签。
</video>
<!-- 画布 -->
<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>
<!-- 表单控件 -->
<form>
<input type="color">
<input type="date">
<input type="time">
<input type="number">
</form>
<!-- 本地存储 -->
<script>
// 存储数据
localStorage.setItem('key', 'value');
// 获取数据
var data = localStorage.getItem('key');
</script>
<!-- Web Workers -->
<script>
if (window.Worker) {
var myWorker = new Worker('worker.js');
}
</script>
<!-- WebSocket -->
<script>
var ws = new WebSocket('ws://www.example.com/socket');
ws
评论已关闭