想零基础快速搭建一个本地可运行的HTML5静态网站？本文手把手教你从零开始创建规范的文件夹结构（my-website根目录下分设css和js子目录），编写语义化HTML5首页、外部CSS样式表和DOM交互脚本，并通过双击HTML文件直接预览效果，配合开发者工具实时验证资源加载与功能执行——无需服务器、不依赖框架，一步到位掌握现代网页开发的核心组织逻辑与实战流程。

如果您希望使用 HTML5 构建一个本地可运行的静态网站，需通过合理组织文件夹结构，并分别编写 HTML、CSS 和 JavaScript 文件来实现页面内容、样式与交互功能。以下是完成该任务的具体步骤：

一、创建标准站点文件夹结构

合理的目录结构有助于维护代码清晰性与后期扩展，推荐采用基础但可扩展的三层结构：根目录下包含 HTML 文件、css 子文件夹存放样式表、js 子文件夹存放脚本文件。

1、在电脑任意位置新建一个名为 my-website 的文件夹作为站点根目录。

2、在 my-website 文件夹内新建两个子文件夹，分别命名为 css 和 js。

3、在 my-website 根目录下新建一个文本文件，重命名为 index.html（注意扩展名必须为 .html）。

4、在 css 文件夹中新建 style.css；在 js 文件夹中新建 script.js。

二、编写符合 HTML5 规范的首页文档

HTML5 要求文档以明确的 DOCTYPE 声明开头，并使用语义化标签组织内容，确保浏览器正确解析并支持现代特性。

1、用记事本或 VS Code 打开 index.html，输入以下标准 HTML5 文档结构：

  
    
    
    
  
  
    

2、保存文件，确保编码格式为 UTF-8（在记事本中选择“另存为” → 编码选“UTF-8”）。

三、编写基础 CSS 样式表

CSS 文件用于控制页面视觉表现，应通过外部引用方式加载，避免内联样式破坏结构分离原则。

1、打开 css/style.css，输入以下基础样式规则：

body {
  margin: 0;
  font-family: "Segoe UI", sans-serif;
  line-height: 1.6;
}
header {
  background-color: #4CAF50;
  color: white;
  padding: 1rem;
  text-align: center;
}
main {
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
}
footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 0.75rem;
  font-size: 0.9rem;
}

2、保存文件，确保无 BOM 头且扩展名为 .css。

四、添加简单 JavaScript 交互逻辑

JavaScript 文件用于增强用户交互，例如响应点击事件或动态修改内容，应置于页面底部或使用 defer 属性加载。

1、打开 js/script.js，输入以下功能代码：

document.addEventListener("DOMContentLoaded", function() {
  const main = document.querySelector("main");
  const p = main.querySelector("p");
  if (p) {
    p.innerHTML = "这段文字由 script.js 动态写入。";
  }
});

2、保存文件，确保扩展名为 .js 且未被误存为 .txt。

五、验证站点本地运行效果

本地运行无需服务器环境，直接通过浏览器打开 HTML 文件即可查看渲染结果，重点检查路径引用是否正确及资源是否加载成功。

1、在文件管理器中找到 my-website/index.html。

2、双击该文件，系统默认浏览器将自动打开并渲染页面。

3、按 F12 打开开发者工具，切换至 Console 标签页，确认无报错信息；切换至 Network 标签页，确认 style.css 与 script.js 状态码为 200。

4、观察页面是否显示绿色页眉、居中主内容区及底部版权栏，且段落文字已被 JavaScript 替换。

今天关于《HTML5建站教程：文件夹搭建完整网站》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！