需创建my-website根目录及css、js子目录，编写index.html（含HTML5标准结构与语义标签）、style.css（外部样式）和script.js（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 文档结构：
欢迎来到我的网站
这是一个使用 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 替换。
