【HTML】驗證與調試工具

在這里插入圖片描述

個人主頁：Guiat
歸屬專欄：HTML CSS JavaScript

在這里插入圖片描述

文章目錄

  • 1. HTML 驗證工具概述
    • 1.1 驗證的重要性
    • 1.2 常見 HTML 錯誤類型
  • 2. W3C 驗證服務
    • 2.1 W3C Markup Validation Service
    • 2.2 使用 W3C 驗證器
    • 2.3 驗證結果解讀
  • 3. 瀏覽器開發者工具
    • 3.1 Chrome DevTools
      • 3.1.1 打開 Chrome DevTools
      • 3.1.2 主要功能
      • 3.1.3 Elements 面板使用技巧
    • 3.2 Firefox Developer Tools
      • 3.2.1 打開 Firefox Developer Tools
      • 3.2.2 特色功能
    • 3.3 Safari Web Inspector
      • 3.3.1 啟用 Safari 開發菜單
      • 3.3.2 打開 Web Inspector
  • 4. HTML 代碼質量工具
    • 4.1 HTMLHint
      • 4.1.1 安裝 HTMLHint
      • 4.1.2 配置文件示例 (.htmlhintrc)
      • 4.1.3 使用 HTMLHint
    • 4.2 HTML-validate
      • 4.2.1 安裝 HTML-validate
      • 4.2.2 配置文件示例 (.htmlvalidate.json)
      • 4.2.3 使用 HTML-validate
  • 5. 集成開發環境 (IDE) 插件
    • 5.1 Visual Studio Code 插件
      • 5.1.1 HTML 驗證插件
      • 5.1.2 HTML 格式化插件
    • 5.2 WebStorm/IntelliJ IDEA 功能
    • 5.3 Sublime Text 插件
  • 6. 命令行工具
    • 6.1 HTML Tidy
      • 6.1.1 安裝 HTML Tidy
      • 6.1.2 使用 HTML Tidy
      • 6.1.3 配置文件示例 (tidy.conf)
    • 6.2 Nu Html Checker (vnu.jar)
      • 6.2.1 安裝 Nu Html Checker
      • 6.2.2 使用 Nu Html Checker
  • 7. 自動化測試集成
    • 7.1 CI/CD 集成
      • 7.1.1 GitHub Actions 示例
      • 7.1.2 GitLab CI 示例
    • 7.2 npm 腳本集成
  • 8. 可訪問性驗證工具
    • 8.1 WAVE (Web Accessibility Evaluation Tool)
      • 8.1.1 使用 WAVE
      • 8.1.2 WAVE 瀏覽器擴展
    • 8.2 axe DevTools
      • 8.2.1 安裝 axe DevTools 瀏覽器擴展
      • 8.2.2 使用 axe-core 進行自動化測試
  • 9. 性能分析工具
    • 9.1 Google Lighthouse
      • 9.1.1 使用 Chrome DevTools 中的 Lighthouse
      • 9.1.2 Lighthouse CLI
    • 9.2 WebPageTest
      • 9.2.1 使用 WebPageTest
  • 10. 常見 HTML 問題及修復方法
    • 10.1 驗證錯誤修復表
    • 10.2 HTML5 驗證最佳實踐
    • 10.3 調試技巧
  • 11. 完整驗證流程示例
    • 11.1 開發階段驗證
    • 11.2 提交前驗證
    • 11.3 部署前驗證
    • 11.4 部署后監控

正文

1. HTML 驗證工具概述

HTML 驗證是確保網頁代碼符合 W3C 標準的過程，有助于提高網站的兼容性、可訪問性和搜索引擎優化。

1.1 驗證的重要性

HTML驗證的主要優勢提高兼容性     ████████████████████████ 80%
減少錯誤       ███████████████████████████ 90%
改善SEO        ██████████████████ 60%
提升性能       ███████████████ 50%
增強可訪問性   ████████████████████ 65%[圖表說明: █ 代表約 3% 的重要程度]

1.2 常見 HTML 錯誤類型

錯誤類型描述示例
標簽未閉合缺少結束標簽<div>內容
屬性錯誤屬性值未加引號或屬性無效<img src=image.jpg>
嵌套錯誤標簽嵌套順序不正確<b><i>文本</b></i>
重復 ID頁面中多個元素使用相同 ID多個 id="header"
非法字符使用未轉義的特殊字符& 應為 &amp;

2. W3C 驗證服務

W3C 驗證服務是最權威的 HTML 驗證工具，提供免費的在線驗證。

