当前位置：首页 > news >正文

【HTML】验证与调试工具

news 来源：原创 2025/7/19 4:49:17

在这里插入图片描述

个人主页：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"`
非法字符	使用未转义的特殊字符	`&` 应为 `&`

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 验证器

访问 W3C Markup Validation Service
选择验证方式：
- 通过 URL 验证
- 上传文件验证
- 直接输入代码验证
提交验证并查看结果

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 开发菜单

打开 Safari 偏好设置
选择 “高级” 选项卡
勾选 “在菜单栏中显示开发菜单”

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 验证插件

HTML Hint
- 实时 HTML 验证
- 自定义规则支持
- 问题高亮显示
W3C Validation
- 使用 W3C 验证服务
- 详细错误报告
- 支持多种验证模式
HTMLHint
- 基于 HTMLHint 库
- 自定义配置支持
- 问题列表视图

5.1.2 HTML 格式化插件

Prettier
- 自动格式化 HTML
- 可配置的格式规则
- 保存时自动格式化
HTML CSS Support
- HTML 类和 ID 自动完成
- CSS 属性提示
- 文档结构分析

5.2 WebStorm/IntelliJ IDEA 功能

WebStorm 和 IntelliJ IDEA 内置了强大的 HTML 验证和调试功能：

实时代码检查
智能代码完成
HTML 结构可视化
内置 W3C 验证
与浏览器开发工具集成

5.3 Sublime Text 插件

SublimeLinter-html-tidy
- 基于 HTML Tidy 的验证
- 实时错误标记
- 自定义配置
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

访问 WAVE 网站
输入要检查的 URL
查看详细的可访问性报告

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

打开 Chrome DevTools
切换到 Lighthouse 面板
选择要分析的类别（性能、可访问性、最佳实践、SEO）
点击"生成报告"

9.1.2 Lighthouse CLI

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

9.2 WebPageTest

WebPageTest 提供详细的网页性能分析。

9.2.1 使用 WebPageTest

访问 WebPageTest
输入要测试的 URL
选择测试位置和浏览器
查看详细的性能报告

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&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 调试技巧

逐步排除法：注释掉部分代码，逐步找出问题所在
使用临时边框：添加 style="border: 1px solid red" 查看元素边界
检查父子关系：确保元素正确嵌套
验证特殊字符：检查非ASCII字符是否正确编码
检查大小写：HTML5 不区分大小写，但 XHTML 区分

11. 完整验证流程示例

以下是一个完整的 HTML 验证流程示例：

11.1 开发阶段验证

在 IDE 中使用实时验证插件
使用保存时自动格式化
定期运行 HTMLHint 或 HTML-validate

11.2 提交前验证

# 运行本地验证
npm run validate:html# 修复发现的问题
tidy -m index.html# 再次验证
npm run validate:html

11.3 部署前验证

CI/CD 流程中自动验证
使用 W3C 验证服务进行最终检查
运行可访问性检查

11.4 部署后监控

使用 Lighthouse 监控性能和最佳实践
定期进行可访问性审查
监控用户反馈和错误报告

结语
感谢您的阅读！期待您的一键三连！欢迎指正！

在这里插入图片描述

【HTML】验证与调试工具

个人主页：Guiat 归属专栏：HTML CSS JavaScript 文章目录 1. HTML 验证工具概述1.1 验证的重要性1.2 常见 HTML 错误类型 2. W3C 验证服务2.1 W3C Markup Validation Service2.2 使用 W3C 验证器2.3 验证结果解读 3. 浏览器开发者工具3.1 Chrome DevTools…...

编程日记 2025/7/19 4:49:17

头歌实践教学平台--【数据库概论】--SQL

一、表结构与完整性约束的修改(ALTER) 1.修改表名 USE TestDb1; alter table your_table rename TO my_table; 2.添加与删除字段 #语句1：删除表orderDetail中的列orderDate alter table orderDetail drop orderDate; #语句2：添加列unitPrice alter t…...

编程日记 2025/7/19 1:16:50

2025.03.27【基因分析新工具】| MAST：解锁基因表达差异分析与网络构建

文章目录 1. MAST工具简介：探索生物信息分析的新利器1.1 什么是MAST工具？1.2 MAST工具的优势1.3 MAST工具的应用场景 2. MAST的安装方法：轻松入门的第一步2.1 安装R语言环境2.2 安装MAST包2.3 安装依赖库 3. MAST常用命令：掌握数据…...

编程日记 2025/7/18 18:49:12

JVM - 垃圾回收基本问题

