HTML资源404本质是请求路径与服务器文件结构不匹配，关键在路径、协议、服务三者对齐；需用Network面板确认真实请求URL，严格对照大小写、扩展名及Web根目录结构。
HTML资源加载404不是页面写错了，而是浏览器发出去的请求地址服务器根本没对应文件——关键在路径、协议、服务三者是否对齐。
用 Network 面板确认真实请求 URL
别猜路径，直接看浏览器实际发了什么请求：
- 按
F12打开开发者工具 → 切到Network标签 → 刷新页面 - 找标红的 404 条目，点开看
Headers里的Request URL - 这个 URL 就是你要修复的目标：比如显示
http://localhost/css/style.css，但你文件实际在assets/css/style.css，那就得改 HTML 中的<link href="assets/css/style.css"> - 注意大小写和扩展名：Linux/macOS 服务器上
IMG.JPG≠img.jpg，about.html.txt在 Windows 上看着像about.html，但服务器找不到
静态资源路径必须匹配服务器根目录结构
服务器只从它认定的“Web 根目录”开始找文件，HTML 里写的路径必须和这个目录下的物理路径严格一致：
- Apache 默认根目录是
htdocs，Nginx 是/usr/share/nginx/html，Pythonhttp.server是当前终端所在目录 - 如果你把
index.html放在pages/about.html，就必须用http://localhost/pages/about.html访问，不能只输http://localhost/about.html - Flask 等框架默认只暴露
static/目录下的文件：图片必须放static/images/logo.png，然后在模板里用{{ url_for('static', filename='images/logo.png') }}生成链接 - 本地双击打开
file:///路径不会触发 404，那只是浏览器读文件；真 404 只发生在http://或https://请求中
iframe 和相对路径最容易踩坑
iframe 的 src 用相对路径时，解析基准不是文件位置，而是当前页面的 URL 路径：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 当前页面 URL 是
http://localhost/admin/dashboard.html，<iframe src="report.html"></iframe>实际请求的是http://localhost/admin/report.html，不是同级目录的report.html - 解决办法：改用绝对路径
<iframe src="/report.html"></iframe>，或完整 URL<iframe src="http://localhost/report.html"></iframe> - 在
file://协议下嵌入本地 HTML 更麻烦：浏览器安全策略会阻止跨文件读取，iframe src="data.html"必然 404；必须启动本地服务（如python -m http.server）再测试
CDN 或外部资源失败要主动兜底
JS/CSS 加载失败不会报错，只会静默失效，导致布局错乱或功能缺失：
- 给
<link>和<script></script>加integrity和crossorigin属性，校验失败会触发error事件：<link rel="stylesheet" href="https://cdn.example.com/style.css" integrity="sha384-..." crossorigin="anonymous"> - 监听全局 error：
document.addEventListener('error', e => { if (e.target.matches('link[rel=stylesheet]')) loadFallbackCSS(); }); -
img标签可用onerror，但要防循环：<img src="logo.png" onerror="if (!this.dataset.loaded) { this.dataset.loaded = '1'; this.src = 'fallback.png'; }" alt="HTML资源加载404错误怎么处理" > - 不要依赖
DOMContentLoaded操作 DOM 尺寸，等load事件或document.readyState === 'complete'，否则 CSS 还没加载完，offsetWidth就是 0
最常被忽略的一点：所有路径判断都基于服务器收到的请求 URL，而不是你本地文件系统里的文件夹结构。哪怕只差一个斜杠、一个大小写、一个未编码的中文字符，服务器就认不出来。
