不喜欢广告？去无广告今天 

HTML 格式化器和美化器

开发人员文本

广告移除？

输入

自动处理

输出

客户端

广告移除？

指导

HTML 格式化器和美化器

将压缩或混乱的HTML转换为整洁、有正确缩进的代码。此工具接收原始的HTML——无论是用于生产环境的压缩版本，还是从浏览器开发者工具复制的内容，或者由CMS生成的——并通过一致的缩进和换行来格式化，以便于阅读和编辑。

如何使用

将您的HTML粘贴到输入区域或上传一个HTML文件。选择您喜欢的缩进风格（2个空格、4个空格或制表符）。格式化后的输出会立即显示，带有语法高亮。可选地启用“保留现有空行”以保留意图上的间距，或“移除HTML注释”以从输出中去除注释。

特征

实时格式化 实时根据您的输入或设置更新输出。
可配置缩进 – 在 2 个空格、4 个空格或制表符之间进行选择

保存的模块 – 内容在 `

`、代码块（code）、脚本（script）、样式（style）和文本域（textarea）标签内的内容保持不变。

智能元件处理 – 行内元素保持在一行中，块级元素获得适当的缩进。
Syntax Highlighting 输出使用HTML语法高亮显示以便于理解。
上传文件 直接上传HTML文件，而不是粘贴。

广告移除？

 常问问题

HTML 压缩和美化有什么区别？

HTML 压缩移除了所有不必要的空格、注释和格式，以减小文件大小，从而加快页面加载速度。美化则是相反过程——它添加了缩进、换行和一致的间距，使代码更易于阅读。压缩后的 HTML 适合生产环境使用，而美化后的 HTML 在开发阶段更容易调试和维护。

HTML格式化是否会影响浏览器渲染？

不支持HTML标签的空白在渲染页面时，浏览器通常会忽略大部分空格。无论你的HTML是压缩成一行还是精美排版，浏览器显示的视觉结果完全相同。唯一例外的是预格式化元素（如 `

` 和 ``）内部的内容，其中的空白是有意义的——这就是为什么格式工具会保留这些区块。</p>

</div>
</li>
<li id="faq-question-1712390003" class="rank-math-list-item">
<h4 class="rank-math-question">为什么块级元素和内联元素会有不同的缩进方式？</h4>
<div class="rank-math-answer">

<p>分块元素（如 div、p、section、ul）在文档流中创建新的视觉区域并通常包含其他元素，因此它们从缩进来益处以显示嵌套。内联元素（如 span、strong、a、em）在文本内容中流动，对其进行缩进会破坏可读性，因为它会将句子分割成多行。合适的格式化工具尊重 HTML 规范中的这一区别。</p>

</div>
</li>
</ol>
</div>        </div>
      </div>
      
  
  
  



</div><!-- .col -->

  <div class="col aw--col-300 side-content">
    

  <a href="https://iotools.cloud/zh/pricing/" class="info-box mb-3" style="background-color: var(--io-color-blue, #464aff);letter-spacing:0;min-height:70px;padding-top:5px;">
    <div class="info-box-content">
      <span class="info-box-text text-sm white">想要享受无广告的体验吗？</span>
      <span class="info-box-number white" style="font-weight: 500;">
        <span class="white"><u>立即无广告</u></span>
      </span>
    </div>

    <span class="info-box-icon white" style="width:50px">
      <i class="ti" data-no-translation=""></i>
    </span>
  </a>
  <div class="card card-body pb-0">
    <h2 class="h5 blue mb-1">
      <i class="ti" data-no-translation=""></i> 安装我们的扩展
    </h2>
    <p class="mb-2">
      将 IO 工具添加到您最喜欢的浏览器，以便即时访问和更快地搜索
    </p>

    <div class="text-center pt-1 pb-3">
        <div id="io-browser-extension-d41d8cd9" class="d-none d-lg-block">
        <div class="io-browser-extension-container d-flex justify-content-center">
      <a href="https://chromewebstore.google.com/detail/io-tools-quick-access/ngfigjoligkblljadlbojinhoiofkdld" target="_blank" rel="noopener" class="io-browser-extension-btn" data-toggle="tooltip" data-placement="top" title="添加到 Chrome" style="cursor: pointer;">
        添加
        <img src="https://iotools.cloud/wp-content/themes/iotools/assets/images/browsers/chrome.svg" width="18" height="18" alt="Chrome 扩展程序" class="img-fluid">
      </a>
      <a href="https://microsoftedge.microsoft.com/addons/detail/io-tools-quick-access/daapkanhnnjodjpobfmkopolagbkcccb" target="_blank" rel="noopener" class="io-browser-extension-btn" data-toggle="tooltip" data-placement="top" title="添加到边缘" style="cursor: pointer;">
        添加
        <img src="https://iotools.cloud/wp-content/themes/iotools/assets/images/browsers/edge.svg" width="18" height="18" alt="边缘延伸" class="img-fluid">
      </a>
      <a href="https://addons.mozilla.org/en-US/firefox/addon/iotools-quick-access/" target="_blank" rel="noopener" class="io-browser-extension-btn" data-toggle="tooltip" data-placement="top" title="添加到 Firefox" style="cursor: pointer;">
        添加
        <img src="https://iotools.cloud/wp-content/themes/iotools/assets/images/browsers/firefox.svg" width="18" height="18" alt="Firefox 扩展" class="img-fluid">
      </a>
      <a href="https://addons.opera.com/en/extensions/details/io-tools-quick-access/" target="_blank" rel="noopener" class="io-browser-extension-btn" data-toggle="tooltip" data-placement="top" title="添加到 Opera" style="cursor: pointer;">
        添加
        <img src="https://iotools.cloud/wp-content/themes/iotools/assets/images/browsers/opera.svg" width="18" height="18" alt="Opera 扩展" class="img-fluid">
      </a>
      <style>
        #io-browser-extension-d41d8cd9 .io-browser-extension-container {
          gap: 10px;
          margin-left: -1px;
        }

        #io-browser-extension-d41d8cd9 .io-browser-extension-btn {
          display: flex;
          padding: 3px 5px 1px 6px;;
          background-color: white;
          border: 1px solid #dee2e6;
          border-radius: 12px;
          text-decoration: none;
          transition: all 0.2s ease;
          font-size: 12px;;
          color: #000!important;
          align-items: center;
          justify-content: center;
          gap: 2px;
          flex-grow: 1;;
        }

        #io-browser-extension-d41d8cd9 .io-browser-extension-btn img {
          transform: translateY(-1px);
        }

        #io-browser-extension-d41d8cd9 .io-browser-extension-btn:hover {
          background-color: #f8f9fa;
          border-color: #ced4da;
          color: #333;
          text-decoration: none;
        }
      </style>
    </div>
  </div>
      </div>
  </div>
  <div class="card card-body pb-0">
    <h2 class="h5 blue mb-1">
      <i class="ti" data-no-translation="">恵</i><a href="https://scoreboard.iotools.cloud/" target="_blank" rel="noopener"> 记分板已到达！</a>
    </h2>
    <p class="mb-2">
      <a href="https://scoreboard.iotools.cloud/" target="_blank" rel="noopener">记分板</a> 是一种有趣的跟踪您游戏的方式，所有数据都存储在您的浏览器中。更多功能即将推出！
    </p>
  </div>
  <div class="aw aw-side_content_1_desktop text-center mb-4"><div style="text-align: center;color: #9f9f9f;font-size: 9px;letter-spacing: 1px;line-height: 25px;height: 25px;width: 100%;">广告 <a tabindex="-1" target="_blank" href="https://iotools.cloud/zh/pricing/" title="无广告" style="text-decoration: underline;color: #9f9f9f;">移除？</a></div>
        <!-- Iotools_S2S_SideContent1_Desktop_ROS -->
        <style>
          @media only screen and (min-width: 0px) and (min-height: 0px) {
            div[id^="bsa-zone_1741342473519-9_123456"] {
              min-width: 0px;
              min-height: 0px;
            }
          }
          @media only screen and (min-width: 1370px) and (min-height: 0px) {
            div[id^="bsa-zone_1741342473519-9_123456"] {
              min-width: 200px;
              min-height: 250px;
            }
          }
        </style>
        <div id="bsa-zone_1741342473519-9_123456"></div>
        </div>  <div class="card card-body pb-0">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h2 class="h5 blue mb-0"><i class="ti" data-no-translation=""></i> 必试工具</h2>
      <a class="text-muted small blue" href="https://iotools.cloud/zh/tags/must-try/"><u>查看全部</u></a>
    </div>
    <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon">
  
      <a href="https://iotools.cloud/zh/tool/imagekit/background-remover/" class="card-image card-image--icon" aria-label="背景去除器">
        <i class="ti blue" style="--icon-hex:'\f360'" data-no-translation=""></i>
      </a>
  
    <span
      class="card-image card-image--icon"
      data-toggle="tooltip"
      title="工具集：ImageKit"
    ><i class="ti blue" style="--icon-hex:'\f360'" data-no-translation=""></i></span>

  <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/zh/tool/imagekit/background-remover/">
    背景去除器
  </a>
