HTML基础 - HTML5

目录

一. 简介

二. 新增元素

三. 拖放 地理定位 

A、HTML5 拖放（Drag and Drop）

B.HTML5 地理定位（Geolocation）

四. input

五. web存储 webSQL

六. 应用程序缓存 web workers

七. web socket

---

可以先看上篇HTML基础再来看HTML5:http://t.csdnimg.cn/6gbIS

一. 简介

1. 语义化标签
   • HTML5 引入了一系列新的语义化标签，如<header>（页面头部）、<nav>（导航栏）、<section>（内容区块）、<article>（独立的内容，如一篇文章）、<aside>（侧边栏）和<footer>（页面底部）等。这些标签使网页的结构更加清晰，便于开发者组织内容，也有利于搜索引擎优化和辅助技术（如屏幕阅读器）更好地理解网页内容。
2. 多媒体支持
   • HTML5 原生支持音频和视频播放，无需依赖第三方插件（如 Flash）。使用<audio>和<video>标签可以轻松地在网页中嵌入音频和视频文件。
3. 图形和绘图
   • HTML5 的<canvas>元素提供了通过 JavaScript 绘制图形的能力。可以在<canvas>上绘制各种形状、图像、动画等。
4. 本地存储和离线应用
   • HTML5 提供了两种在客户端存储数据的方法：localStorage和sessionStorage。localStorage用于长期存储数据，即使浏览器关闭后数据仍然存在；sessionStorage存储的数据在会话结束（浏览器关闭）时会被清除。
5. HTML5 还支持离线应用，通过manifest文件可以指定网页所需的资源，当用户离线时，浏览器仍然可以使用缓存的资源来显示网页。

优势

1. 跨平台性和兼容性
   • HTML5 编写的网页可以在不同的操作系统（如 Windows、Mac、Linux）、设备（如电脑、手机、平板）和浏览器上运行，具有很强的跨平台性。主流浏览器都在不断完善对 HTML5 的支持，使得开发者可以更广泛地覆盖用户群体。
2. 更好的用户体验
   • 多媒体支持、流畅的图形绘制以及增强的表单功能等都为用户提供了更丰富、更便捷的交互体验。例如，用户可以直接在网页上观看视频、播放音频，无需安装额外的插件，而且网页加载速度更快。
3. 开发效率
   • 语义化标签使代码结构更清晰，便于开发和维护。新的表单特性减少了开发者编写验证代码的工作量。同时，HTML5 的一些特性（如本地存储）可以减少与服务器的交互，提高应用的性能。
4. 适应移动互联网发展
   • 随着移动设备的广泛使用，HTML5 对于移动应用开发也具有重要意义。它可以开发出适用于移动设备的响应式网页应用，提供与原生应用类似的功能和体验，同时具有更低的开发成本和更方便的更新方式。

总之，HTML5 带来了许多新的功能和改进，使网页开发更加丰富、高效和便捷，它已经成为现代网页开发的基础和核心技术之一。

二. 新增元素

一、语义化结构元素

1. <header>
   • 用法：用于定义文档或页面的头部区域。它可以包含网站的标志、导航链接、搜索框等内容。通常位于页面的顶部，但也可以在页面的其他部分或<section>、<article>内部使用，表示该部分的头部。
   • 示例：

1. <nav>
   • 用法：专门用于定义导航链接的容器。它可以包含一组链接，用于在网站的不同页面或部分之间导航。
   • 示例：

   <nav>
       <ul>
           <li><a href="#">首页</a></li>
           <li><a href="#">产品</a></li>
           <li><a href="#">服务</a></li>
           <li><a href="#">联系我们</a></li>
       </ul>
   </nav>

1. <section>
   • 用法：用于对页面内容进行逻辑分区。它表示文档中的一个通用部分或章节，可以包含标题、段落、图像等内容。一个页面可以有多个<section>。
   • 示例：

   <section>
       <h2>产品介绍</h2>
       <p>我们的产品具有以下特点...</p>
       <img src="product.jpg" alt="产品图片">
   </section>