2.1 W3C Markup Validation Service

<!-- 驗證通過的 HTML 示例 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>驗證示例</title>
</head>
<body><h1>Hello World</h1><p>這是一個<a href="https://example.com">鏈接</a>。</p>
</body>
</html>

2.2 使用 W3C 驗證器

  1. 訪問 W3C Markup Validation Service
  2. 選擇驗證方式：
    • 通過 URL 驗證
    • 上傳文件驗證
    • 直接輸入代碼驗證
  3. 提交驗證并查看結果

2.3 驗證結果解讀

W3C 驗證結果示例:錯誤: 第10行，元素 "img" 缺少必需的 "alt" 屬性
<img src="logo.png">^警告: 第15行，考慮添加 "lang" 屬性到 HTML 開始標簽
<!DOCTYPE html><html>^

3. 瀏覽器開發者工具

現代瀏覽器內置的開發者工具是調試 HTML 的強大工具。

3.1 Chrome DevTools

3.1.1 打開 Chrome DevTools

  • Windows/Linux: F12 或 Ctrl+Shift+I
  • macOS: Cmd+Option+I
  • 或右鍵點擊頁面 > “檢查”

3.1.2 主要功能

Chrome DevTools 主要面板:Elements - 檢查和修改 HTML/CSS
Console - 查看日志和執行 JavaScript
Sources - 調試 JavaScript
Network - 分析網絡請求
Performance - 性能分析
Application - 存儲和緩存
Security - 安全信息

3.1.3 Elements 面板使用技巧

<!-- 在 Elements 面板中可以實時編輯 HTML -->
<div class="container"><h1 id="title">標題</h1><p class="content">內容</p>
</div>
  • 右鍵點擊元素 > “Edit as HTML” 可直接編輯 HTML
  • 使用 Ctrl+F (或 Cmd+F) 在 HTML 中搜索
  • 使用 :hov 按鈕模擬懸停等狀態

3.2 Firefox Developer Tools

3.2.1 打開 Firefox Developer Tools

  • F12 或 Ctrl+Shift+I (Windows/Linux)
  • Cmd+Option+I (macOS)

3.2.2 特色功能

  • 可訪問性檢查器：分析頁面的可訪問性問題
  • 響應式設計模式：測試不同屏幕尺寸
  • 網絡請求監控：分析加載性能

3.3 Safari Web Inspector

3.3.1 啟用 Safari 開發菜單

  1. 打開 Safari 偏好設置
  2. 選擇 “高級” 選項卡
  3. 勾選 “在菜單欄中顯示開發菜單”

3.3.2 打開 Web Inspector

  • 開發 > 顯示 Web Inspector
  • 或 Cmd+Option+I

4. HTML 代碼質量工具

4.1 HTMLHint

HTMLHint 是一個靜態代碼分析工具，可以檢測 HTML 代碼中的問題。

4.1.1 安裝 HTMLHint

# 全局安裝
npm install -g htmlhint# 項目安裝
npm install --save-dev htmlhint

4.1.2 配置文件示例 (.htmlhintrc)

{"tagname-lowercase": true,"attr-lowercase": true,"attr-value-double-quotes": true,"doctype-first": true,"tag-pair": true,"spec-char-escape": true,"id-unique": true,"src-not-empty": true,"attr-no-duplication": true,"title-require": true
}

4.1.3 使用 HTMLHint

# 驗證單個文件
htmlhint index.html# 驗證多個文件
htmlhint "src/**/*.html"

4.2 HTML-validate

HTML-validate 是一個更現代的 HTML 驗證工具，支持 HTML5 和自定義規則。

4.2.1 安裝 HTML-validate

npm install --save-dev html-validate

4.2.2 配置文件示例 (.htmlvalidate.json)

{"extends": ["html-validate:recommended"],"rules": {"element-required-attributes": "error","no-duplicate-id": "error","void-style": ["error", {"style": "selfclosing"}]}
}

4.2.3 使用 HTML-validate

npx html-validate index.html

5. 集成開發環境 (IDE) 插件

5.1 Visual Studio Code 插件

5.1.1 HTML 驗證插件

  1. HTML Hint

    • 實時 HTML 驗證
    • 自定義規則支持
    • 問題高亮顯示

  2. W3C Validation

    • 使用 W3C 驗證服務
    • 詳細錯誤報告
    • 支持多種驗證模式

  3. HTMLHint

    • 基于 HTMLHint 庫
    • 自定義配置支持
    • 問題列表視圖

