HTML文件本身是单个文件，但完整网页项目需建立含images/css/js子目录的结构，用相对路径引用资源，并通过Live Server等本地服务器运行以避免file://协议限制。
HTML 文件不是“文件夹”，但你可以创建一个带资源的项目目录
很多人搜“HTML 文件夹”，其实是想建一个能本地打开、有图片/CSS/JS 的完整网页项目。HTML 本身是单个 index.html 文件，但要让它正常运行，得配好目录结构，否则图片不显示、样式失效、控制台报错。
常见错误现象：Failed to load resource: net::ERR_FILE_NOT_FOUND（尤其是引用了 ./css/style.css 却没建 css/ 文件夹时）；或者双击打开 HTML，文字有样式，但图片一片空白。
- 根目录下至少放一个
index.html，这是浏览器默认找的入口文件 - 静态资源按用途分文件夹：图片放
images/，CSS 放css/，JS 放js/（别全堆在根目录，后期难维护） - 路径必须用相对路径，且大小写敏感——
Images/和images/在 macOS/Linux 是两个文件夹 - 不要用中文或空格命名文件夹，比如
我的图片/或js files/，容易触发编码问题或被某些工具截断
怎么写最简可用的 index.html
不需要模板、不用框架，5 行就能跑起来。关键是声明文档类型和字符编码，否则中文可能乱码，meta 标签缺失会导致移动端缩放异常。
典型错误：直接写 hello，没 ，在旧版 Edge 或某些编辑器预览里会触发怪异模式（quirks mode），盒模型计算出错。
立即学习“前端免费学习笔记（深入）”；
- 第一行必须是
，没有分号，不分大小写但惯例全大写 -
里至少加<meta charset="UTF-8">，否则读取中文注释或内容可能变问号 - 标题用
<title></title>，哪怕只是临时写<title>test</title>，不然浏览器标签页显示空白 - 示例最小结构：
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Hello</title></head> <body><p>Hi there.</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill9972" title="Wechat Article Html"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill9972" title="Wechat Article Html">Wechat Article Html</a> <p>将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p> </div> <a href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></body> </html>
引用本地 CSS/JS 时路径怎么写才不 404
路径写错是最常见的“HTML 写好了却没效果”原因。核心就一条：路径是相对于当前 HTML 文件的位置算的，不是相对于你电脑桌面或代码编辑器打开的文件夹。
比如你的文件结构是：my-site/index.html 和 my-site/css/style.css，那在 index.html 里就得写 <link rel="stylesheet" href="css/style.css">，而不是 ./css/style.css（./ 可省）或 ../css/style.css（那是往上退一级）。
- 引用同级文件：直接写文件名，如
script.js - 引用子目录：写目录名+/+文件名，如
css/main.css、images/logo.png - 引用上一级目录：用
../，仅当 HTML 不在根目录时才需要（例如放在my-site/pages/about.html，想引用my-site/css/style.css，就得写../css/style.css） - 绝对路径（
/css/style.css）在本地双击打开时无效——它只对 HTTP 服务器有意义，会被浏览器解释成磁盘根目录（C:/css/style.css），几乎必错
双击打开 vs 用 Live Server：为什么有时能跑有时白屏
双击打开 index.html 是走 file:// 协议，而现代浏览器出于安全限制，会禁止它加载本地 JS 中的 fetch()、读取本地 JSON、甚至某些 import 语法。这不是你代码写错了，是浏览器故意拦的。
错误现象：Access to script at 'file:///.../script.js' from origin 'null' has been blocked；或者控制台报 Uncaught TypeError: Failed to resolve module specifier。
- 纯静态展示（无 JS 交互、无外部数据）：双击没问题
- 只要用了
fetch('./data.json')、import、localStorage配合跨域逻辑，就必须起一个本地服务器 - 推荐做法：VS Code 装
Live Server插件，右键 HTML 文件点 “Open with Live Server”，它会启动http://127.0.0.1:5500，一切就恢复正常 - 命令行党可用 Python：
python3 -m http.server 8000（Python 3），然后访问http://localhost:8000
最容易被忽略的一点：路径正确 + 文件存在 + 编码正确，三者都满足，但依然白屏——八成是忘了开本地服务器，还在双击硬扛。这时候别调代码，先换访问方式。