1. <article>
   • 用法：表示一个独立的、完整的内容块，例如一篇博客文章、一则新闻报道、一个论坛帖子等。它可以独立于页面的其他部分进行分发或重用。
   • 示例：
   • 

   <article>
       <h1>标题：最新科技趋势</h1>
       <p>文章内容...</p>
       <footer>
           <p>作者：XXX  发布日期：XXXX年XX月XX日</p>
       </footer>
   </article>

1. <aside>
   • 用法：通常用作页面的侧边栏，包含与页面主要内容相关但又相对独立的内容，如广告、相关链接、引用、术语表等。
   • 示例：

   <aside>
       <h3>相关文章</h3>
       <ul>
           <li><a href="#">文章 1</a></li>
           <li><a href="#">文章 2</a></li>
           <li><a href="#">文章 3</a></li>
       </ul>
   </aside>

1. <footer>
   • 用法：定义文档或页面的底部区域。它通常包含版权信息、联系信息、相关链接等内容。可以在页面的底部，也可以在<section>或<article>内部表示该部分的底部。
   • 示例：

   <footer>
       <p>版权所有 © 2024 [公司名称]</p>
       <p><a href="#">联系我们</a></p>
   </footer>

二、多媒体元素

1. <audio>
   • 用法：用于在网页中嵌入音频内容。可以通过<source>标签指定音频文件的来源和类型。支持多种音频格式，如 MP3、WAV 等。
   • 示例：

   <audio controls>
       <source src="audio.mp3" type="audio/mpeg">
       <source src="audio.ogg" type="audio/ogg">
       你的浏览器不支持 HTML5 音频播放。
   </audio>

其中controls属性用于显示播放控件。

1. <video>
   • 用法：用于在网页中嵌入视频内容。与<audio>类似，可以通过<source>标签指定视频文件的来源和类型。支持的视频格式有 MP4、WebM 等。
   • 示例：

   <video width="640" height="360" controls>
       <source src="video.mp4" type="video/mp4">
       <source src="video.webm" type="video/webm">
       你的浏览器不支持 HTML5 视频播放。
   </video>

三、表单相关元素

1. <datalist>
   • 用法：为<input>元素提供一个预定义的选项列表。当用户在<input>中输入时，会显示下拉列表供用户选择。
   • 示例：

   <input list="colors" />
   <datalist id="colors">
       <option value="红色">
       <option value="蓝色">
       <option value="绿色">
       <option value="黄色">
   </datalist>

1. <output>
   • 用法：用于显示计算结果或脚本的输出。通常与表单元素的onchange等事件结合使用。
   • 示例：

   <form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
       <input type="number" id="a" value="0"> +
       <input type="number" id="b" value="0"> =
       <output name="result" for="a b"></output>
   </form>

1. <keygen>（已废弃）
   • 用法：曾经用于生成密钥对，用于表单的加密提交。但由于安全性和兼容性等问题，在现代浏览器中逐渐被弃用，取而代之的是更安全的加密方法。

四、图形相关元素

1. <canvas>
   • 用法：提供了通过 JavaScript 绘制图形的能力。可以在<canvas>上绘制各种形状、图像、动画等。
   • 示例：

   <canvas id="myCanvas" width="200" height="200"></canvas>
   <script>
       var canvas = document.getElementById('myCanvas');
       var ctx = canvas.getContext('2d');
       ctx.fillStyle = 'blue';
       ctx.fillRect(10, 10, 100, 100);
   </script>

1. <svg>
   • 用法：用于绘制可缩放矢量图形。它使用 XML 格式描述二维图形，可以创建高质量的矢量图形，并且可以无限缩放而不失真。
   • 示例：

   <svg width="100" height="100">
       <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   </svg>

这些新增元素使得 HTML5 在网页结构、内容展示和交互等方面有了更大的灵活性和功能，有助于创建更丰富、更语义化和更高效的网页。

三. 拖放 地理定位 

A、HTML5 拖放（Drag and Drop）