5.1.2 HTML 格式化插件

  1. Prettier

    • 自動格式化 HTML
    • 可配置的格式規則
    • 保存時自動格式化

  2. HTML CSS Support

    • HTML 類和 ID 自動完成
    • CSS 屬性提示
    • 文檔結構分析

5.2 WebStorm/IntelliJ IDEA 功能

WebStorm 和 IntelliJ IDEA 內置了強大的 HTML 驗證和調試功能：

  • 實時代碼檢查
  • 智能代碼完成
  • HTML 結構可視化
  • 內置 W3C 驗證
  • 與瀏覽器開發工具集成

5.3 Sublime Text 插件

  1. SublimeLinter-html-tidy

    • 基于 HTML Tidy 的驗證
    • 實時錯誤標記
    • 自定義配置

  2. HTML-CSS-JS Prettify

    • 格式化 HTML 代碼
    • 快捷鍵支持
    • 可自定義格式規則

6. 命令行工具

6.1 HTML Tidy

HTML Tidy 是一個經典的命令行工具，可以驗證和修復 HTML 文件。

6.1.1 安裝 HTML Tidy

# Ubuntu/Debian
sudo apt-get install tidy# macOS
brew install tidy-html5# Windows
# 下載安裝包: https://github.com/htacg/tidy-html5/releases

6.1.2 使用 HTML Tidy

# 驗證 HTML 文件
tidy -q -e index.html# 修復 HTML 文件
tidy -m index.html# 使用配置文件
tidy -config tidy.conf index.html

6.1.3 配置文件示例 (tidy.conf)

indent: auto
wrap: 80
markup: yes
output-xml: no
input-xml: no
show-warnings: yes
numeric-entities: yes
quiet: yes
show-body-only: no
fix-uri: yes

6.2 Nu Html Checker (vnu.jar)

Nu Html Checker 是 W3C 驗證服務使用的同一個驗證引擎，可以在本地運行。

6.2.1 安裝 Nu Html Checker

# 下載 jar 文件
wget https://github.com/validator/validator/releases/download/latest/vnu.jar

6.2.2 使用 Nu Html Checker

# 驗證單個文件
java -jar vnu.jar index.html# 驗證多個文件
java -jar vnu.jar *.html# 驗證整個目錄
java -jar vnu.jar path/to/directory/

7. 自動化測試集成

7.1 CI/CD 集成

將 HTML 驗證集成到持續集成/持續部署流程中。

7.1.1 GitHub Actions 示例

name: HTML Validationon:push:branches: [ main ]pull_request:branches: [ main ]jobs:validate:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v2- name: Setup Node.jsuses: actions/setup-node@v2with:node-version: '14'- name: Install dependenciesrun: npm install -g htmlhint- name: Validate HTMLrun: htmlhint "**/*.html"

7.1.2 GitLab CI 示例

html_validation:image: node:14stage: testscript:- npm install -g htmlhint- htmlhint "**/*.html"only:- merge_requests- main

7.2 npm 腳本集成

在 package.json 中添加驗證腳本：

{"scripts": {"validate:html": "htmlhint \"src/**/*.html\"","test": "npm run validate:html"},"devDependencies": {"htmlhint": "^0.16.0"}
}

8. 可訪問性驗證工具

8.1 WAVE (Web Accessibility Evaluation Tool)

WAVE 是一個流行的網頁可訪問性評估工具。

8.1.1 使用 WAVE

  1. 訪問 WAVE 網站
  2. 輸入要檢查的 URL
  3. 查看詳細的可訪問性報告

8.1.2 WAVE 瀏覽器擴展

  • Chrome 和 Firefox 擴展可用
  • 直接在頁面上顯示問題
  • 提供詳細的錯誤說明和修復建議

8.2 axe DevTools

axe DevTools 是一個強大的可訪問性測試工具。

8.2.1 安裝 axe DevTools 瀏覽器擴展

  • 適用于 Chrome、Firefox 和 Edge
  • 提供詳細的可訪問性報告
  • 支持自動化測試集成

8.2.2 使用 axe-core 進行自動化測試

// 安裝
npm install --save-dev axe-core// 在測試中使用
const axe = require('axe-core');// 運行可訪問性測試
axe.run(document, {}, (err, results) => {if (err) throw err;console.log(results.violations);
});

9. 性能分析工具

9.1 Google Lighthouse

Lighthouse 是一個開源的自動化工具，用于改進網頁質量。

