1. HTML5 是 HTML 的下一代标准
HTML(Hypertext Markup Language,超文本标记语言)是用来创建网页的标准语言。HTML5 是 HTML 的下一代标准,它在许多方面都比 HTML 更加强大和灵活。
1.1 最大的不同:HTML5 支持多媒体
HTML5 引入了许多新的元素,其中最重要的是用于多媒体的元素,例如
<audio src="song.mp3"></audio>
<video src="movie.mp4"></video>
1.2 HTML5 增加了表单元素和属性
HTML5 还增强了表单元素和属性。例如,我们可以使用 autofocus 属性自动聚焦到输入框,使用 required 属性让输入框变成必填项,使用 placeholder 属性添加占位符提示用户。
<form>
<label>用户名:
<input type="text" name="username" autofocus required placeholder="请输入用户名" />
</label>
</form>
2. HTML5 具有更好的语义标记
HTML5 引入了新的语义标记,使得网页更加易读易懂。例如,
<header>
<h1>页面标题</h1>
<p>页面的描述信息</p>
</header>
<nav>
<a href="home.html">首页</a>
<a href="about.html">关于我们</a>
<a href="contact.html">联系我们</a>
</nav>
<article>
<h2>文章标题</h2>
<p>文章内容</p>
</article>
<aside>
<h3>侧边栏标题</h3>
<p>侧边栏内容</p>
</aside>
3. HTML5 支持离线存储
HTML5 引入了一些 API,使得浏览器可以离线存储数据,即使没有网络连接,也可以让用户访问网页,这对于移动设备来说是非常有用的。
3.1 localStorage
localStorage 是 HTML5 提供的一种键值对存储方式,它可以将数据保存在浏览器中并在关闭浏览器后重新打开时恢复数据。这个特性非常适合用于保存表单数据。
// 存储数据
localStorage.setItem('username', 'Tom');
// 获取数据
var username = localStorage.getItem('username');
3.2 Application Cache
Application Cache 是一种在用户离线时存储 web 应用程序资源的方法。用户在下次访问应用程序时,即使没有网络连接,也可加载应用程序。
// 在 HTML 文件头部添加 manifest 属性
<html manifest="example.appcache">
4. HTML5 提供更好的可访问性支持
HTML5 提供了更好的可访问性支持,通过一些新的属性和元素,让网页更易于访问。
4.1 aria-* 属性
aria-*(Accessible Rich Internet Applications,无障碍富 Internet 应用程序)属性用于提供更详细的元素描述,以便于屏幕阅读器更好地理解页面。
<div aria-labelledby="username-label">
<label id="username-label">用户名:
<input type="text" aria-label="请输入用户名" />
</label>
</div>
4.2
<figure>
<img src="example.png" alt="example" />
<figcaption>例子图片</figcaption>
</figure>
5. HTML5 引入了更多新特性
除了上述内容外,HTML5 还有很多其他的新特性,例如 geolocation、canvas、Web Worker 等,这些特性使得网页变得更加强大和丰富。
5.1 geolocation
geolocation API 用于获取用户的地理位置信息。它可以在浏览器中获取用户的当前位置,并将其用于一些服务,例如找到附近的商店或者获取天气预报等。这对于一些移动应用程序来说非常有用。
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
});
5.2 canvas
canvas 元素使得开发者可以在浏览器中绘制图形和动画,它为很多游戏和图形处理应用程序提供了强大的支持。
<canvas id="myCanvas"></canvas>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'blue';
ctx.fill();
5.3 Web Worker
Web Worker 允许在后台运行 JavaScript 脚本,不会阻塞主线程。此特性对于一些 CPU 密集型的计算任务(例如图像处理)和长时间运行的任务(例如上传、下载文件)非常有用。
// 创建一个 Web Worker
var worker = new Worker('worker.js');
// 发送消息给 Web Worker
worker.postMessage('hello');
// 接收 Web Worker 返回的消息
worker.onmessage = function(e) {
console.log(e.data);
};
6. HTML5 是未来的趋势
HTML5 是未来的趋势,它的新特性和增强功能将会改变整个 web 开发领域,使得网页更加强大、易读易懂、易用易访问。因此,学习和掌握 HTML5 技术是非常有必要的。
总的来说,HTML5 相比于 HTML 具有更好的语义标记、支持多媒体、离线存储、可访问性支持、引入了更多的新特性。这些特性为开发者提供了更多的选择和增强,为用户提供了更好的体验。