1. 基本概念

   • 拖放是一种直观的用户交互方式，允许用户通过鼠标或触摸操作将一个元素从一个位置拖动到另一个位置，或者将一个元素拖动到另一个元素上以触发某些操作。在 HTML5 中，引入了原生的拖放功能，使得实现这种交互更加容易。

2. 实现拖放的步骤

   • 设置可拖动元素
     • 首先，需要将一个 HTML 元素设置为可拖动。可以通过在元素上设置draggable属性为true来实现。例如：

     <div draggable="true">可拖动的元素</div>

• 处理拖动事件
  • 然后，需要处理一系列与拖放相关的事件来实现完整的拖放功能。
  • dragstart事件：当用户开始拖动元素时触发。在这个事件处理程序中，可以设置要传递的数据，例如：

     document.querySelector('div[draggable="true"]').addEventListener('dragstart', function(event) {
         event.dataTransfer.setData('text/plain', '这是要传递的数据');
     });

• drag事件：在元素被拖动过程中持续触发，可以用于实时更新一些状态等操作。

• dragend事件：当拖动结束时触发，无论拖动是否成功放置到目标位置。

• 设置放置目标

  • 定义一个目标元素，它可以接收被拖动的元素。例如：

     <div id="dropTarget">放置目标区域</div>

• 为目标元素添加相应的事件处理程序来处理放置操作。
• dragover事件：当被拖动元素在目标元素上方移动时触发。需要在这个事件处理程序中阻止默认行为，否则浏览器不会允许放置操作。例如：

     document.getElementById('dropTarget').addEventListener('dragover', function(event) {
         event.preventDefault();
     });

• drop事件：当被拖动元素被放置在目标元素上时触发。在这个事件处理程序中，可以获取传递的数据并进行相应的操作。例如：

     document.getElementById('dropTarget').addEventListener('drop', function(event) {
         event.preventDefault();
         var data = event.dataTransfer.getData('text/plain');
         console.log('接收到的数据：' + data);
     });

1. 应用场景
   • 拖放文件上传：用户可以将本地文件直接拖放到网页的特定区域进行上传，无需通过传统的文件选择对话框。
   • 页面内元素的重新排列：例如在一个任务管理应用中，用户可以通过拖放任务项来改变任务的顺序或分类。
   • 拖放式的游戏操作：在一些网页游戏中，玩家可以通过拖放操作来移动游戏中的对象等。

<!DOCTYPE html>


<title>测试</title>
<html>
<body>

<div draggable="true">
    <b>
        拖动
    </b>
</div>

<div id="dropTarget">放置目标区域</div>

</body>

<script>
    document.querySelector('div[draggable="true"]').addEventListener('dragstart', function(event) {
        event.dataTransfer.setData('text/plain', '这是要传递的数据');
    });
    document.getElementById('dropTarget').addEventListener('dragover', function(event) {
        event.preventDefault();
    });
    document.getElementById('dropTarget').addEventListener('drop', function(event) {
        event.preventDefault();
        var data = event.dataTransfer.getData('text/plain');
        console.log('接收到的数据：' + data);
    });


</script>

</html>

B.HTML5 地理定位（Geolocation）

1. 基本概念

   • HTML5 的地理定位功能允许网页获取用户设备的地理位置信息（经纬度等）。这可以用于提供基于位置的服务，如地图应用、附近商家查找、天气定位等。

2. 获取地理位置信息的方法

   • 大多数现代浏览器都支持地理定位 API。可以通过 JavaScript 来调用这个 API 获取用户的位置信息。
   • 基本的代码示例如下：

   if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(function(position) {
           var latitude = position.coords.latitude;
           var longitude = position.coords.longitude;
           console.log('你的位置：纬度 ' + latitude + ', 经度 ' + longitude);
       }, function(error) {
           console.error('获取位置信息出错：' + error.message);
       });
   } else {
       console.error('你的浏览器不支持地理定位。');
   }

• 在这个例子中，navigator.geolocation.getCurrentPosition方法用于获取当前位置。它接受两个回调函数作为参数，第一个回调函数在成功获取位置信息时被调用，第二个回调函数在获取位置信息出错时被调用。

