{"id":782,"date":"2025-12-14T14:33:37","date_gmt":"2025-12-14T06:33:37","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=782"},"modified":"2025-12-14T14:33:37","modified_gmt":"2025-12-14T06:33:37","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-2","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/14\/%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-2\/","title":{"rendered":"\u4f7f\u7528HBuilder\u5236\u4f5c\u4e00\u4e2a\u7b80\u5355\u7684HTML5\u7f51\u9875"},"content":{"rendered":"\n<p>\u4e0b\u9762\u662f\u4e00\u4efd<strong>\u9002\u5408\u96f6\u57fa\u7840\u7684\u65b0\u624b\u6559\u7a0b<\/strong>\uff0c\u4e00\u6b65\u4e00\u6b65\u6559\u4f60<strong>\u4f7f\u7528 HBuilder \u5236\u4f5c\u4e00\u4e2a\u7b80\u5355\u7684 HTML5 \u7f51\u9875<\/strong>\uff0c\u5305\u542b\u5b8c\u6574\u4ee3\u7801\u4e0e\u8fd0\u884c\u65b9\u6cd5\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u4f7f\u7528 HBuilder \u5236\u4f5c\u4e00\u4e2a\u7b80\u5355\u7684 HTML5 \u7f51\u9875\uff08\u65b0\u624b\u5fc5\u770b\uff09<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e00\u3001\u51c6\u5907\u5de5\u4f5c<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1\ufe0f\u20e3 \u4e0b\u8f7d\u5e76\u5b89\u88c5 HBuilder<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5b98\u7f51\uff1a<a href=\"https:\/\/www.dcloud.io\/hbuilderx.html\">https:\/\/www.dcloud.io\/hbuilderx.html<\/a><\/li>\n\n\n\n<li>\u63a8\u8350\u4f7f\u7528 <strong>HBuilderX \u6807\u51c6\u7248\uff08\u514d\u8d39\uff09<\/strong><\/li>\n\n\n\n<li>\u652f\u6301 Windows \/ macOS<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e8c\u3001\u65b0\u5efa HTML5 \u9879\u76ee<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u6253\u5f00 <strong>HBuilderX<\/strong><\/li>\n\n\n\n<li>\u70b9\u51fb\u83dc\u5355\u680f<br><strong>\u6587\u4ef6 \u2192 \u65b0\u5efa \u2192 \u9879\u76ee<\/strong><\/li>\n\n\n\n<li>\u9009\u62e9<br><strong>Web \u2192 \u666e\u901a\u9879\u76ee<\/strong><\/li>\n\n\n\n<li>\u9879\u76ee\u540d\u79f0\uff1a<code>hello-html<\/code><\/li>\n\n\n\n<li>\u9009\u62e9\u9879\u76ee\u4fdd\u5b58\u8def\u5f84<\/li>\n\n\n\n<li>\u70b9\u51fb <strong>\u5b8c\u6210<\/strong><\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e09\u3001\u65b0\u5efa HTML \u6587\u4ef6<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u5728\u5de6\u4fa7\u9879\u76ee\u76ee\u5f55\u4e2d<br>\u53f3\u952e\u9879\u76ee \u2192 <strong>\u65b0\u5efa \u2192 HTML \u6587\u4ef6<\/strong><\/li>\n\n\n\n<li>\u6587\u4ef6\u540d\uff1a<code>index.html<\/code><\/li>\n\n\n\n<li>\u9009\u62e9 <strong>HTML5 \u6a21\u677f<\/strong><\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u56db\u3001HTML5 \u57fa\u7840\u793a\u4f8b\u4ee3\u7801<\/h2>\n\n\n\n<p>\u5c06\u4ee5\u4e0b\u4ee3\u7801\u590d\u5236\u5230 <code>index.html<\/code> \u4e2d\uff1a<\/p>\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;title&gt;My First HTML5 Page&amp;lt;\/title&gt;\n    &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    \n    &amp;lt;style&gt;\n        body {\n            font-family: Arial, sans-serif;\n            background-color: #f2f2f2;\n            text-align: center;\n            padding-top: 50px;\n        }\n\n        h1 {\n            color: #333;\n        }\n\n        button {\n            padding: 10px 20px;\n            font-size: 16px;\n            cursor: pointer;\n        }\n    &amp;lt;\/style&gt;\n&amp;lt;\/head&gt;\n&amp;lt;body&gt;\n\n    &amp;lt;h1&gt;Hello HTML5 \ud83d\udc4b&amp;lt;\/h1&gt;\n    &amp;lt;p&gt;This is my first web page made with HBuilder.&amp;lt;\/p&gt;\n\n    &amp;lt;button onclick=&quot;sayHello()&quot;&gt;Click Me&amp;lt;\/button&gt;\n\n    &amp;lt;script&gt;\n        function sayHello() {\n            alert(&quot;Welcome to HTML5!&quot;);\n        }\n    &amp;lt;\/script&gt;\n\n&amp;lt;\/body&gt;\n&amp;lt;\/html&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e94\u3001\u8fd0\u884c HTML \u9875\u9762<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u65b9\u6cd5\u4e00\uff1a\u5185\u7f6e\u6d4f\u89c8\u5668\u8fd0\u884c\uff08\u63a8\u8350\uff09<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u53f3\u952e <code>index.html<\/code><\/li>\n\n\n\n<li>\u9009\u62e9 <strong>\u4f7f\u7528\u6d4f\u89c8\u5668\u6253\u5f00<\/strong><\/li>\n\n\n\n<li>\u6216\u70b9\u51fb\u5de5\u5177\u680f\u7684 \u25b6 \u8fd0\u884c\u6309\u94ae<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u65b9\u6cd5\u4e8c\uff1a\u672c\u5730\u6d4f\u89c8\u5668\u8fd0\u884c<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u627e\u5230\u9879\u76ee\u76ee\u5f55<\/li>\n\n\n\n<li>\u53cc\u51fb <code>index.html<\/code><\/li>\n\n\n\n<li>\u7528 Chrome \/ Edge \u6253\u5f00<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u516d\u3001\u9879\u76ee\u7ed3\u6784\u8bf4\u660e<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nhello-html\/\n\u2502\u2500\u2500 index.html\n\u2502\u2500\u2500 css\/\n\u2502   \u2514\u2500\u2500 style.css\uff08\u53ef\u9009\uff09\n\u2502\u2500\u2500 js\/\n\u2502   \u2514\u2500\u2500 main.js\uff08\u53ef\u9009\uff09\n\u2502\u2500\u2500 images\/\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e03\u3001\u5e38\u7528 HBuilder \u5feb\u6377\u529f\u80fd<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u529f\u80fd<\/th><th>\u5feb\u6377\u65b9\u5f0f<\/th><\/tr><\/thead><tbody><tr><td>\u81ea\u52a8\u8865\u5168<\/td><td>\u56de\u8f66 \/ Tab<\/td><\/tr><tr><td>\u683c\u5f0f\u5316\u4ee3\u7801<\/td><td>Ctrl + K<\/td><\/tr><tr><td>\u6ce8\u91ca<\/td><td>Ctrl + \/<\/td><\/tr><tr><td>\u5b9e\u65f6\u9884\u89c8<\/td><td>Ctrl + R<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u516b\u3001\u8fdb\u9636\uff1a\u62c6\u5206 CSS \u548c JS\uff08\u63a8\u8350\uff09<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">CSS\uff1a<code>css\/style.css<\/code><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nbody {\n    background-color: #eef;\n}\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">JS\uff1a<code>js\/main.js<\/code><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nfunction sayHello() {\n    alert(&quot;Hello from external JS!&quot;);\n}\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u5f15\u5165\u65b9\u5f0f<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;link rel=&quot;stylesheet&quot; href=&quot;css\/style.css&quot;&gt;\n&amp;lt;script src=&quot;js\/main.js&quot;&gt;&amp;lt;\/script&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e5d\u3001\u5e38\u89c1\u95ee\u9898<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u2753 \u9875\u9762\u4e71\u7801<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u786e\u4fdd\u4f7f\u7528\uff1a<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;meta charset=&quot;UTF-8&quot;&gt;\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u2753 \u624b\u673a\u9002\u914d<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4e00\u5b9a\u8981\u52a0\uff1a<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u5341\u3001\u4e0b\u4e00\u6b65\u53ef\u4ee5\u5b66\u4ec0\u4e48\uff1f<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>HTML5 \u5e38\u7528\u6807\u7b7e\uff08header \/ nav \/ section\uff09<\/li>\n\n\n\n<li>CSS \u5e03\u5c40\uff08Flex \/ Grid\uff09<\/li>\n\n\n\n<li>JavaScript \u4ea4\u4e92<\/li>\n\n\n\n<li>HBuilder + uni-app<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u4e0b\u9762\u662f\u4e00\u4efd\u9002\u5408\u96f6\u57fa\u7840\u7684\u65b0\u624b\u6559\u7a0b\uff0c\u4e00\u6b65\u4e00\u6b65\u6559\u4f60\u4f7f\u7528 HBuilder \u5236\u4f5c\u4e00\u4e2a\u7b80\u5355&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/12\/14\/%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-2\/\">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":[12],"tags":[],"class_list":["post-782","post","type-post","status-publish","format-standard","hentry","category-12"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/782","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=782"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/782\/revisions"}],"predecessor-version":[{"id":783,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/782\/revisions\/783"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=782"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=782"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}