{"id":86,"date":"2025-11-22T09:47:13","date_gmt":"2025-11-22T01:47:13","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=86"},"modified":"2025-11-22T09:47:13","modified_gmt":"2025-11-22T01:47:13","slug":"html5%e5%ae%9e%e7%8e%b0%e7%9a%84%e7%a7%bb%e5%8a%a8%e7%ab%af%e8%b4%ad%e7%89%a9%e8%bd%a6%e8%87%aa%e5%8a%a8%e7%bb%93%e7%ae%97%e5%8a%9f%e8%83%bd%e7%a4%ba%e4%be%8b%e4%bb%a3%e7%a0%81","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/11\/22\/html5%e5%ae%9e%e7%8e%b0%e7%9a%84%e7%a7%bb%e5%8a%a8%e7%ab%af%e8%b4%ad%e7%89%a9%e8%bd%a6%e8%87%aa%e5%8a%a8%e7%bb%93%e7%ae%97%e5%8a%9f%e8%83%bd%e7%a4%ba%e4%be%8b%e4%bb%a3%e7%a0%81\/","title":{"rendered":"HTML5\u5b9e\u73b0\u7684\u79fb\u52a8\u7aef\u8d2d\u7269\u8f66\u81ea\u52a8\u7ed3\u7b97\u529f\u80fd\u793a\u4f8b\u4ee3\u7801"},"content":{"rendered":"\n<p>\u4e0b\u9762\u7ed9\u4f60\u4e00\u4e2a <strong>HTML5 + \u539f\u751f JavaScript<\/strong> \u5b9e\u73b0\u7684 <strong>\u79fb\u52a8\u7aef\u8d2d\u7269\u8f66\u81ea\u52a8\u7ed3\u7b97\u529f\u80fd\u793a\u4f8b\u4ee3\u7801<\/strong>\uff0c\u7ed3\u6784\u6e05\u6670\u3001\u53ef\u76f4\u63a5\u590d\u5236\u8fd0\u884c\uff0c\u652f\u6301\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6570\u91cf\u52a0\u51cf<\/li>\n\n\n\n<li>\u81ea\u52a8\u8ba1\u7b97\u5546\u54c1\u5c0f\u8ba1<\/li>\n\n\n\n<li>\u81ea\u52a8\u66f4\u65b0\u603b\u4ef7<\/li>\n\n\n\n<li>\u5220\u9664\u5546\u54c1<\/li>\n\n\n\n<li>\u79fb\u52a8\u7aef\u81ea\u9002\u5e94\uff08\u7b80\u5355\u6837\u5f0f\uff09<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u2714\ufe0f <strong>HTML5 \u5b9e\u73b0\u79fb\u52a8\u7aef\u8d2d\u7269\u8f66\u81ea\u52a8\u7ed3\u7b97 \u2014 \u5b8c\u6574\u793a\u4f8b<\/strong><\/h1>\n\n\n\n<p>\u4e0b\u9762\u662f\u53ef\u4ee5\u76f4\u63a5\u8fd0\u884c\u7684 <strong>\u5b8c\u6574\u4ee3\u7801\u793a\u4f8b\uff08HTML\/CSS\/JS \u4e00\u4f53\uff09<\/strong>\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udccc \u6548\u679c\u8bf4\u660e<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u70b9\u51fb <strong>+ \uff0d<\/strong> \u6309\u94ae\u81ea\u52a8\u66f4\u65b0\u91d1\u989d<\/li>\n\n\n\n<li>\u4fee\u6539\u6570\u91cf\u8f93\u5165\u6846\u4e5f\u4f1a\u81ea\u52a8\u66f4\u65b0<\/li>\n\n\n\n<li>\u53ef\u5220\u9664\u5546\u54c1<\/li>\n\n\n\n<li>\u603b\u4ef7\u5b9e\u65f6\u5237\u65b0<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u2b50 <strong>\u5b8c\u6574\u4ee3\u7801\u793a\u4f8b (\u53ef\u76f4\u63a5\u590d\u5236\u8fd0\u884c)<\/strong><\/h1>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;!DOCTYPE html&gt;\n&amp;lt;html lang=&quot;zh-CN&quot;&gt;\n&amp;lt;head&gt;\n&amp;lt;meta charset=&quot;UTF-8&quot;&gt;\n&amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n&amp;lt;title&gt;\u79fb\u52a8\u7aef\u8d2d\u7269\u8f66&amp;lt;\/title&gt;\n\n&amp;lt;style&gt;\n    body {\n        font-family: Arial, sans-serif;\n        padding: 10px;\n        background: #f5f5f5;\n    }\n    .cart-item {\n        display: flex;\n        padding: 10px;\n        background: #fff;\n        margin-bottom: 10px;\n        border-radius: 8px;\n        align-items: center;\n    }\n    .cart-item img {\n        width: 80px;\n        height: 80px;\n        border-radius: 6px;\n        margin-right: 10px;\n        flex-shrink: 0;\n        object-fit: cover;\n    }\n    .info { flex: 1; }\n    .title { font-size: 15px; margin-bottom: 5px; }\n    .price { color: #e4393c; font-weight: bold; margin-bottom: 5px; }\n\n    .qty-box {\n        display: flex;\n        align-items: center;\n    }\n    .qty-box button {\n        width: 30px;\n        height: 30px;\n        border: none;\n        background: #ddd;\n        font-size: 18px;\n        border-radius: 4px;\n    }\n    .qty-box input {\n        width: 40px;\n        text-align: center;\n        border: 1px solid #ccc;\n        margin: 0 5px;\n        height: 28px;\n        border-radius: 4px;\n    }\n    .delete {\n        color: #999;\n        font-size: 14px;\n        margin-left: 10px;\n    }\n\n    .total {\n        position: fixed;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        background: #fff;\n        padding: 12px;\n        box-shadow: 0 -2px 5px rgba(0,0,0,0.1);\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n    .total-price {\n        font-size: 18px;\n        color: #e4393c;\n        font-weight: bold;\n    }\n    .pay-btn {\n        background: #ff5722;\n        color: #fff;\n        padding: 10px 18px;\n        border-radius: 6px;\n    }\n&amp;lt;\/style&gt;\n&amp;lt;\/head&gt;\n\n&amp;lt;body&gt;\n\n&amp;lt;h2&gt;\u8d2d\u7269\u8f66&amp;lt;\/h2&gt;\n\n&amp;lt;div id=&quot;cart-list&quot;&gt;\n\n    &amp;lt;div class=&quot;cart-item&quot; data-price=&quot;59.9&quot;&gt;\n        &amp;lt;img src=&quot;https:\/\/via.placeholder.com\/80&quot;&gt;\n        &amp;lt;div class=&quot;info&quot;&gt;\n            &amp;lt;div class=&quot;title&quot;&gt;\u590f\u5b63T\u6064&amp;lt;\/div&gt;\n            &amp;lt;div class=&quot;price&quot;&gt;\u00a559.9&amp;lt;\/div&gt;\n\n            &amp;lt;div class=&quot;qty-box&quot;&gt;\n                &amp;lt;button class=&quot;minus&quot;&gt;\uff0d&amp;lt;\/button&gt;\n                &amp;lt;input type=&quot;number&quot; class=&quot;qty&quot; value=&quot;1&quot;&gt;\n                &amp;lt;button class=&quot;plus&quot;&gt;\uff0b&amp;lt;\/button&gt;\n            &amp;lt;\/div&gt;\n        &amp;lt;\/div&gt;\n        &amp;lt;span class=&quot;delete&quot;&gt;\u5220\u9664&amp;lt;\/span&gt;\n    &amp;lt;\/div&gt;\n\n    &amp;lt;div class=&quot;cart-item&quot; data-price=&quot;120&quot;&gt;\n        &amp;lt;img src=&quot;https:\/\/via.placeholder.com\/80&quot;&gt;\n        &amp;lt;div class=&quot;info&quot;&gt;\n            &amp;lt;div class=&quot;title&quot;&gt;\u8fd0\u52a8\u978b&amp;lt;\/div&gt;\n            &amp;lt;div class=&quot;price&quot;&gt;\u00a5120&amp;lt;\/div&gt;\n\n            &amp;lt;div class=&quot;qty-box&quot;&gt;\n                &amp;lt;button class=&quot;minus&quot;&gt;\uff0d&amp;lt;\/button&gt;\n                &amp;lt;input type=&quot;number&quot; class=&quot;qty&quot; value=&quot;1&quot;&gt;\n                &amp;lt;button class=&quot;plus&quot;&gt;\uff0b&amp;lt;\/button&gt;\n            &amp;lt;\/div&gt;\n        &amp;lt;\/div&gt;\n        &amp;lt;span class=&quot;delete&quot;&gt;\u5220\u9664&amp;lt;\/span&gt;\n    &amp;lt;\/div&gt;\n\n&amp;lt;\/div&gt;\n\n&amp;lt;!-- \u5e95\u90e8\u7ed3\u7b97\u680f --&gt;\n&amp;lt;div class=&quot;total&quot;&gt;\n    &amp;lt;span&gt;\u5408\u8ba1\uff1a&amp;lt;\/span&gt;\n    &amp;lt;span class=&quot;total-price&quot;&gt;\u00a50&amp;lt;\/span&gt;\n    &amp;lt;div class=&quot;pay-btn&quot;&gt;\u53bb\u7ed3\u7b97&amp;lt;\/div&gt;\n&amp;lt;\/div&gt;\n\n\n&amp;lt;script&gt;\n    function calcTotal() {\n        let total = 0;\n        document.querySelectorAll(&quot;.cart-item&quot;).forEach(item =&gt; {\n            const price = parseFloat(item.dataset.price);\n            const qty = parseInt(item.querySelector(&quot;.qty&quot;).value) || 0;\n            total += price * qty;\n        });\n        document.querySelector(&quot;.total-price&quot;).innerText = &quot;\u00a5&quot; + total.toFixed(2);\n    }\n\n    \/\/ \u6570\u91cf\u52a0\u51cf\u4e8b\u4ef6\n    document.querySelectorAll(&quot;.cart-item&quot;).forEach(item =&gt; {\n        const minus = item.querySelector(&quot;.minus&quot;);\n        const plus = item.querySelector(&quot;.plus&quot;);\n        const qtyInput = item.querySelector(&quot;.qty&quot;);\n\n        minus.onclick = () =&gt; {\n            let value = parseInt(qtyInput.value);\n            if (value &gt; 1) qtyInput.value = value - 1;\n            calcTotal();\n        };\n\n        plus.onclick = () =&gt; {\n            qtyInput.value = parseInt(qtyInput.value) + 1;\n            calcTotal();\n        };\n\n        qtyInput.oninput = () =&gt; calcTotal();\n\n        \/\/ \u5220\u9664\u5546\u54c1\n        item.querySelector(&quot;.delete&quot;).onclick = () =&gt; {\n            item.remove();\n            calcTotal();\n        };\n    });\n\n    \/\/ \u521d\u6b21\u8ba1\u7b97\n    calcTotal();\n&amp;lt;\/script&gt;\n\n&amp;lt;\/body&gt;\n&amp;lt;\/html&gt;\n\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"<p>\u4e0b\u9762\u7ed9\u4f60\u4e00\u4e2a HTML5 + \u539f\u751f JavaScript \u5b9e\u73b0\u7684 \u79fb\u52a8\u7aef\u8d2d\u7269\u8f66\u81ea&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/11\/22\/html5%e5%ae%9e%e7%8e%b0%e7%9a%84%e7%a7%bb%e5%8a%a8%e7%ab%af%e8%b4%ad%e7%89%a9%e8%bd%a6%e8%87%aa%e5%8a%a8%e7%bb%93%e7%ae%97%e5%8a%9f%e8%83%bd%e7%a4%ba%e4%be%8b%e4%bb%a3%e7%a0%81\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-86","post","type-post","status-publish","format-standard","hentry","category-html5"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/86","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=86"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/86\/revisions"}],"predecessor-version":[{"id":87,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/86\/revisions\/87"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=86"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=86"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=86"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}