</div>
<div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon">
  
      <a href="https://iotools.cloud/zh/tool/ai-image-editor/" class="card-image card-image--icon" aria-label="人工智能图像编辑器">
        <i class="ti blue" style="--icon-hex:'\fa32'" data-no-translation=""></i>
      </a>
  

  <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/zh/tool/ai-image-editor/">
    人工智能图像编辑器<span class="io-badge io-badge--toolset" style="background-color: #92ff9580;color:#10a581" data-toggle="tooltip" title="工具集" data-content="Toolset"></span>
  </a>
</div>
<div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon">
  
      <a href="https://iotools.cloud/zh/tool/ai-image-generator/" class="card-image card-image--icon" aria-label="AI 图像生成器">
        <i class="ti blue" style="--icon-hex:'\ffb0'" data-no-translation=""></i>
      </a>
  

  <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/zh/tool/ai-image-generator/">
    AI 图像生成器
  </a>
</div>
<div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon">
  
      <a href="https://iotools.cloud/zh/tool/imagekit/" class="card-image card-image--icon" aria-label="ImageKit">
        <i class="ti blue" style="--icon-hex:'\f360'" data-no-translation=""></i>
      </a>
  

  <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/zh/tool/imagekit/">
    ImageKit<span class="io-badge io-badge--toolset" style="background-color: #92ff9580;color:#10a581" data-toggle="tooltip" title="工具集" data-content="Toolset"></span>
  </a>
</div>
<div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon">
  
      <a href="https://iotools.cloud/zh/tool/pdf-converter/compress-pdf/" class="card-image card-image--icon" aria-label="PDF 压缩器">
        <i class="ti blue" style="--icon-hex:'\ed44'" data-no-translation=""></i>
      </a>
  
    <span
      class="card-image card-image--icon"
      data-toggle="tooltip"
      title="工具集：PDF 转换器"
    ><i class="ti blue" style="--icon-hex:'\f7ac'" data-no-translation=""></i></span>

  <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/zh/tool/pdf-converter/compress-pdf/">
    PDF 压缩器
  </a>
</div>
<div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon">
  
      <a href="https://iotools.cloud/zh/tool/image-converter/" class="card-image card-image--icon" aria-label="图像转换器">
        <i class="ti blue" style="--icon-hex:'\fd9f'" data-no-translation=""></i>
      </a>
  

  <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/zh/tool/image-converter/">
    图像转换器<span class="io-badge io-badge--toolset" style="background-color: #92ff9580;color:#10a581" data-toggle="tooltip" title="工具集" data-content="Toolset"></span>
  </a>
</div>
<div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon">
  
      <a href="https://iotools.cloud/zh/tool/one-time-link/" class="card-image card-image--icon" aria-label="一次性链接">
        <i class="ti blue" style="--icon-hex:'\f7bd'" data-no-translation=""></i>
      </a>
  

  <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/zh/tool/one-time-link/">
    一次性链接
  </a>
</div>
  </div>

  <div class="aw aw-side_content_2_desktop text-center mb-4"><div style="text-align: center;color: #9f9f9f;font-size: 9px;letter-spacing: 1px;line-height: 25px;height: 25px;width: 100%;">广告 <a tabindex="-1" target="_blank" href="https://iotools.cloud/zh/pricing/" title="无广告" style="text-decoration: underline;color: #9f9f9f;">移除？</a></div>
        <!-- Iotools_S2S_SideContent2_Desktop_ROS -->
        <style>
          @media only screen and (min-width: 0px) and (min-height: 0px) {
            div[id^="bsa-zone_1741342696932-0_123456"] {
              min-width: 0px;
              min-height: 0px;
            }
          }
          @media only screen and (min-width: 1370px) and (min-height: 0px) {
            div[id^="bsa-zone_1741342696932-0_123456"] {
              min-width: 200px;
              min-height: 250px;
            }
          }
        </style>
        <div id="bsa-zone_1741342696932-0_123456"></div>
        </div>

