CINXE.COM

<!DOCTYPE html><html lang="en" class="font-sans text-[16px]"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width"><title>HTML.ZONE</title><link rel="canonical" href="https://html.zone/"><meta name="description" content="Web is Cool, Web is Best."><meta name="robots" content="index, follow"><meta property="og:title" content="HTML.ZONE"><meta property="og:type" content="website"><meta property="og:image" content="https://cloudflare.html.zone/banner.png"><meta property="og:url" content="https://html.zone/"><meta property="og:description" content="Web is Cool, Web is Best."><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="https://html.zone/"><meta name="twitter:title" content="HTML.ZONE"><meta name="twitter:image" content="https://cloudflare.html.zone/banner.png"><meta name="twitter:description" content="Web is Cool, Web is Best."><link rel="stylesheet" href="/_astro/index.B7q_ulWq.css"><script type="module" src="/_astro/page.CAlCP_Mt.js"></script></head> <body class="antialiased"> <main class="flex flex-col min-h-screen"> <section class="pb-6"> <nav class="container relative z-50 h-24 select-none" x-data="{ showMenu: false }"> <div class="container relative flex flex-wrap items-center justify-between h-24 px-0 mx-auto overflow-hidden font-medium border-b border-gray-200 md:overflow-visible lg:justify-center"> <div class="flex items-center justify-start w-1/4 h-full pr-4"> <a href="/" class="flex items-center py-4 space-x-2 text-xl font-extrabold text-gray-900 md:py-0"> <span class="flex items-center justify-center w-8 h-8 text-white bg-gray-900 rounded-full"> <span class="w-6 h-6 icon-[entypo--code]"></span> </span> <span class="mx-2">HTML<dot class="text-indigo-600">.</dot>ZONE</span> </a> </div> <div class="top-0 left-0 items-start hidden w-full h-full p-4 text-sm bg-gray-900 bg-opacity-50 md:items-center md:w-3/4 md:absolute lg:text-base md:bg-transparent md:p-0 md:relative md:flex" :class="{'flex fixed': showMenu, 'hidden': !showMenu }" @touchmove.prevent> <div class="flex-col w-full h-auto overflow-hidden bg-white rounded-lg md:bg-transparent md:overflow-visible md:rounded-none md:relative md:flex md:flex-row"> <a href="/" target="_blank" class="inline-flex items-center block w-auto h-16 px-6 text-xl font-black leading-none text-gray-900 md:hidden"> <span class="flex items-center justify-center w-8 h-8 text-white bg-gray-900 rounded-full"> <span class="w-6 h-6 icon-[entypo--code]"></span> </span> <span class="mx-2">HTML<dot class="text-indigo-600">.</dot>ZONE</span> </a> <div class="w-full"></div> <div class="flex flex-col items-start justify-end w-full pt-4 md:items-center md:w-1/3 md:flex-row md:py-0">  <span class="w-full px-6 py-2 mr-0 text-gray-700 cursor-pointer md:px-3 md:mr-2 lg:mr-3 md:w-auto" @click="navigator.share({title: document.title,url: location.href})">Share</span> <a href="https://www.buymeacoffee.com/ccbikai" target="_blank" class="inline-flex items-center w-full px-5 px-6 py-3 text-sm font-medium leading-4 text-white bg-gray-900 md:w-auto md:rounded-full hover:bg-gray-800 focus:outline-none md:focus:ring-2 focus:ring-0 focus:ring-offset-2 focus:ring-gray-800">Donate</a> </div> </div> </div> <div @click="showMenu = !showMenu" x-cloak class="absolute right-0 flex flex-col items-center items-end justify-center w-10 h-10 bg-white rounded-full cursor-pointer md:hidden hover:bg-gray-100" :class="{'right-2': showMenu }"> <span x-show="!showMenu" class="w-6 h-6 icon-[mdi--dots-horizontal]"></span> <span x-show="showMenu" class="w-6 h-6 icon-[mdi--window-close]"></span> </div> </div> </nav> </section> <section class="flex flex-1"> <div class="container mx-auto"> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();;(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="Zrv8P3" prefix="r0" component-url="/_astro/product-grid.DS1KApph.js" component-export="ProductGrid" renderer-url="/_astro/client.CcPSD-uU.js" props="{}" ssr client="load" opts="{"name":"ProductGrid","value":true}" await-children><div class="grid w-full grid-cols-3 gap-4 auto-rows-min md:auto-rows-[22rem]"><div class="group relative flex flex-col justify-between overflow-hidden rounded-xl bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] col-span-3 break-all h-[16rem] md:h-auto md:col-span-2"><div><div class="absolute w-full h-full"><img class="object-scale-down mx-auto" src="/_astro/sink.DHi9bj4b.png" alt="sink"/><div class="absolute bottom-0 left-0 right-0 h-[50%] bg-gradient-to-t from-white via-white to-transparent"></div></div></div><div class="pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10"><h3 class="text-xl font-semibold text-neutral-700 dark:text-neutral-300"><div class="font-bold text-xl md:text-2xl" style="--sparkles-first-color:#9E7AFF;--sparkles-second-color:#FE8BBB"><span class="relative inline-block"><strong>Sink</strong></span></div></h3><p class="max-w-full text-neutral-600">基于 Cloudflare 带访问统计的短链接系统</p></div><div class="pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"><a href="https://sink.cool" target="_blank" title="Sink" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 pointer-events-auto">立即使用<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></a></div><div class="pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10"></div></div><div class="group relative flex flex-col justify-between overflow-hidden rounded-xl bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] col-span-3 break-all h-[16rem] md:h-auto md:col-span-1"><div><div class="absolute w-full h-full"><img class="object-scale-down mx-auto" src="/_astro/broadcast-channel.BaopoNwA.png" alt="BroadcastChannel"/><div class="absolute bottom-0 left-0 right-0 h-[50%] bg-gradient-to-t from-white via-white to-transparent"></div></div></div><div class="pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10"><h3 class="text-xl font-semibold text-neutral-700 dark:text-neutral-300"><div class="font-bold text-xl md:text-2xl" style="--sparkles-first-color:#9E7AFF;--sparkles-second-color:#FE8BBB"><span class="relative inline-block"><strong>BroadcastChannel</strong></span></div></h3><p class="max-w-full text-neutral-600">将你的 Telegram Channel 转为微博客</p></div><div class="pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"><a href="https://github.com/ccbikai/BroadcastChannel" target="_blank" title="BroadcastChannel" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 pointer-events-auto">立即使用<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></a></div><div class="pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10"></div></div><div class="group relative flex flex-col justify-between overflow-hidden rounded-xl bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] col-span-3 break-all h-[16rem] md:h-auto md:col-span-1"><div><div class="absolute w-full h-full"><img class="object-scale-down mx-auto" src="/_astro/markitdown.CVIsOC8y.png" alt="markitdown"/><div class="absolute bottom-0 left-0 right-0 h-[50%] bg-gradient-to-t from-white via-white to-transparent"></div></div></div><div class="pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10"><h3 class="text-xl font-semibold text-neutral-700 dark:text-neutral-300"><div class="font-bold text-xl md:text-2xl" style="--sparkles-first-color:#9E7AFF;--sparkles-second-color:#FE8BBB"><span class="relative inline-block"><strong>MarkItDown</strong></span></div></h3><p class="max-w-full text-neutral-600">将 Office 文档转换为 Markdown</p></div><div class="pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"><a href="/markitdown" target="_blank" title="MarkItDown" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 pointer-events-auto">立即使用<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></a></div><div class="pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10"></div></div><div class="group relative flex flex-col justify-between overflow-hidden rounded-xl bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] col-span-3 break-all h-[16rem] md:h-auto md:col-span-2"><div><div class="absolute w-full h-full"><img class="object-scale-down mx-auto" src="/_astro/temp-mail.DJDUGdjf.png" alt="temp-mail"/><div class="absolute bottom-0 left-0 right-0 h-[50%] bg-gradient-to-t from-white via-white to-transparent"></div></div></div><div class="pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10"><h3 class="text-xl font-semibold text-neutral-700 dark:text-neutral-300"><div class="font-bold text-xl md:text-2xl" style="--sparkles-first-color:#9E7AFF;--sparkles-second-color:#FE8BBB"><span class="relative inline-block"><strong>TempMail.Best</strong></span></div></h3><p class="max-w-full text-neutral-600">最棒的一次性邮箱服务, 100% 运行在 Cloudflare</p></div><div class="pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"><a href="https://tempmail.best" target="_blank" title="TempMail.Best" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 pointer-events-auto">立即使用<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></a></div><div class="pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10"></div></div><div class="group relative flex flex-col justify-between overflow-hidden rounded-xl bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] col-span-3 break-all h-[16rem] md:h-auto md:col-span-2"><div><div class="absolute w-full h-full"><img class="object-scale-down mx-auto" src="/_astro/background-remover.BWD-EFgY.png" alt="background-remover"/><div class="absolute bottom-0 left-0 right-0 h-[50%] bg-gradient-to-t from-white via-white to-transparent"></div></div></div><div class="pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10"><h3 class="text-xl font-semibold text-neutral-700 dark:text-neutral-300"><div class="font-bold text-xl md:text-2xl" style="--sparkles-first-color:#9E7AFF;--sparkles-second-color:#FE8BBB"><span class="relative inline-block"><strong>AI 一键去除背景</strong></span></div></h3><p class="max-w-full text-neutral-600">AI 一键去除图片背景，快速抠图，瞬间实现背景去除</p></div><div class="pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"><a href="/background-remover/" target="_blank" title="AI 一键去除背景" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 pointer-events-auto">立即使用<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></a></div><div class="pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10"></div></div><div class="group relative flex flex-col justify-between overflow-hidden rounded-xl bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] col-span-3 break-all h-[16rem] md:h-auto md:col-span-1"><div><div class="absolute inset-0 mx-auto aspect-[1/1] w-full max-w-[600px]"><canvas class="h-full w-full opacity-0 transition-opacity duration-500 [contain:layout_paint_size]"></canvas></div></div><div class="pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10"><h3 class="text-xl font-semibold text-neutral-700 dark:text-neutral-300"><div class="font-bold text-xl md:text-2xl" style="--sparkles-first-color:#9E7AFF;--sparkles-second-color:#FE8BBB"><span class="relative inline-block"><strong>DNS.Surf</strong></span></div></h3><p class="max-w-full text-neutral-600">检查 DNS 在全球各地的解析结果</p></div><div class="pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"><a href="https://dns.surf" target="_blank" title="DNS.Surf" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 pointer-events-auto">立即使用<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></a></div><div class="pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10"></div></div><div class="group relative flex flex-col justify-between overflow-hidden rounded-xl bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] col-span-3 break-all h-[16rem] md:h-auto md:col-span-3"><div><div class="absolute w-full h-full"><img class="object-scale-down mx-auto" src="/_astro/long.Cr4FA_ay.png" alt="loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo.ong"/><div class="absolute bottom-0 left-0 right-0 h-[50%] bg-gradient-to-t from-white via-white to-transparent"></div></div></div><div class="pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10"><h3 class="text-xl font-semibold text-neutral-700 dark:text-neutral-300"><div class="font-bold text-xl md:text-2xl" style="--sparkles-first-color:#9E7AFF;--sparkles-second-color:#FE8BBB"><span class="relative inline-block"><strong>L(O*62).ONG</strong></span></div></h3><p class="max-w-full text-neutral-600">Make your URL looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooonger</p></div><div class="pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"><a href="https://loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo.ong/" target="_blank" title="L(O*62).ONG" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 pointer-events-auto">立即使用<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></a></div><div class="pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10"></div></div><div class="group relative flex flex-col justify-between overflow-hidden rounded-xl bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] col-span-3 break-all h-[16rem] md:h-auto md:col-span-2"><div><div class="absolute w-full h-full"><img class="object-scale-down mx-auto" src="/_astro/whois.BE0ut_ep.png" alt="whois"/><div class="absolute bottom-0 left-0 right-0 h-[50%] bg-gradient-to-t from-white via-white to-transparent"></div></div></div><div class="pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10"><h3 class="text-xl font-semibold text-neutral-700 dark:text-neutral-300"><div class="font-bold text-xl md:text-2xl" style="--sparkles-first-color:#9E7AFF;--sparkles-second-color:#FE8BBB"><span class="relative inline-block"><strong>WHOIS</strong></span></div></h3><p class="max-w-full text-neutral-600">查询域名/TLD/ASN/IP的 WHOIS 信息</p></div><div class="pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"><a href="/whois/" target="_blank" title="WHOIS" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 pointer-events-auto">立即使用<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></a></div><div class="pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10"></div></div><div class="group relative flex flex-col justify-between overflow-hidden rounded-xl bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] col-span-3 break-all h-[16rem] md:h-auto md:col-span-1"><div><div class="absolute w-full h-full [&>img]:w-full [&>img]:object-cover"><img class="object-scale-down mx-auto" src="https://avatar.html.zone/home" alt="ugly-avatar"/><div class="absolute bottom-0 left-0 right-0 h-[50%] bg-gradient-to-t from-white via-white to-transparent"></div></div></div><div class="pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10"><h3 class="text-xl font-semibold text-neutral-700 dark:text-neutral-300"><div class="font-bold text-xl md:text-2xl" style="--sparkles-first-color:#9E7AFF;--sparkles-second-color:#FE8BBB"><span class="relative inline-block"><strong>丑丑头像</strong></span></div></h3><p class="max-w-full text-neutral-600">随机生成丑丑头像</p></div><div class="pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"><a href="/ugly-avatar/" target="_blank" title="丑丑头像" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 pointer-events-auto">立即使用<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></a></div><div class="pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10"></div></div><div class="group relative flex flex-col justify-between overflow-hidden rounded-xl bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] col-span-3 break-all h-[16rem] md:h-auto md:col-span-1"><div><div class="absolute w-full h-full"><img class="object-scale-down mx-auto" src="/_astro/myip.DZVYBDnk.png" alt="ip"/><div class="absolute bottom-0 left-0 right-0 h-[50%] bg-gradient-to-t from-white via-white to-transparent"></div></div></div><div class="pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10"><h3 class="text-xl font-semibold text-neutral-700 dark:text-neutral-300"><div class="font-bold text-xl md:text-2xl" style="--sparkles-first-color:#9E7AFF;--sparkles-second-color:#FE8BBB"><span class="relative inline-block"><strong>本机IP</strong></span></div></h3><p class="max-w-full text-neutral-600">查询本机访问不同网站的 IP</p></div><div class="pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"><a href="/ip/" target="_blank" title="本机IP" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 pointer-events-auto">立即使用<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></a></div><div class="pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10"></div></div><div class="group relative flex flex-col justify-between overflow-hidden rounded-xl bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] col-span-3 break-all h-[16rem] md:h-auto md:col-span-1"><div><div class="absolute w-full h-full"><img class="object-scale-down mx-auto" src="/_astro/ip-info.9FDEKjBw.png" alt="ip-query"/><div class="absolute bottom-0 left-0 right-0 h-[50%] bg-gradient-to-t from-white via-white to-transparent"></div></div></div><div class="pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10"><h3 class="text-xl font-semibold text-neutral-700 dark:text-neutral-300"><div class="font-bold text-xl md:text-2xl" style="--sparkles-first-color:#9E7AFF;--sparkles-second-color:#FE8BBB"><span class="relative inline-block"><strong>IP 位置信息查询</strong></span></div></h3><p class="max-w-full text-neutral-600">支持 20+ 数据源</p></div><div class="pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"><a href="/ip/query/" target="_blank" title="IP 位置信息查询" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 pointer-events-auto">立即使用<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></a></div><div class="pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10"></div></div><div class="group relative flex flex-col justify-between overflow-hidden rounded-xl bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] transform-gpu dark:bg-black dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] col-span-3 break-all h-[16rem] md:h-auto md:col-span-1"><div></div><div class="pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10"><h3 class="text-xl font-semibold text-neutral-700 dark:text-neutral-300"><div class="font-bold text-xl md:text-2xl" style="--sparkles-first-color:#9E7AFF;--sparkles-second-color:#FE8BBB"><span class="relative inline-block"><strong>MORE</strong></span></div></h3><p class="max-w-full text-neutral-600">更多工具正在开发中...</p></div><div class="pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"><a href="" target="_blank" title="MORE" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 pointer-events-auto">敬请期待<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4"><path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></a></div><div class="pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10"></div></div></div></astro-island> </div> </section> <section class="text-gray-700 md:pt-6"> <div class="container flex flex-col items-center py-8 mx-auto gap-2 lg:gap-5 items-start sm:flex-row sm:items-start"> <div class="flex flex-col items-center sm:items-start py-1"> <a href="/" class="text-xl font-black leading-none text-gray-900 select-none logo">HTML<dot class="text-indigo-600">.</dot>ZONE</a> <a class="mt-4 text-sm text-gray-500 block" href="https://html.zone" target="_blank"> © 2025 Web is Cool, Web is Best. </a> </div> <div class="flex-1 sm:px-2 md:px-10 lg:px-20 xl:px-36 text-center sm:text-left"> <div class="text-lg font-bold text-gray-900 mb-4 hidden sm:block">Products</div> <div class="grid grid-cols-2 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-1"> <a href="https://tempmail.best/" class="text-xs lg:text-sm leading-6 text-gray-500 hover:text-gray-900" title="TempMail.Best"> TempMail.Best </a><a href="https://sink.cool/" class="text-xs lg:text-sm leading-6 text-gray-500 hover:text-gray-900" title="Sink.Cool"> Sink.Cool </a><a href="https://dns.surf/" class="text-xs lg:text-sm leading-6 text-gray-500 hover:text-gray-900" title="DNS.Surf"> DNS.Surf </a><a href="https://loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo.ong/" class="text-xs lg:text-sm leading-6 text-gray-500 hover:text-gray-900" title="L(O*62).ONG"> L(O*62).ONG </a><a href="https://www.beauty.codes/" class="text-xs lg:text-sm leading-6 text-gray-500 hover:text-gray-900" title="Beauty.Codes"> Beauty.Codes </a><a href="https://www.awesome-homelab.com/" class="text-xs lg:text-sm leading-6 text-gray-500 hover:text-gray-900" title="Awesome Homelab"> Awesome Homelab </a> </div> </div> <div class="inline-flex justify-center gap-5 mt-4 sm:ml-auto sm:mt-0 sm:grid sm:gap-y-1 sm:grid-cols-3"> <a x-init="$el.href = $el.href.replace('$', '@')" href="mailto:html.zone$miantiao.me" title="Email" class="text-gray-400 hover:text-gray-500"> <span class="sr-only">Email</span> <span class="w-6 h-6 icon-[mdi--email]"></span> </a> <a href="https://t.me/htmlzone" target="_blank" title="Telegram" class="text-gray-400 hover:text-gray-500"> <span class="sr-only">Telegram</span> <span class="w-6 h-6 icon-[mdi--telegram]"></span> </a> <a href="https://mt.ci" target="_blank" title="Blog" class="text-gray-400 hover:text-gray-500"> <span class="sr-only">Blog</span> <span class="w-6 h-6 icon-[mdi--blogger]"></span> </a> <a href="https://404.li/x" target="_blank" title="Twitter" class="text-gray-400 hover:text-gray-500"> <span class="sr-only">Twitter</span> <span class="w-6 h-6 icon-[mdi--twitter]"></span> </a> <a href="https://c.im/@mt" target="_blank" title="Mastodon" class="text-gray-400 hover:text-gray-500"> <span class="sr-only">Mastodon</span> <span class="w-6 h-6 icon-[mdi--mastodon]"></span> </a> <a href="https://github.com/ccbikai" target="_blank" title="GitHub" class="text-gray-400 hover:text-gray-500"> <span class="sr-only">GitHub</span> <span class="w-6 h-6 icon-[mdi--github]"></span> </a> </div> </div> </section> </main> <script type="module">"serviceWorker"in navigator&&navigator.serviceWorker.register("/sw.js",{type:"classic"});window.$track=(i,r,s)=>{window.umami?.track?.(i,r),window.plausible?.(i,{callback:s,props:r})};</script> <script defer data-domain="html.zone" src="https://click.html.zone/js/script.js"></script> <script defer data-website-id="57f65928-a2c7-4838-8216-e1bd93fbcb66" src="https://view.html.zone/script.js"></script> </body> </html>