通过PowerShell读取HTML文件中的link标签，提取CSS路径并验证本地是否存在。2. 脚本遍历指定目录的HTML文件，匹配rel="stylesheet"的href属性，转换为本地路径后检查文件存在性。3. 输出结果区分正常与缺失的CSS文件，支持相对路径，忽略外部URL。4. 可扩展递归扫描、日志记录和多文件扩展名支持，适用于静态网站维护与资源整理。
在Windows系统中，可以使用PowerShell快速批量检查HTML文件中的CSS路径是否正确。这种方法适用于静态网站维护、前端项目迁移或资源整理等场景。
1. 检查原理说明
通过读取HTML文件内容，提取所有 标签中的 href 属性（特别是类型为 text/css 的样式表链接），然后判断对应CSS文件在磁盘上是否存在。
2. PowerShell脚本实现
将以下脚本保存为 Check-CssPaths.ps1，并运行：
# 设置HTML文件所在目录
$HtmlDirectory = "C:\your\html\folder" # 修改为你的HTML文件夹路径
# 获取所有 .html 文件
Get-ChildItem -Path $HtmlDirectory -Filter *.html | ForEach-Object {
$FilePath = $_.FullName
$Content = Get-Content -Path $FilePath -Raw
$FileName = $_.Name
# 使用正则匹配 link[rel="stylesheet"] 的 href 属性
$Matches = [regex]::Matches($Content, ']+rel\s*=\s*["'']stylesheet["''][^>]*href\s*=\s*["'']([^"'']+)["'']', 'IgnoreCase')
foreach ($Match in $Matches) {
$CssUrl = $Match.Groups[1].Value
# 转换URL为本地相对路径（移除查询参数，处理 / 或 \）
$CssPath = $CssUrl -split '[?#]' | Select-Object -First 1
$CssFullPath = Join-Path -Path $HtmlDirectory -ChildPath $CssPath
$CssFullPath = $CssFullPath -replace '/', '\'
if (-Not (Test-Path $CssFullPath)) {
Write-Host "❌ CSS 文件未找到: $CssFullPath" -ForegroundColor Red
Write-Host " 来自 HTML: $FileName (链接: $CssUrl)" -ForegroundColor Yellow
}
else {
Write-Host "✅ 正常: $CssUrl -> $CssFullPath" -ForegroundColor Green
}
}
} 3. 使用说明与注意事项
确保你以管理员身份运行PowerShell，并允许脚本执行：
立即学习“前端免费学习笔记（深入）”；
- 右键“以管理员身份运行”PowerShell
- 执行：
Set-ExecutionPolicy RemoteSigned（首次需设置） - 进入脚本所在目录后运行：
.\Check-CssPaths.ps1
支持相对路径（如 css/style.css），不支持外部URL（如 https://cdn.example.com/style.css）。若需跳过外链，脚本会自动忽略以 http:// 或 https:// 开头的路径。
4. 增强功能建议
可加入以下改进：
- 递归扫描子目录：
Get-ChildItem -Recurse - 输出结果到日志文件：
Start-Transcript -Path "check_log.txt" - 支持 .htm 扩展名：
-Include *.html,*.htm
基本上就这些，简单有效，适合本地项目资源完整性检查。
