{"id":3404,"date":"2025-06-28T20:30:13","date_gmt":"2025-06-28T12:30:13","guid":{"rendered":"https:\/\/blog.kangyue.pro\/?p=3404"},"modified":"2025-06-28T20:30:13","modified_gmt":"2025-06-28T12:30:13","slug":"ai%e7%94%9f%e6%88%90%e7%9a%84html%e7%89%88%e6%9c%acpython-%e4%bb%a3%e7%a0%81%e4%bf%9d%e5%ad%98%e5%b7%a5%e5%85%b7","status":"publish","type":"post","link":"https:\/\/blog.kangyue.pro\/?p=3404","title":{"rendered":"AI\u751f\u6210\u7684html\u7248\u672c\u201cPython \u4ee3\u7801\u4fdd\u5b58\u5de5\u5177\u201d"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u5c0f\u5c0f\u5de5\u5177\uff0c\u535a\u541b\u4e00\u7b11\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"915\" src=\"https:\/\/blog.kangyue.pro\/wp-content\/uploads\/2025\/06\/image-158.png\" alt=\"\" class=\"wp-image-3405\" srcset=\"https:\/\/blog.kangyue.pro\/wp-content\/uploads\/2025\/06\/image-158.png 1280w, https:\/\/blog.kangyue.pro\/wp-content\/uploads\/2025\/06\/image-158-768x549.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\t\t<div class='wp-block-bch-code-highlight  align' id='bhcCodeHighlight-8d8f2e53-6' data-attributes='{&quot;cId&quot;:&quot;8d8f2e53-6&quot;,&quot;language&quot;:&quot;html&quot;,&quot;code&quot;:&quot;&lt;!DOCTYPE html&gt;\\n&lt;html lang=\\&quot;zh\\&quot;&gt;\\n&lt;head&gt;\\n  &lt;meta charset=\\&quot;UTF-8\\&quot;&gt;\\n  &lt;title&gt;Python \\u4ee3\\u7801\\u4fdd\\u5b58\\u5de5\\u5177&lt;\\\/title&gt;\\n  &lt;script src=\\&quot;https:\\\/\\\/cdn.jsdelivr.net\\\/npm\\\/codemirror@5.65.13\\\/lib\\\/codemirror.js\\&quot;&gt;&lt;\\\/script&gt;\\n  &lt;link rel=\\&quot;stylesheet\\&quot; href=\\&quot;https:\\\/\\\/cdn.jsdelivr.net\\\/npm\\\/codemirror@5.65.13\\\/lib\\\/codemirror.css\\&quot;&gt;\\n  &lt;script src=\\&quot;https:\\\/\\\/cdn.jsdelivr.net\\\/npm\\\/codemirror@5.65.13\\\/mode\\\/python\\\/python.js\\&quot;&gt;&lt;\\\/script&gt;\\n  &lt;style&gt;\\n    html, body {\\n      height: 100%;\\n      margin: 0;\\n      font-family: &#039;Segoe UI&#039;, sans-serif;\\n      overflow: hidden;\\n    }\\n\\n    body {\\n      \\\/* \\u52a8\\u6001\\u6e10\\u53d8\\u80cc\\u666f *\\\/\\n      background: linear-gradient(-45deg, #5ee7df, #b490ca, #ff9a9e, #fad0c4);\\n      background-size: 400% 400%;\\n      animation: gradient 15s ease infinite;\\n      display: flex;\\n      flex-direction: column;\\n      align-items: center;\\n      justify-content: center;\\n      padding: 20px;\\n    }\\n\\n    @keyframes gradient {\\n      0% { background-position: 0% 50%; }\\n      50% { background-position: 100% 50%; }\\n      100% { background-position: 0% 50%; }\\n    }\\n\\n    h1 {\\n      color: #ffffff;\\n      margin-bottom: 20px;\\n      text-shadow: 1px 1px 4px #333;\\n    }\\n\\n    .editor-container {\\n      width: 80%;\\n      max-width: 900px;\\n      height: 400px;\\n      border: 1px solid rgba(255,255,255,0.3);\\n      border-radius: 12px;\\n      backdrop-filter: blur(8px);\\n      background: rgba(255, 255, 255, 0.15);\\n      overflow: hidden;\\n      box-shadow: 0 8px 32px rgba(0,0,0,0.25);\\n    }\\n\\n    .CodeMirror {\\n      height: 100% !important;\\n      background: transparent;\\n      color: #000;\\n      font-size: 14px;\\n    }\\n\\n    .btn-group {\\n      margin-top: 20px;\\n      display: flex;\\n      align-items: center;\\n      gap: 10px;\\n    }\\n\\n    .btn {\\n      padding: 10px 20px;\\n      border: none;\\n      background-color: #2563eb;\\n      color: white;\\n      border-radius: 6px;\\n      cursor: pointer;\\n      font-size: 16px;\\n      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\\n    }\\n\\n    .btn:hover {\\n      background-color: #1e40af;\\n    }\\n\\n    .tooltip-container {\\n      position: relative;\\n      display: inline-block;\\n      cursor: pointer;\\n      width: 24px;\\n      height: 24px;\\n      border-radius: 50%;\\n      background-color: #e5e7eb;\\n      color: #111827;\\n      font-weight: bold;\\n      text-align: center;\\n      line-height: 24px;\\n      margin-left: 10px;\\n    }\\n\\n    .tooltip-container:hover .tooltip-text {\\n      visibility: visible;\\n      opacity: 1;\\n    }\\n\\n    .tooltip-text {\\n      visibility: hidden;\\n      width: 260px;\\n      background-color: #111827;\\n      color: #fff;\\n      text-align: left;\\n      border-radius: 6px;\\n      padding: 8px 10px;\\n      position: absolute;\\n      z-index: 1;\\n      bottom: 130%;\\n      left: 50%;\\n      transform: translateX(-50%);\\n      opacity: 0;\\n      transition: opacity 0.3s;\\n      font-size: 13px;\\n    }\\n\\n    .tooltip-text::after {\\n      content: \\&quot;\\&quot;;\\n      position: absolute;\\n      top: 100%;\\n      left: 50%;\\n      margin-left: -6px;\\n      border-width: 6px;\\n      border-style: solid;\\n      border-color: #111827 transparent transparent transparent;\\n    }\\n\\t\\n\\t.footer {\\n    position: fixed;\\n    bottom: 0;\\n    left: 0;\\n    width: 100%;\\n    padding: 12px 0;\\n    text-align: center;\\n    font-size: 14px;\\n    color: #fff;\\n    backdrop-filter: blur(6px);\\n    background: rgba(0, 0, 0, 0.3);\\n    z-index: 1000;\\n    box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.2);\\n  }\\n\\n\\t\\n  &lt;\\\/style&gt;\\n&lt;\\\/head&gt;\\n&lt;body&gt;\\n\\n  &lt;h1&gt;Python \\u4ee3\\u7801\\u4fdd\\u5b58\\u5de5\\u5177&lt;\\\/h1&gt;\\n\\n  &lt;div class=\\&quot;editor-container\\&quot;&gt;\\n    &lt;textarea id=\\&quot;code\\&quot;&gt;# \\u5728\\u8fd9\\u91cc\\u7c98\\u8d34\\u6216\\u7f16\\u5199 Python \\u4ee3\\u7801&lt;\\\/textarea&gt;\\n  &lt;\\\/div&gt;\\n\\n  &lt;div class=\\&quot;btn-group\\&quot;&gt;\\n    &lt;button class=\\&quot;btn\\&quot; onclick=\\&quot;downloadCode(&#039;py&#039;)\\&quot;&gt;\\u4fdd\\u5b58\\u4e3a .py \\u6587\\u4ef6&lt;\\\/button&gt;\\n    &lt;button class=\\&quot;btn\\&quot; onclick=\\&quot;downloadCode(&#039;pyw&#039;)\\&quot;&gt;\\u4fdd\\u5b58\\u4e3a .pyw \\u6587\\u4ef6&lt;\\\/button&gt;\\n    &lt;div class=\\&quot;tooltip-container\\&quot;&gt;?\\n      &lt;div class=\\&quot;tooltip-text\\&quot;&gt;\\n        &lt;strong&gt;.py&lt;\\\/strong&gt; \\u6587\\u4ef6\\uff1a\\u8fd0\\u884c\\u65f6\\u4f1a\\u663e\\u793a\\u547d\\u4ee4\\u884c\\u7a97\\u53e3&lt;br&gt;\\n        &lt;strong&gt;.pyw&lt;\\\/strong&gt; \\u6587\\u4ef6\\uff1a\\u8fd0\\u884c\\u65f6\\u4e0d\\u663e\\u793a\\u7a97\\u53e3\\uff08\\u9002\\u5408\\u56fe\\u5f62\\u754c\\u9762\\u7a0b\\u5e8f\\uff09\\n      &lt;\\\/div&gt;\\n    &lt;\\\/div&gt;\\n  &lt;\\\/div&gt;\\n\\n  &lt;script&gt;\\n    const editor = CodeMirror.fromTextArea(document.getElementById(\\&quot;code\\&quot;), {\\n      lineNumbers: true,\\n      mode: \\&quot;python\\&quot;,\\n      theme: \\&quot;default\\&quot;,\\n      indentUnit: 4,\\n      tabSize: 4,\\n      lineWrapping: true\\n    });\\n\\n    let hasCleared = false;\\n    editor.on(&#039;focus&#039;, () =&gt; {\\n      if (!hasCleared) {\\n        const value = editor.getValue();\\n        if (value.trim().startsWith(\\&quot;# \\u5728\\u8fd9\\u91cc\\u7c98\\u8d34\\&quot;)) {\\n          editor.setValue(\\&quot;\\&quot;);\\n        }\\n        hasCleared = true;\\n      }\\n    });\\n\\n    function downloadCode(ext) {\\n      const code = editor.getValue();\\n      const blob = new Blob([code], { type: \\&quot;text\\\/plain\\&quot; });\\n      const url = URL.createObjectURL(blob);\\n      const a = document.createElement(\\&quot;a\\&quot;);\\n      a.href = url;\\n      a.download = `script.${ext}`;\\n      document.body.appendChild(a);\\n      a.click();\\n      document.body.removeChild(a);\\n      URL.revokeObjectURL(url);\\n    }\\n  &lt;\\\/script&gt;\\n  &lt;footer class=\\&quot;footer\\&quot;&gt;\\n    \\u672c\\u9875\\u9762\\u7531 XX \\u4f7f\\u7528 AI \\u5236\\u4f5c\\uff0c\\u7248\\u6743\\u6728\\u6709\\uff0c\\u4fb5\\u6743\\u4e0d\\u7a76\\n  &lt;\\\/footer&gt;\\n&lt;\\\/body&gt;\\n&lt;\\\/html&gt;\\n&quot;,&quot;codeTypo&quot;:{&quot;desktop&quot;:9,&quot;tablet&quot;:15,&quot;mobile&quot;:14},&quot;height&quot;:{&quot;desktop&quot;:&quot;500px&quot;,&quot;tablet&quot;:&quot;0px&quot;,&quot;mobile&quot;:&quot;0px&quot;},&quot;align&quot;:&quot;&quot;,&quot;lineNumbers&quot;:true,&quot;theme&quot;:&quot;default&quot;,&quot;clipBoard&quot;:true,&quot;wordWrap&quot;:true,&quot;width&quot;:{&quot;desktop&quot;:&quot;100%&quot;,&quot;tablet&quot;:&quot;100%&quot;,&quot;mobile&quot;:&quot;100%&quot;},&quot;padding&quot;:{&quot;top&quot;:&quot;0px&quot;,&quot;right&quot;:&quot;0px&quot;,&quot;bottom&quot;:&quot;0px&quot;,&quot;left&quot;:&quot;0px&quot;},&quot;background&quot;:{&quot;color&quot;:&quot;#d3cfcf42&quot;},&quot;layout&quot;:{&quot;align&quot;:&quot;left&quot;},&quot;border&quot;:{&quot;color&quot;:&quot;#000&quot;,&quot;style&quot;:&quot;solid&quot;,&quot;width&quot;:&quot;0px&quot;},&quot;shadow&quot;:[],&quot;alignment&quot;:&quot;center&quot;,&quot;clipBoardColors&quot;:{&quot;color&quot;:&quot;#fff&quot;,&quot;bg&quot;:&quot;#00000024&quot;}}'><\/div>\r\n\r\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u5c0f\u5c0f\u5de5\u5177\uff0c\u535a\u541b\u4e00\u7b11\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3404","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=\/wp\/v2\/posts\/3404","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3404"}],"version-history":[{"count":1,"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=\/wp\/v2\/posts\/3404\/revisions"}],"predecessor-version":[{"id":3406,"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=\/wp\/v2\/posts\/3404\/revisions\/3406"}],"wp:attachment":[{"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3404"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}