最基础方式是创建 my-website 主文件夹及 html、css、js 子文件夹，将对应文件分类存放；在 index.html 中用。./ 路径引用 css/style.css 和 js/main.js；CSS 与 JS 需按规范编写并确保编码与执行时机正确；通过 Live Server 等本地服务预览调试。
如果您打算使用 HTML5 从零开始搭建一个静态网站，最基础的方式是通过本地文件夹组织结构，并编写 HTML、CSS 和 JavaScript 文件。以下是构建该结构并确保各文件正确关联的具体步骤：
一、创建标准站点文件夹结构
合理的目录结构有助于维护代码可读性与资源引用稳定性，推荐采用分离式布局，将不同类型的文件归入对应子文件夹，避免根目录杂乱。
1、在 电脑 任意位置新建一个名为 my-website 的主文件夹。
2、在该主文件夹内依次新建三个子文件夹：html、css、js。
立即学习 “ 前端免费学习笔记（深入）”；
3、将所有 HTML 页面文件（如 index.html、about.html）放入 html 文件夹。
4、将所有样式表文件（如 style.css、reset.css）放入 css 文件夹。
5、将所有 JavaScript 脚本文件（如 m ain.js、utils.js）放入 js 文件夹。
二、编写基础 HTML5 页面并正确引用外部资源
HTML5 文档需声明 DOCTYPE 并使用语义化标签，同时通过相对路径准确链接同项目下的 CSS 和 JS 文件，确保 浏览器 能加载样式与交互逻辑。
1、在 html 文件夹中新建文件，命名为index.html。
2、用文本编辑器打开该文件，输入标准 HTML5 模板，包含 声明及根元素。
3、在
中添加 CSS 引用：，注意 ../ 表示上一级目录。
4、在
末尾添加 JS 引用：，确保脚本在 DOM 加载完成后执行。
三、配置 CSS 样式文件并启用相对路径引用
CSS 文件需放置于指定目录，并通过相对路径被 HTML 调用；若含图片等资源，也应统一存入子文件夹（如 images），并在 CSS 中使用对应路径写法。
1、在 css 文件夹中新建 style.css 文件。
2、在该文件中编写样式规则，例如设置 body 背景色：body {background-color: #f5f5f5;}。
3、如需引入图片，在 CSS 中使用 url(“../images/logo.png”)语法，前提是已创建 images 子文件夹并存放对应文件。
4、确认 CSS 文件保存 编码 为UTF- 8 无 BOM，避免中文注释或字符显示异常。
四、编写 JavaScript 功能脚本并确保执行时机正确
JS 脚本应独立存放于 js 文件夹，且需确保在 HTML 中正确加载；对于依赖 DOM 的操作，须等待元素就绪后再执行，防止获取 null 节点。
1、在 js 文件夹中新建 main.js 文件。
2、在该文件开头添加 ”use strict”; 启用严格模式，提升代码安全性。
3、使用 DOMContentLoaded 事件包裹核心逻辑，例如：document.addEventListener(“DOMContentLoaded”, function() {/* 初始化代码 */});。
4、在 HTML 中引用时，确认 script 标签位于前，且路径指向正确，如 src=”../js/main.js”。
五、本地预览与路径调试方法
直接双击 HTML 文件可能因浏览器安全策略导致 JS/CSS 加载失败，需通过本地服务或正确路径验证资源是否可访问。
1、在浏览器地址栏输入完整 file:// 路径（如 file:///D:/my-website/html/index.html）手动打开，观察控制台是否有 404 报错。
2、若出现资源加载失败，右键检查页面元素，查看 Network 面板中 css/style.css 或 js/main.js 状态码是否为200。
3、使用 VS Code 安装 Live Server 插件，右键 index.html 选择“Open with Live Server”，自动启动本地 HTTP 服务并规避 file:// 限制。
4、检查所有 href 和 src 属性中的路径是否以 ../ 开头并逐级回退至目标文件夹，避免路径层级错误。