9.1.1 使用 Chrome DevTools 中的 Lighthouse

  1. 打開 Chrome DevTools
  2. 切換到 Lighthouse 面板
  3. 選擇要分析的類別（性能、可訪問性、最佳實踐、SEO）
  4. 點擊"生成報告"

9.1.2 Lighthouse CLI

# 安裝
npm install -g lighthouse# 使用
lighthouse https://example.com --view

9.2 WebPageTest

WebPageTest 提供詳細的網頁性能分析。

9.2.1 使用 WebPageTest

  1. 訪問 WebPageTest
  2. 輸入要測試的 URL
  3. 選擇測試位置和瀏覽器
  4. 查看詳細的性能報告

10. 常見 HTML 問題及修復方法

10.1 驗證錯誤修復表

錯誤類型錯誤示例修復方法
未閉合標簽<div>內容添加閉合標簽：<div>內容</div>
屬性引號缺失<img src=logo.png>添加引號：<img src="logo.png">
嵌套錯誤<b><i>文本</b></i>正確嵌套：<b><i>文本</i></b>
重復 ID多個 id="header"使用唯一 ID：id="main-header", id="sub-header"
缺少 alt 屬性<img src="logo.png">添加 alt：<img src="logo.png" alt="公司標志">
非法字符AT&T使用實體：AT&amp;T
缺少 doctype直接以 <html> 開始添加 doctype：<!DOCTYPE html>

10.2 HTML5 驗證最佳實踐

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML5 驗證示例</title>
</head>
<body><header><h1>網站標題</h1><nav><ul><li><a href="/">首頁</a></li><li><a href="/about">關于</a></li></ul></nav></header><main><article><h2>文章標題</h2><p>文章內容</p><img src="image.jpg" alt="圖片描述"></article></main><footer><p>&copy; 2023 公司名稱</p></footer>
</body>
</html>

10.3 調試技巧

  1. 逐步排除法：注釋掉部分代碼，逐步找出問題所在
  2. 使用臨時邊框：添加 style="border: 1px solid red" 查看元素邊界
  3. 檢查父子關系：確保元素正確嵌套
  4. 驗證特殊字符：檢查非ASCII字符是否正確編碼
  5. 檢查大小寫：HTML5 不區分大小寫，但 XHTML 區分

11. 完整驗證流程示例

以下是一個完整的 HTML 驗證流程示例：

11.1 開發階段驗證

  1. 在 IDE 中使用實時驗證插件
  2. 使用保存時自動格式化
  3. 定期運行 HTMLHint 或 HTML-validate

11.2 提交前驗證

# 運行本地驗證
npm run validate:html# 修復發現的問題
tidy -m index.html# 再次驗證
npm run validate:html

11.3 部署前驗證

  1. CI/CD 流程中自動驗證
  2. 使用 W3C 驗證服務進行最終檢查
  3. 運行可訪問性檢查

11.4 部署后監控

  1. 使用 Lighthouse 監控性能和最佳實踐
  2. 定期進行可訪問性審查
  3. 監控用戶反饋和錯誤報告

結語
感謝您的閱讀！期待您的一鍵三連！歡迎指正！

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/75175.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/75175.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/75175.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

認識rand, srand, time函數，生成隨機數

認識rand, srand, time函數，生成隨機數

要完成猜數字游戲&#xff0c;首先要生成隨機數&#xff0c;那么該怎么生成隨機數&#xff1f;、 1.rand函數 rand函數是庫函數&#xff0c;使用的時候要使用頭文件stdlib.h c語言中&#xff0c;提供了rand函數來生成隨機數&#xff0c;來看一下函數使用&#xff1a; 但是r…
閱讀更多...
BKA-CNN-GRU、CNN-GRU、GRU、CNN四模型多變量時序預測（Matlab）

BKA-CNN-GRU、CNN-GRU、GRU、CNN四模型多變量時序預測（Matlab）

BKA-CNN-GRU、CNN-GRU、GRU、CNN四模型多變量時序預測&#xff08;Matlab&#xff09; 目錄 BKA-CNN-GRU、CNN-GRU、GRU、CNN四模型多變量時序預測&#xff08;Matlab&#xff09;預測效果基本介紹程序設計參考資料 預測效果 基本介紹 BKA-CNN-GRU、CNN-GRU、GRU、CNN四模型多…
閱讀更多...
Go語言從零構建SQL數據庫引擎(2)

Go語言從零構建SQL數據庫引擎(2)

