WebSocket 是 HTML5 中引入的一种全双工通信协议，允许在客户端和服务器之间进行实时双向通信。与传统的 HTTP 请求-响应模型不同，WebSocket 提供了一种持久连接，可以实时推送数据给客户端，同时客户端也可以向服务器发送数据。使用 WebSocket 的基本步骤如下：1. 建立连接： - 客户端通过创建一个 WebSocket 对象来与服务器建立连接。 const socket = new WebSocket('ws://example.com/socket');2. 处理连接事件： - 客户端可以监听 WebSocket 对象的不同事件，如 open、message、close、error。 // 连接成功时触发 socket.addEventListener('open', (event) => { console.log('WebSocket connection opened.'); }); // 接收到服务器发送的消息时触发 socket.addEventListener('message', (event) ...
Server-Sent Events (SSE) 是 HTML5 中一种用于在单向通信中从服务器向客户端发送实时事件的技术。SSE 提供了一种轻量级的、基于文本的协议，使得服务器可以推送实时信息给客户端，而客户端则可以通过事件监听来处理这些消息。使用 SSE 的基本步骤如下：1. 建立连接： - 客户端通过创建一个 EventSource 对象来与服务器建立 SSE 连接。 const eventSource = new EventSource('/sse-endpoint');2. 服务器推送事件： - 服务器通过发送带有 data 字段的消息来推送事件。 // 服务器端示例（Node.js） const http = require('http'); const server = http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', ...
Web Workers 是 HTML5 中引入的一项技术，允许在浏览器中创建后台线程，以在主线程之外执行脚本。这使得可以在独立的线程中执行一些耗时的任务，而不会影响主线程的性能，从而提高 Web 应用的响应性和性能。Web Workers 主要有两种类型：1. Dedicated Workers（专用 Web Workers）: - 这是最常见的类型，每个 Dedicated Worker 与创建它的脚本有独立的全局上下文。它们可以通过消息传递与主线程通信。 // 在主线程中创建 Dedicated Worker const worker = new Worker('worker.js'); // 在主线程中向 Worker 发送消息 worker.postMessage('Hello from main thread!'); // 在 Worker 中监听消息 self.addEventListener('message', function(event) { console.log('Message from main thread:', eve...
HTML5 Application Cache（应用程序缓存）是一种允许web应用在用户离线时仍能够运行的技术。它允许开发者指定哪些文件应该被缓存，以便在用户下次访问应用时可以在离线状态下访问这些文件。以下是应用程序缓存的基本工作原理和一些关键的标签和属性：1. 工作原理： - 开发者通过创建一个清单文件（通常命名为manifest.appcache）来指定需要缓存的文件。这个清单文件包含了应用程序的基本信息以及需要缓存的文件列表。浏览器在第一次加载应用时会下载这个清单文件，并缓存其中列出的文件。之后，当用户再次访问应用时，浏览器会检查清单文件是否有更新，如果有更新，将重新下载并缓存新的文件。2. HTML 标签和属性： - 在HTML文件的 <html> 标签中使用 manifest 属性引用清单文件。 <!DOCTYPE html> <html manifest="manifest.appcache"> <!-- 页面内容 --> </html>3. 清单文件示例（manifest....
Web SQL Database是HTML5中的一项规范，定义了一种在客户端浏览器中使用SQL语言进行数据库操作的机制。然而，需要注意的是，Web SQL Database规范在2010年被W3C放弃，并宣布不再维护。因此，尽管一些浏览器实现了Web SQL Database，但它不再被推荐使用。替代Web SQL Database的主要技术是IndexedDB，这是一个基于JavaScript的客户端存储API。IndexedDB提供了一个更强大和灵活的本地存储解决方案，并得到了更广泛的支持。如果你需要在客户端存储数据，建议使用IndexedDB或其他现代的客户端存储方案，而不是Web SQL Database。以下是一个简单的IndexedDB示例：// 打开或创建数据库var request = indexedDB.open('myDatabase', 1);// 处理数据库版本变化request.onupgradeneeded = function(event) { var db = event.target.result; // 创建一个对象存储空间 var...
HTML5引入了两种Web存储机制，用于在客户端（浏览器）中存储数据。这两种机制分别是：1. localStorage： - localStorage 允许在浏览器中存储键/值对，并在同一域名下的页面之间进行共享。存储的数据在浏览器关闭后仍然保留，直到用户手动清除浏览器缓存或通过JavaScript代码删除。 // 存储数据 localStorage.setItem('username', 'John'); // 获取数据 var username = localStorage.getItem('username'); // 删除数据 localStorage.removeItem('username'); // 清空所有数据 localStorage.clear();2. sessionStorage： - sessionStorage 与 localStorage 类似，但是存储的数据在用户关闭浏览器标签或窗口后会被清除。因此，sessionStorage 用于临时会话数据的存储。 // 存储数据 sessionStorage.set...
HTML5 引入了许多语义元素，这些元素有助于更准确地描述文档结构，提高文档的可读性、可访问性和搜索引擎优化。以下是一些常见的 HTML5 语义元素：1. <article> 元素： - 表示页面中独立的、完整的内容单元，比如一篇博客文章或新闻报道。 <article> <!-- 文章内容 --> </article>2. <section> 元素： - 表示文档中的一个区域或章节，通常包含一个标题。 <section> <h2>章节标题</h2> <!-- 章节内容 --> </section>3. <nav> 元素： - 表示导航链接的容器，用于包含页面导航链接或菜单。 <nav> <!-- 导航链接或菜单 --> </nav>4. <header> 元素： - 表示页面或区块的页眉，通常包含标题、标志或导航链接。 <hea...
HTML5引入了一些新的表单属性，以提供更多控制和功能。以下是一些常见的HTML5表单属性：1. placeholder 属性： - 提供在输入字段中显示灰色占位符文本，以提示用户输入的内容。 <input type="text" placeholder="请输入用户名" />2. required 属性： - 指定输入字段为必填项。 <input type="text" required />3. pattern 属性： - 使用正则表达式定义输入字段的合法输入模式。 <input type="text" pattern="[0-9]{3}" />4. autofocus 属性： - 页面加载时自动将焦点设置到指定的输入字段。 <input type="text" autofocus />5. autocomplete 属性： - 控制浏览器是否应该为输入字段提供自动完成功能。 <input type="text" autocomplete="off" />6. min 和 max 属...
HTML5引入了一些新的表单元素和属性，以增强表单的功能和用户体验。以下是一些常见的HTML5表单元素：1. <datalist> 元素： - 用于定义一个选项列表，供用户从中选择。 <input list="browsers" name="browser" /> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> <option value="Edge"> <option value="Opera"> </datalist>2. <output> 元素： - 用于显示计算结果或用户操作的输出。 <form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> <input...
HTML5引入了许多新的输入类型，以提供更多用户友好的输入方式。以下是一些常见的HTML5输入类型：1. 文本输入（Text）: <input type="text" name="username" />2. 密码输入（Password）: <input type="password" name="password" />3. 数字输入（Number）: <input type="number" name="quantity" />4. 电子邮件输入（Email）: <input type="email" name="email" />5. URL输入（URL）: <input type="url" name="website" />6. 日期输入（Date）: <input type="date" name="birthdate" />7. 时间输入（Time）: <input type="time" name="meeting-time" />8. 日期和时间输入（Dat...
HTML5 提供了 <audio> 元素，用于在网页中嵌入音频。这使得在网页上播放音频变得更加简单和标准化。以下是一个基本的 HTML5 音频示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5 Audio Example</title></head><body> <h1>HTML5 Audio Example</h1> <audio controls> <source src="example.mp3" type="audio/mp3"> Your browser does not support the audio tag. </audio>&...
HTML5 提供了 <video> 元素，用于在网页中嵌入视频。这使得在网页上播放视频变得更加简单和标准化。以下是一个基本的 HTML5 视频示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5 Video Example</title></head><body> <h1>HTML5 Video Example</h1> <video width="640" height="360" controls> <source src="example.mp4" type="video/mp4"> Your browser does not support the vi...
HTML5 地理定位 API 允许 web 应用获取用户设备的地理位置信息。这一功能对于需要基于用户位置提供定制化服务的应用程序非常有用，例如地图服务、附近的商家搜索等。以下是一个简单的 HTML5 地理定位的示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5 Geolocation Example</title></head><body> <h1>HTML5 Geolocation Example</h1> <p id="location">Waiting for location...</p> <script> // 检查浏览器是否支持地理定位 if (...
HTML5 提供了拖放 API，使开发者能够实现在网页中拖拽和放置元素的交互。通过拖放 API，你可以实现元素的拖动、释放和在拖放过程中的其他事件处理。以下是一个简单的 HTML5 拖放的示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5 Drag and Drop Example</title> <style> #dragElement { width: 100px; height: 100px; background-color: #3498db; color: #fff; text-align: center; line-height: 100px; cursor...
MathML（数学标记语言）是一种用于在网页上表示数学公式和符号的标记语言。它被设计为在 HTML 和 XML 文档中嵌入数学内容。虽然 MathML 并不是 HTML5 的一部分，但可以与 HTML5 一起使用。以下是一个简单的 HTML5 中使用 MathML 的示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5 MathML Example</title></head><body> <h1>MathML Example</h1> <math xmlns="http://www.w3.org/1998/Math/MathML"> <msup> <mi>...
在 HTML5 中，你可以使用内联 SVG（可缩放矢量图形）来在 HTML 文档中嵌入矢量图形。SVG 是一种基于 XML 的图形标记语言，允许你创建矢量图形，包括图表、图标和其他图形元素。以下是一个简单的内联 SVG 的示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Inline SVG Example</title></head><body> <h1>Inline SVG Example</h1> <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="40"...
HTML5 中的 <canvas> 元素是一个用于绘制图形的区域，它提供了通过 JavaScript 脚本动态绘制图形的能力。使用 <canvas>，你可以创建图表、图形、动画等，使网页具有更强的交互性。以下是使用 <canvas> 的基本示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5 Canvas Example</title></head><body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #000;"></canvas> <script> /...
最新文章