HTML5 特性

1. 语义化标签

<header>：表示网页或某个区域的页眉部分，通常包含网站的标志、导航菜单等内容。
<nav>：表示导航区域，用于包含网站的主要导航链接。
<main>：表示网页的主要内容区域，通常包含网页的主要内容。
<section>：表示文档中的一个独立区域或部分，比如一篇文章中的章节、一个页面中的内容块等。
<article>：表示一个独立的、完整的文章或内容块，比如一篇博客文章、新闻报道等。
<aside>：表示一个侧边栏区域，通常用于包含与主要内容相关的附加信息，比如侧边栏、广告等。
<footer>：表示网页或某个区域的页脚部分，通常包含版权信息、联系方式等内容。
<figure> 和 <figcaption>：<figure> 表示一个独立的内容块，通常用于包含图像、图表等媒体内容，而 <figcaption> 表示 <figure> 元素的标题或说明。
<time>：表示日期和时间，用于标记具有时间语义的内容，比如日期、时间、时间戳等。
<progress>：表示进度条，用于显示任务的完成进度。
<details> 和 <summary>：<details> 表示可折叠的内容块，而 <summary> 表示 <details> 元素的摘要或标题。
<mark>：表示带有突出显示效果的文本，通常用于标记搜索关键词等。

2. 浏览器支持

所有现代的主流浏览器都支持大部分 HTML5 的特性，但不同浏览器对某些特性的支持程度可能会有所不同。

3. 多媒体标签

HTML5 引入了多媒体标签，用于在网页中嵌入音频、视频和其他多媒体内容。以下是 HTML5 中常用的多媒体标签：

<audio>：用于嵌入音频内容，可以通过 src 属性指定音频文件的 URL。可以使用 <source> 元素指定多个不同格式的音频文件，以便在不同浏览器上提供更好的兼容性。
html 复制代码
```
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>
```

<video>：用于嵌入视频内容，可以通过 src 属性指定视频文件的 URL。同样可以使用 <source> 元素指定多个不同格式的视频文件。

html 复制代码

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video element.
</video>

<iframe>：虽然 <iframe> 不是专门用于多媒体内容的标签，但它可以用于嵌入包含多媒体的外部网页，如 YouTube 视频、Google 地图等。
html 复制代码
```
<iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315"></iframe>
```
<canvas>：虽然 <canvas> 通常用于绘制图形，但它也可以用于实现自定义的多媒体内容，如绘制动画、实时图像处理等。
html 复制代码
```
<canvas id="myCanvas" width="640" height="480"></canvas>
```

<track>：用于指定视频或音频的字幕或描述文件。可以使用 kind 属性指定字幕类型（如 subtitles、captions、descriptions 等）和 src 属性指定字幕文件的 URL。

html 复制代码

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
  <track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Spanish">
  Your browser does not support the video element.
</video>

4. Canvas 画布

Canvas 是 HTML5 提供的一个元素，用于在网页上绘制图形、动画和图像。它提供了一个图形环境，允许使用 JavaScript 和基于浏览器的 API 来绘制 2D 和 3D 图形。Canvas 具有强大的绘图功能，可以实现各种图形、动画、游戏等交互性的视觉效果。

Canvas 基本用法：

创建 Canvas 元素：

在 HTML 中，通过 <canvas> 元素可以创建一个画布。Canvas 本身是一个无内容的元素，只需设置其 width 和 height 属性，指定画布的宽度和高度。
html 复制代码
```
<canvas id="myCanvas" width="400" height="200"></canvas>
```
获取 Canvas 上下文：

通过 JavaScript，可以获取 <canvas> 元素的上下文对象（context），它是用于绘制图形的核心部分。使用 getContext() 方法来获取不同类型的上下文对象，常用的是 2D 上下文 context2D。
javascript 复制代码
```
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
```

绘制图形和图像：

使用获取到的 ctx 上下文对象，可以在画布上绘制各种图形，如矩形、圆形、线条等，也可以绘制图像。常用的绘图方法有：fillRect() 绘制填充矩形、strokeRect() 绘制边框矩形、fillText() 绘制文本、arc() 绘制弧形等。