SQL標準與數據庫系統實現差異 在上一節中&#xff0c;我們了解了關系型數據庫的基礎概念。現在&#xff0c;讓我們深入探討SQL語言標準以及不同數據庫系統之間的實現差異。 SQL語言的誕生與演進 想象你經營的咖啡店生意蒸蒸日上&#xff0c;需要一個更強大的系統來管理數據。…
閱讀更多...
智能導診系統的技術體系組成

智能導診系統的技術體系組成

智能導診系統的技術體系由基礎支撐技術、核心交互技術、應用場景技術及安全保障技術構成&#xff0c;具體可歸納為以下六個維度&#xff1a; 一、基礎支撐技術 1、AI大模型與深度學習 醫療大模型&#xff1a;如騰訊醫療AI、DeepSeek等&#xff0c;通過海量醫學文獻和病例訓…
閱讀更多...
QML輸入控件: TextField（文本框）的樣式定制

QML輸入控件: TextField（文本框）的樣式定制

目錄 引言示例簡介示例代碼與關鍵點示例1&#xff1a;基礎樣式定制示例2&#xff1a;添加圖標示例3&#xff1a;交互式元素&#xff08;清除按鈕&#xff09; 實現要點總結完整工程下載 引言 在Qt Quick應用程序開發中&#xff0c;文本輸入是最常見的用戶交互方式之一。TextFi…
閱讀更多...
leetcode hot100 多維動態規劃

leetcode hot100 多維動態規劃

1??2?? 多維動態規劃&#xff08;區間 DP、狀態機 DP&#xff09; 62. 不同路徑 一個機器人位于一個 m x n 網格的左上角 &#xff08;起始點在下圖中標記為 “Start” &#xff09;。機器人每次只能向下或者向右移動一步。機器人試圖達到網格的右下角&#xff08;在下圖…
閱讀更多...
3.27學習總結 爬蟲+二維數組+Object類常用方法

3.27學習總結 爬蟲+二維數組+Object類常用方法

高精度&#xff1a; 一個很大的整數&#xff0c;以字符串的形式進行接收&#xff0c;并將每一位數存儲在數組內&#xff0c;例如100&#xff0c;即存儲為[1][0][0]。 p2437蜜蜂路線 每一個的路線數前兩個數的路線數相加。 #include <stdio.h> int a[1005][1005]; int …
閱讀更多...
車載以太網網絡測試-26【SOME/IP-通信方式-2】

車載以太網網絡測試-26【SOME/IP-通信方式-2】

目錄 1 摘要2 Method &#xff08;FF/RR&#xff09;、Event、Filed介紹2.1. SOME/IP Method 接口2.1.1 **Fire & Forget (FF)** - 單向調用2.1.2 **Request/Response (RR)** - 請求/響應模式2.1.3 **車載ECU通信實現示例**:2.1.4 **通信序列示例**2.1.5 實現注意事項 2.2 …
閱讀更多...
把doi直接插入word中，然后直接生成參考文獻

把doi直接插入word中，然后直接生成參考文獻

這段代碼通過提取、查詢、替換DOI&#xff0c;生成參考文獻列表來處理Word文檔&#xff0c;可按功能模塊劃分&#xff1a; 導入模塊 import re from docx import Document from docx.oxml.ns import qn from habanero import Crossref導入正則表達式模塊re用于文本模式匹配&a…
閱讀更多...
[C++] : C++11 右值引用的理解

[C++] : C++11 右值引用的理解

&#xff08;一&#xff09;什么是左值和右值&#xff1f; 傳統的C語法中就有引用的語法&#xff0c;而C11中新增了的右值引用語法特性&#xff0c;所以從現在開始我們 之前學習的引用就叫做左值引用。無論左值引用還是右值引用&#xff0c;都是給對象取別名。 1.左值 左值是一…
閱讀更多...
windows服務器切換到linux服務器踩坑點

windows服務器切換到linux服務器踩坑點

單節點環境依賴性 單節點問題&#xff0c;影響業務可用性&#xff0c;windows影響后續自動化&#xff0c;健壯性的提升&#xff0c;需要進行linux化 每個服務至少是雙節點&#xff0c;防止單點故障&#xff0c;提升系統的可用性&#xff0c;健壯性。linux化后可以進行docker化…
閱讀更多...
美顏SDK兼容性挑戰：如何讓美顏濾鏡API適配iOS與安卓？

美顏SDK兼容性挑戰：如何讓美顏濾鏡API適配iOS與安卓？