<div class="card card-body pb-0">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h2 class="h5 blue mb-0">
      <i class="ti" data-no-translation=""></i> 新品上市     </h2>

          <a class="text-muted small blue" href="https://iotools.cloud/zh/tools/"><u>查看全部</u></a>
      </div>

  <div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon">
  
      <a href="https://iotools.cloud/zh/tool/ndjson-formatter-validator/" class="card-image card-image--icon" aria-label="NDJSON 格式化与验证工具">
        <i class="ti blue" style="--icon-hex:'\f7b2'" data-no-translation=""></i>
      </a>
  

  <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/zh/tool/ndjson-formatter-validator/">
    NDJSON 格式化与验证工具
  </a>
</div>
<div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon">
  
      <a href="https://iotools.cloud/zh/tool/base64-image-preview-decoder/" class="card-image card-image--icon" aria-label="Base64 图像预览与解码器">
        <i class="ti blue" style="--icon-hex:'\f991'" data-no-translation=""></i>
      </a>
  

  <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/zh/tool/base64-image-preview-decoder/">
    Base64 图片预览与解码器
  </a>
</div>
<div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon">
  
      <a href="https://iotools.cloud/zh/tool/webrtc-ip-leak-detector/" class="card-image card-image--icon" aria-label="WebRTC IP 泄露检测工具">
        <i class="ti blue" style="--icon-hex:'\eb22'" data-no-translation=""></i>
      </a>
  

  <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/zh/tool/webrtc-ip-leak-detector/">
    WebRTC IP 泄露检测工具
  </a>
</div>
<div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon">
  
      <a href="https://iotools.cloud/zh/tool/tailwind-css-color-scale-generator/" class="card-image card-image--icon" aria-label="Tailwind CSS 颜色渐变生成器">
        <i class="ti blue" style="--icon-hex:'\eb61'" data-no-translation=""></i>
      </a>
  

  <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/zh/tool/tailwind-css-color-scale-generator/">
    Tailwind CSS 颜色渐变生成器
  </a>
</div>
<div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon">
  
      <a href="https://iotools.cloud/zh/tool/package-json-formatter-key-sorter/" class="card-image card-image--icon" aria-label="package.json 格式化与键排序工具">
        <i class="ti blue" style="--icon-hex:'\f569'" data-no-translation=""></i>
      </a>
  

  <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/zh/tool/package-json-formatter-key-sorter/">
    package.json 格式化工具及键排序工具
  </a>
</div>
<div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon">
  
      <a href="https://iotools.cloud/zh/tool/shoe-clothing-size-converter/" class="card-image card-image--icon" aria-label="鞋码与衣物尺码转换器">
        <i class="ti blue" style="--icon-hex:'\efd2'" data-no-translation=""></i>
      </a>
  

  <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/zh/tool/shoe-clothing-size-converter/">
    鞋码与服装尺码转换器
  </a>
</div>
<div class="card card--tool card--tool-compact card--tool-compact--mini elevation-0 border card--tool-has-icon">
  
      <a href="https://iotools.cloud/zh/tool/pixel-art-canvas/" class="card-image card-image--icon" aria-label="像素艺术画布及CSS导出">
        <i class="ti blue" style="--icon-hex:'\efc9'" data-no-translation=""></i>
      </a>
  

  <a class="card-body flex-row align-items-center h6 mb-0 black" href="https://iotools.cloud/zh/tool/pixel-art-canvas/">
    像素艺术画布及CSS导出
  </a>
</div>
  <p class="small text-muted mb-3 text-center"><b>更新：</b> 我们的 <a href="https://iotools.cloud/zh/tool/ndjson-formatter-validator/" class="text-muted"><u>最新工具</u></a> 于 2026 年 5 月 2 日添加</p>
</div>
  <div class="aw aw-dashboard_sidebar text-center mb-4"><div style="text-align: center;color: #9f9f9f;font-size: 9px;letter-spacing: 1px;line-height: 25px;height: 25px;width: 100%;">广告 <a tabindex="-1" target="_blank" href="https://iotools.cloud/zh/pricing/" title="无广告" style="text-decoration: underline;color: #9f9f9f;">移除？</a></div>
        <!-- Iotools_S2S_Dashboard_ROS -->
        <style>
          @media only screen and (min-width: 0px) and (min-height: 0px) {
            div[id^="bsa-zone_1741781122639-0_123456"] {
              min-width: 300px;
              min-height: 50px;
            }
          }
          @media only screen and (min-width: 900px) and (min-height: 0px) {
            div[id^="bsa-zone_1741781122639-0_123456"] {
              min-width: 200px;
              min-height: 200px;
            }
          }
        </style>
        <div id="bsa-zone_1741781122639-0_123456"></div>
        </div>  <div class="card card-body io-no-scrollbar" style="max-height:700px;">
    <h2 class="h5 blue mb-3"><i class="ti" data-no-translation=""></i> 新闻角 <small class="black">包含技术亮点</small></h2>
    <div data-load-more-id="side-news" class="exclude--translation" data-no-translation="">
          <div class="io-loading mb-3">
      <div class="io-loading__item title"></div>
      <div class="io-loading__item"></div>
      <div class="io-loading__item"></div>
      <div class="io-loading__item"></div>
    </div>
        <div class="io-loading mb-3">
      <div class="io-loading__item title"></div>
      <div class="io-loading__item"></div>
      <div class="io-loading__item"></div>
      <div class="io-loading__item"></div>
    </div>
        <div class="io-loading mb-3">
      <div class="io-loading__item title"></div>
      <div class="io-loading__item"></div>
      <div class="io-loading__item"></div>
      <div class="io-loading__item"></div>
    </div>
        </div>

    <script class="exclude--lazy-load" async>
      // Immediately load news from session storage
      document.querySelectorAll('[data-load-more-id="side-news"]').forEach(function(element) {
        const dailyNewsHtml = sessionStorage.getItem(`dailyNewsHtml`);
        if (dailyNewsHtml) {
          element.innerHTML = dailyNewsHtml;
        }
      });
    </script>

    <p class="text-center">
            <button class="btn--load-more" data-load-more="{"target":"side-news","postType":"wprss_feed_item","offset":3}">展示更多！</button>
    </p>
  </div>
  <h2 class="h5 blue text-right mt-5"><i class="ti ti-heart-handshake" data-no-translation=""></i> 参与其中</h2>
  <div class="text-right mb-4">
        <p>帮助我们继续提供有价值的免费工具</p>
    <div class="d-lg-flex justify-content-end">
      