javascript 复制代码

// 绘制填充矩形
ctx.fillStyle = 'red'; // 设置填充颜色为红色
ctx.fillRect(50, 50, 100, 50); // 在坐标 (50, 50) 处绘制一个宽度为 100，高度为 50 的矩形

// 绘制边框矩形
ctx.strokeStyle = 'blue'; // 设置边框颜色为蓝色
ctx.lineWidth = 2; // 设置边框线条宽度为 2 像素
ctx.strokeRect(200, 50, 100, 50); // 在坐标 (200, 50) 处绘制一个宽度为 100，高度为 50 的边框矩形

// 绘制文本
ctx.fillStyle = 'green'; // 设置文本颜色为绿色
ctx.font = '20px Arial'; // 设置字体样式
ctx.fillText('Hello, Canvas!', 50, 150); // 在坐标 (50, 150) 处绘制文本

动画和帧率：

使用 Canvas 可以实现动画效果。可以使用 JavaScript 中的定时器（如 requestAnimationFrame() 或 setInterval()）来更新画布内容，从而创建动画效果。通过控制刷新频率（帧率），可以调整动画的流畅度。
javascript 复制代码
```
function drawAnimation() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制动画元素
  // ...

  // 更新下一帧
  requestAnimationFrame(drawAnimation);
}

// 启动动画
drawAnimation();
```
像素级控制：

Canvas 允许对像素进行直接操作，从而实现更高级的绘图和图像处理。可以通过 getImageData() 获取画布上指定区域的像素数据，然后对像素数据进行处理。
javascript 复制代码
```
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data; // 获取像素数据
// 处理像素数据
// ...
ctx.putImageData(imageData, 0, 0); // 将处理后的像素数据放回画布
```
支持 WebGL：

除了 2D 上下文 context2D，Canvas 还支持 3D 绘图技术 WebGL。WebGL 使用类似 OpenGL ES 的 API，可以在 Canvas 上进行高性能的 3D 图形渲染。
javascript 复制代码
```
const gl = canvas.getContext('webgl');
// 使用 WebGL 绘制 3D 图形
// ...
```

5. 本地存储

HTML5 引入了本地存储机制，其中包括 localStorage 和 sessionStorage。

localStorage：

作用域： localStorage 中存储的数据在同一域名下的所有页面和会话中都是共享的。即使用户关闭了浏览器或重新启动电脑，数据仍然保留，直到被显式删除。
数据保留： localStorage 中存储的数据没有过期时间，除非被用户手动删除或网站使用 JavaScript 代码清除。
使用方法： 可以通过 localStorage.setItem(key, value) 方法设置数据，使用 localStorage.getItem(key) 方法获取数据，使用 localStorage.removeItem(key) 方法删除指定键的数据。
存储容量： 通常情况下，localStorage 的存储容量在 5-10 MB 左右，具体大小因浏览器而异。

sessionStorage：

作用域： sessionStorage 中存储的数据在同一窗口（或标签页）的所有页面间共享，但在新窗口或标签页中打开同一网站时，数据是不共享的。
数据保留： sessionStorage 中存储的数据在会话结束时（当用户关闭浏览器标签页时）会被清除，或者当用户在同一标签页中导航到其他网页时也会被清除。
使用方法： 可以通过 sessionStorage.setItem(key, value) 方法设置数据，使用 sessionStorage.getItem(key) 方法获取数据，使用 sessionStorage.removeItem(key) 方法删除指定键的数据。
存储容量： 通常情况下，sessionStorage 的存储容量也在 5-10 MB 左右，具体大小因浏览器而异。

使用场景：

localStorage 适合用于长期存储不过期的数据，比如用户的偏好设置、登录信息等。
sessionStorage 适合用于临时存储在会话期间需要共享的数据，比如表单数据、临时状态等。

注意事项：

本地存储数据仅在浏览器端存储，并不会发送给服务器，因此不适合存储敏感信息。
不同浏览器、不同设备上的存储容量可能会有所不同，建议谨慎使用大量数据存储。

