| ``</td><td>浏览器标签页标题</td></tr><tr><td>`<body>`</td><td>所有可见内容</td></tr></tbody></table></div><hr>
<h2 id="实操" class="tutorial-h2">实操</h2>
<div class="code-block-wrapper">
<div class="code-header"><span>html</span><div class="code-header-actions"><button class="copy-btn" data-code="PCEtLSAxLiDmlrDlu7ogaW5kZXguaHRtbCAtLT4KPCEtLSAyLiDlpI3liLbkuIrpnaLnmoTpqqjmnrYgLS0+CjwhLS0gMy4g5ZyoIGJvZHkg5Lit5YaZ5YaF5a65IC0tPgo8IS0tIDQuIOeUqOa1j+iniOWZqOaJk+W8gCAtLT4="><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg> 复制</button><button class="run-btn" data-lang="html" data-code="PCEtLSAxLiDmlrDlu7ogaW5kZXguaHRtbCAtLT4KPCEtLSAyLiDlpI3liLbkuIrpnaLnmoTpqqjmnrYgLS0+CjwhLS0gMy4g5ZyoIGJvZHkg5Lit5YaZ5YaF5a65IC0tPgo8IS0tIDQuIOeUqOa1j+iniOWZqOaJk+W8gCAtLT4="><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg> 运行 ▶</button></div></div>
<pre class="code-pre has-header"><code class="language-html hljs"><span class="hljs-comment"><!-- 1. 新建 index.html --></span>
<span class="hljs-comment"><!-- 2. 复制上面的骨架 --></span>
<span class="hljs-comment"><!-- 3. 在 body 中写内容 --></span>
<span class="hljs-comment"><!-- 4. 用浏览器打开 --></span></code></pre>
</div></div><div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700"><h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 mb-4">🛠️ 学完试试这些工具</h3><div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-2"><a class="flex flex-col items-center gap-1 p-3 bg-gray-50 dark:bg-gray-800/40 hover:bg-blue-50 dark:hover:bg-blue-900/20 border border-gray-100 dark:border-gray-800 hover:border-blue-200 dark:hover:border-blue-800 rounded-lg transition-all group" href="/zh/tools/dev/html-beautify"><span class="text-xl">📄</span><span class="text-xs font-medium text-gray-700 dark:text-gray-300 group-hover:text-blue-600 dark:group-hover:text-blue-400">HTML 美化工具</span><span class="text-[10px] text-gray-400 text-center leading-tight">格式化混乱的 HTML 代码</span></a><a class="flex flex-col items-center gap-1 p-3 bg-gray-50 dark:bg-gray-800/40 hover:bg-blue-50 dark:hover:bg-blue-900/20 border border-gray-100 dark:border-gray-800 hover:border-blue-200 dark:hover:border-blue-800 rounded-lg transition-all group" href="/zh/tools/dev/html-entities"><span class="text-xl">🏷️</span><span class="text-xs font-medium text-gray-700 dark:text-gray-300 group-hover:text-blue-600 dark:group-hover:text-blue-400">HTML 实体转换</span><span class="text-[10px] text-gray-400 text-center leading-tight">实体编码 ↔ 字符互转</span></a><a class="flex flex-col items-center gap-1 p-3 bg-gray-50 dark:bg-gray-800/40 hover:bg-blue-50 dark:hover:bg-blue-900/20 border border-gray-100 dark:border-gray-800 hover:border-blue-200 dark:hover:border-blue-800 rounded-lg transition-all group" href="/zh/tools/dev/json-formatter"><span class="text-xl">📋</span><span class="text-xs font-medium text-gray-700 dark:text-gray-300 group-hover:text-blue-600 dark:group-hover:text-blue-400">JSON 格式化</span><span class="text-[10px] text-gray-400 text-center leading-tight">处理 HTML 中的 JSON 数据</span></a><a class="flex flex-col items-center gap-1 p-3 bg-gray-50 dark:bg-gray-800/40 hover:bg-blue-50 dark:hover:bg-blue-900/20 border border-gray-100 dark:border-gray-800 hover:border-blue-200 dark:hover:border-blue-800 rounded-lg transition-all group" href="/zh/tools/network/color-convert"><span class="text-xl">🎨</span><span class="text-xs font-medium text-gray-700 dark:text-gray-300 group-hover:text-blue-600 dark:group-hover:text-blue-400">颜色转换器</span><span class="text-[10px] text-gray-400 text-center leading-tight">HEX/RGB/HSL 颜色转换</span></a></div></div><div class="flex items-center justify-between mt-12 pt-6 border-t border-gray-200 dark:border-gray-700"><a class="flex items-center gap-2 text-sm text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 transition-colors group" href="/zh/tutorials/html/editors"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left group-hover:-translate-x-1 transition-transform" aria-hidden="true"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg><div class="text-left"><div class="text-[10px] text-gray-400">上一篇</div><div class="font-medium">HTML 编辑器</div></div></a><a class="flex items-center gap-2 text-sm text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 transition-colors group" href="/zh/tutorials/html/elements"><div class="text-right"><div class="text-[10px] text-gray-400">下一篇</div><div class="font-medium">HTML 元素</div></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right group-hover:translate-x-1 transition-transform" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></a></div></div></div></div><!--$--><!--/$--></main><footer class="bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800"><div class="max-w-7xl mx-auto px-4 py-12"><div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-8"><div><div class="flex items-center gap-2 mb-3"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml text-blue-500" aria-hidden="true"><path d="m18 16 4-4-4-4"></path><path d="m6 8-4 4 4 4"></path><path d="m14.5 4-5 16"></path></svg><h4 class="font-semibold text-sm text-gray-900 dark:text-white">开发工具</h4></div><ul class="space-y-1.5"><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh/tools/dev/json-formatter">JSON 格式化</a></li><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh/tools/dev/base64">Base64 编解码</a></li><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh/tools/dev/uuid-generator">UUID 生成器</a></li><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh/tools/dev/timestamp">时间戳转换</a></li><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh/tools/network/hash-calc">MD5/SHA 哈希</a></li><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh/tools/dev/js-beautify">JS/HTML/SQL 美化</a></li></ul></div><div><div class="flex items-center gap-2 mb-3"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe text-blue-500" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg><h4 class="font-semibold text-sm text-gray-900 dark:text-white">图像工具</h4></div><ul class="space-y-1.5"><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh/tools/image/image-compress">图片压缩</a></li><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh/tools/image/image-format">格式转换</a></li><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh/tools/image/remove-bg">AI 抠图</a></li><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh/tools/dev/qrcode">二维码生成</a></li><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh/tools/image/color-picker">颜色提取</a></li><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh/tools/image/image-to-base64">图片转 Base64</a></li></ul></div><div><div class="flex items-center gap-2 mb-3"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open text-blue-500" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg><h4 class="font-semibold text-sm text-gray-900 dark:text-white">编程教程</h4></div><ul class="space-y-1.5"><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh/tutorials/python">Python 教程</a></li><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh/tutorials/javascript">JavaScript 教程</a></li><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh/tutorials/typescript">TypeScript 教程</a></li><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh/tutorials/java">Java 教程</a></li><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh/tutorials/sql">SQL 教程</a></li><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh/tutorials/html">HTML 教程</a></li><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh/tutorials/css">CSS 教程</a></li><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh/tutorials/cpp">C++ 教程</a></li><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh/tutorials">查看全部 16 种语言 →</a></li></ul></div><div><div class="flex items-center gap-2 mb-3"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles text-blue-500" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg><h4 class="font-semibold text-sm text-gray-900 dark:text-white">更多工具</h4></div><ul class="space-y-1.5"><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh/tools/ai">AI 智能工具</a></li><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh/tools/network">网络工具</a></li><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh/tools/office">办公工具</a></li><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh/tools/video">视频工具</a></li><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh/tools/text">文本工具</a></li><li><a class="text-[13px] text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="/zh">首页</a></li></ul></div></div><div class="mt-10 pt-6 border-t border-gray-200 dark:border-gray-800 flex flex-col sm:flex-row items-center justify-between gap-3"><div><a class="text-lg font-bold text-gray-900 dark:text-white hover:text-blue-600 transition-colors" href="/zh">Zhank</a><p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">免费在线开发工具平台</p></div><div class="flex items-center gap-4 text-xs text-gray-400 dark:text-gray-500 flex-wrap"><a class="hover:text-gray-600 dark:hover:text-gray-300 font-medium text-blue-500" href="/zh/tutorials">📚 教程</a><a class="hover:text-gray-600 dark:hover:text-gray-300" href="/zh/interview">💼 面试题</a><a class="hover:text-gray-600 dark:hover:text-gray-300" href="/zh/cheatsheets">📋 速查表</a><a class="hover:text-gray-600 dark:hover:text-gray-300" href="/zh/tools/dev">开发工具</a><a class="hover:text-gray-600 dark:hover:text-gray-300" href="/zh/tools/network">网络</a><a class="hover:text-gray-600 dark:hover:text-gray-300" href="/zh/tools/ai">AI</a><a class="hover:text-gray-600 dark:hover:text-gray-300" href="/zh/tools/image">图片</a><a class="hover:text-gray-600 dark:hover:text-gray-300" href="/zh/tools/office">办公</a></div><p class="text-xs text-gray-400 dark:text-gray-600">© 2024 Zhank.com All rights reserved.<!-- --> · <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" class="hover:text-gray-600 dark:hover:text-gray-300">蜀ICP备2024045212号-1</a></p></div></div></footer><script src="/_next/static/chunks/38lyubhlz10w2.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[339756,[\"/_next/static/chunks/146vual1k08xa.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"default\"]\n3:I[837457,[\"/_next/static/chunks/146vual1k08xa.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"default\"]\n4:I[654576,[\"/_next/static/chunks/146vual1k08xa.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"GoogleAnalytics\"]\n7:I[897367,[\"/_next/static/chunks/146vual1k08xa.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"OutletBoundary\"]\n8:\"$Sreact.suspense\"\nb:I[897367,[\"/_next/static/chunks/146vual1k08xa.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"ViewportBoundary\"]\nd:I[897367,[\"/_next/static/chunks/146vual1k08xa.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"MetadataBoundary\"]\nf:I[168027,[\"/_next/static/chunks/146vual1k08xa.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"default\",1]\n11:I[173931,[\"/_next/static/chunks/146vual1k08xa.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\",\"/_next/static/chunks/268lmli3f_0sp.js\",\"/_next/static/chunks/2g80wiu3a551k.js\",\"/_next/static/chunks/2gq3vyge-j7rl.js\"],\"default\"]\n16:I[522016,[\"/_next/static/chunks/146vual1k08xa.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\",\"/_next/static/chunks/268lmli3f_0sp.js\",\"/_next/static/chunks/2g80wiu3a551k.js\",\"/_next/static/chunks/2gq3vyge-j7rl.js\"],\"\"]\n17:I[505014,[\"/_next/static/chunks/146vual1k08xa.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\",\"/_next/static/chunks/268lmli3f_0sp.js\",\"/_next/static/chunks/2g80wiu3a551k.js\",\"/_next/static/chunks/2gq3vyge-j7rl.js\"],\"default\"]\n1b:I[882996,[\"/_next/static/chunks/146vual1k08xa.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\",\"/_next/static/chunks/268lmli3f_0sp.js\",\"/_next/static/chunks/2g80wiu3a551k.js\",\"/_next/static/chunks/2gq3vyge-j7rl.js\"],\"default\"]\n1c:I[282753,[\"/_next/static/chunks/146vual1k08xa.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\",\"/_next/static/chunks/268lmli3f_0sp.js\",\"/_next/static/chunks/2g80wiu3a551k.js\",\"/_next/static/chunks/2gq3vyge-j7rl.js\"],\"default\"]\n1d:I[459586,[\"/_next/static/chunks/146vual1k08xa.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\",\"/_next/static/chunks/268lmli3f_0sp.js\",\"/_next/static/chunks/2g80wiu3a551k.js\",\"/_next/static/chunks/2gq3vyge-j7rl.js\"],\"default\"]\n1e:I[175696,[\"/_next/static/chunks/146vual1k08xa.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\",\"/_next/static/chunks/268lmli3f_0sp.js\",\"/_next/static/chunks/2g80wiu3a551k.js\"],\"default\"]\n20:I[82847,[\"/_next/static/chunks/146vual1k08xa.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\",\"/_next/static/chunks/268lmli3f_0sp.js\",\"/_next/static/chunks/2g80wiu3a551k.js\"],\"AuthProvider\"]\n21:I[583895,[\"/_next/static/chunks/146vual1k08xa.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\",\"/_next/static/chunks/268lmli3f_0sp.js\",\"/_next/static/chunks/2g80wiu3a551k.js\"],\"ThemeProvider\"]\n22:I[603374,[\"/_next/static/chunks/146vual1k08xa.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\",\"/_next/static/chunks/268lmli3f_0sp.js\",\"/_next/static/chunks/2g80wiu3a551k.js\"],\"default\"]\n23:I[58234,[\"/_next/static/chunks/146vual1k08xa.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\",\"/_next/static/chunks/268lmli3f_0sp.js\",\"/_next/static/chunks/2g80wiu3a551k.js\"],\"default\"]\n24:I[948559,[\"/_next/static/chunks/146vual1k08xa.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\",\"/_next/static/chunks/268lmli3f_0sp.js\",\"/_next/static/chunks/2g80wiu3a551k.js\"],\"default\"]\n25:I[27201,[\"/_next/static/chunks/146vual1k08xa.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"IconMark\"]\n:HL[\"/_next/static/chunks/09xhxun5go_af.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"zh\",\"tutorials\",\"html\",\"basic\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[[\"locale\",\"zh\",\"d\",null],{\"children\":[\"tutorials\",{\"children\":[[\"lang\",\"html\",\"d\",null],{\"children\":[[\"slug\",\"basic\",\"d\",null],{\"children\":[\"__PAGE__\",{}]}]}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/09xhxun5go_af.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/146vual1k08xa.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/1ntn7efqc-iiw.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"zh\",\"suppressHydrationWarning\":true,\"children\":[\"$\",\"body\",null,{\"className\":\"min-h-screen flex flex-col bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],[\"$\",\"$L4\",null,{\"gaId\":\"G-L98V3L889J\"}]]}]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/268lmli3f_0sp.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/2g80wiu3a551k.js\",\"async\":true,\"nonce\":\"$undefined\"}]],\"$L5\"]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$L6\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/2gq3vyge-j7rl.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L7\",null,{\"children\":[\"$\",\"$8\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@9\"}]}]]}],{},null,false,null]},null,false,\"$@a\"]},null,false,\"$@a\"]},null,false,\"$@a\"]},null,false,null]},null,false,null],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$Lb\",null,{\"children\":\"$Lc\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"$8\",null,{\"name\":\"Next.Metadata\",\"children\":\"$Le\"}]}]}],null]}],false]],\"m\":\"$undefined\",\"G\":[\"$f\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/09xhxun5go_af.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]]],\"S\":false,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"PVLsH1CflCwbUMISU6ncl\"}\n"])</script><script>self.__next_f.push([1,"10:[]\na:\"$W10\"\n"])</script><script>self.__next_f.push([1,"6:[\"$\",\"div\",null,{\"className\":\"flex min-h-screen\",\"children\":[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"BreadcrumbList\\\",\\\"itemListElement\\\":[{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":1,\\\"name\\\":\\\"教程\\\",\\\"item\\\":\\\"https://zhank.tools/zh/tutorials\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":2,\\\"name\\\":\\\"HTML 教程\\\",\\\"item\\\":\\\"https://zhank.tools/zh/tutorials/html\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":3,\\\"name\\\":\\\"HTML 基础结构\\\"}]}\"}}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"TechArticle\\\",\\\"headline\\\":\\\"HTML 基础结构\\\",\\\"description\\\":\\\"DOCTYPE 声明、html/head/body 标签、第一个网页\\\",\\\"keywords\\\":\\\"html基础,DOCTYPE,html结构\\\",\\\"proficiencyLevel\\\":\\\"Beginner\\\",\\\"about\\\":{\\\"@type\\\":\\\"Thing\\\",\\\"name\\\":\\\"HTML 教程\\\"},\\\"inLanguage\\\":\\\"zh-CN\\\"}\"}}],[\"$\",\"$L11\",null,{\"lang\":\"html\",\"currentSlug\":\"basic\",\"chapters\":[{\"title\":\"HTML 入门\",\"slug\":\"getting-started\",\"tutorials\":[{\"slug\":\"intro\",\"title\":\"HTML 简介\",\"order\":1,\"chapter\":\"HTML 入门\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"了解什么是 HTML、网页是如何工作的、HTML5 新特性\",\"keywords\":\"html教程,html入门,html5\",\"codeRunner\":\"html\"},{\"slug\":\"editors\",\"title\":\"HTML 编辑器\",\"order\":2,\"chapter\":\"HTML 入门\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"VS Code 推荐插件、Live Server、Emmet 快捷输入\",\"keywords\":\"html编辑器,VS Code,Emmet\",\"codeRunner\":\"html\"},{\"slug\":\"basic\",\"title\":\"HTML 基础结构\",\"order\":3,\"chapter\":\"HTML 入门\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"DOCTYPE 声明、html/head/body 标签、第一个网页\",\"keywords\":\"html基础,DOCTYPE,html结构\",\"codeRunner\":\"html\"},{\"slug\":\"elements\",\"title\":\"HTML 元素\",\"order\":4,\"chapter\":\"HTML 入门\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"元素语法、嵌套规则、块级与行内元素、空元素\",\"keywords\":\"html元素,html标签,块级元素\",\"codeRunner\":\"html\"},{\"slug\":\"attributes\",\"title\":\"HTML 属性\",\"order\":5,\"chapter\":\"HTML 入门\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"常用属性 href/src/alt/style、属性值引号、全局属性\",\"keywords\":\"html属性,href,src,alt\",\"codeRunner\":\"html\"},{\"slug\":\"headings\",\"title\":\"标题与段落\",\"order\":6,\"chapter\":\"HTML 入门\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"h1-h6 标题层级、p 段落、br 换行、hr 水平线、pre 预格式化\",\"keywords\":\"html标题,html段落,h1,br\",\"codeRunner\":\"html\"}]},{\"title\":\"文本与排版\",\"slug\":\"text-styles\",\"tutorials\":[{\"slug\":\"formatting\",\"title\":\"文本格式化\",\"order\":7,\"chapter\":\"文本与排版\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"b/strong 加粗、i/em 斜体、small/mark/del/ins/sub/sup 语义标签\",\"keywords\":\"html格式化,bold,italic,语义标签\",\"codeRunner\":\"html\"},{\"slug\":\"styles\",\"title\":\"style 内联样式\",\"order\":8,\"chapter\":\"文本与排版\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"style 属性设置颜色、字体、大小、背景、对齐、边距\",\"keywords\":\"html样式,style属性,内联样式\",\"codeRunner\":\"html\"},{\"slug\":\"comments\",\"title\":\"HTML 注释\",\"order\":9,\"chapter\":\"文本与排版\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"注释语法、注释的用途、调试技巧、快捷键\",\"keywords\":\"html注释,注释语法,调试\",\"codeRunner\":\"html\"},{\"slug\":\"colors\",\"title\":\"HTML 颜色\",\"order\":10,\"chapter\":\"文本与排版\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"颜色名、RGB/RGBA、HEX 十六进制、HSL/HSLA 四种表示法\",\"keywords\":\"html颜色,RGB,HEX,HSL\",\"codeRunner\":\"html\"},{\"slug\":\"quotations\",\"title\":\"引用元素\",\"order\":11,\"chapter\":\"文本与排版\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"blockquote 块引用、q 短引用、abbr 缩写、cite/address/bdo\",\"keywords\":\"html引用,blockquote,abbr,cite\",\"codeRunner\":\"html\"},{\"slug\":\"computercode\",\"title\":\"计算机代码元素\",\"order\":12,\"chapter\":\"文本与排版\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"code/kbd/samp/var/pre 显示代码和键盘输入\",\"keywords\":\"html代码,code,kbd,samp,pre\",\"codeRunner\":\"html\"},{\"slug\":\"symbols\",\"title\":\"符号与表情符号\",\"order\":13,\"chapter\":\"文本与排版\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"版权/商标/货币等常用符号实体、Emoji 表情符号\",\"keywords\":\"html符号,emoji,实体,特殊符号\",\"codeRunner\":\"html\"}]},{\"title\":\"链接\",\"slug\":\"links\",\"tutorials\":[{\"slug\":\"links\",\"title\":\"链接基础\",\"order\":14,\"chapter\":\"链接\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"a 标签 href/target、绝对路径与相对路径、邮件/电话链接\",\"keywords\":\"html链接,a标签,href,target\",\"codeRunner\":\"html\"},{\"slug\":\"link-colors\",\"title\":\"链接颜色与状态\",\"order\":15,\"chapter\":\"链接\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"未访问/已访问/悬停/激活四种状态颜色、下划线样式\",\"keywords\":\"html链接颜色,visited,hover,active\",\"codeRunner\":\"html\"},{\"slug\":\"bookmarks\",\"title\":\"书签与锚点\",\"order\":16,\"chapter\":\"链接\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"id 锚点定义、页面内跳转、跨页面锚点导航\",\"keywords\":\"html书签,锚点,id跳转,页面内导航\",\"codeRunner\":\"html\"}]},{\"title\":\"图像\",\"slug\":\"images\",\"tutorials\":[{\"slug\":\"images\",\"title\":\"图像基础\",\"order\":17,\"chapter\":\"图像\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"img 标签 src/alt、宽高设置、常见格式 JPEG/PNG/GIF/SVG/WebP\",\"keywords\":\"html图片,img标签,src,alt\",\"codeRunner\":\"html\"},{\"slug\":\"imagemap\",\"title\":\"图像映射\",\"order\":18,\"chapter\":\"图像\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"map/area 可点击区域、矩形/圆形/多边形热区\",\"keywords\":\"html图像映射,map,area,热区\",\"codeRunner\":\"html\"},{\"slug\":\"background-images\",\"title\":\"背景图像\",\"order\":19,\"chapter\":\"图像\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"background-image、背景重复/位置/大小、全屏背景\",\"keywords\":\"html背景图,background-image,背景平铺\",\"codeRunner\":\"html\"},{\"slug\":\"picture\",\"title\":\"响应式图片 picture\",\"order\":20,\"chapter\":\"图像\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"picture/source 响应式、srcset 分辨率切换、WebP 兼容回退\",\"keywords\":\"html picture,响应式图片,srcset,webp\",\"codeRunner\":\"html\"},{\"slug\":\"favicon\",\"title\":\"网站图标 Favicon\",\"order\":21,\"chapter\":\"图像\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"link rel=\\\"icon\\\" 设置浏览器标签图标、多种尺寸适配\",\"keywords\":\"html favicon,网站图标,link icon\",\"codeRunner\":\"html\"}]},{\"title\":\"表格\",\"slug\":\"tables\",\"tutorials\":[{\"slug\":\"tables\",\"title\":\"表格基础\",\"order\":22,\"chapter\":\"表格\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"table/tr/td 结构、th 表头、caption 标题\",\"keywords\":\"html表格,table,tr,td\",\"codeRunner\":\"html\"},{\"slug\":\"table-borders\",\"title\":\"表格边框\",\"order\":23,\"chapter\":\"表格\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"border 属性、border-collapse 合并、虚线/实线样式\",\"keywords\":\"html表格边框,border,border-collapse\",\"codeRunner\":\"html\"},{\"slug\":\"table-sizes\",\"title\":\"表格尺寸\",\"order\":24,\"chapter\":\"表格\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"width/height 宽高、百分比与固定像素、列宽控制\",\"keywords\":\"html表格尺寸,width,列宽,百分比\",\"codeRunner\":\"html\"},{\"slug\":\"table-headers\",\"title\":\"表头与分区\",\"order\":25,\"chapter\":\"表格\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"thead/tbody/tfoot 分区、scope 属性、多级表头\",\"keywords\":\"html表头,thead,tbody,scope\",\"codeRunner\":\"html\"},{\"slug\":\"table-padding-spacing\",\"title\":\"内边距与间距\",\"order\":26,\"chapter\":\"表格\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"padding 单元格内边距、border-spacing 单元格间距\",\"keywords\":\"html表格内边距,padding,border-spacing\",\"codeRunner\":\"html\"},{\"slug\":\"colspan-rowspan\",\"title\":\"合并单元格\",\"order\":27,\"chapter\":\"表格\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"colspan 跨列合并、rowspan 跨行合并、复杂表格布局\",\"keywords\":\"html colspan,rowspan,合并单元格\",\"codeRunner\":\"html\"},{\"slug\":\"table-styling\",\"title\":\"表格美化\",\"order\":28,\"chapter\":\"表格\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"斑马纹、悬停高亮、响应式表格、colgroup 列组\",\"keywords\":\"html表格样式,斑马纹,悬停,响应式表格\",\"codeRunner\":\"html\"}]},{\"title\":\"布局与结构\",\"slug\":\"layout\",\"tutorials\":[{\"slug\":\"lists\",\"title\":\"HTML 列表\",\"order\":29,\"chapter\":\"布局与结构\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"ul 无序列表、ol 有序列表、dl 描述列表、嵌套列表\",\"keywords\":\"html列表,ul,ol,dl\",\"codeRunner\":\"html\"},{\"slug\":\"blocks\",\"title\":\"块级与行内元素\",\"order\":30,\"chapter\":\"布局与结构\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"块级 display:block、行内 display:inline、inline-block 对比\",\"keywords\":\"html块级,行内元素,display,inline-block\",\"codeRunner\":\"html\"},{\"slug\":\"div-span\",\"title\":\"div 与 span\",\"order\":31,\"chapter\":\"布局与结构\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"div 块级容器、span 行内容器、结合 CSS 经典布局\",\"keywords\":\"html div,span,容器,页面布局\",\"codeRunner\":\"html\"},{\"slug\":\"class-id\",\"title\":\"class 与 id\",\"order\":32,\"chapter\":\"布局与结构\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"class 复用样式、id 唯一标识、CSS 选择器优先级\",\"keywords\":\"html class,html id,选择器,优先级\",\"codeRunner\":\"html\"},{\"slug\":\"layout\",\"title\":\"页面布局技术\",\"order\":33,\"chapter\":\"布局与结构\",\"language\":\"html\",\"difficulty\":\"基础\",\"description\":\"CSS Float 布局、Flexbox 弹性布局、Grid 网格布局入门\",\"keywords\":\"html布局,float,flexbox,grid\",\"codeRunner\":\"html\"},{\"slug\":\"filepaths\",\"title\":\"文件路径\",\"order\":34,\"chapter\":\"布局与结构\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"绝对路径 vs 相对路径、根目录/上级/同级路径写法\",\"keywords\":\"html文件路径,绝对路径,相对路径\",\"codeRunner\":\"html\"},{\"slug\":\"head\",\"title\":\"head 头部元素\",\"order\":35,\"chapter\":\"布局与结构\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"title/meta/link/style/script/base 元信息标签\",\"keywords\":\"html head,meta,title,link\",\"codeRunner\":\"html\"}]},{\"title\":\"表单\",\"slug\":\"forms\",\"tutorials\":[{\"slug\":\"forms\",\"title\":\"表单基础\",\"order\":36,\"chapter\":\"表单\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"form action/method、input 输入框、label 标签、submit 提交\",\"keywords\":\"html表单,form,input,label\",\"codeRunner\":\"html\"},{\"slug\":\"form-attributes\",\"title\":\"表单属性\",\"order\":37,\"chapter\":\"表单\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"action/method/target/novalidate/autocomplete 等属性\",\"keywords\":\"html表单属性,action,method,novalidate\",\"codeRunner\":\"html\"},{\"slug\":\"form-elements\",\"title\":\"表单元素\",\"order\":38,\"chapter\":\"表单\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"select/option/optgroup、textarea、fieldset/legend、datalist/output\",\"keywords\":\"html表单元素,select,textarea,datalist\",\"codeRunner\":\"html\"},{\"slug\":\"input-types\",\"title\":\"输入类型大全\",\"order\":39,\"chapter\":\"表单\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"text/password/email/number/date/color/range/checkbox/radio/file 等 20+ 类型\",\"keywords\":\"html input类型,email,date,color,range\",\"codeRunner\":\"html\"},{\"slug\":\"input-attributes\",\"title\":\"输入属性\",\"order\":40,\"chapter\":\"表单\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"value/readonly/disabled/placeholder/required/pattern/min/max 等\",\"keywords\":\"html输入属性,placeholder,required,pattern\",\"codeRunner\":\"html\"},{\"slug\":\"buttons\",\"title\":\"按钮详解\",\"order\":41,\"chapter\":\"表单\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"button vs input[type=submit]、type 属性、CSS 美化按钮\",\"keywords\":\"html按钮,button,submit,reset\",\"codeRunner\":\"html\"}]},{\"title\":\"多媒体\",\"slug\":\"media\",\"tutorials\":[{\"slug\":\"video\",\"title\":\"视频 video\",\"order\":42,\"chapter\":\"多媒体\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"video 标签 controls/autoplay/muted/loop、source 多格式兼容\",\"keywords\":\"html视频,video,视频播放,autoplay\",\"codeRunner\":\"html\"},{\"slug\":\"audio\",\"title\":\"音频 audio\",\"order\":43,\"chapter\":\"多媒体\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"audio 标签 controls/loop/preload、MP3/OGG/WAV 格式\",\"keywords\":\"html音频,audio,音频播放,mp3\",\"codeRunner\":\"html\"},{\"slug\":\"iframe\",\"title\":\"iframe 内嵌\",\"order\":44,\"chapter\":\"多媒体\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"iframe 嵌入网页/地图/视频、sandbox 安全属性、去除边框\",\"keywords\":\"html iframe,内嵌,嵌入网页,sandbox\",\"codeRunner\":\"html\"},{\"slug\":\"canvas\",\"title\":\"Canvas 画布入门\",\"order\":45,\"chapter\":\"多媒体\",\"language\":\"html\",\"difficulty\":\"基础\",\"description\":\"canvas 元素、2D 上下文、绘制矩形/圆形/线条/文字/渐变\",\"keywords\":\"html canvas,画布,绘图,动画\",\"codeRunner\":\"html\"},{\"slug\":\"svg\",\"title\":\"SVG 矢量图形\",\"order\":46,\"chapter\":\"多媒体\",\"language\":\"html\",\"difficulty\":\"基础\",\"description\":\"svg 内联图形、circle/rect/line/path 基本形状、缩放不失真\",\"keywords\":\"html svg,矢量图,svg图形,缩放\",\"codeRunner\":\"html\"},{\"slug\":\"youtube\",\"title\":\"嵌入 YouTube 视频\",\"order\":47,\"chapter\":\"多媒体\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"iframe 嵌入 YouTube、控制参数 autoplay/mute/loop\",\"keywords\":\"html youtube,嵌入视频,iframe参数\",\"codeRunner\":\"html\"},{\"slug\":\"object\",\"title\":\"object 与 embed\",\"order\":48,\"chapter\":\"多媒体\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"object 嵌入 PDF/Flash、embed 插件、param 参数传递\",\"keywords\":\"html object,embed,嵌入PDF,插件\",\"codeRunner\":\"html\"}]},{\"title\":\"HTML5 进阶\",\"slug\":\"advanced\",\"tutorials\":[{\"slug\":\"semantic\",\"title\":\"语义化标签\",\"order\":49,\"chapter\":\"HTML5 进阶\",\"language\":\"html\",\"difficulty\":\"基础\",\"description\":\"header/nav/main/article/section/aside/footer 语义结构\",\"keywords\":\"html语义化,header,nav,article,section\",\"codeRunner\":\"html\"},{\"slug\":\"entities\",\"title\":\"字符实体\",\"order\":50,\"chapter\":\"HTML5 进阶\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"\u0026amp;/\u0026lt;/\u0026gt;/\u0026nbsp; 特殊字符转义、显示 HTML 源代码\",\"keywords\":\"html实体,字符实体,转义,特殊字符\",\"codeRunner\":\"html\"},{\"slug\":\"responsive\",\"title\":\"响应式设计\",\"order\":51,\"chapter\":\"HTML5 进阶\",\"language\":\"html\",\"difficulty\":\"基础\",\"description\":\"viewport meta 标签、媒体查询 @media、响应式图片/框架\",\"keywords\":\"html响应式,viewport,媒体查询,自适应\",\"codeRunner\":\"html\"},{\"slug\":\"style-guide\",\"title\":\"代码风格指南\",\"order\":52,\"chapter\":\"HTML5 进阶\",\"language\":\"html\",\"difficulty\":\"入门\",\"description\":\"标签小写、属性引号、缩进统一、DOCTYPE 声明、语言属性\",\"keywords\":\"html代码规范,风格指南,缩进,DOCTYPE\",\"codeRunner\":\"html\"},{\"slug\":\"accessibility\",\"title\":\"可访问性\",\"order\":53,\"chapter\":\"HTML5 进阶\",\"language\":\"html\",\"difficulty\":\"基础\",\"description\":\"aria-label/role 无障碍属性、alt 文本、语义化、键盘导航\",\"keywords\":\"html可访问性,aria,无障碍,alt,语义化\",\"codeRunner\":\"html\"},{\"slug\":\"best-practices\",\"title\":\"综合最佳实践\",\"order\":54,\"chapter\":\"HTML5 进阶\",\"language\":\"html\",\"difficulty\":\"基础\",\"description\":\"SEO 友好结构、性能优化、移动优先、完整检查清单\",\"keywords\":\"html最佳实践,SEO,性能优化,移动优先\",\"codeRunner\":\"html\"}]}]}],\"$L12\",\"$L13\",\"$L14\",\"$L15\"]}]\n"])</script><script>self.__next_f.push([1,"18:T15ab,"])</script><script>self.__next_f.push([1,"\u003ch1\u003eHTML 基础结构\u003c/h1\u003e\u003cp\u003e每个 HTML 页面都有固定的骨架结构——理解它你就理解了网页的\u0026quot;骨骼\u0026quot;。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e学完本章你将：\u003c/strong\u003e 掌握 DOCTYPE、html/head/body、写出第一个网页。\u003c/p\u003e\n\u003chr\u003e\n\u003ch2 id=\"标准骨架\" class=\"tutorial-h2\"\u003e标准骨架\u003c/h2\u003e\n \u003cdiv class=\"code-block-wrapper\"\u003e\n \u003cdiv class=\"code-header\"\u003e\u003cspan\u003ehtml\u003c/span\u003e\u003cdiv class=\"code-header-actions\"\u003e\u003cbutton class=\"copy-btn\" data-code=\"PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9InpoLUNOIj4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0iVVRGLTgiPgogIDxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MS4wIj4KICA8dGl0bGU+6aG16Z2i5qCH6aKYPC90aXRsZT4KPC9oZWFkPgo8Ym9keT4KICA8IS0tIOmhtemdouWPr+ingeWGheWuueWGmeWcqOi/memHjCAtLT4KICA8aDE+5qyi6L+O77yBPC9oMT4KICA8cD7ov5nmmK/miJHnmoTnrKzkuIDkuKrnvZHpobXjgII8L3A+CjwvYm9keT4KPC9odG1sPg==\"\u003e\u003csvg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\u003crect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"/\u003e\u003cpath d=\"M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1\"/\u003e\u003c/svg\u003e 复制\u003c/button\u003e\u003cbutton class=\"run-btn\" data-lang=\"html\" data-code=\"PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9InpoLUNOIj4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0iVVRGLTgiPgogIDxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MS4wIj4KICA8dGl0bGU+6aG16Z2i5qCH6aKYPC90aXRsZT4KPC9oZWFkPgo8Ym9keT4KICA8IS0tIOmhtemdouWPr+ingeWGheWuueWGmeWcqOi/memHjCAtLT4KICA8aDE+5qyi6L+O77yBPC9oMT4KICA8cD7ov5nmmK/miJHnmoTnrKzkuIDkuKrnvZHpobXjgII8L3A+CjwvYm9keT4KPC9odG1sPg==\"\u003e\u003csvg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\u003cpolygon points=\"5 3 19 12 5 21 5 3\"/\u003e\u003c/svg\u003e 运行 ▶\u003c/button\u003e\u003c/div\u003e\u003c/div\u003e\n \u003cpre class=\"code-pre has-header\"\u003e\u003ccode class=\"language-html hljs\"\u003e\u003cspan class=\"hljs-meta\"\u003e\u0026lt;!DOCTYPE \u003cspan class=\"hljs-keyword\"\u003ehtml\u003c/span\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003ehtml\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003elang\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;zh-CN\u0026quot;\u003c/span\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003ehead\u003c/span\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003emeta\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003echarset\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;UTF-8\u0026quot;\u003c/span\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003emeta\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003ename\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;viewport\u0026quot;\u003c/span\u003e \u003cspan class=\"hljs-attr\"\u003econtent\u003c/span\u003e=\u003cspan class=\"hljs-string\"\u003e\u0026quot;width=device-width, initial-scale=1.0\u0026quot;\u003c/span\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003etitle\u003c/span\u003e\u0026gt;\u003c/span\u003e页面标题\u003cspan class=\"hljs-tag\"\u003e\u0026lt;/\u003cspan class=\"hljs-name\"\u003etitle\u003c/span\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"hljs-tag\"\u003e\u0026lt;/\u003cspan class=\"hljs-name\"\u003ehead\u003c/span\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003ebody\u003c/span\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"hljs-comment\"\u003e\u0026lt;!-- 页面可见内容写在这里 --\u0026gt;\u003c/span\u003e\n \u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003eh1\u003c/span\u003e\u0026gt;\u003c/span\u003e欢迎！\u003cspan class=\"hljs-tag\"\u003e\u0026lt;/\u003cspan class=\"hljs-name\"\u003eh1\u003c/span\u003e\u0026gt;\u003c/span\u003e\n \u003cspan class=\"hljs-tag\"\u003e\u0026lt;\u003cspan class=\"hljs-name\"\u003ep\u003c/span\u003e\u0026gt;\u003c/span\u003e这是我的第一个网页。\u003cspan class=\"hljs-tag\"\u003e\u0026lt;/\u003cspan class=\"hljs-name\"\u003ep\u003c/span\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"hljs-tag\"\u003e\u0026lt;/\u003cspan class=\"hljs-name\"\u003ebody\u003c/span\u003e\u0026gt;\u003c/span\u003e\n\u003cspan class=\"hljs-tag\"\u003e\u0026lt;/\u003cspan class=\"hljs-name\"\u003ehtml\u003c/span\u003e\u0026gt;\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\n \u003c/div\u003e\u003chr\u003e\n\u003ch2 id=\"各标签含义\" class=\"tutorial-h2\"\u003e各标签含义\u003c/h2\u003e\u003cdiv class=\"table-wrapper\"\u003e\u003ctable class=\"tutorial-table\"\u003e\u003cthead\u003e\u003ctr\u003e\u003cth\u003e标签\u003c/th\u003e\u003cth\u003e说明\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd\u003e`\u003c!DOCTYPE html\u003e`\u003c/td\u003e\u003ctd\u003e声明这是 HTML5 文档\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e`\u003chtml\u003e`\u003c/td\u003e\u003ctd\u003e根元素，包裹整个页面\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e`\u003chead\u003e`\u003c/td\u003e\u003ctd\u003e元信息——不显示在页面上\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e`\u003cmeta charset=\"UTF-8\"\u003e`\u003c/td\u003e\u003ctd\u003e设置字符编码为 UTF-8\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e`\u003ctitle\u003e`\u003c/td\u003e\u003ctd\u003e浏览器标签页标题\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e`\u003cbody\u003e`\u003c/td\u003e\u003ctd\u003e所有可见内容\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003c/div\u003e\u003chr\u003e\n\u003ch2 id=\"实操\" class=\"tutorial-h2\"\u003e实操\u003c/h2\u003e\n \u003cdiv class=\"code-block-wrapper\"\u003e\n \u003cdiv class=\"code-header\"\u003e\u003cspan\u003ehtml\u003c/span\u003e\u003cdiv class=\"code-header-actions\"\u003e\u003cbutton class=\"copy-btn\" data-code=\"PCEtLSAxLiDmlrDlu7ogaW5kZXguaHRtbCAtLT4KPCEtLSAyLiDlpI3liLbkuIrpnaLnmoTpqqjmnrYgLS0+CjwhLS0gMy4g5ZyoIGJvZHkg5Lit5YaZ5YaF5a65IC0tPgo8IS0tIDQuIOeUqOa1j+iniOWZqOaJk+W8gCAtLT4=\"\u003e\u003csvg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\u003crect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"/\u003e\u003cpath d=\"M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1\"/\u003e\u003c/svg\u003e 复制\u003c/button\u003e\u003cbutton class=\"run-btn\" data-lang=\"html\" data-code=\"PCEtLSAxLiDmlrDlu7ogaW5kZXguaHRtbCAtLT4KPCEtLSAyLiDlpI3liLbkuIrpnaLnmoTpqqjmnrYgLS0+CjwhLS0gMy4g5ZyoIGJvZHkg5Lit5YaZ5YaF5a65IC0tPgo8IS0tIDQuIOeUqOa1j+iniOWZqOaJk+W8gCAtLT4=\"\u003e\u003csvg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\u003e\u003cpolygon points=\"5 3 19 12 5 21 5 3\"/\u003e\u003c/svg\u003e 运行 ▶\u003c/button\u003e\u003c/div\u003e\u003c/div\u003e\n \u003cpre class=\"code-pre has-header\"\u003e\u003ccode class=\"language-html hljs\"\u003e\u003cspan class=\"hljs-comment\"\u003e\u0026lt;!-- 1. 新建 index.html --\u0026gt;\u003c/span\u003e\n\u003cspan class=\"hljs-comment\"\u003e\u0026lt;!-- 2. 复制上面的骨架 --\u0026gt;\u003c/span\u003e\n\u003cspan class=\"hljs-comment\"\u003e\u0026lt;!-- 3. 在 body 中写内容 --\u0026gt;\u003c/span\u003e\n\u003cspan class=\"hljs-comment\"\u003e\u0026lt;!-- 4. 用浏览器打开 --\u0026gt;\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\n \u003c/div\u003e"])</script><script>self.__next_f.push([1,"12:[\"$\",\"div\",null,{\"className\":\"flex-1 min-w-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2 text-sm text-gray-400\",\"children\":[[\"$\",\"$L16\",null,{\"href\":\"/zh/tutorials\",\"className\":\"hover:text-blue-500\",\"children\":\"编程在线教程\"}],[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"m9 18 6-6-6-6\",\"key\":\"mthhwq\"}]],\"className\":\"lucide-chevron-right\",\"size\":14}],[\"$\",\"$L16\",null,{\"href\":\"/zh/tutorials/html\",\"className\":\"hover:text-blue-500\",\"children\":\"HTML 教程\"}],[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$12:props:children:0:props:children:0:props:children:1:props:iconNode\",\"className\":\"lucide-chevron-right\",\"size\":14}],[\"$\",\"span\",null,{\"className\":\"text-gray-600 dark:text-gray-300\",\"children\":\"HTML 基础结构\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1 text-xs text-gray-400\",\"children\":[[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M12 7v14\",\"key\":\"1akyts\"}],[\"path\",{\"d\":\"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z\",\"key\":\"ruj8y\"}]],\"className\":\"lucide-book-open\",\"size\":12}],[\"$\",\"span\",null,{\"children\":\"HTML 入门\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"max-w-3xl mx-auto px-6 py-8\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-3xl font-extrabold text-gray-900 dark:text-white mb-2\",\"children\":\"HTML 基础结构\"}],[\"$\",\"p\",null,{\"className\":\"text-gray-500 dark:text-gray-400 mb-8\",\"children\":\"DOCTYPE 声明、html/head/body 标签、第一个网页\"}],[\"$\",\"div\",null,{\"className\":\"tutorial-content prose dark:prose-invert max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$18\"}}],\"$L19\",\"$L1a\"]}]]}]\n"])</script><script>self.__next_f.push([1,"13:[\"$\",\"$L1b\",null,{}]\n14:[\"$\",\"$L1c\",null,{}]\n15:[\"$\",\"$L1d\",null,{}]\n"])</script><script>self.__next_f.push([1,"1a:[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between mt-12 pt-6 border-t border-gray-200 dark:border-gray-700\",\"children\":[[\"$\",\"$L16\",null,{\"href\":\"/zh/tutorials/html/editors\",\"className\":\"flex items-center gap-2 text-sm text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 transition-colors group\",\"children\":[[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"m12 19-7-7 7-7\",\"key\":\"1l729n\"}],[\"path\",{\"d\":\"M19 12H5\",\"key\":\"x3x0zl\"}]],\"className\":\"lucide-arrow-left group-hover:-translate-x-1 transition-transform\",\"size\":14}],[\"$\",\"div\",null,{\"className\":\"text-left\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-[10px] text-gray-400\",\"children\":\"上一篇\"}],[\"$\",\"div\",null,{\"className\":\"font-medium\",\"children\":\"HTML 编辑器\"}]]}]]}],[\"$\",\"$L16\",null,{\"href\":\"/zh/tutorials/html/elements\",\"className\":\"flex items-center gap-2 text-sm text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 transition-colors group\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-right\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-[10px] text-gray-400\",\"children\":\"下一篇\"}],[\"$\",\"div\",null,{\"className\":\"font-medium\",\"children\":\"HTML 元素\"}]]}],[\"$\",\"$L17\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M5 12h14\",\"key\":\"1ays0h\"}],[\"path\",{\"d\":\"m12 5 7 7-7 7\",\"key\":\"xquz4c\"}]],\"className\":\"lucide-arrow-right group-hover:translate-x-1 transition-transform\",\"size\":14}]]}]]}]\n"])</script><script>self.__next_f.push([1,"19:[\"$\",\"div\",null,{\"className\":\"mt-8 pt-6 border-t border-gray-200 dark:border-gray-700\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-sm font-semibold text-gray-500 dark:text-gray-400 mb-4\",\"children\":\"🛠️ 学完试试这些工具\"}],[\"$\",\"div\",null,{\"className\":\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-2\",\"children\":[[\"$\",\"$L16\",\"html-beautify\",{\"href\":\"/zh/tools/dev/html-beautify\",\"className\":\"flex flex-col items-center gap-1 p-3 bg-gray-50 dark:bg-gray-800/40 hover:bg-blue-50 dark:hover:bg-blue-900/20 border border-gray-100 dark:border-gray-800 hover:border-blue-200 dark:hover:border-blue-800 rounded-lg transition-all group\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"📄\"}],[\"$\",\"span\",null,{\"className\":\"text-xs font-medium text-gray-700 dark:text-gray-300 group-hover:text-blue-600 dark:group-hover:text-blue-400\",\"children\":\"HTML 美化工具\"}],[\"$\",\"span\",null,{\"className\":\"text-[10px] text-gray-400 text-center leading-tight\",\"children\":\"格式化混乱的 HTML 代码\"}]]}],[\"$\",\"$L16\",\"html-entities\",{\"href\":\"/zh/tools/dev/html-entities\",\"className\":\"flex flex-col items-center gap-1 p-3 bg-gray-50 dark:bg-gray-800/40 hover:bg-blue-50 dark:hover:bg-blue-900/20 border border-gray-100 dark:border-gray-800 hover:border-blue-200 dark:hover:border-blue-800 rounded-lg transition-all group\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🏷️\"}],[\"$\",\"span\",null,{\"className\":\"text-xs font-medium text-gray-700 dark:text-gray-300 group-hover:text-blue-600 dark:group-hover:text-blue-400\",\"children\":\"HTML 实体转换\"}],[\"$\",\"span\",null,{\"className\":\"text-[10px] text-gray-400 text-center leading-tight\",\"children\":\"实体编码 ↔ 字符互转\"}]]}],[\"$\",\"$L16\",\"json-formatter\",{\"href\":\"/zh/tools/dev/json-formatter\",\"className\":\"flex flex-col items-center gap-1 p-3 bg-gray-50 dark:bg-gray-800/40 hover:bg-blue-50 dark:hover:bg-blue-900/20 border border-gray-100 dark:border-gray-800 hover:border-blue-200 dark:hover:border-blue-800 rounded-lg transition-all group\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"📋\"}],[\"$\",\"span\",null,{\"className\":\"text-xs font-medium text-gray-700 dark:text-gray-300 group-hover:text-blue-600 dark:group-hover:text-blue-400\",\"children\":\"JSON 格式化\"}],[\"$\",\"span\",null,{\"className\":\"text-[10px] text-gray-400 text-center leading-tight\",\"children\":\"处理 HTML 中的 JSON 数据\"}]]}],[\"$\",\"$L16\",\"color-convert\",{\"href\":\"/zh/tools/network/color-convert\",\"className\":\"flex flex-col items-center gap-1 p-3 bg-gray-50 dark:bg-gray-800/40 hover:bg-blue-50 dark:hover:bg-blue-900/20 border border-gray-100 dark:border-gray-800 hover:border-blue-200 dark:hover:border-blue-800 rounded-lg transition-all group\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎨\"}],[\"$\",\"span\",null,{\"className\":\"text-xs font-medium text-gray-700 dark:text-gray-300 group-hover:text-blue-600 dark:group-hover:text-blue-400\",\"children\":\"颜色转换器\"}],[\"$\",\"span\",null,{\"className\":\"text-[10px] text-gray-400 text-center leading-tight\",\"children\":\"HEX/RGB/HSL 颜色转换\"}]]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"5:[\"$\",\"$L1e\",null,{\"formats\":\"$undefined\",\"locale\":\"zh\",\"messages\":{\"site\":{\"title\":\"ZHANK在线工具平台\",\"subtitle\":\"AI 驱动 · 开发、运维、SEO 工具集合，让工作更智能\",\"description\":\"Zhank 提供 AI 文本处理、JSON 格式化、Base64 编解码、二维码生成等 100+ 在线工具\",\"searchPlaceholder\":\"搜索 100+ 工具，例如：AI 写作、JSON、二维码…\",\"searchBtn\":\"搜索\"},\"nav\":{\"home\":\"首页\",\"tutorials\":\"📚 教程\",\"devTools\":\"开发工具\",\"aiTools\":\"AI 工具\",\"videoTools\":\"视频工具\",\"imageTools\":\"图像工具\",\"textTools\":\"文本工具\",\"networkTools\":\"网络工具\",\"officeTools\":\"在线办公\",\"more\":\"更多\",\"login\":\"登录\",\"register\":\"注册\",\"logout\":\"退出\"},\"home\":{\"hotTools\":\"热门工具\",\"aiTools\":\"🔥 AI 工具 · 热门推荐\",\"aiSubtitle\":\"智能文本处理、代码生成、翻译等\",\"toolCategories\":\"工具分类\",\"newTools\":\"最新上线\",\"features\":{\"fast\":\"高效便捷\",\"fastDesc\":\"无需下载安装，打开即用\",\"safe\":\"安全可靠\",\"safeDesc\":\"数据本地处理，隐私有保障\",\"update\":\"持续更新\",\"updateDesc\":\"不断新增实用工具\",\"free\":\"完全免费\",\"freeDesc\":\"所有工具永久免费使用\"}},\"tutorials\":{\"title\":\"编程在线教程\",\"subtitle\":\"免费在线学习编程，Python、JavaScript、SQL 等语言，AI 生成 + 在线运行边学边练\",\"prevLesson\":\"上一篇\",\"nextLesson\":\"下一篇\",\"runCode\":\"运行 ▶\",\"readCount\":\"篇教程\"},\"footer\":{\"copyright\":\"© 2024 Zhank.com All rights reserved.\",\"icp\":\"蜀ICP备2024045212号-1\"},\"tools\":{\"jsonFormatter\":\"JSON 格式化\",\"base64\":\"Base64 编解码\",\"qrcode\":\"二维码生成器\",\"uuid\":\"UUID 生成\",\"timestamp\":\"时间戳转换\",\"jwt\":\"JWT 解析\",\"imageCompress\":\"图片压缩\",\"imageFormat\":\"格式转换\",\"removeBg\":\"一键抠图\",\"imageUpscale\":\"高清放大\",\"imageOcr\":\"图片文字识别\",\"imageWatermark\":\"图片水印\",\"imageSplit\":\"切图工具\",\"idPhoto\":\"证件照裁剪\",\"idPhotoPrint\":\"证件照打印排版\",\"captionMaker\":\"字幕拼图\",\"iconMaker\":\"Icon 制作\",\"onlineWhiteboard\":\"在线白板\",\"imageToBase64\":\"图片转 Base64\",\"colorPicker\":\"颜色提取器\",\"gifMaker\":\"GIF 制作\",\"imageMerge\":\"图片拼接\",\"regex\":\"正则测试\",\"jsBeautify\":\"JS 美化/混淆\",\"cssBeautify\":\"CSS 格式化\",\"htmlBeautify\":\"HTML 格式化\",\"sqlBeautify\":\"SQL 格式化\",\"xmlFormatter\":\"XML 格式化\",\"yamlJson\":\"YAML/JSON 互转\",\"jsonToClass\":\"JSON 转类\",\"codeHighlight\":\"代码着色\",\"numberBase\":\"进制转换\",\"crontab\":\"Crontab 计算\",\"htmlEntities\":\"HTML 特殊字符\",\"linuxCmd\":\"Linux 命令查询\",\"websocketTest\":\"WebSocket 测试\",\"whoisLookup\":\"Whois 查询\",\"dnsLookup\":\"DNS 查询\",\"traceroute\":\"路由追踪\",\"pingTest\":\"Ping 检测\",\"speedtestCN\":\"国内测速\",\"speedtestIntl\":\"国际测速\",\"robotsTxt\":\"Robots.txt 生成\",\"apiTester\":\"API 接口调试\",\"sslChecker\":\"SSL 证书检查\",\"portScanner\":\"端口扫描\",\"subnetCalc\":\"子网计算器\",\"emailMx\":\"邮箱 MX 检查\",\"corsChecker\":\"CORS 检查\",\"speedConverter\":\"网速单位换算\",\"mimeLookup\":\"MIME 类型查询\",\"shellBeautify\":\"Shell 格式化\",\"image2webp\":\"图片转 WebP\",\"comicMaker\":\"条漫制作\",\"comicMakerDesc\":\"将多张图片拼接为纵向长条漫画\",\"minify\":\"HTML/JS/CSS 压缩\",\"textToSpeech\":\"文本转语音\",\"simplifiedTraditional\":\"简体繁体转换\",\"textDiff\":\"文本比较\",\"textToPinyin\":\"文字转拼音\",\"martianTranslate\":\"火星文翻译器\",\"textDedup\":\"文本去重\",\"textSteganography\":\"文字隐写\",\"wordCount\":\"字数统计\",\"caseConverter\":\"大小写转换\",\"textReplace\":\"文本替换\",\"textSort\":\"文本排序\",\"loremGenerator\":\"Lorem 生成\",\"emojiList\":\"Emoji 大全\",\"textReverse\":\"文本反转\",\"shortUrl\":\"短链接生成\",\"urlEncode\":\"URL 编解码\",\"passwordGen\":\"密码生成器\",\"hashCalc\":\"哈希计算\",\"ipLookup\":\"IP 查询\",\"userAgent\":\"UA 解析\",\"httpStatus\":\"HTTP 状态码\",\"colorConvert\":\"颜色转换\",\"randomGen\":\"随机数生成\",\"aiText\":\"AI 文本处理\",\"aiWriting\":\"AI 智能写作\",\"aiTranslate\":\"AI 智能翻译\",\"aiCode\":\"AI 代码解释\",\"aiSummary\":\"AI 文本摘要\",\"aiImage\":\"AI 文生图\",\"extChatGPT\":\"ChatGPT\",\"extClaude\":\"Claude\",\"extGemini\":\"Gemini\",\"extPerplexity\":\"Perplexity\",\"extMidjourney\":\"Midjourney\",\"extSuno\":\"Suno AI\",\"extRunway\":\"Runway\",\"extGamma\":\"Gamma\",\"extCodepen\":\"CodePen\",\"extJsfiddle\":\"JSFiddle\",\"extCodesandbox\":\"CodeSandbox\",\"extStackblitz\":\"StackBlitz\",\"extReplit\":\"Replit\",\"extGithub\":\"GitHub\",\"extNpm\":\"npm\",\"extDevdocs\":\"DevDocs\",\"extCaniuse\":\"Can I Use\",\"extRegexr\":\"RegExr\",\"extCssGradient\":\"CSS Gradient\",\"extCarbon\":\"Carbon\",\"extVscode\":\"VS Code\",\"extIdea\":\"IntelliJ IDEA\",\"extPycharm\":\"PyCharm\",\"extWebstorm\":\"WebStorm\",\"extSublime\":\"Sublime Text\",\"extPostman\":\"Postman\",\"extDocker\":\"Docker Desktop\",\"extGit\":\"Git\",\"extFigma\":\"Figma\",\"extDbeaver\":\"DBeaver\",\"extIterm2\":\"iTerm2\",\"extWindterm\":\"WindTerm\",\"extCursor\":\"Cursor\",\"extZed\":\"Zed\",\"extHbuilderx\":\"HBuilder X\",\"extHomebrew\":\"Homebrew\",\"extNodejs\":\"Node.js\",\"extBun\":\"Bun\",\"extGithubDesktop\":\"GitHub Desktop\",\"extSourcetree\":\"Sourcetree\",\"extMongodbCompass\":\"MongoDB Compass\",\"extTableplus\":\"TablePlus\",\"extInsomnia\":\"Insomnia\",\"extWarp\":\"Warp\",\"extTabby\":\"Tabby\",\"extOhmyzsh\":\"Oh My Zsh\",\"metaTag\":\"Meta 标签分析\",\"sitemap\":\"Sitemap 生成\",\"codeRunner\":\"在线代码运行器\",\"markdown\":\"Markdown 编辑\",\"wordPdf\":\"Word/PDF 互转\",\"wordPdfDesc\":\"在线 Word 转 PDF、PDF 转 Word 互转\",\"pdfEditor\":\"PDF 编辑\",\"pdfEditorDesc\":\"可视化PDF编辑器：添加文字/图片/签名，拖拽编辑，合并/拆分/水印\",\"jsonFormatterDesc\":\"格式化、压缩、验证 JSON，支持树视图\",\"base64Desc\":\"Base64 编解码，支持文件上传\",\"uuidDesc\":\"批量生成 UUID v1/v4，支持去横线\",\"timestampDesc\":\"Unix 时间戳与日期互转\",\"jwtDesc\":\"解析 JWT Token 的 Header 和 Payload\",\"jsBeautifyDesc\":\"JS 美化、压缩、加密、解密、混淆\",\"cssBeautifyDesc\":\"CSS 格式化、压缩、整理优化\",\"htmlBeautifyDesc\":\"HTML 代码格式化与压缩\",\"sqlBeautifyDesc\":\"SQL 语句美化、压缩，支持 AI 优化\",\"xmlFormatterDesc\":\"XML 格式化、压缩、树视图\",\"shellBeautifyDesc\":\"Shell/Bash 脚本格式化与压缩\",\"yamlJsonDesc\":\"YAML ↔ JSON 双向互转，支持压缩美化\",\"jsonToClassDesc\":\"JSON 生成 TypeScript/Go/Java/Python 类定义\",\"regexDesc\":\"正则表达式在线测试，支持匹配与替换\",\"codeHighlightDesc\":\"15 种语言代码高亮，可复制到 Word\",\"numberBaseDesc\":\"二进制、八进制、十进制、十六进制互转\",\"crontabDesc\":\"Crontab 表达式解析与计算\",\"htmlEntitiesDesc\":\"HTML 实体字符参考，120+ 常用实体\",\"linuxCmdDesc\":\"常用 Linux 命令速查手册\",\"websocketTestDesc\":\"WebSocket 在线连接测试工具\",\"whoisLookupDesc\":\"查询域名注册信息、所有者、到期时间\",\"dnsLookupDesc\":\"查询域名 DNS 解析记录（A/MX/CNAME/NS 等）\",\"tracerouteDesc\":\"追踪数据包从本地到目标服务器的路由路径\",\"pingTestDesc\":\"检测目标服务器的网络延迟和连通性\",\"speedtestCNDesc\":\"测试国内网络下载和上传速度\",\"speedtestIntlDesc\":\"测试国际网络带宽和延迟\",\"robotsTxtDesc\":\"在线生成 robots.txt 爬虫规则文件\",\"apiTesterDesc\":\"在线 HTTP API 请求调试，支持 GET/POST 等方法\",\"sslCheckerDesc\":\"检查域名 SSL 证书有效期和颁发者信息\",\"portScannerDesc\":\"扫描服务器常用端口开放状态\",\"subnetCalcDesc\":\"IP 子网掩码计算，网络/广播/可用 IP\",\"emailMxDesc\":\"检查邮箱格式和域名 MX 记录\",\"corsCheckerDesc\":\"检测目标 URL 的 CORS 跨域配置\",\"speedConverterDesc\":\"Mbps/Gbps/KB/s/MB/s 网速单位互转\",\"mimeLookupDesc\":\"查询文件扩展名对应的 MIME 类型\",\"metaTagDesc\":\"提取任意网页的 Meta 标签和 SEO 信息\",\"sitemapDesc\":\"生成 XML/HTML 网站地图 Sitemap\",\"codeRunnerDesc\":\"80+ 编程语言在线运行，支持 Python/Java/C++/Go/Rust 等\",\"peopleUsed\":\"{count} 人使用\",\"videoCompress\":\"视频压缩\",\"videoFormat\":\"视频格式转换\",\"videoToGif\":\"视频转 GIF\",\"videoCrop\":\"视频裁剪\",\"videoMerge\":\"视频拼接\",\"audioExtract\":\"音频提取\",\"videoCompressDesc\":\"压缩视频文件大小，保持画质\",\"videoFormatDesc\":\"转换视频格式，MP4/MOV/AVI/WebM 等\",\"videoToGifDesc\":\"将视频片段转换为 GIF 动图\",\"videoCropDesc\":\"裁剪视频画面和时长\",\"videoMergeDesc\":\"将多个视频合并为一个\",\"audioExtractDesc\":\"从视频中提取音频为 MP3\",\"videoToFrames\":\"视频转序列帧\",\"videoToFramesDesc\":\"提取视频关键帧为 PNG 序列图片\",\"extVideoCut\":\"OpenCut 视频剪辑\",\"screenRecord\":\"在线录屏\",\"screenRecordDesc\":\"录制屏幕+系统音频，无需安装任何软件\",\"cameraRecord\":\"摄像头录制\",\"cameraRecordDesc\":\"调用摄像头录制视频，直接下载保存\",\"videoTrim\":\"视频截取片段\",\"videoTrimDesc\":\"选取起止时间，截取视频中的精彩片段\",\"videoSpeed\":\"视频变速\",\"videoSpeedDesc\":\"调整视频播放速度，0.5x慢放 ~ 2x快放\",\"videoReverse\":\"视频倒放\",\"videoReverseDesc\":\"将视频倒序播放，生成倒放效果\",\"videoRotate\":\"视频旋转翻转\",\"videoRotateDesc\":\"90°/180°旋转，水平/垂直镜像翻转\",\"videoMute\":\"视频静音\",\"videoMuteDesc\":\"移除视频中的音频轨道，导出无声视频\",\"videoCompressTarget\":\"指定大小压缩\",\"videoCompressTargetDesc\":\"设置目标文件大小，自动调整码率压缩\",\"qrcodeDesc\":\"在线二维码生成器，支持网址/文本/电话/邮箱/短信/WiFi/名片\",\"aiImageDesc\":\"AI 文生图，输入描述自动生成创意图片\",\"aiWritingDesc\":\"AI 智能写作助手，文章、文案、报告一键生成\",\"aiTranslateDesc\":\"AI 智能翻译，支持多语言互译\",\"aiCodeDesc\":\"AI 代码解释器，分析代码逻辑与功能\",\"aiSummaryDesc\":\"AI 文本摘要，长文一键提取核心要点\",\"aiTextDesc\":\"AI 文本处理，语法纠错、润色、改写\",\"removeBgDesc\":\"AI 一键抠图，自动去除图片背景\",\"imageCompressDesc\":\"在线压缩图片大小，保持高清画质\",\"imageFormatDesc\":\"图片格式互转，JPG/PNG/WebP/AVIF 等\",\"imageUpscaleDesc\":\"AI 图片高清放大，提升分辨率不失真\",\"imageOcrDesc\":\"图片文字识别，提取图片中的文字内容\",\"imageWatermarkDesc\":\"为图片添加文字或图片水印，保护版权\",\"idPhotoDesc\":\"在线证件照裁剪，一寸两寸自动生成\",\"idPhotoPrintDesc\":\"证件照打印排版，支持多种尺寸组合打印\",\"imageSplitDesc\":\"图片切分工具，将大图切割为多张小图\",\"captionMakerDesc\":\"字幕拼图制作，为图片添加底部字幕文字\",\"iconMakerDesc\":\"Icon 图标在线制作，支持多尺寸导出\",\"onlineWhiteboardDesc\":\"在线白板画布，自由涂鸦与团队协作\",\"imageToWebpDesc\":\"将 PNG/JPG 图片转换为 WebP 格式\",\"imageToBase64Desc\":\"将图片编码为 Base64 字符串\",\"colorPickerDesc\":\"在线颜色提取器，从图片中提取颜色值\",\"gifMakerDesc\":\"在线 GIF 动图制作，多图合成动画\",\"imageMergeDesc\":\"多张图片拼接为一张，支持横向与纵向\",\"minifyDesc\":\"HTML/JS/CSS 代码在线压缩、混淆与优化\",\"textToSpeechDesc\":\"在线文本转语音，支持多语种和语速调节\",\"simplifiedTraditionalDesc\":\"简体中文与繁体中文互相转换\",\"textDiffDesc\":\"在线文本差异对比，逐行比较高亮差异\",\"textToPinyinDesc\":\"中文汉字转拼音，支持声调标注\",\"martianTranslateDesc\":\"火星文编码解码，网络趣味文字转换\",\"textDedupDesc\":\"文本按行/词/字符去重，支持排序输出\",\"textSteganographyDesc\":\"零宽字符文字隐写，在文本中隐藏秘密信息\",\"wordCountDesc\":\"统计文本字符数、单词数、行数、段落数、字节数\",\"caseConverterDesc\":\"文本大小写转换：大写、小写、首字母大写、驼峰等\",\"textReplaceDesc\":\"查找替换文本内容，支持正则表达式\",\"textSortDesc\":\"按行排序文本，支持升序降序和去重\",\"loremGeneratorDesc\":\"生成 Lorem Ipsum 或中文假文占位文本\",\"emojiListDesc\":\"浏览和复制各种 Emoji 表情符号\",\"textReverseDesc\":\"按字符、单词或行反转文本内容\",\"urlEncodeDesc\":\"URL 编码与解码，处理特殊字符和中文\",\"passwordGenDesc\":\"在线随机密码生成器，支持自定义规则\",\"hashCalcDesc\":\"MD5/SHA 哈希值在线计算，支持多种算法\",\"ipLookupDesc\":\"查询 IP 地址归属地和运营商信息\",\"userAgentDesc\":\"解析浏览器 User-Agent 字符串详细信息\",\"httpStatusDesc\":\"HTTP 状态码速查表，含状态码含义说明\",\"colorConvertDesc\":\"HEX/RGB/HSL/HSV 颜色格式在线互转\",\"randomGenDesc\":\"在线随机数/随机字符串/随机密码生成器\",\"shortUrlDesc\":\"长链接转短链接，支持自定义后缀\",\"markdownDesc\":\"在线 Markdown 编辑器，实时预览与导出\",\"aiNavChat\":\"AI 对话聊天\",\"aiNavWriting\":\"AI 写作工具\",\"aiNavImage\":\"AI 图像生成\",\"aiNavVideo\":\"AI 视频创作\",\"aiNavOffice\":\"AI 办公效率\",\"aiNavCode\":\"AI 编程开发\",\"aiNavAudio\":\"AI 音频音乐\",\"aiNavDesign\":\"AI 设计工具\",\"aiNavLearning\":\"AI 学习资源\",\"aiNavPlatform\":\"AI 开放平台\",\"officeNavDoc\":\"在线文档\",\"officeNavSheet\":\"在线表格\",\"officeNavSlide\":\"演示文稿\",\"officeNavPdf\":\"PDF 工具\",\"officeNavMindmap\":\"思维导图\",\"officeNavForm\":\"表单问卷\",\"officeNavTool\":\"实用工具\",\"devNavCommon\":\"常用工具\",\"devNavBuild\":\"编译工具\",\"devNavOnline\":\"在线工具\",\"devNavLearning\":\"技术学习\",\"devNavSoftware\":\"开发软件\",\"netNavDiagnosis\":\"网络诊断\",\"netNavEncoding\":\"编码转换\",\"netNavSecurity\":\"安全工具\",\"netNavLookup\":\"信息查询\"},\"categories\":{\"dev\":{\"name\":\"开发工具\",\"count\":\"50+ 工具\"},\"ai\":{\"name\":\"AI 工具\",\"count\":\"25+ 工具\"},\"network\":{\"name\":\"网络工具\",\"count\":\"25+ 工具\"},\"image\":{\"name\":\"图像工具\",\"count\":\"35+ 工具\"},\"video\":{\"name\":\"视频工具\",\"count\":\"6+ 工具\"},\"text\":{\"name\":\"文本工具\",\"count\":\"20+ 工具\"},\"office\":{\"name\":\"在线办公\",\"count\":\"15+ 工具\"}},\"auth\":{\"loginTitle\":\"登录账号\",\"registerTitle\":\"创建账号\",\"username\":\"用户名\",\"password\":\"密码\",\"email\":\"邮箱\",\"rememberMe\":\"记住我\",\"forgotPassword\":\"忘记密码？\",\"loginBtn\":\"登录\",\"registerBtn\":\"注册\",\"noAccount\":\"还没有账号？\",\"hasAccount\":\"已有账号？\",\"orContinue\":\"或使用其他方式\"},\"pricing\":{\"title\":\"选择适合你的方案\",\"subtitle\":\"升级 Pro 会员，解锁全部高级功能\",\"free\":\"免费\",\"pro\":\"Pro 年度会员\",\"redeemPlaceholder\":\"输入激活码\",\"redeemHint\":\"已有激活码？直接兑换\",\"redeem\":\"兑换\",\"fullAccess\":\"全功能解锁\",\"noAds\":\"纯净体验\",\"prioritySupport\":\"优先支持\",\"fullAccessDesc\":\"所有工具无限制使用\",\"noAdsDesc\":\"去除所有广告干扰\",\"prioritySupportDesc\":\"专属技术支持和优先体验\"}},\"now\":\"$undefined\",\"timeZone\":\"Asia/Shanghai\",\"children\":\"$L1f\"}]\n"])</script><script>self.__next_f.push([1,"1f:[\"$\",\"$L20\",null,{\"children\":[\"$\",\"$L21\",null,{\"children\":[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"WebApplication\\\",\\\"name\\\":\\\"Zhank 在线工具\\\",\\\"url\\\":\\\"https://zhank.tools/zh\\\",\\\"description\\\":\\\"免费在线开发工具集合，提供 JSON 格式化、代码着色、视频处理等 100+ 工具\\\",\\\"applicationCategory\\\":\\\"DeveloperApplication\\\",\\\"operatingSystem\\\":\\\"All\\\",\\\"offers\\\":{\\\"@type\\\":\\\"Offer\\\",\\\"price\\\":\\\"0\\\",\\\"priceCurrency\\\":\\\"CNY\\\"}}\"}}],[\"$\",\"$L22\",null,{}],[\"$\",\"main\",null,{\"className\":\"flex-1\",\"children\":[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"$L23\",null,{}],[\"$\",\"$L24\",null,{}]]}]}]\nc:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n9:null\n"])</script><script>self.__next_f.push([1,"e:[[\"$\",\"title\",\"0\",{\"children\":\"HTML 基础结构 - HTML 教程教程 | Zhank 在线工具\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"DOCTYPE 声明、html/head/body 标签、第一个网页\"}],[\"$\",\"meta\",\"2\",{\"name\":\"author\",\"content\":\"Zhank\"}],[\"$\",\"meta\",\"3\",{\"name\":\"keywords\",\"content\":\"html基础,DOCTYPE,html结构\"}],[\"$\",\"meta\",\"4\",{\"name\":\"creator\",\"content\":\"Zhank\"}],[\"$\",\"meta\",\"5\",{\"name\":\"publisher\",\"content\":\"Zhank\"}],[\"$\",\"meta\",\"6\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"link\",\"7\",{\"rel\":\"canonical\",\"href\":\"https://zhank.tools/zh/tutorials/html/basic\"}],[\"$\",\"meta\",\"8\",{\"name\":\"format-detection\",\"content\":\"telephone=no\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:title\",\"content\":\"HTML 基础结构 - HTML 教程教程 | ZHANK\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:description\",\"content\":\"DOCTYPE 声明、html/head/body 标签、第一个网页\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:url\",\"content\":\"https://zhank.tools/zh/tutorials/html/basic\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:locale\",\"content\":\"zh_CN\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:title\",\"content\":\"HTML 基础结构 - HTML 教程教程\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:description\",\"content\":\"DOCTYPE 声明、html/head/body 标签、第一个网页\"}],[\"$\",\"link\",\"17\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.2vob68tjqpejf.ico\",\"sizes\":\"256x256\",\"type\":\"image/x-icon\"}],[\"$\",\"$L25\",\"18\",{}]]\n"])</script></body></html> |