{"id":44112363,"url":"https://github.com/chicogong/html-tools","last_synced_at":"2026-02-08T16:34:22.339Z","repository":{"id":331216117,"uuid":"1122616488","full_name":"chicogong/html-tools","owner":"chicogong","description":"🛠️ 1023+ 纯前端在线工具集 | 单文件·零构建·可离线·隐私优先 | Pure HTML Tools - Single file, Zero build, Offline-ready, Privacy-first","archived":false,"fork":false,"pushed_at":"2026-01-11T18:20:31.000Z","size":158500,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-01-11T21:49:00.911Z","etag":null,"topics":["ai-tools","developer-tools","free-tools","frontend-tools","html","html-tools","mcp","no-build","no-tracking","offline-first","online-tools","privacy-first","productivity-tools","pwa","seo-tools","single-file","tools","vanilla-js","web-tools","web-utilities"],"latest_commit_sha":null,"homepage":"https://tools.realtime-ai.chat","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chicogong.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"custom":["https://afdian.com/a/aitools"]}},"created_at":"2025-12-25T06:15:43.000Z","updated_at":"2026-01-11T18:20:39.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/chicogong/html-tools","commit_stats":null,"previous_names":["chicogong/html-tools"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/chicogong/html-tools","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chicogong%2Fhtml-tools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chicogong%2Fhtml-tools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chicogong%2Fhtml-tools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chicogong%2Fhtml-tools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chicogong","download_url":"https://codeload.github.com/chicogong/html-tools/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chicogong%2Fhtml-tools/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29236900,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-08T14:18:14.570Z","status":"ssl_error","status_checked_at":"2026-02-08T14:18:14.071Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-tools","developer-tools","free-tools","frontend-tools","html","html-tools","mcp","no-build","no-tracking","offline-first","online-tools","privacy-first","productivity-tools","pwa","seo-tools","single-file","tools","vanilla-js","web-tools","web-utilities"],"created_at":"2026-02-08T16:34:21.100Z","updated_at":"2026-02-08T16:34:22.334Z","avatar_url":"https://github.com/chicogong.png","language":"HTML","funding_links":["https://afdian.com/a/aitools"],"categories":[],"sub_categories":[],"readme":"# WebUtils\n\n\u003cdiv align=\"center\"\u003e\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Tools](https://img.shields.io/badge/Tools-1023+-blue.svg)](https://tools.realtime-ai.chat)\n[![Lint](https://github.com/chicogong/html-tools/actions/workflows/lint.yml/badge.svg)](https://github.com/chicogong/html-tools/actions/workflows/lint.yml)\n[![Deploy](https://github.com/chicogong/html-tools/actions/workflows/deploy.yml/badge.svg)](https://github.com/chicogong/html-tools/actions/workflows/deploy.yml)\n[![Vercel](https://img.shields.io/badge/Vercel-deployed-black?logo=vercel)](https://html-tools-jade.vercel.app)\n[![Cloudflare](https://img.shields.io/badge/Cloudflare-deployed-orange?logo=cloudflare)](https://htmltools-bkt.pages.dev)\n\n[![GitHub stars](https://img.shields.io/github/stars/chicogong/html-tools?style=social)](https://github.com/chicogong/html-tools/stargazers)\n[![GitHub forks](https://img.shields.io/github/forks/chicogong/html-tools?style=social)](https://github.com/chicogong/html-tools/network/members)\n[![GitHub issues](https://img.shields.io/github/issues/chicogong/html-tools)](https://github.com/chicogong/html-tools/issues)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/chicogong/html-tools/pulls)\n\n### 🚀 1023+ 纯前端在线工具集\n\n**单文件 · 零构建 · 可离线 · 隐私优先 · 数据不上传**\n\n一个完全开源、隐私至上的在线工具集。无需安装、无需注册、无广告、无追踪。\n\n[**🌐 立即体验**](https://tools.realtime-ai.chat) | [工具列表](#工具列表-1023-个) | [贡献指南](#贡献指南) | [添加新工具](#添加新工具)\n\n\u003c/div\u003e\n\n---\n\n## ✨ 为什么选择 WebUtils？\n\n相比其他在线工具网站，WebUtils 的独特优势：\n\n| 特性         | WebUtils                     | 其他工具站                |\n| ------------ | ---------------------------- | ------------------------- |\n| **隐私保护** | ✅ 100% 本地处理，数据不上传 | ❌ 大多需上传到服务器     |\n| **离线使用** | ✅ 下载 HTML 即可离线用      | ❌ 必须联网               |\n| **无需构建** | ✅ 单文件架构，直接打开      | ❌ 需要 npm/webpack 构建  |\n| **加载速度** | ✅ 极快（无框架开销）        | ⚠️ 较慢（React/Vue 加载） |\n| **工具数量** | ✅ 1000+ 个工具              | ⚠️ 通常 50-80 个          |\n| **开源免费** | ✅ MIT 协议，完全开源        | ⚠️ 部分闭源或有限制       |\n\n## 📸 预览\n\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003e桌面端\u003c/b\u003e\u003c/summary\u003e\n\n![深色模式](screenshots/homepage-dark.png)\n\n![亮色模式](screenshots/homepage-light.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e移动端\u003c/b\u003e\u003c/summary\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"screenshots/homepage-mobile.png\" width=\"375\" alt=\"移动端\"\u003e\n\u003c/p\u003e\n\n\u003c/details\u003e\n\n## 🔥 特色工具推荐\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd width=\"33%\"\u003e\n\n### 🔧 开发工具\n\n- [JSON 格式化](tools/dev/json-formatter.html) - 语法高亮，错误定位\n- [正则测试器](tools/dev/regex-tester.html) - 实时匹配，捕获组展示\n- [JWT 解码器](tools/dev/jwt-decoder.html) - 一键解析 Token\n\n\u003c/td\u003e\n\u003ctd width=\"33%\"\u003e\n\n### ⏰ 时间工具\n\n- [时间戳转换](tools/time/timestamp.html) - 支持多时区\n- [Cron 表达式](tools/time/cron-parser.html) - 可视化解析\n- [日期计算器](tools/time/date-calculator.html) - 日期推算\n\n\u003c/td\u003e\n\u003ctd width=\"33%\"\u003e\n\n### 🎨 媒体工具\n\n- [图片压缩](tools/media/image-compressor.html) - 本地压缩，不上传\n- [二维码生成](tools/generator/qrcode-generator.html) - 自定义样式\n- [Base64 编码](tools/dev/base64.html) - 文本/文件支持\n\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n[**查看全部 1001+ 个工具 ↓**](#工具列表-1023-个)\n\n---\n\n## 在线体验\n\n| 平台              | 链接                                    | 状态    |\n| ----------------- | --------------------------------------- | ------- |\n| **🌐 自定义域名** | https://tools.realtime-ai.chat          | ✅      |\n| GitHub Pages      | https://chicogong.github.io/html-tools/ | ✅      |\n| Cloudflare Pages  | https://htmltools-bkt.pages.dev         | ✅      |\n| Vercel            | https://html-tools-jade.vercel.app      | ✅      |\n| Render            | https://webutils-uj15.onrender.com      | ✅      |\n| Surge             | https://webutils.surge.sh               | ✅      |\n| Netlify           | https://localtools.netlify.app          | ⏸️ 暂停 |\n\n## 工具列表 (1023 个)\n\n### 开发工具 (61 个)\n\n| 工具                                                         | 描述                                                 |\n| ------------------------------------------------------------ | ---------------------------------------------------- |\n| [代码对比工具](tools/dev/code-diff.html)                     | 并排对比两段代码的差异，高亮显示变更                 |\n| [剪贴板查看器](tools/dev/clipboard-viewer.html)              | 查看剪贴板中的各种格式数据                           |\n| [进制转换器](tools/dev/number-base.html)                     | 二进制、八进制、十进制、十六进制互转                 |\n| [配色方案生成器](tools/dev/color-palette.html)               | 生成配色方案和调色板                                 |\n| [颜色对比度检查器](tools/dev/contrast-checker.html)          | 检查颜色对比度是否符合 WCAG 2.1 无障碍标准           |\n| [颜色转换器](tools/dev/color-converter.html)                 | HEX、RGB、HSL 颜色格式互转，可视化调色               |\n| [正则测试器](tools/dev/regex-tester.html)                    | 正则表达式测试，匹配高亮，捕获组展示                 |\n| [正则表达式速查](tools/dev/regex-cheatsheet.html)            | 正则表达式语法速查表                                 |\n| [ASCII 码表](tools/dev/ascii-table.html)                     | ASCII 码表速查                                       |\n| [ASCII 艺术](tools/dev/ascii-art.html)                       | 将文字转换为 ASCII 艺术字体                          |\n| [Base64 编解码](tools/dev/base64.html)                       | Base64 编码与解码，支持文本和文件                    |\n| [Basic Auth 生成器](tools/dev/basic-auth-generator.html)     | 生成 HTTP Basic Authentication 头部                  |\n| [Box Shadow 生成器](tools/dev/box-shadow.html)               | 可视化创建 CSS box-shadow，支持多层阴影和预设样式    |\n| [Chmod 计算器](tools/dev/chmod-calculator.html)              | Linux 文件权限计算，支持数字和符号模式互转           |\n| [Cron 生成器](tools/dev/cron-generator.html)                 | 可视化生成 Cron 表达式                               |\n| [CSS 格式化](tools/dev/css-formatter.html)                   | CSS 代码格式化和压缩                                 |\n| [cURL 转换器](tools/dev/curl-converter.html)                 | 将 cURL 命令转换为各种编程语言代码                   |\n| [Emoji 选择器](tools/dev/emoji-picker.html)                  | 浏览和复制各种 Emoji 表情符号                        |\n| [Glob 模式测试](tools/dev/glob-tester.html)                  | Glob 模式匹配测试                                    |\n| [Git 命令速查](tools/dev/git-cheatsheet.html)                | 常用 Git 命令速查表                                  |\n| [Hash 生成器](tools/dev/hash-generator.html)                 | 计算文本或文件的 MD5、SHA-1、SHA-256、SHA-512 哈希值 |\n| [Hex 查看器](tools/dev/hex-viewer.html)                      | 以十六进制查看文件或文本内容                         |\n| [HMAC 生成器](tools/dev/hmac-generator.html)                 | 生成 HMAC 消息认证码，支持多种哈希算法               |\n| [HTML 实体编解码](tools/dev/html-entity.html)                | HTML 实体编码与解码，常用实体参考                    |\n| [HTTP 状态码参考](tools/dev/http-status.html)                | HTTP 状态码速查，包含描述和使用场景                  |\n| [i18n Key 生成器](tools/dev/i18n-key-generator.html)         | 根据文本智能生成国际化 key                           |\n| [IP 地址转换器](tools/dev/ip-converter.html)                 | IP 地址格式转换，支持点分十进制、整数、二进制等      |\n| [JSON → TypeScript 类型生成](tools/dev/json-typescript.html) | JSON 转 TypeScript 类型                              |\n| [JSON 格式化](tools/dev/json-formatter.html)                 | JSON 格式化、压缩、校验，支持错误定位和语法高亮      |\n| [JSON 转 Go Struct](tools/dev/json-to-go.html)               | JSON 转 Go Struct                                    |\n| [JSON-YAML 转换](tools/dev/json-yaml.html)                   | JSON 与 YAML 格式互转，支持格式化输出                |\n| [JSONPath 查询](tools/dev/jsonpath-query.html)               | 使用 JSONPath 表达式查询 JSON 数据                   |\n| [JWT 解码器](tools/dev/jwt-decoder.html)                     | 解码 JWT Token，查看 Header、Payload 和签名信息      |\n| [Keycode 查看器](tools/dev/keycode.html)                     | 获取键盘按键的 KeyCode 值                            |\n| [MIME 类型查询](tools/dev/mime-lookup.html)                  | 查询文件扩展名对应的 MIME 类型                       |\n| [OTP 验证码生成器](tools/dev/otp-generator.html)             | 生成一次性密码 (OTP/TOTP)                            |\n| [Protobuf 解码器](tools/dev/protobuf-decoder.html)           | 解码 Protobuf 二进制数据，无需 schema 定义           |\n| [RSA 密钥对生成器](tools/dev/rsa-keygen.html)                | 生成 RSA 公私钥对                                    |\n| [Semver 比较器](tools/dev/semver-compare.html)               | 语义化版本号比较和验证                               |\n| [Slug 生成器](tools/dev/slug-generator.html)                 | 生成 URL 友好的 slug 字符串                          |\n| [SQL 格式化](tools/dev/sql-formatter.html)                   | SQL 语句格式化和美化                                 |\n| [TOML/YAML/JSON 转换器](tools/dev/toml-yaml-json.html)       | TOML、YAML、JSON 配置格式互相转换                    |\n| [Unicode 查询](tools/dev/unicode-lookup.html)                | Unicode 字符查询和信息                               |\n| [Unicode 转换器](tools/dev/unicode-converter.html)           | Unicode 编解码，支持 \\uXXXX、HTML 实体等格式         |\n| [URL 编解码](tools/dev/url-codec.html)                       | URL 编码与解码，支持完整 URL 或组件                  |\n| [URL 解析器](tools/dev/url-parser.html)                      | 解析 URL 各组成部分，提取查询参数                    |\n| [XML 格式化](tools/dev/xml-formatter.html)                   | XML 格式化和验证                                     |\n| [XML ⇄ JSON 转换](tools/dev/xml-json.html)                   | XML 与 JSON 格式互转                                 |\n| [HTML 格式化](tools/dev/html-formatter.html)                 | HTML 代码格式化、压缩和美化                          |\n| [JavaScript 格式化](tools/dev/js-formatter.html)             | JavaScript 代码格式化、压缩和美化                    |\n| [JSON Diff 对比](tools/dev/json-diff.html)                   | 智能对比两个 JSON 的结构和值差异                     |\n| [Border Radius 生成器](tools/dev/css-border-radius.html)     | CSS 圆角可视化生成器                                 |\n| [Flexbox 可视化编辑器](tools/dev/flexbox-playground.html)    | 可视化调整 Flexbox 布局属性，实时预览效果            |\n| [色盲模拟器](tools/dev/color-blindness.html)                 | 模拟不同类型色盲用户看到的颜色效果                   |\n| [CSS 动画生成器](tools/dev/css-animation.html)               | 可视化创建 CSS 关键帧动画，一键生成代码              |\n| [.gitignore 生成器](tools/dev/gitignore-generator.html)      | 选择编程语言和框架，快速生成 .gitignore 文件         |\n| [Punycode 转换器](tools/dev/punycode.html)                   | 国际化域名 (IDN) 与 Punycode 编码互转                |\n| [字符集转换器](tools/dev/charset-converter.html)             | 文本编码转换，支持 UTF-8/16、Hex、URL 编码等格式     |\n| [HTML 模板生成器](tools/dev/html-template.html)              | 生成 HTML5 页面模板，支持多种布局和 CSS 框架         |\n| [README 生成器](tools/dev/readme-generator.html)             | 快速生成项目 README.md，支持徽章、特性、安装说明等   |\n| [License 生成器](tools/dev/license-generator.html)           | 生成开源许可证文件，支持 MIT、Apache、GPL 等协议     |\n\n### 文本工具 (23 个)\n\n| 工具                                                  | 描述                                                |\n| ----------------------------------------------------- | --------------------------------------------------- |\n| [空白字符清理](tools/text/whitespace-cleaner.html)    | 清理多余空白、空行、行首尾空格                      |\n| [罗马数字转换器](tools/text/roman-numeral.html)       | 罗马数字转换                                        |\n| [摩尔斯电码](tools/text/morse-code.html)              | 文本与摩尔斯电码互转，支持音频播放                  |\n| [盘古之白](tools/text/pangu-spacing.html)             | 自动在中英文之间添加空格，优化排版                  |\n| [文本 Diff](tools/text/text-diff.html)                | 文本差异对比，左右并排显示，行内差异高亮            |\n| [文本大小写转换](tools/text/case-converter.html)      | 文本大小写转换                                      |\n| [文本加密/解密](tools/text/text-cipher.html)          | 多种古典加密算法：凯撒、ROT13、栅栏等               |\n| [文本排序](tools/text/text-sort.html)                 | 按字母、数字、长度等方式排序文本行                  |\n| [文本去重](tools/text/text-dedup.html)                | 去除重复行，支持保持顺序和忽略大小写                |\n| [文本随机化工具](tools/text/text-randomizer.html)     | 文本随机打乱                                        |\n| [文本统计增强版](tools/text/text-stats.html)          | 文本统计分析                                        |\n| [行排序工具](tools/text/line-sorter.html)             | 按字母、数字或自定义规则排序文本行                  |\n| [字符串转义](tools/text/string-escape.html)           | 字符串转义和反转义                                  |\n| [字数统计](tools/text/word-counter.html)              | 统计字符、单词、句子、段落数量                      |\n| [CSV ⇄ JSON 转换](tools/text/csv-json.html)           | CSV 与 JSON 互转                                    |\n| [Lorem Ipsum 生成器](tools/text/lorem-ipsum.html)     | 生成占位文本，支持段落、句子、单词模式              |\n| [Markdown 预览](tools/text/markdown-preview.html)     | 实时 Markdown 预览，支持 GFM 语法，可导出 HTML      |\n| [NATO 字母表](tools/text/nato-alphabet.html)          | NATO 音标字母表转换                                 |\n| [Slugify 工具](tools/text/slugify.html)               | 生成 URL slug                                       |\n| [HTML ⇄ Markdown 转换](tools/text/html-markdown.html) | HTML 与 Markdown 双向转换，支持表格、代码块、链接等 |\n| [Markdown 表格生成器](tools/text/markdown-table.html) | 可视化编辑 Markdown 表格，支持导入 CSV 数据         |\n| [文本对比增强版](tools/text/text-compare.html)        | 增强版文本对比，支持分栏/统一视图，忽略大小写和空白 |\n| [文本模板填充器](tools/text/template-filler.html)     | 文本模板变量填充，支持批量生成和 CSV 导入           |\n\n### 时间工具 (9 个)\n\n| 工具                                             | 描述                                         |\n| ------------------------------------------------ | -------------------------------------------- |\n| [倒计时器](tools/time/countdown.html)            | 设定倒计时或目标日期倒数，支持通知提醒       |\n| [工时计算器](tools/time/work-hours.html)         | 计算工作时长、加班时间和薪资估算             |\n| [年龄计算器](tools/time/age-calculator.html)     | 根据生日计算精确年龄、星座、生肖等信息       |\n| [日期计算器](tools/time/date-calculator.html)    | 计算日期差异、日期推算、工作日统计           |\n| [时间戳转换](tools/time/timestamp.html)          | 时间戳与日期互转，支持多种格式和时区         |\n| [时区转换器](tools/time/timezone-converter.html) | 在不同时区之间转换时间                       |\n| [世界时钟](tools/time/world-clock.html)          | 世界时钟                                     |\n| [Cron 表达式解析](tools/time/cron-parser.html)   | 解析 Cron 表达式，展示可读描述和下次执行时间 |\n| [秒表计时器](tools/time/stopwatch.html)          | 在线秒表，支持计次、暂停、毫秒精度显示       |\n\n### 生成器 (14 个)\n\n| 工具                                                    | 描述                                           |\n| ------------------------------------------------------- | ---------------------------------------------- |\n| [二维码生成器](tools/generator/qrcode-generator.html)   | 生成自定义颜色和大小的二维码                   |\n| [假数据生成器](tools/generator/fake-data.html)          | 生成测试用的假数据：姓名、邮箱、地址、电话等   |\n| [密码生成器](tools/generator/password-generator.html)   | 生成安全随机密码，支持自定义长度和字符类型     |\n| [随机数生成器](tools/generator/random-number.html)      | 随机数生成器                                   |\n| [条形码生成器](tools/generator/barcode.html)            | 生成多种格式条形码：Code128、EAN、UPC 等       |\n| [头像生成器](tools/generator/avatar.html)               | 生成多种风格的头像：首字母、像素、Identicon 等 |\n| [占位图生成器](tools/generator/placeholder-image.html)  | 生成自定义尺寸、颜色、文字的占位图片           |\n| [CSS 渐变生成器](tools/generator/gradient-css.html)     | 可视化创建 CSS 渐变，支持线性、径向和锥形渐变  |\n| [Mock 数据生成器](tools/generator/mock-data.html)       | 生成模拟测试数据                               |\n| [NanoID 生成器](tools/generator/nanoid-generator.html)  | 生成紧凑的 URL 安全短 ID，可自定义长度和字符集 |\n| [Open Graph 预览器](tools/generator/og-preview.html)    | Open Graph 预览                                |\n| [UUID/ULID 生成器](tools/generator/uuid-generator.html) | 生成 UUID v4/v7 和 ULID，支持批量生成          |\n| [WiFi 二维码生成器](tools/generator/wifi-qrcode.html)   | WiFi 二维码生成                                |\n| [二维码扫描器](tools/generator/qrcode-scanner.html)     | 在线二维码扫描器，支持摄像头扫描和图片上传     |\n\n### 媒体工具 (16 个)\n\n| 工具                                                        | 描述                                             |\n| ----------------------------------------------------------- | ------------------------------------------------ |\n| [摄像头拍照](tools/media/camera-demo.html)                  | 调用摄像头拍照并保存到本地                       |\n| [图片裁剪](tools/media/image-crop.html)                     | 在线裁剪图片，支持自由裁剪和预设比例             |\n| [图片格式批量转换](tools/media/image-format-converter.html) | 批量转换图片格式，支持 PNG/JPG/WebP/AVIF         |\n| [图片水印](tools/media/image-watermark.html)                | 为图片添加文字或图片水印，支持平铺               |\n| [图片压缩](tools/media/image-compressor.html)               | 本地图片压缩，支持调整质量、尺寸和格式转换       |\n| [图片压缩对比](tools/media/image-resize.html)               | 比较不同质量设置下的图片压缩效果                 |\n| [图片转 ASCII 艺术](tools/media/image-to-ascii.html)        | 图片转 ASCII 字符画                              |\n| [文字转语音](tools/media/text-to-speech.html)               | 使用 Web Speech API 将文字转为语音朗读           |\n| [音频可视化器](tools/media/audio-visualizer.html)           | 音频频谱可视化，支持波形、柱状等多种显示模式     |\n| [Base64 图片转换](tools/media/base64-image.html)            | 图片与 Base64 编码互转，支持多种格式             |\n| [EXIF 信息查看](tools/media/exif-viewer.html)               | 查看图片的 EXIF 元数据和拍摄信息                 |\n| [Favicon 生成器](tools/media/favicon-generator.html)        | 从文字或图片生成多尺寸 Favicon 图标              |\n| [ICO 图标查看器](tools/media/ico-viewer.html)               | 查看和提取 ICO 文件中的所有图标尺寸              |\n| [SVG 渲染器](tools/media/svg-render.html)                   | 将 SVG 代码渲染为 PNG/JPEG 图片                  |\n| [SVG 占位图生成器](tools/media/svg-placeholder.html)        | SVG 占位图生成                                   |\n| [截图美化工具](tools/media/screenshot-beautifier.html)      | 给截图添加精美背景、阴影和圆角，一键生成分享图片 |\n\n### 隐私安全 (8 个)\n\n| 工具                                                 | 描述                                              |\n| ---------------------------------------------------- | ------------------------------------------------- |\n| [密码强度检测](tools/privacy/password-strength.html) | 检测密码强度，分析安全性和破解时间估算            |\n| [日志脱敏](tools/privacy/log-masker.html)            | 自动识别并脱敏日志中的 IP、邮箱、手机号等敏感信息 |\n| [随机密钥生成器](tools/privacy/random-key.html)      | 随机密钥生成                                      |\n| [随机身份生成](tools/privacy/random-identity.html)   | 生成随机假身份信息用于测试和隐私保护              |\n| [文件哈希校验](tools/privacy/file-hash.html)         | 计算文件的 MD5、SHA-1、SHA-256 哈希值             |\n| [信用卡验证器](tools/privacy/credit-card.html)       | 信用卡号验证                                      |\n| [AES 加密解密](tools/privacy/encrypt-decrypt.html)   | 使用 AES-GCM 算法进行文本加密和解密               |\n| [RSA 加密解密](tools/privacy/rsa-tool.html)          | RSA 加密解密                                      |\n\n### 安全工具 (1 个)\n\n| 工具                                        | 描述         |\n| ------------------------------------------- | ------------ |\n| [URL安全化](tools/security/url-defang.html) | URL 脱敏处理 |\n\n### 网络工具 (7 个)\n\n| 工具                                                   | 描述                                       |\n| ------------------------------------------------------ | ------------------------------------------ |\n| [端口查询器](tools/network/port-lookup.html)           | 常用端口号速查，包含服务名称和协议说明     |\n| [HTTP 头解析器](tools/network/http-header-parser.html) | HTTP 请求头解析                            |\n| [IP 地址工具](tools/network/ip-tools.html)             | IP 地址工具集                              |\n| [IP 子网计算器](tools/network/subnet-calculator.html)  | 计算 CIDR 子网范围、可用 IP 数量和掩码转换 |\n| [MAC 地址查询](tools/network/mac-lookup.html)          | 查询 MAC 地址对应的设备厂商信息            |\n| [User Agent 解析器](tools/network/user-agent.html)     | User-Agent 检测                            |\n| [设备信息](tools/network/device-info.html)             | 查看设备、浏览器和系统的详细信息           |\n\n### 计算器 (9 个)\n\n| 工具                                                     | 描述                                       |\n| -------------------------------------------------------- | ------------------------------------------ |\n| [百分比计算器](tools/calculator/percentage.html)         | 多种百分比计算模式：求百分比、增减、占比等 |\n| [存储单位换算](tools/calculator/storage-converter.html)  | B/KB/MB/GB/TB/PB 存储单位互转              |\n| [进度计算器](tools/calculator/progress.html)             | 计算项目进度百分比和预计完成时间           |\n| [宽高比计算器](tools/calculator/aspect-ratio.html)       | 计算屏幕/图片宽高比，支持常见比例换算      |\n| [位运算计算器](tools/calculator/bitwise-calculator.html) | 位运算计算器                               |\n| [数学表达式计算器](tools/calculator/math-evaluator.html) | 计算复杂数学表达式，支持函数和常量         |\n| [BMI 计算器](tools/calculator/bmi-calculator.html)       | 计算身体质量指数，评估体重健康状况         |\n| [贷款计算器](tools/calculator/loan-calculator.html)      | 计算贷款月供、总利息，支持两种还款方式     |\n| [进制计算器](tools/calculator/base-calculator.html)      | 多进制转换和位运算计算器，支持可视化位操作 |\n\n### 转换器 (5 个)\n\n| 工具                                               | 描述                                    |\n| -------------------------------------------------- | --------------------------------------- |\n| [单位转换器](tools/converter/unit-converter.html)  | 长度、重量、温度、面积等多种单位换算    |\n| [文件大小计算器](tools/converter/file-size.html)   | 文件大小单位转换                        |\n| [JSON ⇄ YAML 转换](tools/converter/json-yaml.html) | JSON 和 YAML 双向转换，支持格式化和压缩 |\n| [CSV ⇄ JSON 转换](tools/converter/csv-json.html)   | CSV 和 JSON 双向转换，支持表格预览      |\n| [cURL to Code](tools/converter/curl-to-code.html)  | 将 cURL 命令转换为多种编程语言代码      |\n\n### 提取器 (3 个)\n\n| 工具                                                  | 描述                                         |\n| ----------------------------------------------------- | -------------------------------------------- |\n| [链接提取器](tools/extractor/link-extractor.html)     | 从文本提取链接                               |\n| [文本信息提取器](tools/extractor/text-extractor.html) | 提取文本中的特定内容                         |\n| [正则提取器](tools/extractor/regex-extractor.html)    | 使用正则表达式批量提取文本内容，支持导出 CSV |\n\n### AI 工具 (5 个)\n\n| 工具                                              | 描述                                                 |\n| ------------------------------------------------- | ---------------------------------------------------- |\n| [Prompt 模板库](tools/ai/prompt-templates.html)   | AI 提示词模板库                                      |\n| [Token 计数器](tools/ai/token-counter.html)       | 估算 AI 模型 Token 数量                              |\n| [Claude Skills 精选](tools/ai/claude-skills.html) | Anthropic 官方 Skills 集合，提升 Claude 特定任务表现 |\n| [MCP 配置指南](tools/ai/mcp-guide.html)           | Model Context Protocol 配置教程与热门服务器          |\n| [MCP 客户端大全](tools/ai/mcp-clients.html)       | 支持 MCP 的 AI 客户端、IDE 和开发工具汇总            |\n\n## SEO 与搜索引擎收录\n\n本项目已提交到多个搜索引擎站长平台，方便被搜索引擎收录。\n\n### 已提交平台\n\n| 平台                  | 状态      | 验证文件/方式                          |\n| --------------------- | --------- | -------------------------------------- |\n| Google Search Console | ✅ 已验证 | DNS 验证                               |\n| Bing Webmaster        | ✅ 已验证 | `BingSiteAuth.xml`                     |\n| 头条搜索站长平台      | ✅ 已验证 | `ByteDanceVerify.html` + meta tag      |\n| 百度资源平台          | ✅ 已验证 | meta tag                               |\n| 搜狗资源平台          | ✅ 已验证 | `sogousiteverification.txt`            |\n| IndexNow              | ✅ 已配置 | `03bdae3721054dfba79edd66e6157c3f.txt` |\n\n### SEO 相关文件\n\n| 文件                   | 用途                                                        |\n| ---------------------- | ----------------------------------------------------------- |\n| `sitemap.xml`          | 站点地图，包含所有工具页面 (150 URLs)                       |\n| `robots.txt`           | 搜索引擎爬虫规则                                            |\n| `llms.txt`             | AI/LLM 友好的网站描述                                       |\n| `CLAUDE.md`            | AI 辅助开发规范，项目架构和代码约定说明                     |\n| `index.html`           | 含 Schema.org 结构化数据 (WebApplication, FAQPage, WebSite) |\n| `manifest.json`        | PWA 配置文件，支持应用安装                                  |\n| `sw.js`                | Service Worker，离线缓存和请求拦截                          |\n| `offline.html`         | 离线回退页面，断网时显示已缓存工具列表                      |\n| `favicon.svg`          | 矢量品牌图标 (3×3 网格设计)                                 |\n| `favicon-16x16.png`    | 浏览器标签页图标                                            |\n| `favicon-32x32.png`    | 高清浏览器图标                                              |\n| `apple-touch-icon.png` | iOS/macOS 主屏幕图标 (180×180)                              |\n\n### SEO 优化特性 (2025-12-27)\n\n- ✅ **Favicon \u0026 品牌识别**: 简约 3×3 网格设计,多尺寸支持\n- ✅ **PWA 支持**: 可安装为原生应用,4 个快捷方式到常用工具\n- ✅ **结构化数据**:\n  - WebApplication Schema (详细应用信息)\n  - FAQPage Schema (8 个常见问题)\n  - WebSite Schema (站内搜索功能)\n  - BreadcrumbList Schema (工具页面面包屑导航)\n- ✅ **性能优化**: 字体 preload + async 加载,无渲染阻塞\n- ✅ **Open Graph**: 完整社交媒体预览支持 (Twitter, Facebook, LinkedIn)\n- ✅ **移动优化**: viewport meta, touch icons, PWA installable\n\n**预计 Lighthouse 评分**: SEO 98/100 | Performance 90/100 | Accessibility 95/100\n\n## 使用方式\n\n### 在线使用\n\n访问 GitHub Pages: https://chicogong.github.io/html-tools/\n\n### 本地使用\n\n1. Clone 仓库或下载单个 HTML 文件\n2. 直接在浏览器中打开即可使用\n\n```bash\ngit clone https://github.com/chicogong/html-tools.git\ncd html-tools\nopen index.html  # macOS\n# 或者\nstart index.html  # Windows\n```\n\n### 部署到 GitHub Pages\n\n1. Fork 本仓库\n2. 进入 Settings → Pages\n3. Source 选择 \"GitHub Actions\"\n4. 等待 CI 运行完成后即可访问 `https://你的用户名.github.io/html-tools/`\n\n### 部署到其他平台\n\n本项目已配置支持多平台部署：\n\n- **Vercel**: 直接导入 GitHub 仓库即可\n- **Netlify**: 直接导入 GitHub 仓库即可\n- **Cloudflare Pages**: 直接连接 GitHub 仓库即可\n\n配置文件：\n\n- `vercel.json` - Vercel 配置\n- `netlify.toml` - Netlify 配置\n- `_headers` / `_redirects` - Cloudflare Pages 配置\n\n## 通用功能\n\n每个工具都支持以下功能：\n\n- **粘贴**: 从剪贴板粘贴内容\n- **复制输出**: 将处理结果复制到剪贴板\n- **分享链接**: 生成包含当前输入内容的 URL，方便分享\n- **清空**: 清空输入输出并重置状态\n- **自动保存**: 输入内容自动保存到 URL hash，防止意外丢失\n\n## 技术栈\n\n- 纯 HTML/CSS/JavaScript\n- Web APIs:\n  - Web Crypto API - 加密功能 (AES-GCM, RSA, HMAC)\n  - Web Speech API - 语音合成\n  - Web Audio API - 音频可视化\n  - Canvas API - 图片生成\n- CDN 依赖：\n  - [js-yaml](https://github.com/nodeca/js-yaml) - YAML 解析\n  - [jsdiff](https://github.com/kpdecker/jsdiff) - 文本 Diff\n  - [marked](https://github.com/markedjs/marked) - Markdown 渲染\n  - [DOMPurify](https://github.com/cure53/DOMPurify) - XSS 防护\n  - [QRCode.js](https://github.com/soldair/node-qrcode) - 二维码生成\n  - [JsBarcode](https://github.com/lindell/JsBarcode) - 条形码生成\n  - [@iarna/toml](https://github.com/iarna/iarna-toml) - TOML 解析\n\n## 开发\n\n### 环境准备\n\n```bash\n# Clone 仓库\ngit clone https://github.com/chicogong/html-tools.git\ncd html-tools\n\n# 安装依赖（仅用于 lint）\nnpm install\n```\n\n### 本地预览\n\n无需任何构建步骤，直接用浏览器打开 HTML 文件即可：\n\n```bash\n# macOS\nopen index.html\n\n# Windows\nstart index.html\n\n# Linux\nxdg-open index.html\n\n# 或使用任意静态服务器\nnpx serve .\npython -m http.server 8000\n```\n\n### Lint 检查\n\n```bash\n# 运行全部检查\nnpm run lint\n\n# 单独检查\nnpm run lint:html  # HTMLHint\nnpm run lint:css   # Stylelint\nnpm run lint:js    # ESLint\n\n# 代码格式化\nnpm run format        # 格式化所有文件\nnpm run format:check  # 检查格式\n```\n\n### 工具同步\n\n工具列表使用 `tools.json` 作为唯一数据源，通过同步脚本更新 `index.html`：\n\n```bash\n# 同步 tools.json 到 index.html\nnpm run sync:tools\n```\n\nCI 会自动检查同步状态，如果 `tools.json` 和 `index.html` 不一致，构建会失败。\n\n### 添加新工具\n\n1. 在 `tools/` 下选择合适的分类目录（dev/text/time/generator/privacy/media/security/network/calculator/extractor/ai）\n2. 创建新的 HTML 文件，遵循单文件模式\n3. 在 `tools.json` 中添加工具元数据：\n   ```json\n   {\n     \"path\": \"tools/\u003ccategory\u003e/\u003cfile\u003e.html\",\n     \"name\": \"工具名称\",\n     \"category\": \"\u003ccategory\u003e\",\n     \"keywords\": \"关键词1 关键词2 keyword\"\n   }\n   ```\n4. 运行 `npm run sync:tools` 同步到 index.html\n5. 更新 `README.md` 工具列表\n6. 运行 `npm run lint` 确保代码规范\n7. 提交更改（CI 会检查同步状态）\n\n### 工具模板\n\n每个工具应遵循以下模式：\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"zh\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e\n    \u003ctitle\u003e工具名称 - HTML Tools\u003c/title\u003e\n    \u003cstyle\u003e\n      /* 内联 CSS */\n    \u003c/style\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003c!-- HTML 结构 --\u003e\n\n    \u003cscript\u003e\n      // 内联 JavaScript\n\n      // URL 状态持久化\n      function saveState() {\n        const state = {\n          /* 状态数据 */\n        };\n        history.replaceState(null, '', '#' + btoa(JSON.stringify(state)));\n      }\n\n      function loadState() {\n        try {\n          const hash = location.hash.slice(1);\n          if (hash) return JSON.parse(atob(hash));\n        } catch (e) {}\n        return null;\n      }\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n关键原则：\n\n- **单文件**: JS/CSS 全部内联，不依赖外部文件\n- **CDN 依赖**: 如需第三方库，使用 CDN（推荐 cdnjs/unpkg/jsdelivr）\n- **URL 状态**: 支持通过 URL hash 保存和恢复状态\n- **纯前端**: 所有处理在浏览器完成，不上传数据\n- **响应式**: 支持移动端和桌面端\n- **深色模式**: 支持明暗主题切换\n\n## 贡献指南\n\n欢迎贡献新工具或改进现有工具！\n\n### 贡献方式\n\n1. **报告 Bug**: 在 [Issues](https://github.com/chicogong/html-tools/issues) 中描述问题\n2. **建议功能**: 在 Issues 中提出新工具或功能建议\n3. **提交代码**: Fork 仓库，创建分支，提交 PR\n\n### 提交 PR\n\n```bash\n# Fork 并 clone 你的仓库\ngit clone https://github.com/你的用户名/html-tools.git\ncd html-tools\n\n# 创建功能分支\ngit checkout -b feature/new-tool\n\n# 开发并测试\n# ...\n\n# 运行检查\nnpm run lint          # Lint 检查\nnpm run format:check  # 格式检查\n\n# 提交代码\ngit add .\ngit commit -m \"feat: add xxx tool\"\n\n# 推送到你的仓库\ngit push origin feature/new-tool\n\n# 在 GitHub 上创建 Pull Request\n```\n\n### Commit 规范\n\n使用 [Conventional Commits](https://www.conventionalcommits.org/) 格式：\n\n- `feat: 新功能`\n- `fix: Bug 修复`\n- `docs: 文档更新`\n- `style: 代码格式（不影响功能）`\n- `refactor: 重构`\n- `perf: 性能优化`\n- `test: 测试相关`\n- `chore: 构建/工具链`\n\n### 代码规范\n\n- HTML: 遵循 HTMLHint 规则\n- CSS: 遵循 Stylelint 规则\n- JS: 遵循 ESLint 规则\n- 使用 2 空格缩进\n- 中文注释，英文代码\n\n## CI/CD\n\n- **Lint**: 每次 PR 自动运行 HTMLHint + Stylelint + ESLint\n- **Tools Sync Check**: CI 检查 tools.json 与 index.html 是否同步\n- **Deploy**: 每次推送到 master 自动部署到 GitHub Pages\n- **Release**: 推送 tag 自动创建 Release\n- **Dependabot**: 自动检查依赖更新\n\n## 灵感来源\n\n本项目受 [Simon Willison](https://simonwillison.net/) 的 [tools.simonwillison.net](https://tools.simonwillison.net/) 和他的博客文章 [Useful patterns for building HTML tools](https://simonwillison.net/2025/Jan/13/useful-patterns-for-html-tools/) 启发。\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchicogong%2Fhtml-tools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchicogong%2Fhtml-tools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchicogong%2Fhtml-tools/lists"}