1. 注意事项和隐私问题

   • 浏览器通常会在访问网页时询问用户是否允许共享位置信息，以保护用户的隐私。
   • 网页开发者应该明确告知用户获取位置信息的目的，并确保合理使用这些信息，遵循相关的隐私政策和法规。

四. input

一、新的<input>类型

1. email类型
   • 用途：用于输入电子邮件地址。浏览器会对输入内容进行一定的验证，例如检查是否包含@符号等。
   • 示例：

   <input type="email" name="userEmail" placeholder="请输入电子邮件地址">

1. url类型
   • 用途：用于输入网址。浏览器会验证输入的格式是否符合网址的规范。
   • 示例：

   <input type="url" name="userWebsite" placeholder="请输入网址">

1. number类型
   • 用途：用于输入数字。可以通过属性进一步限制输入的范围等。
   • 示例：

   <input type="number" name="userAge" min="0" max="120" step="1" placeholder="请输入年龄">

这里设置了年龄的范围是 0 到 120 岁，每次增减的步长为 1。

1. date类型
   • 用途：用于选择日期。不同浏览器会显示不同的日期选择界面。
   • 示例：

   <input type="date" name="userBirthday">

1. time类型
   • 用途：用于选择时间。
   • 示例：

   <input type="time" name="userTime">

1. color类型
   • 用途：用于选择颜色。会弹出一个颜色选择器。
   • 示例：

   <input type="color" name="userColor">

1. search类型
   • 用途：用于搜索输入框，外观可能因浏览器而异，有些浏览器会对其进行特殊样式处理。
   • 示例：

   <input type="search" name="userSearch">

二、其他属性和功能增强

1. placeholder属性
   • 用途：在输入框为空时显示提示文本，提示用户应该输入的内容。
   • 示例：

   <input type="text" name="username" placeholder="请输入用户名">

1. autofocus属性
   • 用途：使页面加载时自动聚焦到指定的输入框，方便用户直接开始输入。
   • 示例：

   <input type="text" name="firstInput" autofocus>

1. required属性
   • 用途：标记输入框为必填项。如果用户没有在该输入框中输入内容就提交表单，浏览器会显示错误提示。
   • 示例：

   <input type="text" name="requiredField" required>

1. pattern属性
   • 用途：通过正则表达式来进一步验证输入内容的格式。
   • 示例：

   <input type="text" name="phoneNumber" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="格式：XXX-XXX-XXXX">

这里要求输入的电话号码格式为 XXX-XXX-XXXX。

三、实例

下面是一个包含多种 HTML5 <input>类型和属性的示例表单：

<!DOCTYPE html>
<html>

<body>
  <form>
    <label for="emailInput">电子邮件：</label>
    <input type="email" id="emailInput" name="userEmail" placeholder="请输入电子邮件地址" required><br>

    <label for="urlInput">网址：</label>
    <input type="url" id="urlInput" name="userWebsite" placeholder="请输入网址" required><br>

    <label for="numberInput">年龄：</label>
    <input type="number" id="numberInput" name="userAge" min="0" max="120" step="1" placeholder="请输入年龄" required><br>

    <label for="dateInput">出生日期：</label>
    <input type="date" id="dateInput" name="userBirthday" required><br>

    <label for="timeInput">时间：</label>
    <input type="time" id="timeInput" name="userTime" required><br>

    <label for="colorInput">选择颜色：</label>
    <input type="color" id="colorInput" name="userColor"><br>

    <label for="searchInput">搜索：</label>
    <input type="search" id="searchInput" name="userSearch"><br>

    <label for="textInput">文本输入（自动聚焦）：</label>
    <input type="text" id="textInput" name="textField" autofocus><br>

    <input type="submit" value="提交">
  </form>
</body>

</html>

在这个示例中，用户需要按照要求在各个输入框中输入正确格式的内容，当点击“提交”按钮时，如果有必填项未填写或格式不正确，浏览器会显示相应的错误提示。

