HTML 压缩器

关于此工具

这样，您就有了一个 HTML 文件。有用。它很实用。但它有点笨重——甚至可能充满了你并不真正需要的额外空格、注释和换行符。这就是 HTML 缩小器的用武之地。可以将其想象为数字 Marie Kondo：它整理您的代码，保留有用的内容，然后丢弃其余的内容。没有绒毛。只是更干净、更精简的 HTML，加载速度更快并且占用的空间更少。 多年来我使用过很多这样的工具——有些很好，有些则平淡无奇。最好的不仅仅是去除空白。他们知道何时不要管事情，例如

 标签内或内联脚本。他们很聪明，但并不具有攻击性。老实说？一旦你开始定期使用它，你就会想知道没有它你是如何生活的。
主要功能
 
删除不必要的空格、换行符和缩进，而不会破坏布局。
 
删除 HTML 注释（如果需要，条件注释除外）。
 
可以选择折叠布尔属性 - 将 disabled="disabled" 变为 disabled。
 
缩小样式和脚本标记内的内联 CSS 和 JavaScript（如果启用）。
 
保留 
、</code> 和其他空白敏感标记内的内容。</li> <li>适用于完整文档或部分片段 - 非常适合快速修复或构建管道。</li> <li>通常提供预览或差异视图，以便您可以在提交之前查看更改的内容。</li></ul><h2>常见问题解答</h2><p><strong>缩小会破坏我的网站吗？</strong><br>如果您使用像样的工具就不会。大多数现代的缩小者都很小心。他们不会触及需要间距的内容，例如 <code><pre></code> 块内。但一定要在缩小后进行测试——尤其是在生产环境中进行测试时。快速的本地检查可以避免以后的麻烦。</p><p><strong>缩小后的 HTML 仍然可读吗？</strong><br>不。这就是重点。它不适合人类阅读，而是供浏览器快速解析。如果您需要调试，请在存储库中保留干净的版本。仅针对部署或性能关键页面进行缩小。</p> </div> <!-- Ad Banner After Content --> <!-- Social Share --> <div class="social-share text-center mt-5" style="padding-top: 30px; border-top: 1px solid #e2e8f0;"> <div class="share-icons relative gap-2 d-flex justify-content-center" style="gap: 12px;"> <a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2F3tools.shop%2Fzh-CN%2Fhtml-%25E5%258E%258B%25E7%25BC%25A9%25E5%2599%25A8" target="_blank" class="btn btn-primary btn-icon-only rounded-circle" style="width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;"><i class="fab fa-facebook-f"></i></a> <a href="https://twitter.com/intent/tweet?url=http%3A%2F%2F3tools.shop%2Fzh-CN%2Fhtml-%25E5%258E%258B%25E7%25BC%25A9%25E5%2599%25A8&text=HTML+%E5%8E%8B%E7%BC%A9%E5%99%A8" target="_blank" class="btn btn-info btn-icon-only rounded-circle text-white" style="width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;"><i class="fab fa-twitter"></i></a> <a href="https://wa.me/?text=HTML+%E5%8E%8B%E7%BC%A9%E5%99%A8+http%3A%2F%2F3tools.shop%2Fzh-CN%2Fhtml-%25E5%258E%258B%25E7%25BC%25A9%25E5%2599%25A8" target="_blank" class="btn btn-success btn-icon-only rounded-circle" style="width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;"><i class="fab fa-whatsapp"></i></a> </div> </div> </div> </section> </div> </div></div><footer class="footer bg-white pt-5 pb-3 mt-5 border-top"> <div class="container"> <!-- Footer Ad --> <div class="row gx-4"> <!-- About Column --> <div class="col-lg-3 col-md-6 mb-4"> <h5 class="fw-bold mb-3">3WEBTOOL – 免费网络、SEO、图像和开发人员工具</h5> <p class="text-muted small">3WEBTOOL 是一个功能强大的免费在线平台，您可以在其中使用 SEO 工具、图像压缩、文本工具、开发人员实用程序、转换器和数字网络工具。为博主、开发人员和数字营销人员提供快速、安全且 100% 免费的网络工具。</p> <div class="social-links mt-3"> <a href="#" class="text-muted me-3" aria-label="Facebook"><i class="fab fa-facebook fa-lg"></i></a> <a href="#" class="text-muted me-3" aria-label="Twitter"><i class="fab fa-twitter fa-lg"></i></a> <a href="#" class="text-muted me-3" aria-label="Instagram"><i class="fab fa-instagram fa-lg"></i></a> </div> </div> <!-- Tools Category Column --> <div class="col-lg-2 col-md-6 mb-4"> <h6 class="fw-bold mb-3">工具类别</h6> <ul class="list-unstyled small"> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/category/%E6%96%87%E6%9C%AC%E5%B7%A5%E5%85%B7" class="text-muted text-decoration-none"> 文本工具 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/category/youtube-%E5%B7%A5%E5%85%B7" class="text-muted text-decoration-none"> YouTube 工具 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/category/%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E%E4%BC%98%E5%8C%96%E5%B7%A5%E5%85%B7" class="text-muted text-decoration-none"> 搜索引擎优化工具 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/category/%E5%9F%9F%E5%90%8D%E5%92%8C-ip-%E5%B7%A5%E5%85%B7" class="text-muted text-decoration-none"> 域名和 IP 工具 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/category/%E7%BD%91%E7%AB%99%E7%AE%A1%E7%90%86%E5%B7%A5%E5%85%B7" class="text-muted text-decoration-none"> 网站管理工具 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/category/%E7%BD%91%E9%A1%B5%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7" class="text-muted text-decoration-none"> 网页开发工具 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/category/%E5%9B%BE%E5%83%8F%E7%BC%96%E8%BE%91%E5%B7%A5%E5%85%B7" class="text-muted text-decoration-none"> 图像编辑工具 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/category/%E5%9C%A8%E7%BA%BF%E8%AE%A1%E7%AE%97%E5%99%A8" class="text-muted text-decoration-none"> 在线计算器 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/category/%E4%BA%8C%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2%E5%B7%A5%E5%85%B7" class="text-muted text-decoration-none"> 二进制转换工具 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/category/%E5%8D%95%E4%BD%8D%E6%8D%A2%E7%AE%97%E5%B7%A5%E5%85%B7" class="text-muted text-decoration-none"> 单位换算工具 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/category/%E6%9D%82%E9%A1%B9%E5%B7%A5%E5%85%B7" class="text-muted text-decoration-none"> 杂项工具 </a> </li> </ul> </div> <!-- Legal Column --> <div class="col-lg-2 col-md-6 mb-4"> <h6 class="fw-bold mb-3">合法的</h6> <ul class="list-unstyled small"> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/page/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC" class="text-muted text-decoration-none"> 关于我们 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/page/%E8%81%94%E7%B3%BB%E6%88%91%E4%BB%AC" class="text-muted text-decoration-none"> 联系我们 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/page/%E5%85%8D%E8%B4%A3%E5%A3%B0%E6%98%8E" class="text-muted text-decoration-none"> 免责声明 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/page/%E9%9A%90%E7%A7%81%E6%94%BF%E7%AD%96" class="text-muted text-decoration-none"> 隐私政策 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/page/%E6%9C%8D%E5%8A%A1%E6%9D%A1%E6%AC%BE" class="text-muted text-decoration-none"> 服务条款 </a> </li> <!-- Static Contact Link --> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/contact" class="text-muted text-decoration-none"> 联系我们 </a> </li> </ul> </div> <!-- Our YouTube Tools Column --> <div class="col-lg-2 col-md-6 mb-4"> <h6 class="fw-bold mb-3">我们的 YouTube 工具</h6> <ul class="list-unstyled small"> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/youtube-区域限制检查器" class="text-muted text-decoration-none"> YouTube 区域限制检查器 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/youtube-金钱计算器" class="text-muted text-decoration-none"> YouTube 金钱计算器 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/youtube-标签生成器" class="text-muted text-decoration-none"> YouTube 标签生成器 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/youtube-嵌入代码生成器" class="text-muted text-decoration-none"> YouTube 嵌入代码生成器 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/youtube-频道横幅下载器" class="text-muted text-decoration-none"> YouTube 频道横幅下载器 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/youtube-标题生成器" class="text-muted text-decoration-none"> YouTube 标题生成器 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/youtube-频道-id-提取器" class="text-muted text-decoration-none"> YouTube 频道 ID 提取器 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/youtube-标题提取器" class="text-muted text-decoration-none"> YouTube 标题提取器 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/youtube-标签提取器" class="text-muted text-decoration-none"> YouTube 标签提取器 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/youtube-标签生成器" class="text-muted text-decoration-none"> YouTube 标签生成器 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/youtube-频道年龄检查器" class="text-muted text-decoration-none"> YouTube 频道年龄检查器 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/youtube-频道统计" class="text-muted text-decoration-none"> YouTube 频道统计 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/youtube-订阅链接生成器" class="text-muted text-decoration-none"> YouTube 订阅链接生成器 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/youtube-标签提取器" class="text-muted text-decoration-none"> YouTube 标签提取器 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/youtube-时间戳链接生成器" class="text-muted text-decoration-none"> YouTube 时间戳链接生成器 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/youtube-频道徽标下载器" class="text-muted text-decoration-none"> YouTube 频道徽标下载器 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/youtube-频道查找器" class="text-muted text-decoration-none"> YouTube 频道查找器 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/youtube-评论选择器" class="text-muted text-decoration-none"> YouTube 评论选择器 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/youtube-观看率计算器" class="text-muted text-decoration-none"> YouTube 观看率计算器 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/youtube-描述提取器" class="text-muted text-decoration-none"> YouTube 描述提取器 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/youtube-描述生成器" class="text-muted text-decoration-none"> YouTube 描述生成器 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/youtube-标题长度检查器" class="text-muted text-decoration-none"> YouTube 标题长度检查器 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/youtube-视频标题大写字母" class="text-muted text-decoration-none"> YouTube 视频标题大写字母 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/youtube-视频计数检查器" class="text-muted text-decoration-none"> YouTube 视频计数检查器 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/youtube-缩略图下载器" class="text-muted text-decoration-none"> YouTube 缩略图下载器 </a> </li> <li class="mb-2"> <a href="https://3tools.shop/zh-CN/youtube-视频统计" class="text-muted text-decoration-none"> YouTube 视频统计 </a> </li> </ul> </div> <!-- Newsletter Column --> <div class="col-lg-3 col-md-6 mb-4"> <h6 class="fw-bold mb-3">通讯</h6> <p class="small text-muted">订阅我们的时事通讯以获取更新。</p> <form id="newsletterForm" class="mt-2" onsubmit="return handleSubscribe(event)"> <div class="input-group"> <input type="email" id="subEmail" class="form-control form-control-sm" placeholder="Your email" required> <button class="btn btn-primary btn-sm" type="submit" id="subBtn">订阅</button> </div> <small class="text-success d-none mt-2 d-block" id="subMsg"></small> </form> </div> </div> <hr class="my-4"> <div class="row align-items-center"> <div class="col-md-6 text-center text-md-start"> <p class="small text-muted mb-0">© 2026 3WEBTOOL – 免费网络、SEO、图像和开发人员工具. All rights reserved.</p> </div> </div> </div></footer><!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JS -->
<script src="https://3tools.shop/assets/js/main.js"></script>
<script>
    function handleSubscribe(e) {
        e.preventDefault();
        const email = document.getElementById('subEmail').value;
        const btn = document.getElementById('subBtn');
        const msg = document.getElementById('subMsg');
        
        btn.disabled = true;
        btn.innerHTML = '...';
        
        const formData = new FormData();
        formData.append('email', email);
        
        fetch('https://3tools.shop/ajax/subscribe.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            btn.disabled = false;
            btn.innerHTML = 'Subscribe';
            msg.textContent = data.message;
            msg.classList.remove('d-none');
            
            if (data.success) {
                msg.classList.remove('text-danger');
                msg.classList.add('text-success');
                document.getElementById('subEmail').value = '';
            } else {
                msg.classList.remove('text-success');
                msg.classList.add('text-danger');
            }
        })
        .catch(err => {
            btn.disabled = false;
            btn.innerHTML = 'Subscribe';
            msg.textContent = 'Something went wrong.';
            msg.classList.remove('d-none');
        });
    }

    // Simple search filter with error checking
    const searchBox = document.getElementById('toolSearch');
    if (searchBox) {
        searchBox.addEventListener('keyup', function() {
            let filter = this.value.toLowerCase();
            let tools = document.querySelectorAll('.tool-card');
            
            tools.forEach(tool => {
                let titleElement = tool.querySelector('.tool-title span');
                if (titleElement) {
                    let title = titleElement.innerText.toLowerCase();
                    let container = tool.closest('.col-12, .col-sm-6, .col-md-4, .col-lg-3');
                    if (container) {
                        container.style.display = title.includes(filter) ? '' : 'none';
                    }
                }
            });
        });
    }

    // --- GLOBAL TABLE OVERFLOW FIX ---
    document.addEventListener('DOMContentLoaded', function() {
        // Wrap any table found in content areas with table-responsive for mobile safety
        const contentAreas = document.querySelectorAll('.prose, .article-content, .page-content, .tool-preview-content');
        contentAreas.forEach(function(area) {
            const tables = area.querySelectorAll('table');
            tables.forEach(function(table) {
                if (!table.parentElement.classList.contains('table-responsive')) {
                    const wrapper = document.createElement('div');
                    wrapper.className = 'table-responsive mb-4';
                    table.parentNode.insertBefore(wrapper, table);
                    wrapper.appendChild(table);
                }
            });
        });
    });