<a href="https://buymeacoffee.com/iotools" target="_blank" rel="noopener"><img width="180" height="50" src="https://iotools.cloud/wp-content/themes/iotools/assets/images/yellow-button.png" alt="给我买杯咖啡" class="img-fluid"></a>

    </div>
  </div>
  <div class="aw aw-side_content_sticky_desktop sticky-top text-center"><div style="text-align: center;color: #9f9f9f;font-size: 9px;letter-spacing: 1px;line-height: 25px;height: 25px;width: 100%;">广告 <a tabindex="-1" target="_blank" href="https://iotools.cloud/zh/pricing/" title="无广告" style="text-decoration: underline;color: #9f9f9f;">移除？</a></div>
        <!-- Iotools_S2S_SideContentSticky_Desktop_ROS -->
        <style>
          @media only screen and (min-width: 0px) and (min-height: 0px) {
            div[id^="bsa-zone_1741342751312-1_123456"] {
              min-width: 0px;
              min-height: 0px;
            }
          }
          @media only screen and (min-width: 1370px) and (min-height: 0px) {
            div[id^="bsa-zone_1741342751312-1_123456"] {
              min-width: 120px;
              min-height: 600px;
            }
          }
        </style>
        <div id="bsa-zone_1741342751312-1_123456"></div>
        </div>  </div>
  </div><!-- .row -->

</div><!-- .container -->
</main><!-- #content -->


<!-- Main Footer -->
<footer class="main-footer text-sm text-center text-xl-left d-flex flex-xl-nowrap flex-column-reverse flex-xl-row">
  
  <span>Copyright © 2026 <a href="https://iotools.cloud/zh/" class="exclude--translation" data-no-translation=""><u>iotools.cloud</u></a>。 版权所有。</span>

  <!-- To the right -->
  <ul class="navbar-nav d-flex flex-row ml-xl-auto justify-content-center flex-wrap">
    
<li class="nav-item">
  <a href="https://iotools.cloud/zh/" class="text-muted">家</a>
</li>

<li class="nav-item">
  <a href="https://iotools.cloud/zh/about/" class="text-muted">关于</a>
</li>

<li class="nav-item">
  <a href="https://iotools.cloud/zh/contact/" class="text-muted">接触</a>
</li>

<li class="nav-item">
  <a href="https://iotools.cloud/zh/pricing/" class="text-muted">价格</a>
</li>


    <li class="nav-item blue mb-2 mb-xl-0"> • </li>
    <li class="nav-item"><a href="https://iotools.cloud/zh/community-tools/" rel="nofollow" class="text-muted">社区工具</a></li>
    <li class="nav-item"><a href="https://iotools.cloud/zh/journal/" class="text-muted">期刊中心</a></li>
    <li class="nav-item blue mb-2 mb-xl-0"> • </li>
    <li class="nav-item"><a href="https://iotools.cloud/zh/privacy-policy/" class="text-muted">隐私政策</a></li>
    <li class="nav-item"><a href="https://iotools.cloud/zh/terms-of-service/" class="text-muted">服务条款</a></li>
    <li class="nav-item"><a href="https://iotools.statuspage.io/" target="_blank" rel="noopener" class="text-muted">系统状态</a></li>
    <li class="nav-item"><a href="https://iotools.cloud/zh/sitemap/" class="text-muted">网站地图</a></li>
    <li class="nav-item blue mb-2 mb-xl-0 d-none d-lg-block"> • </li>
    <li class="d-block w-100 d-lg-none"></li>
    <li class="nav-item"><a href="https://x.com/io_tools" target="_blank" rel="noopener" class="text-muted" aria-label="X"><i class="ti ti-brand-x" data-no-translation=""></i></a></li>
    <li class="nav-item"><a href="https://www.facebook.com/iotools.cloud" target="_blank" rel="noopener" class="text-muted" aria-label="Facebook"><i class="ti" data-no-translation=""></i></a></li>
    <li class="nav-item"><a href="https://www.youtube.com/@io-tools" target="_blank" rel="noopener" class="text-muted" aria-label="YouTube"><i class="ti" data-no-translation=""></i></a></li>
    <li class="nav-item"><a href="https://www.tiktok.com/@iotools" target="_blank" rel="noopener" class="text-muted" aria-label="抖音"><i class="ti" data-no-translation=""></i></a></li>
    <li class="nav-item"><a href="https://www.linkedin.com/company/io-tools/" target="_blank" rel="noopener" class="text-muted" aria-label="领英"><i class="ti ti-brand-linkedin" data-no-translation=""></i></a></li>
    <li class="nav-item"><a href="https://www.producthunt.com/products/io-tools" target="_blank" rel="noopener" class="text-muted" aria-label="产品搜寻"><i class="ti ti-brand-producthunt" data-no-translation=""></i></a></li>
  </ul>
</footer>

  <div class="bsa-gap d-none d-xl-block" style="height: 110px;"> </div>
  <div class="bsa-gap d-xl-none" style="height: 60px;"> </div>
  <style>
    body:has(>.bsa_fixed-leaderboard[style*="display: none"]) .bsa-gap {
      display: none !important;
    }
  </style>


</div><!-- .wrapper -->