这些 HTML5 <input>的新特性和功能使得表单的输入更加规范和方便，同时减少了开发者在客户端进行数据验证的工作量。

五. web存储 webSQL

一、Web 存储（Web Storage）

1. 概述

   • Web 存储是 HTML5 引入的一种在客户端存储数据的机制，用于在浏览器中存储少量的数据，相比传统的使用 Cookie 存储数据有一些优势。

2. 两种主要类型

   • ** localStorage**：
     • 用于长期存储数据，没有过期时间，数据会一直保存在用户的设备上，除非用户手动清除浏览器数据。它适用于存储用户的偏好设置、离线应用的数据等。
     • 例如：

     // 存储数据
     localStorage.setItem('username', 'John');
     // 读取数据
     var username = localStorage.getItem('username');
     console.log(username);
     // 删除数据
     localStorage.removeItem('username');

• ** sessionStorage**：
  • 存储的数据只在当前会话期间有效，当浏览器关闭时，数据会被清除。它适用于存储临时的、与当前会话相关的数据，比如在一个网页表单填写过程中的临时数据。
  • 例如：

     // 存储数据到 sessionStorage
     sessionStorage.setItem('pageVisitCount', '1');
     // 读取数据
     var visitCount = sessionStorage.getItem('pageVisitCount');
     console.log(visitCount);
     // 增加访问次数（假设页面刷新等操作）
     var currentCount = parseInt(visitCount);
     currentCount++;
     sessionStorage.setItem('pageVisitCount', currentCount.toString());

1. 特点和优势
   • 相比于 Cookie，Web 存储可以存储更大容量的数据（一般每个域名可存储 5MB 左右的数据，具体取决于浏览器）。
   • 它提供了更简单的 API 来进行数据的存储和读取操作，并且数据不会随着每次 HTTP 请求自动发送到服务器，减少了不必要的网络流量。

二、Web SQL Database

1. 概述

   • Web SQL Database 是一种在浏览器中使用 SQL 来操作关系型数据库的技术。然而，它已经不再是 W3C 的推荐标准，并且现代浏览器对其支持有限且逐渐减少使用。

2. 基本用法（以使用 SQLite 为例）

   • 首先，需要打开数据库：

   var db = openDatabase('mydb', '1.0', 'My Database', 2 * 1024 * 1024);

这里创建了一个名为“mydb”的数据库，版本号为“1.0”，描述为“My Database”，并分配了 2MB 的存储空间。

• 然后可以创建表并执行 SQL 操作：

   db.transaction(function (tx) {
       tx.executeSql('CREATE TABLE IF NOT EXISTS users (id unique, name)');
       tx.executeSql('INSERT INTO users (id, name) VALUES (1, "John")');
   });

这段代码创建了一个名为“users”的表（如果不存在的话），并插入了一条记录。

• 读取数据：

   db.transaction(function (tx) {
       tx.executeSql('SELECT * FROM users', [], function (tx, results) {
           var len = results.rows.length, i;
           for (i = 0; i < len; i++) {
               console.log(results.rows.item(i).name);
           }
       });
   });

这里查询了“users”表中的所有记录，并在控制台打印出用户的姓名。

1. 逐渐被替代的原因
   • Web SQL Database 虽然提供了关系型数据库的功能，但它基于特定的 SQL 实现（如 SQLite），并且在不同浏览器中的实现存在一些差异，导致兼容性问题。
   • 现在更推荐使用 IndexedDB 等更现代、标准且功能强大的客户端数据库存储技术来替代 Web SQL Database。

总的来说，Web 存储（尤其是 localStorage 和 sessionStorage）在现代 Web 开发中被广泛用于简单的数据存储，而 Web SQL Database 由于其局限性和逐渐失去标准支持，使用得越来越少，开发者更多地转向其他更合适的数据库存储技术。

六. 应用程序缓存 web workers

一、HTML5 应用程序缓存（Application Cache）

