下面是一份适合零基础的新手教程，一步一步教你使用 HBuilder 制作一个简单的 HTML5 网页，包含完整代码与运行方法。

使用 HBuilder 制作一个简单的 HTML5 网页（新手必看）

一、准备工作

1️⃣ 下载并安装 HBuilder

二、新建 HTML5 项目

  1. 打开 HBuilderX
  2. 点击菜单栏
    文件 → 新建 → 项目
  3. 选择
    Web → 普通项目
  4. 项目名称：hello-html
  5. 选择项目保存路径
  6. 点击 完成

三、新建 HTML 文件

  1. 在左侧项目目录中
    右键项目 → 新建 → HTML 文件
  2. 文件名：index.html
  3. 选择 HTML5 模板

四、HTML5 基础示例代码

将以下代码复制到 index.html 中：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>My First HTML5 Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            text-align: center;
            padding-top: 50px;
        }

        h1 {
            color: #333;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <h1>Hello HTML5 👋</h1>
    <p>This is my first web page made with HBuilder.</p>

    <button onclick="sayHello()">Click Me</button>

    <script>
        function sayHello() {
            alert("Welcome to HTML5!");
        }
    </script>

</body>
</html>

五、运行 HTML 页面

方法一：内置浏览器运行（推荐）

  • 右键 index.html
  • 选择 使用浏览器打开
  • 或点击工具栏的 ▶ 运行按钮

方法二：本地浏览器运行

  • 找到项目目录
  • 双击 index.html
  • 用 Chrome / Edge 打开

六、项目结构说明

hello-html/
│── index.html
│── css/
│   └── style.css（可选）
│── js/
│   └── main.js（可选）
│── images/

七、常用 HBuilder 快捷功能

功能快捷方式
自动补全回车 / Tab
格式化代码Ctrl + K
注释Ctrl + /
实时预览Ctrl + R

八、进阶：拆分 CSS 和 JS（推荐）

CSS：css/style.css

body {
    background-color: #eef;
}

JS：js/main.js

function sayHello() {
    alert("Hello from external JS!");
}

引入方式

<link rel="stylesheet" href="css/style.css">
<script src="js/main.js"></script>

九、常见问题

❓ 页面乱码

  • 确保使用：
<meta charset="UTF-8">

❓ 手机适配

  • 一定要加：
<meta name="viewport" content="width=device-width, initial-scale=1.0">

十、下一步可以学什么？

  • HTML5 常用标签（header / nav / section）
  • CSS 布局（Flex / Grid）
  • JavaScript 交互
  • HBuilder + uni-app