用 HBuilderX 手把手搭建一个多页面网站：从零开始的实战指南
你是不是也遇到过这种情况——想做一个简单的个人网站，但面对一堆编辑器和工具无从下手？代码不会写、页面跳不了、样式乱成一团……别担心，今天我们就来彻底拆解“如何用 HBuilderX 制作一个真正能用的多页面网页”。
这篇文章不讲空话，也不堆术语。我们就像两个开发者坐在一起，一步一步地在 HBuilderX 里搭出一个结构清晰、导航顺畅、风格统一的小网站。无论你是学生做作业、创业者建展示页，还是刚入门前端的新手，这篇教程都能让你30分钟内跑通全流程。
为什么选 HBuilderX 做网页？
市面上的代码编辑器很多，为什么要推荐 HBuilderX 来“制作网页”？因为它真的够轻、够快、够贴心。
它不像 VS Code 那样需要自己装十几个插件才能干活，也不像 Dreamweaver 那样笨重复杂。HBuilderX 是国产开发工具中的清流——启动飞快，界面简洁，而且对中文用户极其友好。
更重要的是，它专为 Web 开发设计：
- 写 HTML/CSS/JS 有智能补全
- 按
Ctrl+R就能在浏览器实时预览 - 支持手机扫码同步查看效果
- 自带项目模板，新建即可用
最关键的是：不需要懂命令行、不用配环境，打开就能写代码，保存就能看结果。这对初学者来说太友好了。
第一步：创建你的第一个网站项目
打开 HBuilderX，点击菜单栏的【文件】→【新建】→【项目】。
弹窗中选择“普通Web项目”，项目名称填mywebsite（建议全小写，不要空格），然后点“创建”。
你会看到左侧出现一个清晰的文件树：
mywebsite/ └── index.html没错，HBuilderX 已经自动帮你生成了首页！这就是我们的起点。
接下来我们要做的，就是在这个基础上，加页面、搭导航、统一样式，让它变成一个真正的多页站点。
第二步：规划网站结构 —— 多页面网站长什么样？
我们先明确一点：什么是“多页面网站”？
简单说，就是每个功能或内容放在不同的.html文件里。比如：
index.html→ 首页about.html→ 关于我们products.html→ 产品介绍contact.html→ 联系方式
用户点击菜单时，浏览器会加载新的 HTML 页面，URL 也会变。这种模式结构清晰、SEO 友好，特别适合企业官网、个人博客、学校作品集这类静态展示型网站。
✅ 正确的目录结构示例
我们在项目根目录下手动创建几个文件和文件夹：
右键项目 → 新建文件：
-about.html
-products.html
-contact.html
再新建三个文件夹：
-/css/→ 存放样式文件
-/images/→ 存放图片
-/js/→ 存放脚本（可选）
最终结构如下：
mywebsite/ │ ├── index.html ├── about.html ├── products.html ├── contact.html │ ├── css/ │ └── style.css │ ├── images/ │ └── logo.png │ └── js/ └── main.js这个结构干净利落，后期维护起来也方便。
💡 小贴士：文件名一律用小写字母 + 连字符（如
user-guide.html），避免大小写混淆导致路径错误。
第三步：编写页面 & 实现页面跳转
现在我们来写第一个页面——首页index.html。
双击打开index.html，把默认内容替换为以下代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>我的网站 - 首页</title> <link rel="stylesheet" href="./css/style.css" /> </head> <body> <header> <h1>欢迎来到我的网站</h1> <nav class="navbar"> <ul class="nav-list"> <li><a href="index.html">🏠 首页</a></li> <li><a href="about.html">ℹ️ 关于我们</a></li> <li><a href="products.html">📦 产品中心</a></li> <li><a href="contact.html">📞 联系我们</a></li> </ul> </nav> </header> <main> <section> <h2>最新动态</h2> <p>这里是网站首页的内容区域。</p> </section> </main> <footer> <p>© 2025 我的网站. 版权所有.</p> </footer> </body> </html>🔍 关键细节说明：
<link rel="stylesheet" href="./css/style.css">
表示引入公共 CSS 文件，路径是相对当前 HTML 的位置。导航栏用了
<a href="about.html">这样的链接，点击就会跳转到同级目录下的about.html文件。使用了 Unicode 图标（如 🏠 ℹ️）让菜单更直观，提升用户体验。
把这个结构复制到其他三个页面（about.html、products.html等）中，只改<title>和<main>里的内容即可。这样所有页面都有相同的导航栏，用户不会“迷路”。
⚠️ 常见坑点：如果跳转失败，请检查：
- 目标文件是否存在？
- 文件名拼写是否正确？（注意大小写）
- 是否保存了文件？（未保存的文件不会被浏览器读取）
第四步：统一外观 —— 用 CSS 控制所有页面样式
如果你希望四个页面看起来是一个整体，就不能每个页面都写一遍样式。聪明的做法是：抽离公共样式到一个外部 CSS 文件中。
我们在/css/目录下新建style.css，写入以下基础样式：
/* 全局重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Microsoft YaHei", sans-serif; line-height: 1.6; background-color: #f4f4f4; color: #333; } header { background: #007acc; color: white; padding: 1rem; text-align: center; } .navbar { background: #333; overflow: hidden; } .nav-list { list-style: none; display: flex; justify-content: center; } .nav-list li { margin: 0 15px; } .nav-list a { color: white; text-decoration: none; padding: 8px 12px; display: block; transition: background 0.3s; } .nav-list a:hover { background: #007acc; border-radius: 4px; } main { padding: 20px; min-height: 500px; background: white; } footer { text-align: center; padding: 1rem; background: #333; color: white; margin-top: 20px; }保存后回到任意 HTML 页面，按Ctrl+R在浏览器中运行，你会发现：
✅ 页面有了统一的蓝色主题
✅ 导航栏居中显示
✅ 鼠标悬停有平滑变色动画
✅ 整体布局整洁美观
这正是“一次修改，全局生效”的威力所在。
💡 提示：若样式没反应，请确认：
-<link>路径是否正确？
- 浏览器是否缓存旧版本？试试Ctrl+F5强制刷新。
第五步：调试与优化技巧（来自实战的经验）
做完基本功能后，总会遇到一些“奇怪的问题”。下面是一些我常帮新手解决的典型问题：
❓ 页面跳转无效？
- 检查目标文件是否真的存在
- 路径别写错：同级用
about.html，子目录用pages/about.html，上级用../index.html - 不要用绝对路径（如
/Users/name/Desktop/...），否则换电脑就打不开
❓ 中文显示乱码？
- 确保
<meta charset="UTF-8"/>在<head>中 - HBuilderX 默认保存为 UTF-8，但如果你是从别处复制的代码，记得检查编码设置
❓ 样式不生效？
- 查看控制台是否有 404 报错（F12 打开开发者工具）
- 检查 CSS 文件路径是否写成了
css/style.css而不是./css/style.css - 加个时间戳测试缓存：
<link href="css/style.css?t=123">
✅ 最佳实践建议：
- 所有页面保持一致的
<head>结构 - 图片资源统一放在
/images/下 - 尽量扁平化目录结构，别嵌套太深
- 经常使用
Ctrl+R实时预览，边改边看
总结：你现在可以做什么？
恭喜你！到现在为止，你已经掌握了使用 HBuilderX 制作多页面网站的核心能力：
✅ 能独立创建项目并组织合理目录
✅ 能编写多个 HTML 页面并通过超链接跳转
✅ 能通过外部 CSS 实现全站样式统一
✅ 能排查常见问题并完成本地调试
这意味着你可以轻松应对这些实际场景：
- 给社团做个宣传网站
- 交一份漂亮的课程大作业
- 展示自己的设计或写作作品
- 为企业搭建一个简易官网原型
而这，只是前端开发的第一步。
后续还能怎么升级？
当你熟练掌握这套流程后，下一步可以尝试：
🔧加入 JavaScript
给表单添加验证、实现轮播图、点击弹窗等交互功能。
🎨使用 Flexbox 或 Grid 布局
告别传统的浮动布局，写出更现代、更灵活的页面结构。
🚀引入 Bootstrap
直接使用现成组件库，快速搭建响应式页面，手机也能完美浏览。
☁️部署上线
把项目打包上传到 GitHub Pages、阿里云 OSS 或腾讯云 COS，让全世界都能访问你的网站。
HBuilderX 不只是一个编辑器，它是你踏入前端世界的第一把钥匙。它足够简单，让你不怕起步；又足够强大，支撑你走得更远。
所以，别再犹豫了——打开 HBuilderX，新建一个项目，动手敲下第一行代码吧！
如果你在实现过程中遇到了具体问题，欢迎留言交流，我们一起解决。