<template id="tp-language" data-tp-language="zh_CN"></template><script type="speculationrules">
{"prerender":[{"source":"document","where":{"and":[{"href_matches":"/zh/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/iotools/*","/zh/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prerender, .no-prerender a"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"moderate"}]}
</script>
<script type="text/javascript" src="https://iotools.cloud/wp-content/plugins/duracelltomi-google-tag-manager/dist/js/gtm4wp-form-move-tracker.js?ver=1.22.3" id="gtm4wp-form-move-tracker-js"></script>
<script type="text/javascript" src="https://iotools.cloud/wp-content/plugins/translatepress-multilingual/assets/js/trp-clickable-ls.js?ver=2.9.12" id="trp-clickable-ls-js-js"></script>
<script type="text/javascript" src="https://iotools.cloud/wp-includes/js/underscore.min.js?ver=1.13.7" id="underscore-js"></script>
<script type="text/javascript" id="theme-js-js-extra">
/* <![CDATA[ */
var IOTools = {"ajaxUrl":"https://iotools.cloud/wp-admin/admin-ajax.php","assetsUrl":"https://iotools.cloud/wp-content/themes/iotools/assets/","homeUrl":"https://iotools.cloud/zh/","isMobile":"","currentPostId":"201379","turnstileSiteKey":"0x4AAAAAABroE5_aI0mWeJ_q","algoliaAppId":"1P44EFZA6Z","algoliaApiKey":"430f43bbda2ef03c2d61fbdf33bae284","urlRequests":"/requests/","creditsCap":"10","pondUploader":null,"tagColors":{"Accessibility":"indigo","AI":"red","arithmetic":"blue","Art":"orange","Backend":"red","base conversion":"blue","Base64":"blue","Beta":"red","Binary":"blue","Calculator":"blue","Character Classes":"blue","Color":"yellow","Couple":"blue","Creator":"blue","Cryptography":"yellow","CSS":"indigo","CSV":"green","Data":"gray","decimal":"blue","Decode":"yellow","Decrypt":"red","Designer":"cyan","Developer":"orange","devops":"blue","DnD":"blue","Education":"lime","Encode":"indigo","Encoding":"blue","Encryption":"blue","evaluation":"blue","Fantasy":"lime","Fiction":"blue","Finance":"green","Frontend":"red","Fun":"violet","Gaming":"blue","Generator":"blue","Git":"blue","Graphics":"red","Health":"orange","hex":"blue","History":"green","HTML":"green","Ideas":"orange","Identity":"lime","Image":"orange","instant calculation":"blue","integer":"blue","IPv6":"blue","Javascript":"orange","JPG":"blue","JSON":"yellow","logarithm":"blue","Lookup":"gray","MAC address":"blue","Magic":"yellow","Markdown":"blue","Marketing":"orange","mask":"blue","Match":"blue","Math":"yellow","MD5":"indigo","Minecraft":"blue","Music":"blue","Must Try":"red","Mythical":"blue","Networking":"blue","number systems":"blue","obfuscate":"blue","octal":"blue","PDF":"yellow","Performance":"green","Planning":"yellow","PNG":"blue","privacy":"blue","Productivity":"green","programming":"blue","Random":"red","Scheduling":"blue","Science":"blue","Security":"yellow","SEO":"orange","Social":"indigo","Sports":"blue","Statistics":"green","string":"blue","SVG":"orange","sysadmin":"blue","Testing":"orange","Text":"green","Time":"blue","trigonometry":"blue","ULA":"blue","Utilities":"blue","Video":"indigo","Wellness":"orange","Wizard":"blue","World":"blue","XML":"orange","YAML":"blue"},"translations":{"copiedDeepLink":"\u5df2\u5c06\u6df1\u5c42\u94fe\u63a5\u590d\u5236\u5230\u526a\u8d34\u677f\uff01","copiedText":"\u5df2\u590d\u5236\u5230\u526a\u8d34\u677f\uff01","copiedImage":"\u5df2\u5c06\u56fe\u50cf\u590d\u5236\u5230\u526a\u8d34\u677f\uff01","generatedContentAppearsHere":"\u7ed3\u679c\u5c06\u663e\u793a\u5728\u8fd9\u91cc...","confirmOverwriteContent":"\u5f53\u524d\u5185\u5bb9\u5c06\u88ab\u66ff\u6362\u5417\uff1f","invalidBase64String":"\u65e0\u6548\u7684 base64 \u5b57\u7b26\u4e32","timeoutReached":"\u627e\u5230\u54c8\u5e0c\u4e4b\u524d\u5df2\u8d85\u65f6\u3002","allCombinationsTried":"\u5df2\u5c1d\u8bd5\u6240\u6709\u7ec4\u5408\uff0c\u4f46\u672a\u627e\u5230\u54c8\u5e0c\u503c\u3002\u8c03\u6574\u8bbe\u7f6e\u5e76\u91cd\u8bd5\u3002","useThisFont":"\u4f7f\u7528\u6b64\u5b57\u4f53","noFileTypesDetected":"\u672a\u68c0\u6d4b\u5230\u6587\u4ef6\u7c7b\u578b\u3002\u539f\u59cb\u5185\u5bb9\u53ef\u80fd\u53ea\u662f\u6587\u672c\u6587\u4ef6\u6216\u5b57\u7b26\u4e32\u3002","noResults":"\u672a\u627e\u5230\u7ed3\u679c","loadMore":"\u88c5\u8f7d\u66f4\u591a","decodedString":"\u89e3\u7801\u540e\u7684\u5b57\u7b26\u4e32","yes":"\u662f\u7684","no":"\u4e0d","team":"\u56e2\u961f","detectedFile":"\u68c0\u6d4b\u5230\u7684\u6587\u4ef6","download":"\u4e0b\u8f7d","converting":"\u6b63\u5728\u8f6c\u6362...","compressing":"\u6b63\u5728\u538b\u7f29\u2026","tapToRemove":"\u70b9\u6309\u5373\u53ef\u79fb\u9664","serverUploaded":"\u5df2\u4e0a\u4f20\u81f3\u670d\u52a1\u5668","validationPassed":"\u5df2\u901a\u8fc7\u9a8c\u8bc1","validationFailed":"\u9a8c\u8bc1\u5931\u8d25","validationIndependently":"\u751f\u6210\u7684\u4ee3\u7801\u7ecf\u8fc7\u72ec\u7acb\u9a8c\u8bc1","pokemon":{"generation":"\u4e00\u4ee3","hp":"\u60e0\u666e","speed":"\u901f\u5ea6","attack":"\u653b\u51fb","defense":"\u9632\u5fa1","spAttack":"\u7279\u6b8a\u653b\u51fb","spDefense":"\u7279\u6b8a\u9632\u536b"},"browserInfo":{"userAgent":"\u7528\u6237\u4ee3\u7406","language":"\u8bed\u8a00","windowSize":"\u7a97\u53e3\u5927\u5c0f","pdfViewerEnabled":"\u5df2\u542f\u7528 PDF \u67e5\u770b\u5668","javascriptEnabled":"\u5df2\u542f\u7528 JavaScript","cookiesEnabled":"\u5df2\u542f\u7528 Cookie","browser":"\u6d4f\u89c8\u5668","browserMajorVersion":"\u6d4f\u89c8\u5668\u4e3b\u7248\u672c","browserVersion":"\u6d4f\u89c8\u5668\u7248\u672c","layoutEngine":"\u5e03\u5c40\u5f15\u64ce","deviceMemory":"\u8bbe\u5907\u5185\u5b58","maxTouchPoints":"\u6700\u5927\u63a5\u89e6\u70b9\u6570","screenSize":"\u5c4f\u5e55\u5c3a\u5bf8","orientation":"\u65b9\u5411","colorDepth":"\u989c\u8272\u6df1\u5ea6","pixelRatio":"\u50cf\u7d20\u6bd4\u4f8b","os":"\u64cd\u4f5c\u7cfb\u7edf","osVersion":"\u64cd\u4f5c\u7cfb\u7edf\u7248\u672c","deviceType":"\u8bbe\u5907\u7c7b\u578b","deviceVendor":"\u8bbe\u5907\u4f9b\u5e94\u5546","deviceModel":"\u8bbe\u5907\u578b\u53f7"},"splits":"\u5206\u88c2","noImagesSelected":"\u8bf7\u4e0a\u4f20\u81f3\u5c11\u4e00\u4e2a\u6587\u4ef6\u3002","errorOccurredAI":"\u65e0\u6cd5\u83b7\u53d6 AI \u5185\u5bb9\u3002\u8bf7\u91cd\u8bd5\u3002","errorOccurredExtractText":"\u65e0\u6cd5\u63d0\u53d6\u6587\u4ef6\u5185\u5bb9\u3002\u8bf7\u91cd\u8bd5\u3002","errorOccurredPokemon":"\u672a\u627e\u5230\u7b26\u5408\u6307\u5b9a\u6807\u51c6\u7684\u795e\u5947\u5b9d\u8d1d\u3002","errorCannotConvert":"\u65e0\u6cd5\u8f6c\u6362","autoComplete":{"Tools":"\u5de5\u5177","Modules":"\u6a21\u5757","SearchForATool":"\u641c\u7d22\u5de5\u5177\u3001\u7c7b\u522b\u6216\u6807\u7b7e...","NoToolsFoundForThisQuery":"\u672a\u627e\u5230\u9488\u5bf9\u8be5\u67e5\u8be2\u7684\u5de5\u5177\u3002","SubmitARequest":"\u63d0\u4ea4\u8bf7\u6c42","WeWillMakeIt":"\u6211\u4eec\u4f1a\u6210\u529f\u7684\uff01","CategoriesFilter":"\u5206\u7c7b\u8fc7\u6ee4\u5668","NoCategoriesFoundForThisQuery":"\u672a\u627e\u5230\u4e0e\u8be5\u67e5\u8be2\u5bf9\u5e94\u7684\u7c7b\u522b\u3002","TagsFilter":"\u6807\u7b7e\u8fc7\u6ee4\u5668","NoTagsFoundForThisQuery":"\u672a\u627e\u5230\u4e0e\u8be5\u67e5\u8be2\u5bf9\u5e94\u7684\u6807\u7b7e\u3002","ToNavigate":"\u5bfc\u822a","ToSelect":"\u9009\u62e9","ToClose":"\u5173\u95ed","ToCancel":"\u53d6\u6d88"}},"defaultSwatches":["#264653","#2a9d8f","#e9c46a","rgb(244,162,97)","#e76f51","#d62828","navy","#07b","#0096c7","#00b4d880","rgba(0,119,182,0.8)"]};
//# sourceURL=theme-js-js-extra
/* ]]> */
</script>
<script type="text/javascript" src="https://iotools.cloud/wp-content/themes/iotools/dist/main.min.js?ver=259ef45330ced242c33ef3b80fd51f0d" id="theme-js-js"></script>
<script type="text/javascript" src="https://iotools.cloud/wp-content/themes/iotools/dist/modules/52d24ea3c3428010922e8d25913174be.min.js?ver=aa6e4b01d930a90ef0140f26b4cd479d" id="theme-js-52d24ea3c3428010922e8d25913174be-js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js?ver=259ef45330ced242c33ef3b80fd51f0d" id="highlight-js-js"></script>
<script id="wp-emoji-settings" type="application/json">
{"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://iotools.cloud/wp-includes/js/wp-emoji-release.min.js?ver=6.9.1"}}
</script>
<script type="module">
/* <![CDATA[ */
/*! This file is auto-generated */
const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))});
//# sourceURL=https://iotools.cloud/wp-includes/js/wp-emoji-loader.min.js
/* ]]> */
</script>
<script type="text/javascript">(function (undefined) {let scriptOptions={"_localizedStrings":{"redirect_overlay_title":"Hold On","redirect_overlay_text":"You are being redirected to another page,<br>it may take a few seconds.","webview_notification_text":"The selected provider doesn't support embedded browsers!"},"_targetWindow":"prefer-popup","_redirectOverlay":"overlay-with-spinner-and-message","_unsupportedWebviewBehavior":""};
/**
 * Used when Cross-Origin-Opener-Policy blocked the access to the opener. We can't have a reference of the opened windows, so we should attempt to refresh only the windows that has opened popups.
 */
window._nslHasOpenedPopup = false;
window._nslWebViewNoticeElement = null;

window.NSLPopup = function (url, title, w, h) {

    /**
     * Cross-Origin-Opener-Policy blocked the access to the opener
     */
    if (typeof BroadcastChannel === "function") {
        const _nslLoginBroadCastChannel = new BroadcastChannel('nsl_login_broadcast_channel');
        _nslLoginBroadCastChannel.onmessage = (event) => {
            if (window?._nslHasOpenedPopup && event.data?.action === 'redirect') {
                window._nslHasOpenedPopup = false;

                const url = event.data?.href;
                _nslLoginBroadCastChannel.close();
                if (typeof window.nslRedirect === 'function') {
                    window.nslRedirect(url);
                } else {
                    window.opener.location = url;
                }
            }
        };
    }

    const userAgent = navigator.userAgent,
        mobile = function () {
            return /\b(iPhone|iP[ao]d)/.test(userAgent) ||
                /\b(iP[ao]d)/.test(userAgent) ||
                /Android/i.test(userAgent) ||
                /Mobile/i.test(userAgent);
        },
        screenX = window.screenX !== undefined ? window.screenX : window.screenLeft,
        screenY = window.screenY !== undefined ? window.screenY : window.screenTop,
        outerWidth = window.outerWidth !== undefined ? window.outerWidth : document.documentElement.clientWidth,
        outerHeight = window.outerHeight !== undefined ? window.outerHeight : document.documentElement.clientHeight - 22,
        targetWidth = mobile() ? null : w,
        targetHeight = mobile() ? null : h,
        left = parseInt(screenX + (outerWidth - targetWidth) / 2, 10),
        right = parseInt(screenY + (outerHeight - targetHeight) / 2.5, 10),
        features = [];
    if (targetWidth !== null) {
        features.push('width=' + targetWidth);
    }
    if (targetHeight !== null) {
        features.push('height=' + targetHeight);
    }
    features.push('left=' + left);
    features.push('top=' + right);
    features.push('scrollbars=1');

    const newWindow = window.open(url, title, features.join(','));

    if (window.focus) {
        newWindow.focus();
    }

    window._nslHasOpenedPopup = true;

    return newWindow;
};

let isWebView = null;

function checkWebView() {
    if (isWebView === null) {
        function _detectOS(ua) {
            if (/Android/.test(ua)) {
                return "Android";
            } else if (/iPhone|iPad|iPod/.test(ua)) {
                return "iOS";
            } else if (/Windows/.test(ua)) {
                return "Windows";
            } else if (/Mac OS X/.test(ua)) {
                return "Mac";
            } else if (/CrOS/.test(ua)) {
                return "Chrome OS";
            } else if (/Firefox/.test(ua)) {
                return "Firefox OS";
            }
            return "";
        }

        function _detectBrowser(ua) {
            let android = /Android/.test(ua);

            if (/Opera Mini/.test(ua) || / OPR/.test(ua) || / OPT/.test(ua)) {
                return "Opera";
            } else if (/CriOS/.test(ua)) {
                return "Chrome for iOS";
            } else if (/Edge/.test(ua)) {
                return "Edge";
            } else if (android && /Silk\//.test(ua)) {
                return "Silk";
            } else if (/Chrome/.test(ua)) {
                return "Chrome";
            } else if (/Firefox/.test(ua)) {
                return "Firefox";
            } else if (android) {
                return "AOSP";
            } else if (/MSIE|Trident/.test(ua)) {
                return "IE";
            } else if (/Safari\//.test(ua)) {
                return "Safari";
            } else if (/AppleWebKit/.test(ua)) {
                return "WebKit";
            }
            return "";
        }

        function _detectBrowserVersion(ua, browser) {
            if (browser === "Opera") {
                return /Opera Mini/.test(ua) ? _getVersion(ua, "Opera Mini/") :
                    / OPR/.test(ua) ? _getVersion(ua, " OPR/") :
                        _getVersion(ua, " OPT/");
            } else if (browser === "Chrome for iOS") {
                return _getVersion(ua, "CriOS/");
            } else if (browser === "Edge") {
                return _getVersion(ua, "Edge/");
            } else if (browser === "Chrome") {
                return _getVersion(ua, "Chrome/");
            } else if (browser === "Firefox") {
                return _getVersion(ua, "Firefox/");
            } else if (browser === "Silk") {
                return _getVersion(ua, "Silk/");
            } else if (browser === "AOSP") {
                return _getVersion(ua, "Version/");
            } else if (browser === "IE") {
                return /IEMobile/.test(ua) ? _getVersion(ua, "IEMobile/") :
                    /MSIE/.test(ua) ? _getVersion(ua, "MSIE ")
                        :
                        _getVersion(ua, "rv:");
            } else if (browser === "Safari") {
                return _getVersion(ua, "Version/");
            } else if (browser === "WebKit") {
                return _getVersion(ua, "WebKit/");
            }
            return "0.0.0";
        }

        function _getVersion(ua, token) {
            try {
                return _normalizeSemverString(ua.split(token)[1].trim().split(/[^\w\.]/)[0]);
            } catch (o_O) {
            }
            return "0.0.0";
        }

        function _normalizeSemverString(version) {
            const ary = version.split(/[\._]/);
            return (parseInt(ary[0], 10) || 0) + "." +
                (parseInt(ary[1], 10) || 0) + "." +
                (parseInt(ary[2], 10) || 0);
        }

        function _isWebView(ua, os, browser, version, options) {
            switch (os + browser) {
                case "iOSSafari":
                    return false;
                case "iOSWebKit":
                    return _isWebView_iOS(options);
                case "AndroidAOSP":
                    return false;
                case "AndroidChrome":
                    return parseFloat(version) >= 42 ? /; wv/.test(ua) : /\d{2}\.0\.0/.test(version) ? true : _isWebView_Android(options);
            }
            return false;
        }

        function _isWebView_iOS(options) {
            const document = (window["document"] || {});

            if ("WEB_VIEW" in options) {
                return options["WEB_VIEW"];
            }
            return !("fullscreenEnabled" in document || "webkitFullscreenEnabled" in document || false);
        }

        function _isWebView_Android(options) {
            if ("WEB_VIEW" in options) {
                return options["WEB_VIEW"];
            }
            return !("requestFileSystem" in window || "webkitRequestFileSystem" in window || false);
        }

        const options = {},
            nav = window.navigator || {},
            ua = nav.userAgent || "",
            os = _detectOS(ua),
            browser = _detectBrowser(ua),
            browserVersion = _detectBrowserVersion(ua, browser);

        isWebView = _isWebView(ua, os, browser, browserVersion, options);
    }

    return isWebView;
}

function isAllowedWebViewForUserAgent(provider) {
    const facebookAllowedWebViews = [
        'Instagram',
        'FBAV',
        'FBAN'
    ];
    let whitelist = [];

    if (provider && provider === 'facebook') {
        whitelist = facebookAllowedWebViews;
    }

    const nav = window.navigator || {},
        ua = nav.userAgent || "";

    if (whitelist.length && ua.match(new RegExp(whitelist.join('|')))) {
        return true;
    }

    return false;
}

function disableButtonInWebView(providerButtonElement) {
    if (providerButtonElement) {
        providerButtonElement.classList.add('nsl-disabled-provider');
        providerButtonElement.setAttribute('href', '#');

        providerButtonElement.addEventListener('pointerdown', (e) => {
            if (!window._nslWebViewNoticeElement) {
                window._nslWebViewNoticeElement = document.createElement('div');
                window._nslWebViewNoticeElement.id = "nsl-notices-fallback";
                window._nslWebViewNoticeElement.addEventListener('pointerdown', function (e) {
                    this.parentNode.removeChild(this);
                    window._nslWebViewNoticeElement = null;
                });
                const webviewNoticeHTML = '<div class="error"><p>' + scriptOptions._localizedStrings.webview_notification_text + '</p></div>';

                window._nslWebViewNoticeElement.insertAdjacentHTML("afterbegin", webviewNoticeHTML);
                document.body.appendChild(window._nslWebViewNoticeElement);
            }
        });
    }

}

window._nslDOMReady(function () {

    window.nslRedirect = function (url) {
        if (scriptOptions._redirectOverlay) {
            const overlay = document.createElement('div');
            overlay.id = "nsl-redirect-overlay";
            let overlayHTML = '';
            const overlayContainer = "<div id='nsl-redirect-overlay-container'>",
                overlayContainerClose = "</div>",
                overlaySpinner = "<div id='nsl-redirect-overlay-spinner'></div>",
                overlayTitle = "<p id='nsl-redirect-overlay-title'>" + scriptOptions._localizedStrings.redirect_overlay_title + "</p>",
                overlayText = "<p id='nsl-redirect-overlay-text'>" + scriptOptions._localizedStrings.redirect_overlay_text + "</p>";

            switch (scriptOptions._redirectOverlay) {
                case "overlay-only":
                    break;
                case "overlay-with-spinner":
                    overlayHTML = overlayContainer + overlaySpinner + overlayContainerClose;
                    break;
                default:
                    overlayHTML = overlayContainer + overlaySpinner + overlayTitle + overlayText + overlayContainerClose;
                    break;
            }

            overlay.insertAdjacentHTML("afterbegin", overlayHTML);
            document.body.appendChild(overlay);
        }

        window.location = url;
    };

    let targetWindow = scriptOptions._targetWindow || 'prefer-popup',
        lastPopup = false;


    document.addEventListener('click', function (e) {
        if (e.target) {
            const buttonLinkElement = e.target.closest('a[data-plugin="nsl"][data-action="connect"]') || e.target.closest('a[data-plugin="nsl"][data-action="link"]');
            if (buttonLinkElement) {
                if (lastPopup && !lastPopup.closed) {
                    e.preventDefault();
                    lastPopup.focus();
                } else {

                    let href = buttonLinkElement.href,
                        success = false;
                    if (href.indexOf('?') !== -1) {
                        href += '&';
                    } else {
                        href += '?';
                    }

                    const redirectTo = buttonLinkElement.dataset.redirect;
                    if (redirectTo === 'current') {
                        href += 'redirect=' + encodeURIComponent(window.location.href) + '&';
                    } else if (redirectTo && redirectTo !== '') {
                        href += 'redirect=' + encodeURIComponent(redirectTo) + '&';
                    }

                    if (targetWindow !== 'prefer-same-window' && checkWebView()) {
                        targetWindow = 'prefer-same-window';
                    }

                    if (targetWindow === 'prefer-popup') {
                        lastPopup = NSLPopup(href + 'display=popup', 'nsl-social-connect', buttonLinkElement.dataset.popupwidth, buttonLinkElement.dataset.popupheight);
                        if (lastPopup) {
                            success = true;
                            e.preventDefault();
                        }
                    } else if (targetWindow === 'prefer-new-tab') {
                        const newTab = window.open(href + 'display=popup', '_blank');
                        if (newTab) {
                            if (window.focus) {
                                newTab.focus();
                            }
                            success = true;
                            window._nslHasOpenedPopup = true;
                            e.preventDefault();
                        }
                    }

                    if (!success) {
                        window.location = href;
                        e.preventDefault();
                    }
                }
            }
        }
    });

    let buttonCountChanged = false;

    const googleLoginButtons = document.querySelectorAll(' a[data-plugin="nsl"][data-provider="google"]');
    if (googleLoginButtons.length && checkWebView()) {
        googleLoginButtons.forEach(function (googleLoginButton) {
            if (scriptOptions._unsupportedWebviewBehavior === 'disable-button') {
                disableButtonInWebView(googleLoginButton);
            } else {
                googleLoginButton.remove();
                buttonCountChanged = true;
            }
        });
    }

    const facebookLoginButtons = document.querySelectorAll(' a[data-plugin="nsl"][data-provider="facebook"]');
    if (facebookLoginButtons.length && checkWebView() && /Android/.test(window.navigator.userAgent) && !isAllowedWebViewForUserAgent('facebook')) {
        facebookLoginButtons.forEach(function (facebookLoginButton) {
            if (scriptOptions._unsupportedWebviewBehavior === 'disable-button') {
                disableButtonInWebView(facebookLoginButton);
            } else {
                facebookLoginButton.remove();
                buttonCountChanged = true;
            }
        });
    }

    const separators = document.querySelectorAll('div.nsl-separator');
    if (buttonCountChanged && separators.length) {
        separators.forEach(function (separator) {
            const separatorParentNode = separator.parentNode;
            if (separatorParentNode) {
                const separatorButtonContainer = separatorParentNode.querySelector('div.nsl-container-buttons');
                if (separatorButtonContainer && !separatorButtonContainer.hasChildNodes()) {
                    separator.remove();
                }
            }
        })
    }
});})();</script>
<div id="io-modal-login" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-scrollable modal-md" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">需要登录</h5>

        <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
          <i class="ti ti-x" aria-hidden="true" data-no-translation=""></i>
        </button>
      </div>

      <div class="modal-body">
        请 <a class="white bg-blue rounded p-1 pl-1 pr-2" rel="nofollow" href="https://iotools.cloud/zh/account/"><i class="ti ti-user-circle" data-no-translation=""></i> 登入</a> 或 <a rel="nofollow" href="https://iotools.cloud/zh/register/"><u>登记</u></a> 管理您的书签。免费！      </div>
    </div>
  </div>
