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. 应用缓存（Cache Manifest）

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

使用应用缓存的步骤：

  1. 创建 Cache Manifest 文件： 创建一个文本文件，以 .appcache 为扩展名，比如 myapp.appcache。该文件是一个清单，其中包含要缓存的资源列表。

  2. 定义 CACHE MANIFEST： 在 Cache Manifest 文件的第一行，使用 CACHE MANIFEST 来标识该文件是一个应用缓存文件。

  3. 指定资源： 在 Cache Manifest 文件中，使用 CACHE 区块来指定要缓存的资源列表。可以包含网页、CSS、JavaScript、图像等资源。

    CACHE MANIFEST
# Version 1.0CACHE:
index.html
style.css
script.js
logo.png

  4. 定义 FALLBACK（可选）： 在 Cache Manifest 文件中，使用 FALLBACK 区块来指定在离线状态下需要使用的备用页面。

    FALLBACK:
/ offline.html

  5. 定义 NETWORK（可选）： 在 Cache Manifest 文件中，使用 NETWORK 区块来指定不需要缓存的资源列表，它们将直接从网络加载。

    NETWORK:
*

  6. 更新缓存： 在页面的 <html> 标签中，使用 manifest 属性来指定 Cache Manifest 文件的 URL。

    <!DOCTYPE html>
<html manifest="myapp.appcache">
...
</html>

工作原理：

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

注意事项：

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

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

8. 无障碍性

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

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/12596.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【swift 代码规范】

【swift 代码规范】

List item 代码架构分层 一、服务层 1.数据 2.网络请求 3.缓存处理 二、业务层 三、表现层 代码分块 // MARK: - Member Variables// MARK: - Sturct & Lazy Properties// MARK: - Class LifeCycle// MARK: - Class PrivateMethod// MARK: - Class PublicMethod// …
阅读更多...
Angular中组件设计需要注意什么？

Angular中组件设计需要注意什么？

在 Angular 中设计组件时&#xff0c;有几个重要的方面需要注意。以下是一些建议&#xff1a; 1、单一职责原则&#xff1a;确保每个组件只负责一个明确定义的任务。这有助于保持组件简单、可维护&#xff0c;并且易于重用。 2、组件通信&#xff1a;了解组件之间的通信方式。…
阅读更多...
Python（四十九）获取列表指定元素的索引

Python（四十九）获取列表指定元素的索引

❤️ 专栏简介&#xff1a;本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中&#xff0c;我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 &#xff1a;本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…
阅读更多...
vue2企业级项目（七）

vue2企业级项目（七）

vue2企业级项目&#xff08;七&#xff09; 组件封装 src目录下创建components/index.js const components require.context("./modules", true, /index\.js$/);export default {install: (Vue) > {components.keys().forEach((key) > {let component compo…
阅读更多...
汇编调用C语言定义的全局变量

汇编调用C语言定义的全局变量

在threadx移植中&#xff0c;系统的systick通过了宏定义的方式定义&#xff0c;很难对接库函数的时钟频率&#xff0c;不太利于进行维护 所以在C文件中自己定义了一个systick_Div的变量&#xff0c;通过宏定义方式设定systick的时钟频率 在汇编下要加载这个systick分频系数 …
阅读更多...
UDS诊断协议

UDS诊断协议

UDS本质上是一系列服务的集合&#xff0c;包含6大类&#xff0c;共26种。每种服务都有独立的ID&#xff0c;即SID。 请求 SID(1Byte) 参数 SID(1Byte) Sub-function(1Byte) 参数 SID DID(2Bytes) 响应 肯定响应 SID0x40(1Byte) Sub-function(根据请求是否存在) 参数…
阅读更多...
Windows数据类型LPSTR学习

Windows数据类型LPSTR学习

Windows在C语言的基础之上又定义了一些Windows下的数据类型&#xff1b;下面学习一下LPSTR&#xff1b; LPSTR和LPWSTR是Win32和VC所使用的一种字符串数据类型。LPSTR被定义成是一个指向以NULL(‘\0’)结尾的32位ANSI字符数组指针&#xff0c;而LPWSTR是一个指向以NULL结尾的64…
阅读更多...
逻辑回归分析实战（根据鸢尾花的性质预测鸢尾花类别）

逻辑回归分析实战（根据鸢尾花的性质预测鸢尾花类别）

紧接着上过一个线性回归模型&#xff08;一元线性回归模型实战&#xff09; 一元线性回归模型和逻辑回归模型是统计学中常见的两种回归模型&#xff0c;它们有以下几点不同之处&#xff1a; 1. 目标变量类型&#xff1a;一元线性回归模型适用于连续型目标变量&#xff0c;即预测…
阅读更多...
2023年基准Kubernetes报告：6个K8s可靠性失误

2023年基准Kubernetes报告：6个K8s可靠性失误

云计算日益成为组织构建应用程序和服务的首选目的地。尽管一年来经济不确定性的头条新闻主要集中在通货膨胀增长和银行动荡方面&#xff0c;但大多数组织预计今年的云使用和支出将与计划的相同&#xff08;45%&#xff09;&#xff0c;或高于计划的&#xff08;45%&#xff09;…
阅读更多...
大数据Flink（五十三）：Flink流处理特性、发展历史以及Flink的优势