示例代码：

javascript 复制代码

// 使用localStorage存储数据
localStorage.setItem('username', 'John');
const username = localStorage.getItem('username');
console.log(username); // 输出 "John"
localStorage.removeItem('username');

// 使用sessionStorage存储数据
sessionStorage.setItem('theme', 'dark');
const theme = sessionStorage.getItem('theme');
console.log(theme); // 输出 "dark"
sessionStorage.removeItem('theme');

6. Web Workers

HTML5 中的 Web Workers 是一项用于在后台运行 JavaScript 脚本的技术。传统上，JavaScript 在主线程中执行，这意味着在执行复杂计算或耗时操作时，会阻塞页面的用户界面响应。为了避免这种情况，HTML5 引入了 Web Workers，允许将耗时的任务放在独立的线程中运行，不会影响主线程的执行。

Web Workers 的特点：

独立线程： Web Workers 在主线程之外运行，它们在自己的线程中执行，不会影响页面的主线程，因此不会阻塞页面的响应。
后台执行： Web Workers 可以在后台持续运行，即使页面被关闭或切换到其他页面，Worker 仍然可以继续执行。
无法访问 DOM： Web Workers 不能访问 DOM，它们完全在与页面分离的上下文中运行，这意味着它们不能直接操纵页面的元素或样式。
通信： Web Workers 与主线程之间可以通过消息传递进行通信，这使得在不同线程之间传递数据成为可能。

使用 Web Workers 的步骤：

创建 Worker： 使用 new Worker() 构造函数来创建一个 Web Worker。需要指定一个 JavaScript 文件的 URL，该文件将在 Worker 线程中运行。
javascript 复制代码
```
// 主线程中创建 Web Worker
const worker = new Worker('worker.js');
```

处理消息： 在主线程中，可以通过 worker.onmessage 事件监听来自 Worker 的消息。

javascript 复制代码

// 主线程监听来自 Worker 的消息
worker.onmessage = function(event) {
  console.log('Received message from Worker:', event.data);
};

发送消息： 在 Worker 中，可以使用 postMessage() 方法向主线程发送消息。
javascript 复制代码
```
// Worker 中向主线程发送消息
self.postMessage('Hello from Worker!');
```
终止 Worker： 在主线程中，可以使用 worker.terminate() 方法终止 Worker 的运行。
javascript 复制代码
```
// 主线程终止 Worker
worker.terminate();
```

示例：

index.html:

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <title>Web Workers Demo</title>
</head>
<body>
  <button onclick="startWorker()">Start Worker</button>
  <button onclick="stopWorker()">Stop Worker</button>

  <script>
    let worker;

    function startWorker() {
      worker = new Worker('worker.js');

      worker.onmessage = function(event) {
        console.log('Received message from Worker:', event.data);
      };
    }

    function stopWorker() {
      if (worker) {
        worker.terminate();
      }
    }
  </script>
</body>
</html>

worker.js:

javascript 复制代码

// Worker 线程中的代码
self.onmessage = function(event) {
  console.log('Received message in Worker:', event.data);
  self.postMessage('Hello from Worker!');
};

在上述示例中，当用户点击 "Start Worker" 按钮时，将创建一个 Web Worker，并在 Worker 中运行 worker.js 文件中的代码。然后，通过监听 onmessage 事件，在主线程中接收来自 Worker 的消息，并将其打印到控制台。用户点击 "Stop Worker" 按钮时，将终止 Worker 的运行。

这样，耗时的任务可以放在 Web Worker 中执行，不会影响主线程的响应，从而提高了页面的性能和用户体验。

7. 应用缓存（Cache Manifest）

应用缓存（Cache Manifest）是 HTML5 中的一项特性，它允许开发者指定需要缓存的资源，使得网页在离线状态下仍然可以访问，并提高网页的加载速度和性能。通过应用缓存，浏览器可以在在线时下载资源并缓存，在离线时直接从缓存中加载资源，而不需要再次向服务器发送请求。

使用应用缓存的步骤：