如何讓美顏濾鏡API同時適配iOS與Android&#xff0c;并確保性能流暢、效果一致&#xff0c;是開發者面臨的一大挑戰。今天&#xff0c;我將與大家一同深度剖析美顏SDK的跨平臺兼容性問題&#xff0c;并分享優化適配方案。 一、美顏SDK兼容性面臨的挑戰 1.1不同平臺的圖像處理框…
閱讀更多...
Vue3 表單

Vue3 表單

Vue3 表單 隨著前端技術的發展，Vue.js 作為一款流行的前端框架，不斷更新迭代，以適應更高效、更便捷的開發需求。Vue3 作為 Vue.js 的第三個主要版本，引入了許多新特性和改進，其中包括對表單處理機制的優化。本文將深入探討 Vue3 表單的使用方法、技巧以及注意事項。 1. …
閱讀更多...
筆記：代碼隨想錄算法訓練營day62：108.冗余連接、109.冗余連接II

筆記：代碼隨想錄算法訓練營day62：108.冗余連接、109.冗余連接II

學習資料&#xff1a;代碼隨想錄 108. 冗余連接 卡碼網題目鏈接&#xff08;ACM模式&#xff09; 判斷是否有環的依據為&#xff0c;利用并查集&#xff0c;isSame函數&#xff0c;判斷當下這條邊的兩個節點入集前是否為同根&#xff0c;如果是的話&#xff0c;該邊就是會構…
閱讀更多...
RK3588,V4l2 讀取Gmsl相機, Rga yuv422轉換rgb (mmap)

RK3588,V4l2 讀取Gmsl相機, Rga yuv422轉換rgb (mmap)

RK3588, 使用V4l2 讀取 gmsl 相機，獲得yuv422格式圖像， 使用 rga 轉換 rgb 圖像。減少cpu占用率. 內存管理方式采用 mmap… 查看相機信息 v4l2-ctl --all -d /dev/cam0 , 查看自己相機分辨率，輸出格式等信息,對應修改后續代碼測試… Driver Info:Driver name : rkcif…
閱讀更多...
Kubernetes》k8s》Containerd 、ctr 、cri、crictl

Kubernetes》k8s》Containerd 、ctr 、cri、crictl

containerd ctr crictl ctr 是 containerd 的一個客戶端工具。 crictl 是 CRI 兼容的容器運行時命令行接口&#xff0c;可以使用它來檢查和調試 k8s 節點上的容器運行時和應用程序。 ctr -v 輸出的是 containerd 的版本&#xff0c; crictl -v 輸出的是當前 k8s 的版本&#x…
閱讀更多...
Vue 入門到實戰 十一 Vuex

Vue 入門到實戰 十一 Vuex

目錄 11.1狀態管理與應用場景 1&#xff09;state 2&#xff09;Getters 3&#xff09;Mutations 4&#xff09;Actions 5&#xff09;Module 11.2Vuex的安裝與基本應用 11.3Vuex的核心概念 一句話解釋vuex&#xff1a;就是單獨成立一個組件&#xff0c;這個組件存儲共…
閱讀更多...
【YOLOv11】目標檢測任務-實操過程

【YOLOv11】目標檢測任務-實操過程

目錄 一、torch環境安裝1.1 創建虛擬環境1.2 啟動虛擬環境1.3 安裝pytorch1.4 驗證cuda是否可用 二、yolo模型推理2.1 下載yolo模型2.2 創建模型推理文件2.3 推理結果保存路徑 三、labelimg數據標注3.1 安裝labelimg3.2 解決浮點數報錯3.3 labelimg UI界面介紹3.4 數據標注案例…
閱讀更多...
探索 Vue 中的多語言切換：＜lang-radio /＞ 組件詳解！！！

探索 Vue 中的多語言切換：＜lang-radio /＞ 組件詳解！！！

探索 Vue 中的多語言切換&#xff1a;<lang-radio /> 組件詳解 &#x1f30d; 嗨&#xff0c;大家好&#xff01;&#x1f44b; 今天我們來聊聊如何在 Vue 項目中實現一個優雅的多語言切換功能——<lang-radio /> 組件。這是一個小而美的組件&#xff0c;出現在登…
閱讀更多...
grafana 配置頁面告警

grafana 配置頁面告警

添加告警規則 1.登錄grafana 點擊 Alerting > Alert rules 點擊 New alert rule 2.填寫告警規則名字 3.配置告警規則 選擇數據源為 Loki 單機 Builder 單機Label brower 單機 node_name 標簽&#xff0c;選擇一個主機&#xff0c;選好后單機 Show logs 這時候查詢語…
閱讀更多...
最新文章

Copyright @ 2022~2023