{"id":180,"date":"2025-11-25T09:04:25","date_gmt":"2025-11-25T01:04:25","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=180"},"modified":"2025-11-25T09:04:25","modified_gmt":"2025-11-25T01:04:25","slug":"%e4%bd%bf%e7%94%a8hbuilder%e5%88%b6%e4%bd%9c%e4%b8%80%e4%b8%aa%e7%ae%80%e5%8d%95%e7%9a%84html5%e7%bd%91%e9%a1%b5","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/11\/25\/%e4%bd%bf%e7%94%a8hbuilder%e5%88%b6%e4%bd%9c%e4%b8%80%e4%b8%aa%e7%ae%80%e5%8d%95%e7%9a%84html5%e7%bd%91%e9%a1%b5\/","title":{"rendered":"\u4f7f\u7528HBuilder\u5236\u4f5c\u4e00\u4e2a\u7b80\u5355\u7684HTML5\u7f51\u9875"},"content":{"rendered":"\n

\u597d\u2014\u2014\u7ed9\u4f60\u4e00\u4efd\u9762\u5411 HBuilderX\uff08\u4e5f\u5c31\u662f HBuilder\uff09\u7684\u4e00\u6b65\u6b65\u5b9e\u64cd\u6307\u5357 + \u5b8c\u6574\u53ef\u8fd0\u884c\u793a\u4f8b<\/strong>\uff0c\u4f60\u7167\u7740\u505a 5 \u5206\u949f\u5185\u5c31\u80fd\u770b\u5230\u7f51\u9875\u5728\u624b\u673a\/\u6d4f\u89c8\u5668\u91cc\u8dd1\u8d77\u6765\u3002\u4e3a\u4e86\u7b80\u5355\uff0c\u6211\u7528\u6700\u57fa\u7840\u7684 index.html<\/code> + style.css<\/code> + main.js<\/code> \u7ed3\u6784\uff0c\u5e76\u6f14\u793a HBuilder \u7684\u65b0\u5efa\u3001\u9884\u89c8\u4e0e\u6253\u5305\u6d41\u7a0b\u3002<\/p>\n\n\n\n

\u4e0b\u9762\u5f00\u59cb\uff08\u963f\u6770\uff09\u2014\u2014<\/p>\n\n\n\n

\n\n\n\n

1 \u6b65\uff1a\u51c6\u5907<\/h1>\n\n\n\n
    \n
  1. \u4e0b\u8f7d\u5e76\u5b89\u88c5 HBuilderX\uff08HBuilder\uff09
    \u8bbf\u95ee\u5b98\u7f51\u6216\u7528\u4f60\u73b0\u6709\u7684 HBuilderX \u5ba2\u6237\u7aef\u6253\u5f00\u5373\u53ef\u3002<\/li>\n\n\n\n
  2. \u6253\u5f00 HBuilderX\u3002<\/li>\n<\/ol>\n\n\n\n
    \n\n\n\n

    2 \u6b65\uff1a\u65b0\u5efa\u4e00\u4e2a H5 \u9879\u76ee<\/h1>\n\n\n\n
      \n
    1. \u83dc\u5355\uff1a\u6587\u4ef6 \u2192 \u65b0\u5efa \u2192 \u9879\u76ee \u2192 HTML5 \u9879\u76ee<\/strong>\uff08\u6216\u9009\u62e9\u201c\u7a7a\u9879\u76ee\u201d\uff09\u3002<\/li>\n\n\n\n
    2. \u586b\u5199\u9879\u76ee\u540d\uff08\u4f8b\u5982 simple-h5<\/code>\uff09\uff0c\u9009\u62e9\u4fdd\u5b58\u8def\u5f84\uff0c\u70b9\u51fb\u786e\u5b9a\u3002<\/li>\n\n\n\n
    3. \u5728\u9879\u76ee\u6839\u76ee\u5f55\u4e0b\u65b0\u5efa\u4e09\u4e2a\u6587\u4ef6\uff1aindex.html<\/code>\u3001style.css<\/code>\u3001main.js<\/code>\u3002<\/li>\n<\/ol>\n\n\n\n
      \n\n\n\n

      3 \u6b65\uff1a\u628a\u4e0b\u9762\u4ee3\u7801\u5206\u522b\u590d\u5236\u8fdb\u53bb<\/h1>\n\n\n\n

      index.html<\/code><\/h3>\n\n\n
      \n&lt;!doctype html>\n&lt;html lang="zh-CN">\n&lt;head>\n  &lt;meta charset="utf-8" \/>\n  &lt;meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">\n  &lt;title>\u7b80\u5355 H5 \u9875\u9762 - HBuilder&lt;\/title>\n  &lt;link rel="stylesheet" href="style.css">\n&lt;\/head>\n&lt;body>\n  &lt;header class="topbar">\n    &lt;h1>\u6b22\u8fce \u2014 \u7b80\u5355 H5 \u6f14\u793a&lt;\/h1>\n  &lt;\/header>\n\n  &lt;main class="container">\n    &lt;section class="card">\n      &lt;h2>\u793a\u4f8b\u89c6\u9891\uff08\u53ef\u66ff\u6362\uff09&lt;\/h2>\n      &lt;video id="demoVideo" src="sample.mp4" controls playsinline muted preload="metadata">&lt;\/video>\n    &lt;\/section>\n\n    &lt;section class="card">\n      &lt;h2>\u8ba1\u6570\u5668\u6f14\u793a&lt;\/h2>\n      &lt;div class="counter">\n        &lt;button id="dec">-&lt;\/button>\n        &lt;span id="count">0&lt;\/span>\n        &lt;button id="inc">+&lt;\/button>\n      &lt;\/div>\n    &lt;\/section>\n\n    &lt;section class="card">\n      &lt;h2>Toast \u6d4b\u8bd5&lt;\/h2>\n      &lt;button id="toastBtn">\u663e\u793a\u63d0\u793a&lt;\/button>\n    &lt;\/section>\n  &lt;\/main>\n\n  &lt;footer class="foot">\u4f7f\u7528 HBuilderX \u751f\u6210 &amp;mdash; \u7b80\u5355\u793a\u4f8b&lt;\/footer>\n\n  &lt;script src="main.js">&lt;\/script>\n&lt;\/body>\n&lt;\/html>\n\n<\/pre><\/div>\n\n\n
      style.css<\/code><\/h3>\n\n\n
      \n*{box-sizing:border-box}\nhtml,body{height:100%;margin:0;font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#f6f7fb;color:#222}\n.topbar{background:#4a90e2;color:#fff;padding:14px 16px;text-align:center}\n.container{padding:12px;max-width:820px;margin:12px auto}\n.card{background:#fff;border-radius:8px;padding:12px;margin-bottom:12px;box-shadow:0 2px 8px rgba(0,0,0,.06)}\nvideo{width:100%;height:auto;border-radius:6px;background:#000}\n.counter{display:flex;align-items:center;gap:12px;font-size:20px}\n.counter button{padding:8px 14px;border-radius:6px;border:1px solid #ddd;background:#fff}\n#count{min-width:48px;text-align:center;display:inline-block}\n.foot{text-align:center;padding:10px;color:#888;font-size:13px}\n\n<\/pre><\/div>\n\n\n
      main.js<\/code><\/h3>\n\n\n
      \ndocument.addEventListener('DOMContentLoaded', () => {\n  const inc = document.getElementById('inc');\n  const dec = document.getElementById('dec');\n  const cnt = document.getElementById('count');\n  const toastBtn = document.getElementById('toastBtn');\n\n  let count = 0;\n  function render(){ cnt.textContent = count; }\n\n  inc.addEventListener('click', () => { count++; render(); });\n  dec.addEventListener('click', () => { count = Math.max(0, count-1); render(); });\n\n  toastBtn.addEventListener('click', () => {\n    \/\/ \u7b80\u5355\u5b9e\u73b0\u4e00\u4e2a\u4e34\u65f6\u63d0\u793a\n    const t = document.createElement('div');\n    t.textContent = '\u8fd9\u662f\u4e00\u4e2a\u63d0\u793a\uff08Toast\uff09';\n    Object.assign(t.style, {\n      position:'fixed', left:'50%', top:'80%', transform:'translateX(-50%)',\n      padding:'10px 14px', background:'rgba(0,0,0,.75)', color:'#fff', borderRadius:'6px', zIndex:9999\n    });\n    document.body.appendChild(t);\n    setTimeout(()=> t.remove(), 1600);\n  });\n\n  render();\n});\n\n<\/pre><\/div>\n\n\n
      \n
      \u8bf4\u660e\uff1a\u5982\u679c\u4f60\u6ca1\u6709 sample.mp4<\/code>\uff0c\u628a <video><\/code> \u7684 src<\/code> \u6362\u6210\u4e00\u4e2a\u5728\u7ebf\u5c0f\u89c6\u9891\u5730\u5740\u6216\u76f4\u63a5\u5220\u6389\u89c6\u9891\u6807\u7b7e\u4ee5\u514d 404\u3002<\/p>\n<\/blockquote>\n\n\n\n
      \n\n\n\n
      4 \u6b65\uff1a\u5728 HBuilderX \u4e2d\u9884\u89c8<\/h1>\n\n\n\n
        \n
      1. \u5728 HBuilderX \u7f16\u8f91\u5668\u4e2d\u53f3\u952e index.html<\/code> \u2192 \u5728\u6d4f\u89c8\u5668\u4e2d\u8fd0\u884c<\/strong> \u2192 \u9009\u62e9\u4f60\u5e38\u7528\u7684\u6d4f\u89c8\u5668\uff08\u6216\u76f4\u63a5 F6\uff09\u3002<\/li>\n\n\n\n
      2. \u6216\u8005\u70b9\u51fb\u5de5\u5177\u680f\u7684 \u8fd0\u884c \u2192 \u5728\u6d4f\u89c8\u5668\u9884\u89c8<\/strong>\u3002<\/li>\n\n\n\n
      3. \u8981\u5728\u624b\u673a\u4e0a\u9884\u89c8\uff1a\u70b9\u51fb \u8fd0\u884c \u2192 \u4f7f\u7528 HBuilderX \u624b\u673a\u9884\u89c8\uff08\u626b\u7801\uff09<\/strong>\uff0c\u7528 HBuilderX \u79fb\u52a8\u7aef App \u626b\u7801\u5373\u53ef\u5b9e\u65f6\u9884\u89c8\u3002<\/li>\n<\/ol>\n\n\n\n
        \n\n\n\n
        5 \u6b65\uff1a\u8c03\u8bd5\uff08\u5e38\u7528\u6280\u5de7\uff09<\/h1>\n\n\n\n