创建 Cache Manifest 文件： 创建一个文本文件，以 .appcache 为扩展名，比如 myapp.appcache。该文件是一个清单，其中包含要缓存的资源列表。
定义 CACHE MANIFEST： 在 Cache Manifest 文件的第一行，使用 CACHE MANIFEST 来标识该文件是一个应用缓存文件。
指定资源： 在 Cache Manifest 文件中，使用 CACHE 区块来指定要缓存的资源列表。可以包含网页、CSS、JavaScript、图像等资源。
```
CACHE MANIFEST
# Version 1.0

CACHE:
index.html
style.css
script.js
logo.png
```
定义 FALLBACK（可选）： 在 Cache Manifest 文件中，使用 FALLBACK 区块来指定在离线状态下需要使用的备用页面。
```
FALLBACK:
/ offline.html
```
定义 NETWORK（可选）： 在 Cache Manifest 文件中，使用 NETWORK 区块来指定不需要缓存的资源列表，它们将直接从网络加载。
```
NETWORK:
*
```
更新缓存： 在页面的 <html> 标签中，使用 manifest 属性来指定 Cache Manifest 文件的 URL。
html 复制代码
```
<!DOCTYPE html>
<html manifest="myapp.appcache">
...
</html>
```

工作原理：

在浏览器首次访问包含 manifest 属性的页面时，浏览器将下载 Cache Manifest 文件，并缓存指定的资源。
在在线状态下，浏览器会根据 Cache Manifest 文件的内容更新缓存，并确保资源是最新的。
在离线状态下，浏览器将直接从缓存中加载资源，而不需要再次向服务器发送请求。

注意事项：

应用缓存一般用于静态资源，不适合用于频繁更新的动态内容。
如果 Cache Manifest 文件有变化，浏览器会重新下载并缓存所有资源，因此需要谨慎更新 Cache Manifest 文件。

尽管应用缓存是 HTML5 提供的一种离线应用解决方案，但它已经被 Service Worker 所取代。Service Worker 提供了更强大和灵活的离线缓存能力，是现代 Web 开发中更推荐的方案。

8. 无障碍性

HTML5 在无障碍性（Accessibility）方面引入了一些新特性和改进，旨在使网页内容对所有用户，包括残障人士，都更易于访问和使用。无障碍性是一种设计理念，它追求使网站内容对于视力、听力、运动能力等方面存在障碍的用户，以及老年人和其他特殊群体，都能更加友好和易于理解。以下是 HTML5 中的一些无障碍性特性：

语义化标签： HTML5 引入了更多的语义化标签（例如 <header>、<nav>、<main>、<footer> 等），这些标签有助于更清晰地描述网页结构和内容，使屏幕阅读器和其他辅助技术能够更好地理解页面结构。
ARIA 属性： ARIA（Accessible Rich Internet Applications）是一组用于增强无障碍性的 HTML 属性。通过添加 ARIA 属性，可以为元素提供更多的语义信息，从而改进对于视力和听力障碍用户的访问体验。
表单增强： HTML5 支持一些新的表单元素和属性，如 <input type="email">、<input type="tel">、<input type="date"> 等，这些元素可以帮助辅助技术更好地理解表单内容和提供更好的输入体验。
媒体字幕和描述： HTML5 提供了 <track> 元素，用于指定视频或音频的字幕或描述文件，这有助于视力和听力障碍用户获取媒体内容的内容和信息。
<figure> 和 <figcaption>： HTML5 引入了 <figure> 和 <figcaption> 元素，用于组织图片和其相关的标题描述，使屏幕阅读器更容易理解图片的内容和含义。
可访问性事件： HTML5 提供了一些可访问性事件，如 onblur、onfocus、oninput 等，用于跟踪用户交互和输入，帮助提供更好的用户反馈和辅助体验。
可访问性 API： HTML5 引入了一些 JavaScript API，如 aria-live 属性、aria-activedescendant 属性等，用于改进动态内容和交互式组件的可访问性。

这些无障碍性特性有助于开发者设计和开发更易于访问的网页内容，提供更好的用户体验。