大数据Flink（五十三）：Flink流处理特性、发展历史以及Flink的优势

文章目录 Flink流处理特性、发展历史以及Flink的优势 一、Flink流处理特性 二、发展历史
阅读更多...
opencv-28 自适应阈值处理-cv2.adaptiveThreshold()

opencv-28 自适应阈值处理-cv2.adaptiveThreshold()

什么是自适应阈值处理? 对于色彩均衡的图像&#xff0c;直接使用一个阈值就能完成对图像的阈值化处理。但是&#xff0c;有时图像的色彩是不均衡的&#xff0c;此时如果只使用一个阈值&#xff0c;就无法得到清晰有效的阈值分割结果图像。 有一种改进的阈值处理技术&#xff…
阅读更多...
五、控制流（2）

五、控制流（2）

本章概要 returnbreak 和 continue臭名昭著的 gotoswitchswitch 字符串 return 在 Java 中有几个关键字代表无条件分支&#xff0c;这意味无需任何测试即可发生。这些关键字包括 return&#xff0c;break&#xff0c;continue 和跳转到带标签语句的方法&#xff0c;类似于其…
阅读更多...
不管如何吐槽，购买iPhone的用户依然义无反顾，苹果继续增长

不管如何吐槽，购买iPhone的用户依然义无反顾，苹果继续增长

市调机构IDC公布的二季度数据显示&#xff0c;苹果成为前五名之中除华为之外第二家取得增长的手机品牌&#xff0c;而其他国产手机品牌的出货量都在下滑&#xff0c;显示出国内的消费者仍然在热烈追捧iPhone。 二季度苹果在国内市场的手机出货量同比增长6%&#xff0c;虽然增速…
阅读更多...
Android Studio下载及安装和Gradle的配置

Android Studio下载及安装和Gradle的配置

文章目录 下载安装修改Sdk的位置创建项目修改Gradle的位置查看AS版本工具栏--View项工具栏--Build下的功能说明Build Variants视图说明下载模拟器&#xff08;avd&#xff09;/安卓虚拟设备屏幕熄灭功能关闭虚拟设备功能删除自己开发的应用软件将开发的应用运行到虚拟设备上。 …
阅读更多...
从分片传输到并行传输之大文件传输加速技术

从分片传输到并行传输之大文件传输加速技术

随着大文件的传输需求越来越多&#xff0c;传输过程中也会遇到很多困难&#xff0c;比如传输速度慢、文件安全性低等。为了克服这些困难&#xff0c;探讨各种大文件传输加速技术。其中&#xff0c;分片传输和并行传输是两种比较常见的技术&#xff0c;下面将对它们进行详细说明…
阅读更多...
Java版知识付费源码 Spring Cloud+Spring Boot+Mybatis+uniapp+前后端分离实现知识付费平台

Java版知识付费源码 Spring Cloud+Spring Boot+Mybatis+uniapp+前后端分离实现知识付费平台

提供职业教育、企业培训、知识付费系统搭建服务。系统功能包含&#xff1a;录播课、直播课、题库、营销、公司组织架构、员工入职培训等。 提供私有化部署&#xff0c;免费售后&#xff0c;专业技术指导&#xff0c;支持PC、APP、H5、小程序多终端同步&#xff0c;支持二次开发…
阅读更多...
【Opencv】视频跟踪算法KCF

【Opencv】视频跟踪算法KCF

目录 KCF算法简介opencv实现代码copencv实现代码python KCF算法简介 KCF&#xff08;Kernelized Correlation Filter&#xff09;是一种基于核相关滤波器的目标跟踪算法。它通过学习目标的外观特征和使用核相关滤波器进行目标定位。KCF属于传统算法的单目标跟踪器。下面是对KC…
阅读更多...
【Java】Java多线程编程基础

【Java】Java多线程编程基础

文章目录 1. 进程与线程1.1 进程与线程的基本认识1.1.1 进程&#xff08;Process&#xff09;1.1.2 线程&#xff08;Thread&#xff09; 1.2 为什么会有线程1.2.1 以看视频为例 2. 多线程实现2.1 Thread类实现多线程2.2 Runnable接口实现多线程2.3 Callable接口实现多线程2.3 …
阅读更多...
CTF线下赛AWD知识点【持续完善ing】

CTF线下赛AWD知识点【持续完善ing】

文章目录 CTF线下赛AWD知识点AWD规则前期准备SSH登录口令登录密钥登录 改密码SSH密码修改mysql密码修改 备份数据备份目录备份数据库 查找后门 自动提交flag防御思路基础查杀寻找最近20分钟修改过的文件寻找行数最短的文件关键字查杀查找命令执行函数 文件监控杀不死马0x01.杀进…
阅读更多...
Grafana - TDEngine搭建数据监测报警系统

Grafana - TDEngine搭建数据监测报警系统

TDengine 与开源数据可视化系统 Grafana 快速集成搭建数据监测报警系统 一、介绍二、前置条件三、Grafana 安装及配置3.1 下载3.2 安装3.2.1 windows安装 - 图形界面3.2.2 linux安装 - 安装脚本 四、Grafana的TDEngine配置及使用4.1 登录4.2 安装 Grafana Plugin 并配置数据源4…
阅读更多...
最新文章

Copyright @ 2022~2023