</script>
<!-- Cookie Consent Banner --><div id="cookie-consent" class="fixed-bottom p-4 bg-white border-top shadow-lg" style="display: none; z-index: 9999;"> <div class="container d-flex flex-column flex-md-row justify-content-between align-items-center"> <div class="mb-3 mb-md-0 text-muted small"> We use cookies to improve your experience and for ad personalization. By continuing to use this site, you agree to our <a href="/page/privacy-policy" class="text-primary text-decoration-none">Privacy Policy</a>. </div> <div> <button id="accept-cookies" class="btn btn-primary btn-sm px-4 rounded-pill">Accept</button> </div> </div></div><script>
document.addEventListener('DOMContentLoaded', function() {
    // --- COOKIE CONSENT ---
    if (!localStorage.getItem('cookie_consent')) {
        setTimeout(function() {
            const consent = document.getElementById('cookie-consent');
            if (consent) consent.style.display = 'block';
        }, 2000);
    }
    
    document.getElementById('accept-cookies')?.addEventListener('click', function() {
        localStorage.setItem('cookie_consent', 'true');
        const consent = document.getElementById('cookie-consent');
        if (consent) consent.style.display = 'none';
    });

    // --- SERVICE WORKER REGISTRATION (PUSH NOTIFICATIONS) ---
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('https://3tools.shop/sw.js')
        .then(function(registration) {
            console.log('SW registered:', registration.scope);
        })
        .catch(function(err) {
            console.log('SW failed:', err);
        });
    }
});
</script></body></html>