【HTML】HTML5 新特性和结构语义化

HTML5 新特性

1. 语义化标签

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

2. 浏览器支持

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

3. 多媒体标签

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

1. <audio>：用于嵌入音频内容，可以通过 src 属性指定音频文件的 URL。可以使用 <source> 元素指定多个不同格式的音频文件，以便在不同浏览器上提供更好的兼容性。

   <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>
   

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

   <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>
   

3. <iframe>：虽然 <iframe> 不是专门用于多媒体内容的标签，但它可以用于嵌入包含多媒体的外部网页，如 YouTube 视频、Google 地图等。

   <iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315"></iframe>
   

4. <canvas>：虽然 <canvas> 通常用于绘制图形，但它也可以用于实现自定义的多媒体内容，如绘制动画、实时图像处理等。

   <canvas id="myCanvas" width="640" height="480"></canvas>
   

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

   <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 基本用法：

1. 创建 Canvas 元素： 在 HTML 中，通过 <canvas> 元素可以创建一个画布。Canvas 本身是一个无内容的元素，只需设置其 width 和 height 属性，指定画布的宽度和高度。

   <canvas id="myCanvas" width="400" height="200"></canvas>
   

2. 获取 Canvas 上下文： 通过 JavaScript，可以获取 <canvas> 元素的上下文对象（context），它是用于绘制图形的核心部分。使用 getContext() 方法来获取不同类型的上下文对象，常用的是 2D 上下文 context2D。

   const canvas = document.getElementById('myCanvas');
   const ctx = canvas.getContext('2d');
   

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

   // 绘制填充矩形
   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) 处绘制文本
   

4. 动画和帧率： 使用 Canvas 可以实现动画效果。可以使用 JavaScript 中的定时器（如 requestAnimationFrame() 或 setInterval()）来更新画布内容，从而创建动画效果。通过控制刷新频率（帧率），可以调整动画的流畅度。

   function drawAnimation() {
     // 清空画布
     ctx.clearRect(0, 0, canvas.width, canvas.height);
   
     // 绘制动画元素
     // ...
   
     // 更新下一帧
     requestAnimationFrame(drawAnimation);
   }
   
   // 启动动画
   drawAnimation();
   

5. 像素级控制： Canvas 允许对像素进行直接操作，从而实现更高级的绘图和图像处理。可以通过 getImageData() 获取画布上指定区域的像素数据，然后对像素数据进行处理。

   const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
   const data = imageData.data; // 获取像素数据
   // 处理像素数据
   // ...
   ctx.putImageData(imageData, 0, 0); // 将处理后的像素数据放回画布
   

6. 支持 WebGL： 除了 2D 上下文 context2D，Canvas 还支持 3D 绘图技术 WebGL。WebGL 使用类似 OpenGL ES 的 API，可以在 Canvas 上进行高性能的 3D 图形渲染。

   const gl = canvas.getContext('webgl');
   // 使用 WebGL 绘制 3D 图形
   // ...
   

5. 本地存储

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

localStorage：

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

sessionStorage：

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

使用场景：

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

注意事项：

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

示例代码：

// 使用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 的特点：

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

使用 Web Workers 的步骤：

1. 创建 Worker： 使用 new Worker() 构造函数来创建一个 Web Worker。需要指定一个 JavaScript 文件的 URL，该文件将在 Worker 线程中运行。

   // 主线程中创建 Web Worker
   const worker = new Worker('worker.js');
   

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

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

3. 发送消息： 在 Worker 中，可以使用 postMessage() 方法向主线程发送消息。

   // Worker 中向主线程发送消息
   self.postMessage('Hello from Worker!');
   

4. 终止 Worker： 在主线程中，可以使用 worker.terminate() 方法终止 Worker 的运行。

   // 主线程终止 Worker
   worker.terminate();
   

示例：

index.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:

// 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. 表单控件

calender、date、time、email、URL、search等

8. websocket

9. Geolocation

其他

移除的元素：

• 纯表现的元素：basefont,big, center, font,s, strike,tt,u
• 对可用性产生负面影响的元素: frame, frameset, noframes

支持HTML5新标签： IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。

如何区分HTML5：

• DOCTYPE 声明 / 新增的结构元素 / 功能元素

HTML5 结构语义化

简单来说，我们可以理解为：用正确的标签做正确的事情。

段落用p标签，标题用 h系列标签，边栏用 aside标签，主要内容用 main标签。

对开发者：

• 便于团队的开发和维护。
• 在没有加载 CSS 的情况下也能呈现较好的内容结构与代码结构，易于阅读。

对浏览器：

• 有利于 SEO，搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重。
• 无障碍属性，方便其他设备的解析（如屏幕阅读器、盲人阅读器等），利于无障碍阅读，提高可访问性。

对用户：

• 提升用户体验。例如 title，alt 可以用于解释名称或者解释图片信息，以及 label 标签的灵活使用。