1. 概述

   • 应用程序缓存允许 Web 应用在离线状态下仍然能够运行部分或全部功能。它通过将应用所需的资源（如 HTML、CSS、JavaScript 文件、图像等）列在一个缓存清单文件中，浏览器会根据这个清单在首次访问时下载并缓存这些资源。当用户再次访问应用或者在离线状态下访问时，浏览器可以直接从缓存中获取这些资源，而无需再次从网络下载。

2. 缓存清单文件（manifest）的创建和使用

   • 首先，需要在 HTML 文件中通过<html>标签的manifest属性指定缓存清单文件的路径。例如：

   <html manifest="myapp.appcache">

• 然后创建名为“myapp.appcache”的缓存清单文件，其内容格式如下：

   CACHE MANIFEST
   # 版本号等注释（可选）
   CACHE:
   index.html
   styles.css
   scripts.js
   images/logo.jpg

   NETWORK:
   api.php

   FALLBACK:
   offline.html /offline

• 在CACHE:部分列出的文件是需要被缓存的资源。
• NETWORK:部分列出的是需要通过网络连接访问的资源（即不缓存的资源）。
• FALLBACK:部分指定当无法访问某个资源时的备用资源。例如，当无法访问网络获取/offline路径下的资源时，使用offline.html作为备用页面。

1. 优点和应用场景
   • 优点：
     • 提升用户体验，即使在网络连接不佳或没有网络的情况下，用户仍然可以访问应用的部分或全部功能。
     • 减少网络请求，提高应用的加载速度，尤其是对于重复访问的用户。
   • 应用场景：
     • 离线阅读类应用，用户可以在没有网络的情况下继续阅读之前缓存的文章内容。
     • 移动应用，确保在移动网络不稳定的情况下应用仍然能够正常运行一些基本功能。

二、Web Workers

1. 概述

   • Web Workers 是 HTML5 引入的一种在后台运行脚本的技术，它允许在网页中执行多线程操作。在传统的 JavaScript 中，代码是单线程执行的，如果有一个耗时的计算任务，会导致页面卡顿，用户界面无响应。Web Workers 可以将这些耗时的任务放在后台线程中执行，从而不影响页面的正常交互。

2. 创建和使用 Web Workers

   • 首先，创建一个 Worker 脚本文件，例如“worker.js”，内容如下：

   self.addEventListener('message', function(e) {
       var result = e.data * 2;
       self.postMessage(result);
   });

这个 Worker 脚本接收一个数据，将其乘以 2 后再发送回主线程。

• 然后在网页的主脚本中使用 Worker：

   var myWorker = new Worker('worker.js');

   myWorker.addEventListener('message', function(e) {
       console.log('Worker 计算结果：' + e.data);
   });

   myWorker.postMessage(5); // 向 Worker 发送数据 5

这里创建了一个 Worker 实例，并在接收到 Worker 发送回的消息时在控制台打印结果。

1. 特点和优势
   • 特点：
     • Worker 线程与主线程之间通过消息传递进行通信。主线程可以向 Worker 发送消息，Worker 处理完任务后也可以向主线程发送消息。
     • Worker 有自己独立的执行环境，不能直接访问网页的 DOM（文档对象模型），这保证了 DOM 的安全性和稳定性。
   • 优势：
     • 提高网页的响应性能，对于复杂的计算任务或长时间运行的操作，不会阻塞页面的渲染和用户交互。
     • 可以将多个耗时任务分配到不同的 Worker 中并行执行，进一步提高效率。

总的来说，HTML5 的应用程序缓存和 Web Workers 为 Web 应用提供了更好的离线支持和性能优化，使得 Web 应用能够更加高效、稳定地运行，并且提供更好的用户体验。

七. HTML5 WebSocket

一、概述

WebSocket 是 HTML5 中一种新的通信协议，它实现了浏览器与服务器之间的全双工通信。与传统的 HTTP 通信方式相比，WebSocket 能够在建立连接后，实时地双向传输数据，而不需要像 HTTP 那样频繁地进行请求和响应的循环。这使得它在实时应用（如在线聊天、实时游戏状态更新、金融市场数据实时推送等）中具有很大的优势。

