最基础方式是创建my-website主文件夹及html、css、js子文件夹，将对应文件分类存放；在index.html中用../路径引用css/style.css和js/main.js；CSS与JS需按规范编写并确保编码与执行时机正确；通过Live Server等本地服务预览调试。
python速学教程(入门到精通) ：☞☞☞全免费课程立即下载☜☜☜
PHP速学教程(入门到精通)：☞☞☞全部免费课程立即下载（实时在线更新）☜☜☜
如果您打算使用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脚本文件（如main.js、utils.js）放入js文件夹。
二、编写基础HTML5页面并正确引用外部资源
HTML5文档需声明DOCTYPE并使用语义化标签，同时通过相对路径准确链接同项目下的CSS和JS文件，确保浏览器能加载样式与交互逻辑。
1、在html文件夹中新建文件，命名为index.html。
2、用文本编辑器打开该文件，输入标准HTML5模板，包含<!DOCTYPE html>声明及<html lang="zh-CN">根元素。
3、在<head>中添加CSS引用：<link rel="stylesheet" href="../css/style.css">，注意../表示上一级目录。
4、在<body>末尾添加JS引用：<script src="../js/main.js"></script>，确保脚本在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标签位于</body>前，且路径指向正确，如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属性中的路径是否以../开头并逐级回退至目标文件夹，避免路径层级错误。