</div>
<div id="io-modal-request" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-scrollable modal-md" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">需要登录</h5>

        <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
          <i class="ti ti-x" aria-hidden="true" data-no-translation=""></i>
        </button>
      </div>

      <div class="modal-body">
        请 <a class="white bg-blue rounded p-1 pl-1 pr-2" rel="nofollow" href="https://iotools.cloud/zh/account/?redirect_to=https://iotools.cloud/zh/account/request-tool/"><i class="ti ti-user-circle" data-no-translation=""></i> 登入</a> 或 <a rel="nofollow" href="https://iotools.cloud/zh/register/?redirect_to=https://iotools.cloud/zh/account/request-tool/"><u>登记</u></a> 提交工具请求。免费！      </div>
    </div>
  </div>
</div>
<div id="io-modal-community" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-scrollable modal-md" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">需要登录</h5>

        <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
          <i class="ti ti-x" aria-hidden="true" data-no-translation=""></i>
        </button>
      </div>

      <div class="modal-body">
        请 <a class="white bg-blue rounded p-1 pl-1 pr-2" rel="nofollow" href="https://iotools.cloud/zh/account/?redirect_to=https://iotools.cloud/zh/account/byo/"><i class="ti ti-user-circle" data-no-translation=""></i> 登入</a> 或 <a rel="nofollow" href="https://iotools.cloud/zh/register/?redirect_to=https://iotools.cloud/zh/account/byo/"><u>登记</u></a> 构建您自己的工具。它是免费的！
        <div class="card mt-4 mb-0">
          <div class="card-body">
            <h5><i class="ti ti-info-circle" data-no-translation=""></i> 关于自建 (BYO) 建造者</h5>
            <p>我们的 BYO Builder 功能让您无需任何编码知识即可创建自定义工具。您可以：</p>
            <ul>
              <li>使用我们简单的界面创建人工智能工具</li>
              <li>与社区分享您的工具</li>
              <li>获取反馈并改进您的工具</li>
              <li>利用你的创作帮助他人解决问题</li>
            </ul>
            <p class="mb-0">加入我们 <a href="https://iotools.cloud/zh/community-tools/"><u>社区</u></a> 今天就开始构建能够带来改变的工具吧！</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="cf-turnstile" data-sitekey="0x4AAAAAABroE5_aI0mWeJ_q" data-appearance="execute"></div>
</body>
</html>
<!--
Performance optimized by Redis Object Cache. Learn more: https://wprediscache.com

Retrieved 20362 objects (5 MB) from Redis using Predis (v2.4.0).
-->

HTML 格式化器和美化器

你好世界！

相关工具

NDJSON 格式化与验证工具

SVG 转 React JSX 组件转换器

CSV到XML转换器

指导

HTML 格式化器和美化器

如何使用

特征

 常问问题

HTML 压缩和美化有什么区别？

HTML格式化是否会影响浏览器渲染？