HTML 压缩器

使用快速 HTML Minifier 优化页面加载速度

当现代 Web 浏览器请求网页时，Web 服务器会使用包含结构、布局和样式指令的文档进行响应。虽然开发人员依靠文件中宽敞的结构缩进、广泛的换行符、代码注释和详细文档来构建可读的架构，但编译器和客户端浏览器不需要这些以人为中心的细节。事实上，每个空行、空格、制表符和 HTML/CSS 注释都算作一个额外字节的开销。对于复杂的 Web 平台，这些次要的格式化元素可能会累积并使文件大小膨胀 10% 到 30%，从而减慢加载时间并降低 Core Web Vitals。

这就是 html 压缩器 的用武之地。我们的工具会解析您的标记并去除非必要的字符，而不改变代码的渲染行为。通过压缩 HTML 文档的结构，您可以显着改善首字节时间 (TTFB)、加快初始渲染阶段并提高整体加载速度。

了解内部管道：如何安全地在线压缩 HTML 文件

HTML 缩小的一个主要挑战是确保该过程不会破坏依赖间距的元素。例如，段落、代码列表、输入区域和预格式化块需要精确的空白布局才能正确呈现。如果缩小器盲目地折叠

、 或 </code> 等标签内的空格，它将破坏面向用户的文本的格式。</p><p>为了绕过这个问题，我们的工具实现了一个安全的处理管道：</p><p>这种多步骤方法可确保您的视觉内容、交互元素和表单完美运行，同时实现尽可能高的压缩比。</p><h3 class="text-xl font-bold tracking-tight text-[#171717] dark:text-white font-sans">高级优化：脚本和样式表的精细控制</h3><p>大多数现代 Web 模板都包含原始 HTML 结构、嵌入式样式和内联脚本标记的组合。当您使用此工具<strong>在线压缩html</strong>时，您可以单独控制每个压缩阶段：</p><ul class="list-disc list-inside space-y-2"> <li><strong>折叠空白</strong>：折叠整个布局文档中的多余空格、换行符和缩进。</li><li><strong>删除注释</strong>：删除所有 HTML 注释。开发人员经常留下有关布局嵌套的注释，这给生产资产增加了不必要的重量。删除这些注释可以使客户端代码保持干净和专业。</li><li><strong>缩小内联 JS</strong>：从 <code><script></code> 标记中删除内联开发人员注释和换行符，使用安全的注释剥离算法来减少 JS 负载大小。</li><li><strong>缩小内联 CSS</strong>：通过删除 CSS 注释、大括号周围的多余空格以及右括号前不必要的分号来压缩内联样式。</li> </ul><p>通过使用这四个开关，您可以自定义缩小过程以满足您的工作区要求，无论您是准备生产代码、模板还是原始片段。</p><h3 class="text-xl font-bold tracking-tight text-[#171717] dark:text-white font-sans">评估压缩权衡和边缘情况</h3><p>虽然缩小 HTML 可以带来明显的性能回报，但了解何时以及如何为复杂项目配置该工具也很重要。例如，当使用服务器端渲染 (SSR) 框架或模板引擎（如 PHP、JSP 或 Jinja）时，模板包含特殊语法标记（例如，带有括号语法的标记）。如果服务器引擎严格执行间距规则，则缩小包含这些语法组件的原始模板有时会导致解析问题或导致视觉错误。在这种情况下，强烈建议在最终生成的静态 HTML 输出而不是源模板代码上运行压缩器。此外，当在 HTML 文件中使用内联 CSS 样式时，浏览器布局引擎有时可能需要特定的间距来解析自定义 hack。如果您在压缩后发现样式异常，请关闭内联 CSS 缩小选项以验证样式表格式是否是问题的根源。通过尝试各个切换选项，您可以在积极减少文件大小和代码库稳定性之间实现完美平衡。</p><h3 class="text-xl font-bold tracking-tight text-[#171717] dark:text-white font-sans">客户端执行：100% 安全且私密</h3><p>使用在线开发实用程序时，数据隐私是一个主要问题。许多 Web 工具会将代码有效负载上传到远程服务器进行处理，这存在将敏感 API 端点、配置密钥、数据库架构或专有模板暴露给第三方服务器的风险。</p><p>我们通过在客户端执行所有操作来优先考虑安全性。我们的工具完全在您的本地浏览器沙箱中运行。 HTML 缩小算法、格式化逻辑和语法突出显示作为 DOM 中的本地 JavaScript 循环运行。不会将任何数据传输到外部服务器，从而确保您的预制作模板、内部表单和代码段保持完全私密。</p> </div> <!-- FAQ Sidebar --> <div class="space-y-6"> <h2 class="text-lg font-bold tracking-tight text-[#171717] dark:text-white font-sans"> 常见问题 </h2> <div class="space-y-4"> <div class="border-b border-[#ebebeb] dark:border-[#1f1f1f] pb-3"> <h4 class="text-sm font-semibold text-[#171717] dark:text-white mb-1.5">为什么要缩小 HTML 代码？</h4> <p class="text-xs text-[#4d4d4d] dark:text-[#888] leading-relaxed">缩小通过删除不必要的字符（例如多个空格、换行符、制表符缩进和代码注释）来减小 HTML 文件大小。通过减少从 Web 服务器或内容交付网络 (CDN) 发送到浏览器的总体有效负载，可以提高页面加载速度。这直接意味着更低的首字节时间 (TTFB)、更快的绘制里程碑（例如最大内容绘制 (LCP)）、减少移动用户的带宽消耗以及搜索引擎优化 (SEO) 算法的总体积极信号。</p> </div><div class="border-b border-[#ebebeb] dark:border-[#1f1f1f] pb-3"> <h4 class="text-sm font-semibold text-[#171717] dark:text-white mb-1.5">此 HTML 压缩器是否会损害我的数据隐私？</h4> <p class="text-xs text-[#4d4d4d] dark:text-[#888] leading-relaxed">不，您的源代码是完全安全的。此 HTML 压缩实用程序完全在您的 Web 浏览器中处理代码。不会将 HTML 结构、内联脚本、样式或配置数据上传到远程服务器或外部端点。由于所有处理都使用 JavaScript 在客户端运行，因此您可以在企业门户网站、预生产模板或包含内部 API 的页面上安全地使用它，而无需担心数据泄漏或跟踪。</p> </div><div class="border-b border-[#ebebeb] dark:border-[#1f1f1f] pb-3"> <h4 class="text-sm font-semibold text-[#171717] dark:text-white mb-1.5">HTML 缩小会破坏内联 JavaScript 或 CSS 样式吗？</h4> <p class="text-xs text-[#4d4d4d] dark:text-[#888] leading-relaxed">一般来说，如果您的语法有效，标准缩小不会破坏内联代码。我们的 HTML 压缩器具有针对内联 JavaScript 和内联 CSS 的独特切换配置。启用后，它会在脚本和样式标记中应用轻型空白折叠和注释删除，同时保持语法完整性。如果您的项目使用复杂的模板语法或严格的脚本脚本，您可以停用内联 JS 或 CSS 缩小，以准确保留这些部分的编写方式。</p> </div><div class="border-b border-[#ebebeb] dark:border-[#1f1f1f] pb-3"> <h4 class="text-sm font-semibold text-[#171717] dark:text-white mb-1.5">该工具如何保护预先格式化的文本和代码块？</h4> <p class="text-xs text-[#4d4d4d] dark:text-[#888] leading-relaxed"><pre>、<code> 和 <textarea> 等元素内的代码块依赖文字空白字符来正确格式化其内容。这些标签内的折叠空格会破坏代码呈现。为了防止这种情况，我们的处理引擎会在压缩之前提取这些块并用唯一的临时占位符替换它们。一旦外部 HTML 布局被缩小，占位符就会被替换为原始的、未修改的代码块，并保持其格式。</p> </div><div class="border-b border-[#ebebeb] dark:border-[#1f1f1f] pb-3"> <h4 class="text-sm font-semibold text-[#171717] dark:text-white mb-1.5">HTML 缩小和 Gzip 压缩有什么区别？</h4> <p class="text-xs text-[#4d4d4d] dark:text-[#888] leading-relaxed">HTML 缩小是一种构建时或处理时优化，可直接从源代码中删除冗余文本字符（例如开发人员注释、制表符和额外空格）。 Gzip（或 Brotli）压缩是一种服务器端运行时压缩算法，它在通过 HTTP 传输文本负载之前使用基于字典的算法对其进行压缩。这两种方法是互补的；缩小 HTML 会删除无用的标记，然后 Gzip 压缩生成的精简代码，从而最大限度地提高加载速度。</p> </div> </div> </div> </div> </div> </main> <script id="ui-translations" type="application/json">{"Input HTML":"输入HTML","Sample":"样品","Clear":"清除","Collapse Whitespace":"折叠空白","Remove Comments":"删除评论","Minify Inline JS":"缩小内联 JS","Minify Inline CSS":"缩小内联 CSS","0 chars":"0 个字符","Minify HTML":"缩小 HTML","Minified Output":"最小化输出","Copy":"复制","Download":"下载","Output will appear here…":"输出将出现在这里…","Copied!":"复制了！","Paste your HTML code here…":"将您的 HTML 代码粘贴到此处…","Copied to clipboard!":"已复制到剪贴板！","Copy failed — try Ctrl+C":"复制失败 — 尝试 Ctrl+C","Minified HTML file downloaded!":"下载缩小的 HTML 文件！","Failed to process":"处理失败","{0} char{1}":"{0} 个字符{1}","{0} chars":"{0} 个字符","{0} chars · {1}{2}% size reduction":"{0} 个字符 · 大小减少 {1}{2}%","<span class=\"text-red-500 font-semibold\">✗ Minification Error</span>\\n\\n<span class=\"text-red-400\">{0}</span>":"<span class=\"text-red-500 font-semibold\">✗ 缩小错误</span>\\n\\n<span class=\"text-red-400\">{0}</span>"}</script> <footer class="w-full border-t border-[#ebebeb] bg-white dark:border-[#1f1f1f] dark:bg-[#000000] transition-colors duration-200"> <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16"> <div class="xl:grid xl:grid-cols-4 xl:gap-8"> <!-- Brand description --> <div class="space-y-4 xl:col-span-1"> <a href="/zh/" class="flex items-center"> <!-- Transparent logo — works on both light & dark --> <img src="/logo-transparent.png" alt="say.tools logo" class="h-[48px] md:h-[96px] w-auto"> </a> <p class="text-sm text-[#4d4d4d] dark:text-[#888] max-w-xs"> 您获取快速、免费和安全网络工具的终极目的地。完全在客户端构建，以实现最大隐私保护。 </p> <div class="flex items-center gap-2 pt-2"> <span class="w-2 h-2 rounded-full bg-green-400 block flex-shrink-0"></span> <span class="text-xs font-mono text-[#888]">所有工具均在客户端运行</span> </div> </div> <!-- Links columns --> <div class="mt-12 grid grid-cols-3 gap-8 xl:col-span-3 xl:mt-0"> <div> <h3 class="text-xs font-semibold uppercase tracking-wider text-[#171717] dark:text-white font-mono">工具</h3> <ul role="list" class="mt-4 space-y-2"> <li><a href="/zh/text/word-counter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">字数统计器</a></li> <li><a href="/zh/developer/qr-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">二维码生成器</a></li> <li><a href="/zh/developer/password-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">密码生成器</a></li> <li><a href="/zh/developer/uuid-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费在线批量 UUID 生成器</a></li> <li><a href="/zh/developer/epoch-converter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Unix 纪元时间戳转换器</a></li> <li><a href="/zh/developer/jwt-debugger" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">JSON Web 令牌调试器</a></li> <li><a href="/zh/calculators/unit-converter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">单位换算</a></li> <li><a href="/zh/design/color-picker" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">颜色选择器和调色板生成器</a></li> <li><a href="/zh/calculators/tip-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">在线小费计算器</a></li> <li><a href="/zh/calculators/scientific-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">科学计算器</a></li> <li><a href="/zh/calculators/fraction-to-decimal" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">分数到小数计算器</a></li> <li><a href="/zh/calculators/decimal-to-fraction" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">小数到分数计算器</a></li> <li><a href="/zh/developer/json-validator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费在线 JSON 验证器和解析器</a></li> <li><a href="/zh/developer/css-minifier" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费在线 CSS 代码压缩器</a></li> <li><a href="/zh/developer/base64-to-image" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费在线 Base64 到图像解码器</a></li> <li><a href="/zh/productivity/merge-pdf" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费在线 PDF 合并实用程序</a></li> <li><a href="/zh/productivity/word-to-pdf" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费在线 Word 到 PDF 转换器</a></li> <li><a href="/zh/productivity/split-pdf" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费在线 PDF 分割器和页面提取器</a></li> <li><a href="/zh/developer/whois-lookup" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费的客户端 Whois 查找工具</a></li> <li><a href="/zh/developer/dns-lookup" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费的实时 DNS 记录查找实用程序</a></li> </ul> </div> <div> <h3 class="text-xs font-semibold uppercase tracking-wider text-[#171717] dark:text-white font-mono">更多工具</h3> <ul role="list" class="mt-4 space-y-2"> <li><a href="/zh/calculators/date-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">日期计算器</a></li> <li><a href="/zh/calculators/bmi-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">体重指数计算器</a></li> <li><a href="/zh/developer/base64-converter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Base64 编码器和解码器</a></li> <li><a href="/zh/developer/sql-formatter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">SQL格式化程序</a></li> <li><a href="/zh/developer/user-agent-parser" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">用户代理解析器</a></li> <li><a href="/zh/text/morse-code-translator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">摩尔斯电码翻译器</a></li> <li><a href="/zh/design/screen-resolution" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">屏幕和视口检查器</a></li> <li><a href="/zh/text/text-utils" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">文本大小写转换器和实用程序</a></li> <li><a href="/zh/developer/json-formatter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">JSON 格式化器和验证器</a></li> <li><a href="/zh/developer/hash-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">哈希生成器</a></li> <li><a href="/zh/calculators/lcm-finder" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">LCM（最小公倍数）计算器</a></li> <li><a href="/zh/calculators/gcd-finder" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">GCD计算器</a></li> <li><a href="/zh/calculators/prime-checker" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">质数检查器</a></li> <li><a href="/zh/developer/url-parser" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费在线 URL 解析器和调试器</a></li> <li><a href="/zh/developer/http-headers" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费在线 HTTP 请求标头查看器</a></li> <li><a href="/zh/developer/qr-decoder" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费在线二维码解码器和扫描仪</a></li> <li><a href="/zh/developer/cron-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Cron 表达式生成器</a></li> <li><a href="/zh/design/png-to-svg" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费在线 PNG 到 SVG 矢量转换器</a></li> <li><a href="/zh/calculators/metric-conversion" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费在线公制转换工具</a></li> <li><a href="/zh/text/markdown-to-html" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费在线 Markdown 到 HTML 转换器</a></li> <li><a href="/zh/text/html-to-markdown" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费在线 HTML 到 Markdown 转换器</a></li> <li><a href="/zh/developer/json-minifier" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费在线 JSON 压缩器</a></li> </ul> </div> <div> <h3 class="text-xs font-semibold uppercase tracking-wider text-[#171717] dark:text-white font-mono">其他工具</h3> <ul role="list" class="mt-4 space-y-2"> <li><a href="/zh/productivity/timer" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">在线计时器和秒表</a></li> <li><a href="/zh/productivity/stopwatch" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">在线秒表</a></li> <li><a href="/zh/text/lorem-ipsum" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Lorem Ipsum 生成器</a></li> <li><a href="/zh/calculators/percentage-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">百分比计算器</a></li> <li><a href="/zh/text/markdown-preview" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Markdown 预览器</a></li> <li><a href="/zh/calculators/random-number" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">随机数生成器</a></li> <li><a href="/zh/design/image-compressor" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">图像压缩器</a></li> <li><a href="/zh/design/hex-to-rgb" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">十六进制和 RGB 转换器</a></li> <li><a href="/zh/design/aspect-ratio-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">纵横比计算器</a></li> <li><a href="/zh/calculators/quadratic-solver" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">二次方程求解器</a></li> <li><a href="/zh/calculators/date-difference" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">日期之间的天数计算器</a></li> <li><a href="/zh/calculators/fibonacci-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">斐波那契数列生成器</a></li> <li><a href="/zh/design/svg-to-png" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费在线 SVG 转 PNG 光栅器</a></li> <li><a href="/zh/design/image-converter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费在线本地图像转换器</a></li> <li><a href="/zh/design/placeholder-image" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费在线占位符图像生成器</a></li> <li><a href="/zh/design/contrast-checker" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费在线颜色对比度检查器</a></li> <li><a href="/zh/design/hsl-to-rgb" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费在线 HSL 到 RGB 颜色转换器</a></li> <li><a href="/zh/calculators/gratuity-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费在线小费和小费计算器</a></li> <li><a href="/zh/text/character-counter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费在线字符计数器</a></li> <li><a href="/zh/text/sentence-counter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费在线句子计数器</a></li> <li><a href="/zh/text/paragraph-counter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费在线段落计数器</a></li> <li><a href="/zh/text/line-counter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">免费在线线路计数器</a></li> </ul> <div class="mt-6 space-y-2"> <h3 class="text-xs font-semibold uppercase tracking-wider text-[#171717] dark:text-white font-mono">公司</h3> <ul role="list" class="space-y-2"> <li><a href="/zh/about" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">关于我们</a></li> <li><a href="/zh/contact" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">联系我们</a></li> <li><a href="/zh/privacy" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">隐私政策</a></li> <li><a href="/zh/terms" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">服务条款</a></li> </ul> </div> </div> </div> </div> <!-- Bottom copyrights --> <div class="mt-12 border-t border-[#ebebeb] pt-8 dark:border-[#1f1f1f] flex flex-col sm:flex-row items-center justify-between gap-4"> <p class="text-xs text-[#888] dark:text-[#888] font-mono">
© 2026 say.tools。版权所有。工具 100% 在客户端运行。 </p> <div class="flex flex-col sm:flex-row items-center gap-4 text-xs font-mono text-[#888] dark:text-[#888] select-none"> <span class="flex items-center gap-1.5">
Made with <span class="text-[#ff4b4b]">❤️</span> by <a href="https://x.com/NiranjanBuilds" target="_blank" rel="noopener noreferrer" class="underline hover:text-[#171717] dark:hover:text-white font-semibold">NiranjanBuilds</a> <a href="https://x.com/NiranjanBuilds" target="_blank" rel="noopener noreferrer" class="hover:text-[#171717] dark:hover:text-white inline-flex items-center" aria-label="X (Twitter)">𝕏</a> </span> <span class="hidden sm:inline w-px h-3 bg-[#ebebeb] dark:bg-[#1f1f1f]"></span> <a href="mailto:support@say.tools" class="hover:underline">support@say.tools</a> </div> </div> </div> </footer>  <script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"为什么要缩小 HTML 代码？","acceptedAnswer":{"@type":"Answer","text":"缩小通过删除不必要的字符（例如多个空格、换行符、制表符缩进和代码注释）来减小 HTML 文件大小。通过减少从 Web 服务器或内容交付网络 (CDN) 发送到浏览器的总体有效负载，可以提高页面加载速度。这直接意味着更低的首字节时间 (TTFB)、更快的绘制里程碑（例如最大内容绘制 (LCP)）、减少移动用户的带宽消耗以及搜索引擎优化 (SEO) 算法的总体积极信号。"}},{"@type":"Question","name":"此 HTML 压缩器是否会损害我的数据隐私？","acceptedAnswer":{"@type":"Answer","text":"不，您的源代码是完全安全的。此 HTML 压缩实用程序完全在您的 Web 浏览器中处理代码。不会将 HTML 结构、内联脚本、样式或配置数据上传到远程服务器或外部端点。由于所有处理都使用 JavaScript 在客户端运行，因此您可以在企业门户网站、预生产模板或包含内部 API 的页面上安全地使用它，而无需担心数据泄漏或跟踪。"}},{"@type":"Question","name":"HTML 缩小会破坏内联 JavaScript 或 CSS 样式吗？","acceptedAnswer":{"@type":"Answer","text":"一般来说，如果您的语法有效，标准缩小不会破坏内联代码。我们的 HTML 压缩器具有针对内联 JavaScript 和内联 CSS 的独特切换配置。启用后，它会在脚本和样式标记中应用轻型空白折叠和注释删除，同时保持语法完整性。如果您的项目使用复杂的模板语法或严格的脚本脚本，您可以停用内联 JS 或 CSS 缩小，以准确保留这些部分的编写方式。"}},{"@type":"Question","name":"该工具如何保护预先格式化的文本和代码块？","acceptedAnswer":{"@type":"Answer","text":"<pre>、<code> 和 <textarea> 等元素内的代码块依赖文字空白字符来正确格式化其内容。这些标签内的折叠空格会破坏代码呈现。为了防止这种情况，我们的处理引擎会在压缩之前提取这些块并用唯一的临时占位符替换它们。一旦外部 HTML 布局被缩小，占位符就会被替换为原始的、未修改的代码块，并保持其格式。"}},{"@type":"Question","name":"HTML 缩小和 Gzip 压缩有什么区别？","acceptedAnswer":{"@type":"Answer","text":"HTML 缩小是一种构建时或处理时优化，可直接从源代码中删除冗余文本字符（例如开发人员注释、制表符和额外空格）。 Gzip（或 Brotli）压缩是一种服务器端运行时压缩算法，它在通过 HTTP 传输文本负载之前使用基于字典的算法对其进行压缩。这两种方法是互补的；缩小 HTML 会删除无用的标记，然后 Gzip 压缩生成的精简代码，从而最大限度地提高加载速度。"}}]}</script>  <script type="module" src="/_astro/html-minifier.astro_astro_type_script_index_0_lang.Gbp66YcM.js"></script>  <!-- STICKY BOTTOM NAVIGATION BAR --> <div class="lg:hidden fixed bottom-0 left-0 right-0 z-40 bg-white/80 dark:bg-black/80 backdrop-blur-lg border-t border-[#e5e5e5] dark:border-[#1f1f1f] px-6 py-1.5" style="padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px))"> <div class="flex items-center justify-around h-12"> <!-- Home Button --> <a href="/zh/" class="flex flex-col items-center justify-center text-[#4d4d4d] dark:text-[#888] hover:text-[#007cf0] dark:hover:text-[#007cf0] transition-colors w-16 select-none"> <svg class="w-5 h-5 mb-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path> </svg> <span class="text-[10px] font-semibold font-sans">首页</span> </a> <!-- Tools Button --> <button id="bottom-nav-tools-btn" class="flex flex-col items-center justify-center text-[#4d4d4d] dark:text-[#888] hover:text-[#007cf0] dark:hover:text-[#007cf0] transition-colors w-16 cursor-pointer select-none"> <svg class="w-5 h-5 mb-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path> </svg> <span class="text-[10px] font-semibold font-sans">工具</span> </button> <!-- Theme Toggle Button --> <button class="theme-toggle flex flex-col items-center justify-center text-[#4d4d4d] dark:text-[#888] hover:text-[#007cf0] dark:hover:text-[#007cf0] transition-colors w-16 cursor-pointer select-none" aria-label="Toggle Theme"> <!-- Sun Icon --> <svg class="theme-toggle-light-icon hidden w-5 h-5 mb-0.5 text-current" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m0-12.728l.707.707m12.728 12.728l.707-.707M12 8a4 4 0 100 8 4 4 0 000-8z"></path> </svg> <!-- Moon Icon --> <svg class="theme-toggle-dark-icon hidden w-5 h-5 mb-0.5 text-current" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path> </svg> <span class="text-[10px] font-semibold font-sans">主题</span> </button> <!-- More Button --> <button id="bottom-nav-more-btn" class="flex flex-col items-center justify-center text-[#4d4d4d] dark:text-[#888] hover:text-[#007cf0] dark:hover:text-[#007cf0] transition-colors w-16 cursor-pointer select-none"> <svg class="w-5 h-5 mb-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="1"></circle> <circle cx="12" cy="5" r="1"></circle> <circle cx="12" cy="19" r="1"></circle> </svg> <span class="text-[10px] font-semibold font-sans">更多</span> </button> </div> </div> <!-- TOOLS DRAWER OVERLAY --> <div id="tools-sheet-backdrop" class="fixed inset-0 z-50 bg-black/40 dark:bg-black/60 backdrop-blur-sm opacity-0 pointer-events-none transition-opacity duration-300 hidden"></div> <div id="tools-sheet" class="fixed bottom-0 left-0 right-0 z-50 max-h-[82vh] bg-white/95 dark:bg-[#0a0a0a]/95 backdrop-blur-lg border-t border-[#e5e5e5] dark:border-[#1f1f1f] rounded-t-2xl shadow-2xl translate-y-full transition-transform duration-300 ease-out hidden flex flex-col"> <!-- Drag Handle style bar --> <div class="flex justify-center py-3"> <div class="w-10 h-1 rounded-full bg-[#e5e5e5] dark:bg-[#2e2e2e]"></div> </div> <!-- Drawer Header --> <div class="px-6 pb-4 border-b border-[#e5e5e5] dark:border-[#1f1f1f] flex items-center justify-between"> <h3 class="text-base font-bold text-[#171717] dark:text-white font-sans">工具</h3> <button id="tools-sheet-close" class="w-7 h-7 rounded-full bg-[#f5f5f5] dark:bg-[#1f1f1f] text-[#4d4d4d] dark:text-[#888] flex items-center justify-center hover:opacity-80 transition-opacity cursor-pointer" aria-label="Close"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> <!-- Drawer Search Bar --> <div class="px-6 py-3 border-b border-[#e5e5e5] dark:border-[#1f1f1f] bg-[#fafafa]/50 dark:bg-[#0a0a0a]/50"> <div class="relative flex items-center"> <svg class="absolute left-3 w-4 h-4 text-[#888] dark:text-[#555] pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path> </svg> <input type="text" id="tools-search-input" placeholder="搜索工具…" class="w-full pl-9 pr-8 py-2 text-sm bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-[#1f1f1f] rounded-lg text-[#171717] dark:text-white placeholder-[#888] dark:placeholder-[#555] focus:outline-none focus:border-[#007cf0] dark:focus:border-[#007cf0] focus:ring-1 focus:ring-[#007cf0] transition-all"> <button id="tools-search-clear" class="absolute right-3 hidden text-[#888] dark:text-[#555] hover:text-[#171717] dark:hover:text-white transition-colors cursor-pointer" aria-label="Clear search"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> </div> <!-- Drawer Categories and Links --> <div class="flex-1 overflow-y-auto px-6 py-4 space-y-6"> <div class="category-section space-y-3"> <h4 class="category-title text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> 文本 </h4> <div class="grid grid-cols-2 gap-2"> <a href="/zh/text/word-counter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="字数统计器"> <span class="text-sm flex-shrink-0">📝</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">字数统计器</span> </a><a href="/zh/text/text-utils" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="文本大小写转换器和实用程序"> <span class="text-sm flex-shrink-0">🔤</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">文本大小写转换器和实用程序</span> </a><a href="/zh/text/lorem-ipsum" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="lorem ipsum 生成器"> <span class="text-sm flex-shrink-0">📄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Lorem Ipsum 生成器</span> </a><a href="/zh/text/markdown-preview" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="markdown 预览器"> <span class="text-sm flex-shrink-0">✍️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Markdown 预览器</span> </a><a href="/zh/text/case-converter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="大小写转换器"> <span class="text-sm flex-shrink-0">🔠</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">大小写转换器</span> </a><a href="/zh/text/remove-duplicate-lines" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="重复行去除器"> <span class="text-sm flex-shrink-0">🧹</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">重复行去除器</span> </a><a href="/zh/text/find-and-replace-text" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="查找和替换工具"> <span class="text-sm flex-shrink-0">🔍</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">查找和替换工具</span> </a><a href="/zh/text/reverse-text" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="反转文本工具"> <span class="text-sm flex-shrink-0">🔄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">反转文本工具</span> </a><a href="/zh/text/string-length" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="字符串长度查找器"> <span class="text-sm flex-shrink-0">📏</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">字符串长度查找器</span> </a><a href="/zh/text/word-replacer" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="单词替换器"> <span class="text-sm flex-shrink-0">✏️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">单词替换器</span> </a><a href="/zh/text/sort-list-online" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="列表排序器"> <span class="text-sm flex-shrink-0">🗂️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">列表排序器</span> </a><a href="/zh/text/text-to-binary" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="文本到二进制转换器"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">文本到二进制转换器</span> </a><a href="/zh/text/text-to-hex" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="文本到十六进制转换器"> <span class="text-sm flex-shrink-0">🛑</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">文本到十六进制转换器</span> </a><a href="/zh/text/hex-to-text" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="十六进制到文本转换器"> <span class="text-sm flex-shrink-0">💬</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">十六进制到文本转换器</span> </a><a href="/zh/text/text-diff" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="文本比较工具"> <span class="text-sm flex-shrink-0">🔀</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">文本比较工具</span> </a><a href="/zh/text/number-to-words" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="数字到单词转换器"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">数字到单词转换器</span> </a><a href="/zh/text/char-frequency" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="字符频率计数器"> <span class="text-sm flex-shrink-0">📊</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">字符频率计数器</span> </a><a href="/zh/text/binary-to-text" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="二进制到文本转换器"> <span class="text-sm flex-shrink-0">01</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">二进制到文本转换器</span> </a><a href="/zh/text/rot13" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="rot13编码器和解码器"> <span class="text-sm flex-shrink-0">🔀</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">ROT13编码器和解码器</span> </a><a href="/zh/text/slug-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="url slug 生成器"> <span class="text-sm flex-shrink-0">🔗</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">URL Slug 生成器</span> </a><a href="/zh/text/morse-code-translator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="摩尔斯电码翻译器"> <span class="text-sm flex-shrink-0">📻</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">摩尔斯电码翻译器</span> </a><a href="/zh/text/markdown-to-html" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费在线 markdown 到 html 转换器"> <span class="text-sm flex-shrink-0">🌐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费在线 Markdown 到 HTML 转换器</span> </a><a href="/zh/text/html-to-markdown" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费在线 html 到 markdown 转换器"> <span class="text-sm flex-shrink-0">✍️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费在线 HTML 到 Markdown 转换器</span> </a><a href="/zh/text/character-counter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费在线字符计数器"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费在线字符计数器</span> </a><a href="/zh/text/sentence-counter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费在线句子计数器"> <span class="text-sm flex-shrink-0">📊</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费在线句子计数器</span> </a><a href="/zh/text/paragraph-counter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费在线段落计数器"> <span class="text-sm flex-shrink-0">📝</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费在线段落计数器</span> </a><a href="/zh/text/line-counter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费在线线路计数器"> <span class="text-sm flex-shrink-0">📏</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费在线线路计数器</span> </a> </div> </div><div class="category-section space-y-3"> <h4 class="category-title text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> 开发者 </h4> <div class="grid grid-cols-2 gap-2"> <a href="/zh/developer/qr-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="二维码生成器"> <span class="text-sm flex-shrink-0">🔗</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">二维码生成器</span> </a><a href="/zh/developer/password-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="密码生成器"> <span class="text-sm flex-shrink-0">🔑</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">密码生成器</span> </a><a href="/zh/developer/base64-converter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="base64 编码器和解码器"> <span class="text-sm flex-shrink-0">🔏</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Base64 编码器和解码器</span> </a><a href="/zh/developer/json-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="json 格式化器和验证器"> <span class="text-sm flex-shrink-0">📋</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">JSON 格式化器和验证器</span> </a><a href="/zh/developer/hash-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="哈希生成器"> <span class="text-sm flex-shrink-0">🔐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">哈希生成器</span> </a><a href="/zh/developer/css-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="css 格式化程序"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">CSS 格式化程序</span> </a><a href="/zh/developer/csv-to-json" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="csv 到 json 转换器"> <span class="text-sm flex-shrink-0">📊</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">CSV 到 JSON 转换器</span> </a><a href="/zh/developer/html-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="html 格式器和美化器"> <span class="text-sm flex-shrink-0">🌐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">HTML 格式器和美化器</span> </a><a href="/zh/developer/html-minifier" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="html 压缩器"> <span class="text-sm flex-shrink-0">⚡</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">HTML 压缩器</span> </a><a href="/zh/developer/js-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="javascript 格式化程序"> <span class="text-sm flex-shrink-0">📜</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">JavaScript 格式化程序</span> </a><a href="/zh/developer/js-minifier" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="javascript 压缩器"> <span class="text-sm flex-shrink-0">📦</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">JavaScript 压缩器</span> </a><a href="/zh/developer/json-to-csv" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="json 到 csv 转换器"> <span class="text-sm flex-shrink-0">📈</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">JSON 到 CSV 转换器</span> </a><a href="/zh/developer/json-to-xml" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="json 到 xml 转换器"> <span class="text-sm flex-shrink-0">🪵</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">JSON 到 XML 转换器</span> </a><a href="/zh/developer/xml-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="xml 格式化器和美化器"> <span class="text-sm flex-shrink-0">📝</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">XML 格式化器和美化器</span> </a><a href="/zh/developer/xml-to-json" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="xml 到 json 转换器"> <span class="text-sm flex-shrink-0">🧩</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">XML 到 JSON 转换器</span> </a><a href="/zh/developer/sql-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="sql格式化程序"> <span class="text-sm flex-shrink-0">🗄️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">SQL格式化程序</span> </a><a href="/zh/developer/user-agent-parser" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="用户代理解析器"> <span class="text-sm flex-shrink-0">🤖</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">用户代理解析器</span> </a><a href="/zh/developer/regex-tester" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="正则表达式测试器和调试器"> <span class="text-sm flex-shrink-0">🔍</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">正则表达式测试器和调试器</span> </a><a href="/zh/developer/json-to-yaml" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="json 到 yaml 转换器"> <span class="text-sm flex-shrink-0">🔄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">JSON 到 YAML 转换器</span> </a><a href="/zh/developer/yaml-to-json" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="yaml 到 json 转换器"> <span class="text-sm flex-shrink-0">🔄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">YAML 到 JSON 转换器</span> </a><a href="/zh/developer/cron-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="cron 表达式生成器"> <span class="text-sm flex-shrink-0">⚙️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Cron 表达式生成器</span> </a><a href="/zh/developer/html-entities" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="html 实体编码器和解码器"> <span class="text-sm flex-shrink-0">🏷️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">HTML 实体编码器和解码器</span> </a><a href="/zh/developer/image-to-base64" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="图像到 base64 编码器"> <span class="text-sm flex-shrink-0">🖼️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">图像到 Base64 编码器</span> </a><a href="/zh/developer/password-strength" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="密码强度检查器"> <span class="text-sm flex-shrink-0">🔐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">密码强度检查器</span> </a><a href="/zh/developer/url-encoder" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="url编码器和解码器"> <span class="text-sm flex-shrink-0">🔒</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">URL编码器和解码器</span> </a><a href="/zh/developer/uuid-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费在线批量 uuid 生成器"> <span class="text-sm flex-shrink-0">🆔</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费在线批量 UUID 生成器</span> </a><a href="/zh/developer/epoch-converter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="unix 纪元时间戳转换器"> <span class="text-sm flex-shrink-0">⏱️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Unix 纪元时间戳转换器</span> </a><a href="/zh/developer/jwt-debugger" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="json web 令牌调试器"> <span class="text-sm flex-shrink-0">🔑</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">JSON Web 令牌调试器</span> </a><a href="/zh/developer/json-validator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费在线 json 验证器和解析器"> <span class="text-sm flex-shrink-0">🤖</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费在线 JSON 验证器和解析器</span> </a><a href="/zh/developer/css-minifier" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费在线 css 代码压缩器"> <span class="text-sm flex-shrink-0">⚡</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费在线 CSS 代码压缩器</span> </a><a href="/zh/developer/base64-to-image" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费在线 base64 到图像解码器"> <span class="text-sm flex-shrink-0">🖼️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费在线 Base64 到图像解码器</span> </a><a href="/zh/developer/url-parser" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费在线 url 解析器和调试器"> <span class="text-sm flex-shrink-0">🔗</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费在线 URL 解析器和调试器</span> </a><a href="/zh/developer/http-headers" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费在线 http 请求标头查看器"> <span class="text-sm flex-shrink-0">🌐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费在线 HTTP 请求标头查看器</span> </a><a href="/zh/developer/qr-decoder" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费在线二维码解码器和扫描仪"> <span class="text-sm flex-shrink-0">🔍</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费在线二维码解码器和扫描仪</span> </a><a href="/zh/developer/whois-lookup" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费的客户端 whois 查找工具"> <span class="text-sm flex-shrink-0">🌐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费的客户端 Whois 查找工具</span> </a><a href="/zh/developer/dns-lookup" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费的实时 dns 记录查找实用程序"> <span class="text-sm flex-shrink-0">🔍</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费的实时 DNS 记录查找实用程序</span> </a><a href="/zh/developer/json-minifier" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费在线 json 压缩器"> <span class="text-sm flex-shrink-0">⚡</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费在线 JSON 压缩器</span> </a> </div> </div><div class="category-section space-y-3"> <h4 class="category-title text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> 计算器 </h4> <div class="grid grid-cols-2 gap-2"> <a href="/zh/calculators/unit-converter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="单位换算"> <span class="text-sm flex-shrink-0">🔄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">单位换算</span> </a><a href="/zh/calculators/date-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="日期计算器"> <span class="text-sm flex-shrink-0">📅</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">日期计算器</span> </a><a href="/zh/calculators/bmi-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="体重指数计算器"> <span class="text-sm flex-shrink-0">⚖️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">体重指数计算器</span> </a><a href="/zh/calculators/age-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="年龄计算器"> <span class="text-sm flex-shrink-0">🎂</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">年龄计算器</span> </a><a href="/zh/calculators/percentage-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="百分比计算器"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">百分比计算器</span> </a><a href="/zh/calculators/random-number" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="随机数生成器"> <span class="text-sm flex-shrink-0">🎲</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">随机数生成器</span> </a><a href="/zh/calculators/tip-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="在线小费计算器"> <span class="text-sm flex-shrink-0">💸</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">在线小费计算器</span> </a><a href="/zh/calculators/lcm-finder" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="lcm（最小公倍数）计算器"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">LCM（最小公倍数）计算器</span> </a><a href="/zh/calculators/quadratic-solver" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="二次方程求解器"> <span class="text-sm flex-shrink-0">📐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">二次方程求解器</span> </a><a href="/zh/calculators/scientific-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="科学计算器"> <span class="text-sm flex-shrink-0">🧮</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">科学计算器</span> </a><a href="/zh/calculators/fraction-to-decimal" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="分数到小数计算器"> <span class="text-sm flex-shrink-0">➗</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">分数到小数计算器</span> </a><a href="/zh/calculators/decimal-to-fraction" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="小数到分数计算器"> <span class="text-sm flex-shrink-0">📊</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">小数到分数计算器</span> </a><a href="/zh/calculators/gcd-finder" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="gcd计算器"> <span class="text-sm flex-shrink-0">📐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">GCD计算器</span> </a><a href="/zh/calculators/prime-checker" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="质数检查器"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">质数检查器</span> </a><a href="/zh/calculators/date-difference" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="日期之间的天数计算器"> <span class="text-sm flex-shrink-0">📅</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">日期之间的天数计算器</span> </a><a href="/zh/calculators/fibonacci-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="斐波那契数列生成器"> <span class="text-sm flex-shrink-0">🌀</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">斐波那契数列生成器</span> </a><a href="/zh/calculators/metric-conversion" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费在线公制转换工具"> <span class="text-sm flex-shrink-0">📐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费在线公制转换工具</span> </a><a href="/zh/calculators/gratuity-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费在线小费和小费计算器"> <span class="text-sm flex-shrink-0">💸</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费在线小费和小费计算器</span> </a> </div> </div><div class="category-section space-y-3"> <h4 class="category-title text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> 设计 </h4> <div class="grid grid-cols-2 gap-2"> <a href="/zh/design/color-picker" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="颜色选择器和调色板生成器"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">颜色选择器和调色板生成器</span> </a><a href="/zh/design/image-compressor" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="图像压缩器"> <span class="text-sm flex-shrink-0">🖼️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">图像压缩器</span> </a><a href="/zh/design/screen-resolution" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="屏幕和视口检查器"> <span class="text-sm flex-shrink-0">🖥️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">屏幕和视口检查器</span> </a><a href="/zh/design/hex-to-rgb" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="十六进制和 rgb 转换器"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">十六进制和 RGB 转换器</span> </a><a href="/zh/design/color-palette" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="调色板生成器"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">调色板生成器</span> </a><a href="/zh/design/css-gradient" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="css 渐变生成器"> <span class="text-sm flex-shrink-0">🌈</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">CSS 渐变生成器</span> </a><a href="/zh/design/favicon-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="网站图标生成器"> <span class="text-sm flex-shrink-0">⭐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">网站图标生成器</span> </a><a href="/zh/design/rgb-to-hex" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="rgb 到十六进制颜色转换器"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">RGB 到十六进制颜色转换器</span> </a><a href="/zh/design/aspect-ratio-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="纵横比计算器"> <span class="text-sm flex-shrink-0">📐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">纵横比计算器</span> </a><a href="/zh/design/svg-to-png" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费在线 svg 转 png 光栅器"> <span class="text-sm flex-shrink-0">🖼️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费在线 SVG 转 PNG 光栅器</span> </a><a href="/zh/design/image-converter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费在线本地图像转换器"> <span class="text-sm flex-shrink-0">🔄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费在线本地图像转换器</span> </a><a href="/zh/design/placeholder-image" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费在线占位符图像生成器"> <span class="text-sm flex-shrink-0">🖼️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费在线占位符图像生成器</span> </a><a href="/zh/design/contrast-checker" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费在线颜色对比度检查器"> <span class="text-sm flex-shrink-0">👁️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费在线颜色对比度检查器</span> </a><a href="/zh/design/png-to-svg" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费在线 png 到 svg 矢量转换器"> <span class="text-sm flex-shrink-0">📐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费在线 PNG 到 SVG 矢量转换器</span> </a><a href="/zh/design/hsl-to-rgb" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费在线 hsl 到 rgb 颜色转换器"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费在线 HSL 到 RGB 颜色转换器</span> </a> </div> </div><div class="category-section space-y-3"> <h4 class="category-title text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> 生产力 </h4> <div class="grid grid-cols-2 gap-2"> <a href="/zh/productivity/timer" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="在线计时器和秒表"> <span class="text-sm flex-shrink-0">⏱️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">在线计时器和秒表</span> </a><a href="/zh/productivity/stopwatch" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="在线秒表"> <span class="text-sm flex-shrink-0">⏱️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">在线秒表</span> </a><a href="/zh/productivity/pomodoro" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="番茄计时器"> <span class="text-sm flex-shrink-0">🍅</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">番茄计时器</span> </a><a href="/zh/productivity/merge-pdf" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费在线 pdf 合并实用程序"> <span class="text-sm flex-shrink-0">📑</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费在线 PDF 合并实用程序</span> </a><a href="/zh/productivity/word-to-pdf" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费在线 word 到 pdf 转换器"> <span class="text-sm flex-shrink-0">📄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费在线 Word 到 PDF 转换器</span> </a><a href="/zh/productivity/split-pdf" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="免费在线 pdf 分割器和页面提取器"> <span class="text-sm flex-shrink-0">✂️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">免费在线 PDF 分割器和页面提取器</span> </a> </div> </div> </div> <!-- Safe Bottom Spacing --> <div class="h-16 pb-safe-bottom"></div> </div> <!-- MORE DRAWER OVERLAY --> <div id="more-sheet-backdrop" class="fixed inset-0 z-50 bg-black/40 dark:bg-black/60 backdrop-blur-sm opacity-0 pointer-events-none transition-opacity duration-300 hidden"></div> <div id="more-sheet" class="fixed bottom-0 left-0 right-0 z-50 max-h-[82vh] bg-white/95 dark:bg-[#0a0a0a]/95 backdrop-blur-lg border-t border-[#e5e5e5] dark:border-[#1f1f1f] rounded-t-2xl shadow-2xl translate-y-full transition-transform duration-300 ease-out hidden flex flex-col"> <!-- Drag Handle style bar --> <div class="flex justify-center py-3"> <div class="w-10 h-1 rounded-full bg-[#e5e5e5] dark:bg-[#2e2e2e]"></div> </div> <!-- Drawer Header --> <div class="px-6 pb-4 border-b border-[#e5e5e5] dark:border-[#1f1f1f] flex items-center justify-between"> <h3 class="text-base font-bold text-[#171717] dark:text-white font-sans">更多</h3> <button id="more-sheet-close" class="w-7 h-7 rounded-full bg-[#f5f5f5] dark:bg-[#1f1f1f] text-[#4d4d4d] dark:text-[#888] flex items-center justify-center hover:opacity-80 transition-opacity cursor-pointer" aria-label="Close"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> <!-- Drawer Links & Content --> <div class="flex-1 overflow-y-auto px-6 py-4 space-y-6"> <!-- iOS Style Link List --> <div class="rounded-xl border border-zinc-200 dark:border-[#1f1f1f] bg-zinc-50/50 dark:bg-zinc-900/30 overflow-hidden divide-y divide-[#ebebeb] dark:divide-[#1f1f1f]"> <a href="/zh/about" class="flex items-center justify-between p-3.5 hover:bg-[#f5f5f5] dark:hover:bg-[#1f1f1f] transition-colors group"> <span class="text-sm font-semibold text-[#171717] dark:text-white">关于我们</span> <svg class="w-4 h-4 text-[#888] group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path> </svg> </a> <a href="/zh/contact" class="flex items-center justify-between p-3.5 hover:bg-[#f5f5f5] dark:hover:bg-[#1f1f1f] transition-colors group"> <span class="text-sm font-semibold text-[#171717] dark:text-white">联系我们</span> <svg class="w-4 h-4 text-[#888] group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path> </svg> </a> <a href="/zh/privacy" class="flex items-center justify-between p-3.5 hover:bg-[#f5f5f5] dark:hover:bg-[#1f1f1f] transition-colors group"> <span class="text-sm font-semibold text-[#171717] dark:text-white">隐私政策</span> <svg class="w-4 h-4 text-[#888] group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path> </svg> </a> <a href="/zh/terms" class="flex items-center justify-between p-3.5 hover:bg-[#f5f5f5] dark:hover:bg-[#1f1f1f] transition-colors group"> <span class="text-sm font-semibold text-[#171717] dark:text-white">服务条款</span> <svg class="w-4 h-4 text-[#888] group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path> </svg> </a> </div> <!-- Language Selector Section --> <div class="space-y-3"> <h4 class="text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> 语言 </h4> <div class="grid grid-cols-2 gap-2"> <a href="/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>English</span>  </a><a href="/es/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>Español</span>  </a><a href="/fr/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>Français</span>  </a><a href="/de/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>Deutsch</span>  </a><a href="/hi/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>हिन्दी</span>  </a><a href="/zh/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-[#007cf0]/10 border-[#007cf0] text-[#007cf0] font-bold dark:bg-[#007cf0]/20"> <span>中文</span> <span class="text-xs text-[#007cf0]">✓</span> </a><a href="/ja/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>日本語</span>  </a> </div> </div> <!-- Credits Footer --> <div class="pt-6 border-t border-[#ebebeb] dark:border-[#1f1f1f] text-center space-y-2 select-none"> <p class="text-xs font-mono text-[#888] dark:text-[#888] flex items-center justify-center gap-1.5">
Made with <span class="text-[#ff4b4b]">❤️</span> by <a href="https://x.com/NiranjanBuilds" target="_blank" rel="noopener noreferrer" class="underline hover:text-[#171717] dark:hover:text-white font-semibold">NiranjanBuilds</a> <a href="https://x.com/NiranjanBuilds" target="_blank" rel="noopener noreferrer" class="hover:text-[#171717] dark:hover:text-white inline-flex items-center" aria-label="X (Twitter)">𝕏</a> </p> <p class="text-xs font-mono text-[#888] dark:text-[#888]"> <a href="mailto:support@say.tools" class="hover:underline">support@say.tools</a> </p> </div> </div> <!-- Safe Bottom Spacing --> <div class="h-16 pb-safe-bottom"></div> </div> <!-- Client Script to Toggle Sheet --> <script type="module">const g=document.getElementById("bottom-nav-tools-btn"),B=document.getElementById("tools-sheet-close"),t=document.getElementById("tools-sheet-backdrop"),o=document.getElementById("tools-sheet"),b=document.getElementById("bottom-nav-more-btn"),k=document.getElementById("header-more-btn"),I=document.getElementById("header-more-btn-home"),S=document.getElementById("more-sheet-close"),s=document.getElementById("more-sheet-backdrop"),n=document.getElementById("more-sheet"),e=document.getElementById("tools-search-input"),i=document.getElementById("tools-search-clear"),w=document.querySelectorAll(".category-section"),q=()=>{t?.classList.remove("hidden"),o?.classList.remove("hidden"),document.body.style.overflow="hidden",requestAnimationFrame(()=>{t?.classList.add("opacity-100"),t?.classList.remove("pointer-events-none"),o?.classList.add("translate-y-0"),o?.classList.remove("translate-y-full"),setTimeout(()=>{e?.focus()},100)})},d=()=>{t?.classList.remove("opacity-100"),t?.classList.add("pointer-events-none"),o?.classList.remove("translate-y-0"),o?.classList.add("translate-y-full"),document.body.style.overflow="",e&&(e.value="",e.dispatchEvent(new Event("input"))),setTimeout(()=>{t?.classList.add("hidden"),o?.classList.add("hidden")},300)};g?.addEventListener("click",()=>{m(),q()});B?.addEventListener("click",d);t?.addEventListener("click",d);const r=()=>{s?.classList.remove("hidden"),n?.classList.remove("hidden"),document.body.style.overflow="hidden",requestAnimationFrame(()=>{s?.classList.add("opacity-100"),s?.classList.remove("pointer-events-none"),n?.classList.add("translate-y-0"),n?.classList.remove("translate-y-full")})},m=()=>{s?.classList.remove("opacity-100"),s?.classList.add("pointer-events-none"),n?.classList.remove("translate-y-0"),n?.classList.add("translate-y-full"),document.body.style.overflow="",setTimeout(()=>{s?.classList.add("hidden"),n?.classList.add("hidden")},300)};b?.addEventListener("click",()=>{d(),r()});k?.addEventListener("click",()=>{d(),r()});I?.addEventListener("click",()=>{d(),r()});S?.addEventListener("click",m);s?.addEventListener("click",m);e?.addEventListener("input",h=>{const a=h.target.value.toLowerCase().trim();a?i?.classList.remove("hidden"):i?.classList.add("hidden"),w.forEach(v=>{const l=v,u=l.querySelector(".category-title"),y=(u&&u.textContent?.toLowerCase()||"").includes(a),E=l.querySelectorAll(".tool-item");let L=!1;E.forEach(p=>{const c=p,f=c.getAttribute("data-name")||"";y||f.includes(a)?(c.classList.remove("hidden"),c.classList.add("flex"),L=!0):(c.classList.remove("flex"),c.classList.add("hidden"))}),L?l.classList.remove("hidden"):l.classList.add("hidden")})});i?.addEventListener("click",()=>{e&&(e.value="",e.dispatchEvent(new Event("input")),e.focus())});</script> </body> </html>