通过一些问题来讨论在 JVM 中，垃圾回收的一些基本问题为什么要有垃圾回收？Java 垃圾回收中是如何判断一个对象死亡的？请简单介绍一下刚才说到了引用计数法，引用计数法存在什么问题？刚才说到了可达性分析，…...

编程日记 2025/7/15 20:06:18

Python 爬虫案例

以下是一些常见的 Python 爬虫案例，涵盖了不同的应用场景和技术点： 1. 简单网页内容爬取案例：爬取网页标题和简介 import requests from bs4 import BeautifulSoup url "https://www.runoob.com/" response requests.get(url) …...

编程日记 2025/7/14 1:33:13

从零构建大语言模型全栈开发指南：第三部分：训练与优化技术-3.1.3分布式数据加载与并行处理（PyTorch DataLoader优化）

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲 3.1.3 分布式数据加载与并行处理（`PyTorch DataLoader`优化）1. 大规模数据加载的挑战与瓶颈分析1.1 数据加载流程的时间分解2. PyTorch DataLoader的深度优化策略2.1 核心参数调优2.2 分布式数据分片策…...

编程日记 2025/7/19 4:43:49

2025年- G31-Lc105-102. 二叉树层次遍历--java版

1.题目描述 2.思路思路一： 使用队列 Queue 来存储当前层的所有节点。关键点在于 levelSize queue.size() 这一行，它决定了当前层的节点数量。 3.代码实现 /*** Definition for a binary tree node.* public class TreeNode {* int val;* Tr…...

编程日记 2025/7/16 5:24:25

Redis 和 MySQL双写一致性的更新策略有哪些？常见面试题深度解答。

目录一. 业务数据查询，更新顺序简要分析二. 更新数据库、查询数据库、更新缓存、查询缓存耗时对比 2.1 更新数据库（最慢） 2.2 查询数据库（较慢） 2.3 更新缓存（次快） 2.4 查询缓存&#…...

编程日记 2025/7/17 1:20:13

【DFS】羌笛何须怨杨柳，春风不度玉门关 - 4. 二叉树中的深搜

本篇博客给大家带来的是二叉树深度优先搜索的解法技巧,在后面的文章中题目会涉及到回溯和剪枝,遇到了一并讲清楚. 🐎文章专栏: DFS 🚀若有问题评论区见 ❤ 欢迎大家点赞评论收藏分享如果你不知道分享给谁,那就分享给薯条. 你们的支持是我不断创作的…...

编程日记 2025/7/18 20:46:48

【Exception】MybatisPlusException: can not find lambda cache for this entity

编程日记 2025/7/16 8:12:56

Spring Security 全面指南：从基础到高级实践

一、Spring Security 概述与核心概念 1.1 Spring Security 简介 Spring Security 是 Spring 生态系统中的安全框架，为基于 Java 的企业应用提供全面的安全服务。它起源于 2003 年的 Acegi Security 项目，2008 年正式成为 Spring 官方子项目&#xff0c…...

编程日记 2025/7/19 4:40:26

IP组播 C++简单应用

引言在当今的网络世界中，数据的传输效率和带宽的合理利用是至关重要的。传统的单播和广播通信方式在某些场景下存在着局限性，而IP组播技术的出现为解决这些问题提供了一种有效的方案。本文将详细介绍IP组播的概念、工作原理、应用场景，并通…...

编程日记 2025/7/19 4:42:40

CentOS 7安装 mysql

CentOS 7安装 mysql 1. yum 安装 mysql 配置mysql源 yum -y install mysql57-community-release-el7-10.noarch.rpm安装MySQL服务器 yum -y install mysql-community-server启动MySQL systemctl start mysqld.service查看MySQL运行状态，运行状态如图&#xff…...

编程日记 2025/7/19 4:48:17

“十五五”时期航空弹药发展环境分析

1．“十五五”时期航空弹药发展环境分析 （标题：小二号宋体居中） 一、建言背景介绍 （一级标题：黑体三号，首行空两格） 航空弹药作为现代战争的核心装备，其发展水平直接关乎…...

编程日记 2025/7/19 4:43:49

es6的100个问题

基础概念解释 let、const 和 var 的区别。什么是块级作用域？ES6 如何实现它？箭头函数和普通函数的主要区别是什么？解释模板字符串（Template Literals）的用途，并举例嵌套变量的写法。解构赋值的语法是什么…...

编程日记 2025/7/14 23:07:10

在直播间如何和观众进行互动

在抖音直播间实现高效互动需要**技术话术工具**的立体化组合，以下是程序员可落地的深度互动方案： --- ### 一、技术驱动型互动策略 #### 1. **实时代码演示（硬核互动）** - **OBS虚拟摄像头屏幕共享** python # 用Flask创建实…...

编程日记 2025/7/13 22:20:08

mysql--用户管理

MySQL 用户管理完整指南 1. 查看用户信息查看所有用户 SELECT User, Host, authentication_string FROM mysql.user;查看用户详细信息 SELECT * FROM mysql.user \G查看当前登录用户 SELECT CURRENT_USER();查看特定用户的权限 SHOW GRANTS FOR usernamehost;2. 创建用户…...

编程日记 2025/7/14 10:34:20

.NET三层架构详解

.NET三层架构详解文章目录 .NET三层架构详解引言什么是三层架构表示层（Presentation Layer）业务逻辑层（Business Logic Layer，BLL）数据访问层（Data Access Layer，DAL） .NET三层架构…...

编程日记 2025/7/19 4:40:26

机器学习之回归

1. 引言回归分析是机器学习中的基本技术之一，广泛用于预测连续型变量。本文调研了线性回归、多项式回归、岭回归、Lasso回归及弹性网络回归，重点分析其数学原理、算法推导、求解方法及应用场景。 2. 线性回归 2.1 概述线性回归假设因变量与自变量之间存在线性关系，其目…...

编程日记 2025/7/15 16:41:33

危险化合物安全处理，有机反应淬灭操作解析

化学淬灭操作是指在化学反应过程中，通过人为干预快速终止反应的技术。在有机化学反应中，某一反应底物是过量的，当化学反应进行到一定程度，目标产物已经获得，该过量反应底物继续存在会进一步反应生成副产物或者影响后处…...

编程日记 2025/7/19 4:44:48

【前端】使用 HTML、CSS 和 JavaScript 创建一个数字时钟和搜索功能的网页

文章目录 ⭐前言⭐一、项目结构⭐二、HTML 结构⭐三、CSS 样式⭐四、JavaScript 功能⭐五、运行效果⭐总结标题详情作者JosieBook头衔CSDN博客专家资格、阿里云社区专家博主、软件设计工程师博客内容开源、框架、软件工程、全栈（,NET/Java/Python/C）、数…...

编程日记 2025/7/19 4:44:48

【Linux】调试器——gdb使用

目录一、预备知识二、常用指令三、调试技巧 （一）监视变量的变化指令 watch （二）更改指定变量的值 set var 正文一、预备知识程序的发布形式有两种，debug和release模式，Linux gcc/g出来的二进制…...

编程日记 2025/7/15 22:13:25

Windows10清理机器大全集

Windows10清理机器大全集写在前面先这么个标题，逐渐补充禁止Update移除Microsoft Compatibility Telemetrywindows-defender-remover其它写在前面看到标题，读者已经就吐了。我是说，我非常认可: IT从业者，如果你银子比较充足&…...

编程日记 2025/7/17 6:58:32

解决IDEA中maven找不到依赖项的问题

直接去官网找到对应的依赖项jar包，并且下载到本地，然后安装到本地厂库中。 Maven官网：https://mvnrepository.com/ 一、使用mvn install:install-file命令 Maven提供了install:install-file插件，用于手动将jar包安装到本地仓库…...

编程日记 2025/7/19 4:47:17

端游熊猫脚本游戏精灵助手2025游戏办公脚本工具！游戏脚本软件免费使用

在当下这个崇尚高效与便捷的时代，自动化工具已然成为诸多开发者与企业提升工作效率的关键选择。熊猫精灵脚本助手作为一款极具实力的自动化工具，凭借其多样的功能以及广泛的应用场景，逐步成为众多用户的首要之选。熊猫精灵脚本助手整合了丰…...

编程日记 2025/7/15 13:41:46

知识就是力量——物联网应用技术

基础知识篇一、常用电子元器件1——USB Type C 接口引脚详解特点接口定义作用主从设备关于6P引脚的简介 2——常用通信芯片CH343P概述特点引脚定义 CH340概述特点封装 3——蜂鸣器概述类型驱动电路原文链接二、常用封装介绍贴片电阻电容封装介绍封装尺寸与功率关系&#xff1…...

编程日记 2025/6/28 1:45:42

第4.1节：使用正则表达式

1 第4.1节：使用正则表达式将正则表达式用斜杠括起来，就能用作模式。随后，该正则表达式会与每条输入记录的完整文本进行比对。（通常情况下，它只需匹配文本的部分内容就能视作匹配成功。）例如，以…...

编程日记 2025/7/15 7:35:39

Linux目录及文件管理

目录一.Linux目录基本结构 1.常见目录及其作用二.常用文件处理命令 1.七类常见的linux的文件 2.cat（查看文件内容） 3.more(分页查看文件内容） 4.less(分页查看文件内容） 5.head（从头部查看文件内容&#xff0…...

编程日记 2025/7/11 1:11:57

【MySQL】从零开始：掌握MySQL数据库的核心概念（五）

由于我的无知，我对生存方式只有一个非常普通的信条：不许后悔。前言这是我自己学习mysql数据库的第五篇博客总结。后期我会继续把mysql数据库学习笔记开源至博客上。上一期笔记是关于mysql数据库的增删查改，没看的同学可以过去看看&#xf…...

编程日记 2025/7/14 23:51:43

进军场景智能体，云迹机器人又快了一步

（图片来源：Pixels） 2025年，AI和机器人行业都发生了巨大改变。数科星球原创作者丨苑晶编辑丨大兔 2025年，酒店行业正掀起一股批量采购具备AI功能的软硬一体解决方案的热潮。在DeepSeek、Manus等国产AI软件的推动…...

编程日记 2025/7/11 23:01:56

【实战ES】实战 Elasticsearch：快速上手与深度实践-5.2.1 多字段权重控制（标题、品牌、类目）

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲电商商品搜索实战：多字段权重控制策略1. 业务场景与核心挑战1.1 典型搜索问题1.2 权重失衡的影响数据 2. 权重控制核心方案2.1 字段权重分配矩阵2.2 多策略组合方…...

编程日记 2025/7/14 16:10:57

Ubuntu24.04 离线安装 MySQL8.0.41

一、环境准备 1.1 官方下载MySQL8.0.41 完整包 1.2 上传包 & 解压上传包名称是：mysql-server_8.0.41-1ubuntu24.04_amd64.deb-bundle.tar # 切换到上传目录 cd /home/MySQL8 # 解压： tar -xvf mysql-server_8.0.41-1ubuntu24.04_amd64.deb-bundl…...

编程日记 2025/7/14 1:24:58

【Django】教程-3-数据库相关介绍

【Django】教程-1-安装创建项目目录结构介绍【Django】教程-2-前端-目录结构介绍 4.数据库连接配置需要手动创建数据库，数据库无法自动创建 ，ORM可以创建表，操作表注意：负责app下mondels.py写类时，无法在数据库中…...

编程日记 2025/7/14 8:13:25

OpenGL绘制文本

一：QPainter绘制在 OpenGL 渲染的窗口中（如 QOpenGLWidget），通过 QPainter 直接绘制文本。Qt 会自动将 2D 内容（文本、图形）与 OpenGL 内容合成。在paintGL()里面绘制，如果有其他纹理&#xf…...

编程日记 2025/7/18 1:13:45

DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例6，TableView16_06 分页表格拖拽排序

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏关注哦 💕 目录 Deep…...

编程日记 2025/7/16 1:48:59

【解决】导入PNG图片，转 Sprite 格式成功但资产未生效问题

开发平台：Unity 6.0 图片格式：.png 问题描述当 PNG 成功转换为 Sprite（精灵）时，资产状态将显示扩展箭头，即表明该资产可 Sprite 使用。解决方法：设置正确的 Sprite Mode Single 关于 Spr…...

编程日记 2025/7/16 21:35:18

【科研绘图系列】R语言绘制重点物种进化树图（taxa phylogenetic tree）

禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录介绍加载R包数据下载导入数据数据预处理画图输出图片系统信息介绍【科研绘图系列】R语言绘制重点物种进化树图（taxa phylogenetic tree）加载R包 library(tidyverse) library(ape…...

编程日记 2025/7/9 8:10:55

Flutter入门教程：从零开始的Flutter开发指南

Flutter入门教程：从环境搭建到应用发布概述本文提供了全面的Flutter入门教程，涵盖环境搭建、基础Widget使用、界面设计与美化，以及实战项目开发等内容。通过本教程，开发者能够快速上手Flutter开发，掌握开发跨平台应…...

编程日记 2025/7/16 21:05:07

CentOS 7 源码安装libjsoncpp-1.9.5库

安装依赖工具 sudo yum install cmake make gcc cmake 需要升级至 3.8.0 以上可参考：CentOS安装CMakegcc 需要升级至9.0 以上可参考：CentOS 7升级gcc版本下载源码 wget https://github.com/open-source-parsers/jsoncpp/archive/refs/tags/1.9.5.…...

编程日记 2025/7/14 19:50:30

调用高德天气Api，并展示对应天气图标

1、申请高德key 点击高德官网申请必须有key才能调用高德api 小提示：每日/每秒调用api次数有限，尽量不要循环调用。每日大概5000，每秒3次 2、查看文档高德官网天气api接口文档请求示例： https://restapi.amap.com/v3/weat…...

编程日记 2025/7/18 5:31:29

DSP开发板的JTAG接口

（1）普中DSP28335 （2）研旭DSP28388 （3）延华DSP28335 （3）M新动力28377D电机控制板...

编程日记 2025/6/28 3:35:04

1.25-20GHz/500ns超快跳频！盛铂SWFA300国产捷变频频率综合器模块赋能雷达/5G/电子战高频精密控制本振/频综模块

盛铂SWFA300捷变频频率综合器模块简述： 盛铂科技国产SWFA300捷变频频率综合器是一款在频率范围内任意两点频率的跳频时间在500nS以内的高速跳频源，其输出频率范围为1.25GHz至20GHz，频率的最小步进为10kHz。同时它拥有优秀的相位噪声特性&…...

编程日记 2025/7/18 9:32:00

nestjs 多环境配置

这里使用yaml进行多环境配置，需要安装nestjs/config、js-yaml、types/js-yaml js-yaml、types/js-yaml 主要用来读取yaml文件以及指定类型使用官方教程：Documentation | NestJS - A progressive Node.js framework 1、下载 npm i --save nestjs/confi…...

编程日记 2025/7/15 1:19:17

CentOS7系统更新yum源教程

由于CentOS 7 在2024年6月30号以后官方不再维护。很多yum源也陆续关掉了，所以我们要更换镜像源。yum是一个用于软件包管理的工具，它能够从特定的存储库中自动下载和安装软件包。然而，系统默认的yum源可能不包含所有软件包，因此需要…...

编程日记 2025/7/9 17:25:48

Python正则表达式（二）

目录六、re.findall()函数和分组 1、0/1分组情况 2、多分组情况七、或“|”的用法 1、作用域 2、用法八、贪婪模式和懒惰模式 1、量词的贪婪模式 2、量词的懒惰模式九、匹配对象 1、相关函数六、re.findall()函数和分组 1、0/1分组情况在正则表达式中&#x…...

编程日记 2025/7/18 1:30:30

MySQL中如何进行SQL调优？

SQL 调优是提高 MySQL 数据库性能的关键环节。以下是 MySQL SQL 调优的主要方法和技巧一、使用 EXPLAIN 分析查询 EXPLAIN SELECT * FROM users WHERE user_name 张三;查看执行计划，了解 MySQL 如何处理查询重点关注 type、key、rows、Extra 列type 最好能达到 …...

编程日记 2025/7/19 4:18:17

Android15查看函数调用关系

Android15 Camera3中打印函数调用栈 1.使用CallStack跟踪函数调用修改涉及三个内容： Android.bp中添加对CallStack的引用。CallStack被打包在libutilscallstack.so。代码中包含CallStack的头文件。代码中调用CallStack接口，打印函数调用栈。例子&am…...

编程日记 2025/7/16 14:43:17

Containerd+Kubernetes搭建k8s集群

虚拟机环境设置，如果不是虚拟机可以忽略不看 1、安装配置containerd 1.1 添加 Kubernetes 官方仓库安装cri-tools的时候需要用到 cat > /etc/yum.repos.d/kubernetes.repo << EOF [kubernetes] nameKubernetes baseurlhttps://mirrors.aliyun.com/kub…...

编程日记 2025/7/14 1:18:44

【Spring AI】基于专属知识库的RAG智能问答小程序开发——功能优化：用户鉴权主体功能开发

系列文章目录【Spring AI】基于专属知识库的RAG智能问答小程序开发——完整项目（含完整前端后端代码）【Spring AI】基于专属知识库的RAG智能问答小程序开发——代码逐行精讲：核心ChatClient对象相关构造函数【Spring AI】基于专属知识库的R…...

编程日记 2025/7/13 20:02:10

个人学习编程(3-24) 数据结构

括号的匹配： if((s[i]) && now() || (s[i]] && now[)){ #include <bits/stdc.h>using namespace std;int main() {char s[300];scanf("%s",&s);int i;int len strlen(s);stack <char> st;for (i 0; i < len; i){if(…...

编程日记 2025/7/15 10:51:28

文章目录

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 部署后监控

相关文章：