菜鸟-创作你的创作

使用HBuilder制作一个简单的HTML5网页

lichongyang

好——给你一份面向 HBuilderX（也就是 HBuilder）的一步步实操指南 + 完整可运行示例，你照着做 5 分钟内就能看到网页在手机/浏览器里跑起来。为了简单，我用最基础的 index.html + style.css + main.js 结构，并演示 HBuilder 的新建、预览与打包流程。

下面开始（阿杰）——

1 步：准备

  1. 下载并安装 HBuilderX（HBuilder）
    访问官网或用你现有的 HBuilderX 客户端打开即可。
  2. 打开 HBuilderX。

2 步：新建一个 H5 项目

  1. 菜单：文件 → 新建 → 项目 → HTML5 项目（或选择“空项目”）。
  2. 填写项目名（例如 simple-h5），选择保存路径，点击确定。
  3. 在项目根目录下新建三个文件：index.html、style.css、main.js。

3 步：把下面代码分别复制进去

index.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
  <title>简单 H5 页面 - HBuilder</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="topbar">
    <h1>欢迎 — 简单 H5 演示</h1>
  </header>

  <main class="container">
    <section class="card">
      <h2>示例视频（可替换）</h2>
      <video id="demoVideo" src="sample.mp4" controls playsinline muted preload="metadata"></video>
    </section>

    <section class="card">
      <h2>计数器演示</h2>
      <div class="counter">
        <button id="dec">-</button>
        <span id="count">0</span>
        <button id="inc">+</button>
      </div>
    </section>

    <section class="card">
      <h2>Toast 测试</h2>
      <button id="toastBtn">显示提示</button>
    </section>
  </main>

  <footer class="foot">使用 HBuilderX 生成 — 简单示例</footer>

  <script src="main.js"></script>
</body>
</html>

style.css

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#f6f7fb;color:#222}
.topbar{background:#4a90e2;color:#fff;padding:14px 16px;text-align:center}
.container{padding:12px;max-width:820px;margin:12px auto}
.card{background:#fff;border-radius:8px;padding:12px;margin-bottom:12px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
video{width:100%;height:auto;border-radius:6px;background:#000}
.counter{display:flex;align-items:center;gap:12px;font-size:20px}
.counter button{padding:8px 14px;border-radius:6px;border:1px solid #ddd;background:#fff}
#count{min-width:48px;text-align:center;display:inline-block}
.foot{text-align:center;padding:10px;color:#888;font-size:13px}

main.js

document.addEventListener('DOMContentLoaded', () => {
  const inc = document.getElementById('inc');
  const dec = document.getElementById('dec');
  const cnt = document.getElementById('count');
  const toastBtn = document.getElementById('toastBtn');

  let count = 0;
  function render(){ cnt.textContent = count; }

  inc.addEventListener('click', () => { count++; render(); });
  dec.addEventListener('click', () => { count = Math.max(0, count-1); render(); });

  toastBtn.addEventListener('click', () => {
    // 简单实现一个临时提示
    const t = document.createElement('div');
    t.textContent = '这是一个提示（Toast）';
    Object.assign(t.style, {
      position:'fixed', left:'50%', top:'80%', transform:'translateX(-50%)',
      padding:'10px 14px', background:'rgba(0,0,0,.75)', color:'#fff', borderRadius:'6px', zIndex:9999
    });
    document.body.appendChild(t);
    setTimeout(()=> t.remove(), 1600);
  });

  render();
});

说明：如果你没有 sample.mp4，把 <video> 的 src 换成一个在线小视频地址或直接删掉视频标签以免 404。

4 步：在 HBuilderX 中预览

  1. 在 HBuilderX 编辑器中右键 index.html → 在浏览器中运行 → 选择你常用的浏览器（或直接 F6）。
  2. 或者点击工具栏的 运行 → 在浏览器预览。
  3. 要在手机上预览：点击 运行 → 使用 HBuilderX 手机预览（扫码），用 HBuilderX 移动端 App 扫码即可实时预览。

5 步：调试（常用技巧）

6 步：发布 / 打包（可选）

7 步：进阶建议（可选）

退出移动版