二、工作原理

1. 建立连接

   • 首先，客户端（通常是浏览器）通过向服务器发送一个特殊的 HTTP 请求来尝试建立 WebSocket 连接。这个请求的头部包含一些特定的字段，如Upgrade: websocket和Connection: Upgrade等，表明它希望升级到 WebSocket 协议。
   • 服务器如果支持 WebSocket，会返回一个特殊的 HTTP 响应，状态码为 101（Switching Protocols），表示同意将连接升级为 WebSocket 连接。一旦连接建立成功，后续的数据传输就可以在这个持久连接上进行，而不需要再重新建立连接。

2. 数据传输

   • WebSocket 连接建立后，数据可以在客户端和服务器之间双向实时传输。数据以帧的形式发送和接收，它支持两种数据类型：文本和二进制。
   • 例如，在一个在线聊天应用中，当一个用户发送一条消息时，客户端将消息以文本帧的形式通过 WebSocket 连接发送到服务器，服务器接收到消息后可以立即将其转发给其他在线的客户端，实现实时的消息传递。

3. 关闭连接

   • 客户端或服务器可以随时通过发送一个关闭帧来关闭 WebSocket 连接。在关闭连接之前，通常会进行一些清理操作，如释放资源等。关闭连接的过程也是遵循一定的规范，双方会交换关闭帧并确认连接的关闭。

三、代码示例（客户端）

<!DOCTYPE html>
<html>

<body>
  <script>
    // 创建 WebSocket 连接
    var socket = new WebSocket("ws://example.com/socket");

    // 连接打开时的处理
    socket.onopen = function (event) {
      console.log("WebSocket 连接已打开");
      socket.send("你好，服务器！");
    };

    // 接收消息的处理
    socket.onmessage = function (event) {
      console.log("接收到消息：" + event.data);
    };

    // 连接关闭时的处理
    socket.onclose = function (event) {
      console.log("WebSocket 连接已关闭");
    };

    // 连接出错时的处理
    socket.onerror = function (error) {
      console.error("WebSocket 出错：" + error);
    };
  </script>
</body>

</html>

在这个示例中，首先创建了一个到ws://example.com/socket的 WebSocket 连接。然后分别定义了连接打开、接收消息、连接关闭和连接出错时的处理函数。当连接打开时，客户端向服务器发送了一条消息“你好，服务器！”。当接收到服务器发送的消息时，会在控制台打印出来。

四、优势

1. 实时性
   • 能够实时地推送和接收数据，无需等待客户端发起请求，大大降低了数据传输的延迟，对于需要实时更新的应用非常关键。
2. 高效性
   • 与传统的 HTTP 轮询或长轮询相比，WebSocket 减少了不必要的网络开销和服务器资源消耗。因为它建立的是持久连接，不需要频繁地建立和关闭连接。
3. 双向通信
   • 支持客户端和服务器之间的双向通信，使得服务器可以主动向客户端推送数据，而不仅仅是响应客户端的请求。这为实现更加丰富的实时交互应用提供了基础。

五、应用场景

1. 实时聊天应用
   • 实现用户之间实时的文字、图片、语音等消息的传递，用户发送的消息可以立即被其他在线用户接收，提供类似即时通讯软件的体验。
2. 在线游戏
   • 实时更新游戏状态，如玩家的位置、得分等信息，让所有玩家能够同步看到游戏的变化，增强游戏的互动性和竞技性。
3. 金融交易平台
   • 实时推送股票价格、汇率等金融数据的变化，让投资者能够及时做出决策。
4. 物联网（IoT）应用
   • 传感器数据的实时传输和监控，例如智能家居设备将实时的温度、湿度等数据发送到服务器，服务器可以根据这些数据进行相应的控制和反馈。

总之，HTML5 WebSocket 为 Web 应用提供了一种高效、实时的通信方式，改变了传统 Web 应用基于请求-响应模式的通信局限，促进了更多实时交互应用的发展。