基础 | 01 HTML5的新特性与案例演示
超文本标记语言（英语：HyperTextMarkupLanguage，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。
一、HTML规范的前世今生
HTML标准 最初是由CERN（欧洲核子研究组织）的Tim Berners-Lee提出的。最初的HTML规范相对简单，只有少量标记可以用来定义文本的结构和格式。 随着Web的普及和互联网的发展，HTML规范逐渐得到了扩展和更新，新版本的规范不仅增加了更多的标记和属性，还引入了新的功能和特性，如表单控件、多媒体支持、动态效果等等。这些特性的引入和改进，推动了互联网的进一步发展和创新。
HTML5是HTML最新的修订版本：
- 2008年1月 HTML5 由W3C作为工作草案发布
- 2014年10月28日，HTML5作为稳定W3C推荐标准发布 ，这意味着HTML5的标准化已经完成
二、HTML5的新特性
HTML5是Web标准的最新版本，它引入了许多新的特性和改进，旨在为Web开发者提供更强大的工具和更好的用户体验。 下面是HTML5的一些新特性：
2.1 语义化标签与属性
新的语义化标签：HTML5引入了许多新的标签，如<header>、<footer>、<nav>、<article> 、<section>等，这些标签有助于开发者更好地描述页面内容，提高页面的可读性和可维护性。
<header>
<h1>这是页面的头部</h1>
</header>
<nav>
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
</ul>
</nav>
<section>
<h2>这是一个章节</h2>
<p>这是章节的内容</p>
</section>
<footer>
<p>这是页面的底部</p>
</footer>
2.2 表单控件增强
表单控件增强：HTML5新增了一些表单控件，如 <input type="date">、<input type="color">、<input type="range"> 等，同时也提供了一些新的属性，如placeholder、required、pattern等，这些都有助于提升用户交互体验。
<!-- 新的表单控件 -->
<label>日期：</label>
<input type="date" name="date">
<label>颜色：</label>
<input type="color" name="color">
<label>滑动条：</label>
<input type="range" name="range">
2.3 媒体支持
媒体支持：HTML5支持多媒体的播放和操作，包括音频、视频等，同时还提供了一些新的API，如<video>、<audio>等，这些API提供了丰富的操作接口，可以实现各种复杂的媒体应用。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
<video>元素支持三种视频格式: MP4, WebM, 和 Ogg。<audio>元素支持三种音频格式: MP3, Wav, 和 Ogg。
2.4 Web Storage
Web Storage：HTML5引入了Web Storage API，包括 localStorage 和 sessionStorage 两种存储方式，这些存储方式可以用来存储客户端数据，避免了传统的cookie机制的一些缺陷。
- localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
- sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
2.5 Web Workers
Web Workers API 是 HTML5 的一个新特性，它可以在后台线程中运行 JavaScript 脚本，而不影响页面的主线程，从而提高了前端的性能和用户体验。在此基础上，我们可以实现一些比较复杂的功能，比如图像处理、音视频处理等。 以下是一个基于 Web Workers 的示例，用于计算斐波那契数列：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web Workers Demo</title>
<script>
// 创建一个 worker 线程
const worker = new Worker('worker.js');
// 监听 worker 线程的消息
worker.onmessage = (event) => {
const result = event.data;
console.log(`计算结果是：${result}`);
};
// 向 worker 线程发送消息
const n = 20;
console.log(`开始计算斐波那契数列的第 ${n} 项`);
worker.postMessage(n);
</script>
</head>
<body>
<h1>Web Workers Demo</h1>
<p>打开浏览器控制台查看计算结果</p>
</body>
</html>
上面的代码中，我们首先创建了一个 worker 线程，并指定它的脚本文件为 worker.js。然后通过监听 worker.onmessage 事件，获取 worker 线程发送的计算结果。最后通过调用 worker.postMessage 方法向 worker 线程发送消息，以触发斐波那契数列的计算。
// 接收主线程发送的消息，并进行计算
onmessage = (event) => {
const n = event.data;
const result = fibonacci(n);
postMessage(result);
};
// 计算斐波那契数列的第 n 项
function fibonacci(n) {
if (n <= 1) {
return n;
} else {
return fibonacci(n - 1) + fibonacci(n - 2);
}
}
worker.js 文件中，我们首先通过监听 onmessage 事件接收主线程发送的消息，然后进行斐波那契数列的计算，最后通过调用 postMessage 方法将计算结果发送回主线程。
2.6 Canvas和SVG
Canvas和SVG：HTML5引入了<canvas>和<svg>两种绘图标记，使得Web开发者可以在网页上绘制图形和动画。
使用 arc() 方法 绘制一个圆:
<canvas id="myCanvas" width="200" height="100"></canvas>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
2.7 WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。它使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。 在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。使得Web应用可以进行实时通信，如在线聊天等。
2.8 Geolocation（地理位置）
HTML5 Geolocation API 用于获得用户的地理位置。
window.navigator.geolocation {
getCurrentPosition: fn 用于获取当前的位置数据
watchPosition: fn 监视用户位置的改变
clearWatch: fn 清除定位监视
}
navigator.geolocation.getCurrentPosition(
function(pos){
console.log('用户定位数据获取成功')
//console.log(arguments);
console.log('定位时间：',pos.timestamp)
console.log('经度：',pos.coords.longitude)
console.log('纬度：',pos.coords.latitude)
console.log('海拔：',pos.coords.altitude)
console.log('速度：',pos.coords.speed)
})
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
2.9 Drag & Drop（拖放）
拖放（Drag 和 drop）是 HTML5 标准的组成部分。拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。 为了使元素可拖动，把 draggable 属性设置为 true
<img draggable="true">
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function onDragover(ev) {
ev.preventDefault()
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开） 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
三、总结
HTML5的新特性使得前端开发变得更加灵活和便捷，应用场景非常广泛。其中，语义化标签可以使得页面更加清晰易懂，提高可读性和可维护性；表单控件增强和媒体支持可以提升用户交互体验，让用户获得更好的使用体验；Web Storage可以用来存储客户端数据，解决传统cookie机制的一些缺陷；Web Workers可以提升JavaScript脚本的执行效率，提高网站性能等。